ui-lib(new-component): added text input component in the c-lib

src/composable/validation.ts

@@ -1,3 +1,4 @@
+import { get, type MaybeRef } from '@vueuse/core';
 import _ from 'lodash';
 import { reactive, watch, type Ref } from 'vue';
 
@@ -31,7 +32,7 @@ export function useValidation<T>({
   watch: watchRefs = [],
 }: {
   source: Ref<T>;
-  rules: UseValidationRule<T>[];
+  rules: MaybeRef<UseValidationRule<T>[]>;
   watch?: Ref<unknown>[];
 }) {
   const state = reactive<{
@@ -55,7 +56,7 @@ export function useValidation<T>({
       state.message = '';
       state.status = undefined;
 
-      for (const rule of rules) {
+      for (const rule of get(rules)) {
         if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
           state.message = rule.message;
           state.status = 'error';

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>

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);
+  });
+});

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',
+    },
+  },
+});

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>

src/ui/demo/demo-wrapper.vue

@@ -18,6 +18,8 @@
       </div>
 
       <div flex-1 pl-4>
+        <h1>{{ componentName }}</h1>
+
         <router-view />
       </div>
     </div>
@@ -25,9 +27,12 @@
 </template>
 
 <script lang="ts" setup>
+import _ from 'lodash';
 import { demoRoutes } from './demo.routes';
 
 const route = useRoute();
+
+const componentName = computed(() => _.startCase(String(route.name).replace(/^c-/, '')));
 </script>
 
 <style lang="less" scoped></style>

src/ui/demo/demo.routes.ts

@@ -6,8 +6,6 @@ export const demoRoutes = Object.keys(demoPages).map((path) => {
   const [, , fileName] = path.split('/');
   const name = fileName.split('.').shift();
 
-  console.log(path);
-
   return {
     path: name,
     name,

src/utils/random.ts

@@ -18,4 +18,14 @@ const shuffleArray = <T>(array: T[]): T[] => shuffleArrayMutate([...array]);
 
 const shuffleString = (str: string, delimiter = ''): string => shuffleArrayMutate(str.split(delimiter)).join(delimiter);
 
-export { randFromArray, randIntFromInterval, random, shuffleArray, shuffleArrayMutate, shuffleString };
+const generateRandomId = () => `id-${random().toString(36).substring(2, 12)}`;
+
+export {
+  randFromArray,
+  randIntFromInterval,
+  random,
+  shuffleArray,
+  shuffleArrayMutate,
+  shuffleString,
+  generateRandomId,
+};