From aad8d84e13ce31c1b7c1cbb930fb8bd4c0abe13a Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sun, 7 May 2023 23:31:10 +0200
Subject: ui-lib(new-component): added text input component in the c-lib

---
 src/ui/c-input-text/c-input-text.demo.vue |  39 ++++++
 src/ui/c-input-text/c-input-text.test.ts  |  87 +++++++++++++
 src/ui/c-input-text/c-input-text.theme.ts |  20 +++
 src/ui/c-input-text/c-input-text.vue      | 198 ++++++++++++++++++++++++++++++
 4 files changed, 344 insertions(+)
 create mode 100644 src/ui/c-input-text/c-input-text.demo.vue
 create mode 100644 src/ui/c-input-text/c-input-text.test.ts
 create mode 100644 src/ui/c-input-text/c-input-text.theme.ts
 create mode 100644 src/ui/c-input-text/c-input-text.vue

(limited to 'src/ui/c-input-text')

diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue
new file mode 100644
index 0000000..2363219
--- /dev/null
+++ b/src/ui/c-input-text/c-input-text.demo.vue
@@ -0,0 +1,39 @@
+<template>
+  <h2>Default</h2>
+
+  <c-input-text value="qsd" />
+
+  <h2>With placeholder</h2>
+
+  <c-input-text placeholder="Placeholder" />
+
+  <h2>With label</h2>
+
+  <c-input-text label="Label" mb-2 />
+  <c-input-text label="Label" mb-2 label-position="left" />
+  <c-input-text label="Label" mb-2 label-position="left" label-width="100px" />
+  <c-input-text label="Label" mb-2 label-position="left" label-width="100px" label-align="right" />
+
+  <h2>Readonly</h2>
+
+  <c-input-text value="value" readonly />
+
+  <h2>Disabled</h2>
+
+  <c-input-text value="value" disabled />
+
+  <h2>Validation</h2>
+
+  <c-input-text
+    v-model:value="value"
+    :validation-rules="[{ message: 'Length must be > 10', validator: (value) => value.length > 10 }]"
+  />
+
+  <h2>Clearable</h2>
+
+  <c-input-text v-model:value="value" clearable />
+</template>
+
+<script lang="ts" setup>
+const value = ref('value');
+</script>
diff --git a/src/ui/c-input-text/c-input-text.test.ts b/src/ui/c-input-text/c-input-text.test.ts
new file mode 100644
index 0000000..56b5855
--- /dev/null
+++ b/src/ui/c-input-text/c-input-text.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { setActivePinia, createPinia } from 'pinia';
+import _ from 'lodash';
+import CInputText from './c-input-text.vue';
+
+describe('CInputText', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('Renders a label', () => {
+    const wrapper = shallowMount(CInputText, {
+      props: {
+        label: 'Label',
+      },
+    });
+
+    expect(wrapper.get('.label').text()).to.equal('Label');
+  });
+
+  it('Renders a placeholder', () => {
+    const wrapper = shallowMount(CInputText, {
+      props: {
+        placeholder: 'Placeholder',
+      },
+    });
+
+    expect(wrapper.get('.input').attributes('placeholder')).to.equal('Placeholder');
+  });
+
+  it('Renders a value', () => {
+    const wrapper = shallowMount(CInputText, {
+      props: {
+        value: 'Value',
+      },
+    });
+
+    expect(wrapper.vm.value).to.equal('Value');
+  });
+
+  it('Renders a provided id', () => {
+    const wrapper = shallowMount(CInputText, {
+      props: {
+        id: 'id',
+      },
+    });
+
+    expect(wrapper.get('.input').attributes('id')).to.equal('id');
+  });
+
+  it('updates value on input', async () => {
+    const wrapper = shallowMount(CInputText);
+
+    await wrapper.get('input').setValue('Hello');
+
+    expect(_.get(wrapper.emitted(), 'update:value.0.0')).to.equal('Hello');
+  });
+
+  it('cannot be edited when disabled', async () => {
+    const wrapper = shallowMount(CInputText, {
+      props: {
+        disabled: true,
+      },
+    });
+
+    await wrapper.get('input').setValue('Hello');
+
+    expect(_.get(wrapper.emitted(), 'update:value')).toBeUndefined();
+  });
+
+  it('renders a feedback message for invalid rules', async () => {
+    const wrapper = shallowMount(CInputText, {
+      props: { rules: [{ validator: () => false, message: 'Message' }] },
+    });
+
+    expect(wrapper.get('.feedback').text()).to.equal('Message');
+  });
+
+  it('feedback does not render for valid rules', async () => {
+    const wrapper = shallowMount(CInputText, {
+      props: { rules: [{ validator: () => true, message: 'Message' }] },
+    });
+
+    expect(wrapper.find('.feedback').exists()).to.equal(false);
+  });
+});
diff --git a/src/ui/c-input-text/c-input-text.theme.ts b/src/ui/c-input-text/c-input-text.theme.ts
new file mode 100644
index 0000000..93739d4
--- /dev/null
+++ b/src/ui/c-input-text/c-input-text.theme.ts
@@ -0,0 +1,20 @@
+import { defineThemes } from '../theme/theme.models';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    backgroundColor: '#333333',
+    borderColor: '#333333',
+
+    focus: {
+      backgroundColor: '#1ea54c1a',
+    },
+  },
+  light: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e0e0e69e',
+
+    focus: {
+      backgroundColor: '#ffffff',
+    },
+  },
+});
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
new file mode 100644
index 0000000..a40d26a
--- /dev/null
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="c-input-text" :class="{ disabled, error: !validation.isValid, 'label-left': labelPosition === 'left' }">
+    <label v-if="label" :for="id" class="label"> {{ label }} </label>
+
+    <div class="input-wrapper">
+      <slot name="prefix" />
+
+      <input
+        :id="id"
+        v-model="value"
+        type="text"
+        class="input"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :data-test-id="testId"
+        :autocapitalize="autocapitalize ?? (rawText ? 'off' : undefined)"
+        :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
+        :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
+        :spellcheck="spellcheck ?? (rawText ? false : undefined)"
+      />
+
+      <c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">
+        <icon-mdi-close />
+      </c-button>
+      <slot name="suffix" />
+    </div>
+
+    <span v-if="!validation.isValid" class="feedback"> {{ validation.message }} </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { generateRandomId } from '@/utils/random';
+import { useValidation, type UseValidationRule } from '@/composable/validation';
+import { useTheme } from './c-input-text.theme';
+import { useAppTheme } from '../theme/themes';
+
+const props = withDefaults(
+  defineProps<{
+    value?: string;
+    id?: string;
+    placeholder?: string;
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    validationRules?: UseValidationRule<string>[];
+    labelPosition?: 'top' | 'left';
+    labelWidth?: string;
+    labelAlign?: 'left' | 'right';
+    clearable?: boolean;
+    testId?: string;
+    autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | 'on' | 'off' | string;
+    autocomplete?: 'on' | 'off' | string;
+    autocorrect?: 'on' | 'off' | string;
+    spellcheck?: 'true' | 'false' | boolean;
+    rawText?: boolean;
+  }>(),
+  {
+    value: '',
+    id: generateRandomId,
+    placeholder: 'Input text',
+    label: undefined,
+    readonly: false,
+    disabled: false,
+    validationRules: () => [],
+    labelPosition: 'top',
+    labelWidth: 'auto',
+    labelAlign: 'left',
+    clearable: false,
+    testId: undefined,
+    autocapitalize: undefined,
+    autocomplete: undefined,
+    autocorrect: undefined,
+    spellcheck: undefined,
+    rawText: false,
+  },
+);
+const emit = defineEmits(['update:value']);
+const value = useVModel(props, 'value', emit);
+
+const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign } = toRefs(props);
+
+const validation = useValidation({
+  rules: validationRules,
+  source: value,
+});
+
+const theme = useTheme();
+const appTheme = useAppTheme();
+</script>
+
+<style lang="less" scoped>
+.c-input-text {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.label-left {
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  &.error {
+    & > .input {
+      border-color: v-bind('appTheme.error.color');
+      &:hover,
+      &:focus {
+        border-color: v-bind('appTheme.error.color');
+      }
+
+      &:focus {
+        background-color: v-bind('appTheme.error.color + 22');
+      }
+    }
+
+    & > .feedback {
+      color: v-bind('appTheme.error.color');
+    }
+  }
+
+  & > .label {
+    margin-bottom: 5px;
+    flex: 0 0 v-bind('labelWidth');
+    text-align: v-bind('labelAlign');
+    padding-right: 10px;
+  }
+
+  .input-wrapper {
+    flex: 1 1 0;
+    min-width: 0;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: v-bind('theme.backgroundColor');
+    border: 1px solid v-bind('theme.borderColor');
+    border-radius: 4px;
+    padding: 0 4px 0 12px;
+
+    & > .input {
+      flex: 1 1 0;
+      min-width: 0;
+
+      padding: 8px 0;
+      outline: none;
+      transition: border-color 0.2s ease-in-out;
+      background-color: transparent;
+      background-image: none;
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+      background-color: transparent;
+      border: none;
+      color: v-bind('appTheme.text.baseColor');
+
+      &::placeholder {
+        color: v-bind('appTheme.text.mutedColor');
+      }
+    }
+
+    &:hover,
+    &:focus {
+      border-color: v-bind('appTheme.primary.color');
+    }
+
+    &:focus {
+      background-color: v-bind('theme.focus.backgroundColor');
+    }
+  }
+
+  &.error .input-wrapper {
+    border-color: v-bind('appTheme.error.color');
+
+    &:hover,
+    &:focus {
+      border-color: v-bind('appTheme.error.color');
+    }
+
+    &:focus {
+      background-color: v-bind('appTheme.error.color + 22');
+    }
+  }
+
+  &.disabled .input-wrapper {
+    opacity: 0.5;
+
+    &:hover,
+    &:focus {
+      border-color: v-bind('theme.borderColor');
+    }
+
+    & > .input {
+      cursor: not-allowed;
+    }
+  }
+}
+</style>
-- 
cgit v1.2.3