@pequity/squirrel 6.0.12 → 6.0.14

package/squirrel/composables/useInputClasses.ts

@@ -1,26 +1,13 @@
+import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import {
-  ERROR_MSG,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
-  type InputSize,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
-  TEXTAREA_BASE,
-} from '@squirrel/utils/inputClassesShared';
+  inputClasses as tvInputClasses,
+  selectClasses as tvSelectClasses,
+  textareaClasses as tvTextareaClasses,
+} from '@squirrel/utils/inputClasses';
 import { computed, ref, toRefs } from 'vue';
 
 const defaults = {
-  size: ref<InputSize>('md'),
+  size: ref<Size>('md'),
   errorMsg: ref(''),
   required: ref(false),
   prefix: ref(false),
@@ -29,7 +16,7 @@ const defaults = {
 };
 
 type Props = {
-  size: InputSize;
+  size: Size;
   errorMsg: string;
   required: boolean;
   prefix: boolean;
@@ -43,38 +30,37 @@ export function useInputClasses(props: Partial<Props>) {
   const opts = { ...defaults, ...toRefs(props) } as Defaults;
   const { size, errorMsg, required, rounded, prefix, suffix } = opts;
 
-  const inputClasses = computed(() => {
-    const base = `${INPUT_BASE} ${INPUT_SIZES[size.value]}`;
-    const spacingLeft = prefix.value ? SPACING_PREFIX[size.value] : SPACING_LEFT[size.value];
-    const spacingRight = suffix.value ? SPACING_SUFFIX[size.value] : SPACING_RIGHT[size.value];
-    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? INPUT_ERROR : INPUT_NORMAL}${rounded.value ? ' rounded-full' : ''}`;
+  const allClasses = computed(() => {
+    const { input, label, errorMessage } = tvInputClasses({
+      size: size.value,
+      prefix: prefix.value,
+      suffix: suffix.value,
+      required: required.value,
+      error: !!errorMsg.value,
+      rounded: rounded.value,
+    });
 
-    return res;
+    return { input: input(), label: label(), errorMessage: errorMessage() };
   });
 
-  const labelClasses = computed(() => {
-    const base = `${LABEL_BASE} ${LABEL_SIZES[size.value]}`;
-    const res = required.value ? `${base} ${LABEL_REQUIRED}` : base;
+  const inputClasses = computed(() => allClasses.value.input);
 
-    return res;
-  });
+  const labelClasses = computed(() => allClasses.value.label);
+
+  const errorMsgClasses = computed(() => allClasses.value.errorMessage);
 
   const selectClasses = computed(() => {
-    const res = `${inputClasses.value.replace(` ${SPACING_RIGHT[size.value]}`, '')} ${SELECT_BASE} ${SELECT_ARROW} ${
-      SELECT_SIZES[size.value]
-    }`;
+    const { input } = tvSelectClasses({ size: size.value, required: required.value, error: !!errorMsg.value });
 
-    return res;
+    return input();
   });
 
   const textareaClasses = computed(() => {
-    const res = `${inputClasses.value} ${TEXTAREA_BASE}`;
+    const { input } = tvTextareaClasses({ required: required.value, error: !!errorMsg.value });
 
-    return res;
+    return input();
   });
 
-  const errorMsgClasses = ref(ERROR_MSG);
-
   return {
     inputClasses,
     labelClasses,

package/squirrel/index.ts

@@ -4,3 +4,4 @@ export * from '@squirrel/components';
 export * from '@squirrel/composables';
 export * from '@squirrel/tailwind/config';
 export * from '@squirrel/utils';
+export * from 'tailwind-variants';

package/squirrel/utils/index.ts

@@ -1,25 +1,7 @@
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import { CURRENCY_INPUT_DEFAULTS } from '@squirrel/utils/currency';
 import { getNextActiveElement, isElement, isVisible } from '@squirrel/utils/dom';
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import {
-  ERROR_MSG,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
-  type InputSize,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
-  TEXTAREA_BASE,
-} from '@squirrel/utils/inputClassesShared';
 import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
 import { toNumberOrNull } from '@squirrel/utils/number';
 import { isObject } from '@squirrel/utils/object';
@@ -33,34 +15,19 @@ export {
   Color,
   createPagingRange,
   CURRENCY_INPUT_DEFAULTS,
-  ERROR_MSG,
   getColor,
   getColorDeep,
   getNextActiveElement,
   getScreen,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
   inputClassesMixin,
-  InputSize,
   isElement,
   isObject,
   isVisible,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
   sanitizeUrl,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
   setupListKeyboardNavigation,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
+  Size,
+  SIZES,
   splitStringForHighlight,
-  TEXTAREA_BASE,
   toNumberOrNull,
   toString,
 };

package/squirrel/utils/inputClasses.ts

@@ -0,0 +1,130 @@
+import { tv } from 'tailwind-variants';
+
+const inputClasses = tv({
+  slots: {
+    input:
+      'w-full rounded border-0 bg-surface text-night ring-1 ring-inset ring-p-gray-30 placeholder:text-p-gray-40 hover:ring-primary focus:outline-none focus:ring-2 focus:ring-primary disabled:cursor-default disabled:bg-p-blue-10 disabled:ring-p-gray-30 disabled:hover:ring-p-gray-30',
+    label: 'mb-1 block font-medium',
+    errorMessage: 'mt-1 text-xs text-on-error',
+  },
+  variants: {
+    size: {
+      sm: {
+        input: 'h-8 pl-3 pr-3 text-sm',
+        label: 'text-xs',
+      },
+      md: {
+        input: 'h-10 pl-4 pr-4 text-base',
+        label: 'text-sm',
+      },
+      lg: {
+        input: 'h-12 pl-5 pr-5 text-lg',
+        label: 'text-base',
+      },
+    },
+    prefix: {
+      true: 'pl-8',
+    },
+    suffix: {
+      true: 'pr-6',
+    },
+    required: {
+      true: {
+        label: `after:text-on-error after:content-["_*"]`,
+      },
+    },
+    error: {
+      true: {
+        input: 'ring-on-error hover:ring-on-error focus:ring-on-error',
+      },
+    },
+    rounded: {
+      true: {
+        input: 'rounded-full',
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      prefix: true,
+      class: {
+        input: 'pl-6',
+      },
+    },
+    {
+      size: 'md',
+      prefix: true,
+      class: {
+        input: 'pl-8',
+      },
+    },
+    {
+      size: 'lg',
+      prefix: true,
+      class: {
+        input: 'pl-12',
+      },
+    },
+    {
+      size: 'sm',
+      suffix: true,
+      class: {
+        input: 'pr-6',
+      },
+    },
+    {
+      size: 'md',
+      suffix: true,
+      class: {
+        input: 'pr-8',
+      },
+    },
+    {
+      size: 'lg',
+      suffix: true,
+      class: {
+        input: 'pr-12',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const textareaClasses = tv({
+  extend: inputClasses,
+  slots: {
+    input: 'resize-y overflow-auto px-3 py-3',
+  },
+  variants: {
+    size: {
+      md: {
+        input: 'h-auto',
+      },
+    },
+  },
+});
+
+const selectClasses = tv({
+  extend: inputClasses,
+  slots: {
+    input: 'squirrel-bg-chevron-down appearance-none truncate bg-no-repeat',
+  },
+  variants: {
+    size: {
+      sm: {
+        input: 'bg-[position:right_0.675rem_center] pr-8',
+      },
+      md: {
+        input: 'bg-[position:right_1rem_center] pr-10',
+      },
+      lg: {
+        input: 'bg-[position:right_1.25rem_center] pr-12',
+      },
+    },
+  },
+});
+
+export { inputClasses, selectClasses, textareaClasses };

package/squirrel/utils/inputClassesMixin.spec.js

@@ -1,49 +1,57 @@
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { shallowMount } from '@vue/test-utils';
 
-const baseInputClasses = () =>
-  [
-    'text-night',
-    'w-full',
-    'bg-surface',
-    'focus:outline-none',
-    'border-0',
-    'ring-1',
-    'ring-inset',
-    'focus:ring-2',
-    'disabled:ring-p-gray-30',
-    'disabled:hover:ring-p-gray-30',
-    'disabled:bg-p-blue-10',
-    'disabled:cursor-default',
-    'placeholder:text-p-gray-40',
-    'h-10',
-    'text-base',
-    'rounded',
-    'pl-4',
-    'pr-4',
-    'ring-p-gray-30',
-    'hover:ring-primary',
-    'focus:ring-primary',
-  ].join(' ');
+const baseInputClassesMd = () => [
+  'text-night',
+  'w-full',
+  'bg-surface',
+  'focus:outline-none',
+  'border-0',
+  'ring-1',
+  'ring-inset',
+  'focus:ring-2',
+  'disabled:ring-p-gray-30',
+  'disabled:hover:ring-p-gray-30',
+  'disabled:bg-p-blue-10',
+  'disabled:cursor-default',
+  'placeholder:text-p-gray-40',
+  'h-10',
+  'text-base',
+  'rounded',
+  'pl-4',
+  'pr-4',
+  'ring-p-gray-30',
+  'hover:ring-primary',
+  'focus:ring-primary',
+];
 
 const baseInputClassesSm = () => {
-  return baseInputClasses()
-    .replace('h-10', 'h-8')
-    .replace('text-base', 'text-sm')
-    .replace('pl-4', 'pl-3')
-    .replace('pr-4', 'pr-3')
-    .replace('rounded', 'rounded');
+  return baseInputClassesMd().map((item) => {
+    return (
+      {
+        'h-10': 'h-8',
+        'text-base': 'text-sm',
+        'pl-4': 'pl-3',
+        'pr-4': 'pr-3',
+      }[item] || item
+    );
+  });
 };
 
 const baseInputClassesLg = () => {
-  return baseInputClasses()
-    .replace('h-10', 'h-12')
-    .replace('text-base', 'text-lg')
-    .replace('pl-4', 'pl-5')
-    .replace('pr-4', 'pr-5');
+  return baseInputClassesMd().map((item) => {
+    return (
+      {
+        'h-10': 'h-12',
+        'text-base': 'text-lg',
+        'pl-4': 'pl-5',
+        'pr-4': 'pr-5',
+      }[item] || item
+    );
+  });
 };
 
-const baseLabelClasses = 'block mb-1 font-medium text-sm';
+const baseLabelClassesMd = ['block', 'mb-1', 'font-medium', 'text-sm'];
 
 const createWrapper = (opts) => {
   const TestComponent = {
@@ -60,93 +68,174 @@ describe('inputClassesMixin', () => {
   it('generates input classes md', () => {
     const wrapper = createWrapper({ props: { size: 'md' } });
 
-    expect(wrapper.vm.inputClasses).toBe(baseInputClasses());
+    const inputClasses = wrapper.vm.inputClasses.split(' ');
+
+    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesMd()));
   });
 
   it('generates input classes sm', () => {
     const wrapper = createWrapper({ props: { size: 'sm' } });
 
-    expect(wrapper.vm.inputClasses).toBe(baseInputClassesSm());
+    const inputClasses = wrapper.vm.inputClasses.split(' ');
+
+    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesSm()));
   });
 
   it('generates input classes lg', () => {
     const wrapper = createWrapper({ props: { size: 'lg' } });
 
-    expect(wrapper.vm.inputClasses).toBe(baseInputClassesLg());
+    const inputClasses = wrapper.vm.inputClasses.split(' ');
+
+    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesLg()));
   });
 
   it('generates label classes md', () => {
     const wrapper = createWrapper({ props: { size: 'md' } });
 
-    expect(wrapper.vm.labelClasses).toBe(baseLabelClasses);
+    const labelClasses = wrapper.vm.labelClasses.split(' ');
+
+    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesMd));
   });
 
   it('generates label classes sm', () => {
     const wrapper = createWrapper({ props: { size: 'sm' } });
 
-    expect(wrapper.vm.labelClasses).toBe(baseLabelClasses.replace('text-sm', 'text-xs'));
+    const labelClasses = wrapper.vm.labelClasses.split(' ');
+    const baseLabelClasses = baseLabelClassesMd.map((item) => {
+      return (
+        {
+          'text-sm': 'text-xs',
+        }[item] || item
+      );
+    });
+
+    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClasses));
   });
 
   it('generates label classes lg', () => {
     const wrapper = createWrapper({ props: { size: 'lg' } });
 
-    expect(wrapper.vm.labelClasses).toBe(baseLabelClasses.replace('text-sm', 'text-base'));
+    const labelClasses = wrapper.vm.labelClasses.split(' ');
+    const baseLabelClassesLg = baseLabelClassesMd.map((item) => {
+      return (
+        {
+          'text-sm': 'text-base',
+        }[item] || item
+      );
+    });
+
+    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesLg));
   });
 
   it('generates select classes md', () => {
     const wrapper = createWrapper({ props: { size: 'md' } });
 
-    expect(wrapper.vm.selectClasses).toBe(
-      baseInputClasses().replace('pr-4 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_1rem_center] pr-10`
-    );
+    const selectClasses = wrapper.vm.selectClasses.split(' ');
+    const baseInputClasses = baseInputClassesMd().filter((item) => {
+      return !['pr-4', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[position:right_1rem_center]',
+      'bg-no-repeat',
+      'pr-10',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates select classes sm', () => {
     const wrapper = createWrapper({ props: { size: 'sm' } });
 
-    expect(wrapper.vm.selectClasses).toBe(
-      baseInputClassesSm().replace('pr-3 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_0.675rem_center] pr-8`
-    );
+    const selectClasses = wrapper.vm.selectClasses.split(' ');
+    const baseInputClasses = baseInputClassesSm().filter((item) => {
+      return !['pr-3', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[position:right_0.675rem_center]',
+      'bg-no-repeat',
+      'pr-8',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates select classes lg', () => {
     const wrapper = createWrapper({ props: { size: 'lg' } });
 
-    expect(wrapper.vm.selectClasses).toBe(
-      baseInputClassesLg().replace('pr-5 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_1.25rem_center] pr-12`
-    );
+    const selectClasses = wrapper.vm.selectClasses.split(' ');
+    const baseInputClasses = baseInputClassesLg().filter((item) => {
+      return !['pr-5', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[position:right_1.25rem_center]',
+      'bg-no-repeat',
+      'pr-12',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes md', () => {
     const wrapper = createWrapper({ props: { size: 'md' } });
 
-    expect(wrapper.vm.textareaClasses).toBe(baseInputClasses() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
+    const baseInputClasses = baseInputClassesMd().filter((item) => {
+      return !['pl-3', 'pr-3', 'h-10'].includes(item);
+    });
+    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto']);
+
+    expect(textareaClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes sm', () => {
     const wrapper = createWrapper({ props: { size: 'sm' } });
 
-    expect(wrapper.vm.textareaClasses).toBe(baseInputClassesSm() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
+    const baseInputClasses = baseInputClassesSm().filter((item) => {
+      return !['pr-3', 'pl-3', 'h-8', 'text-sm'].includes(item);
+    });
+    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
+
+    expect(textareaClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes lg', () => {
     const wrapper = createWrapper({ props: { size: 'lg' } });
 
-    expect(wrapper.vm.textareaClasses).toBe(baseInputClassesLg() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
+    const baseInputClasses = baseInputClassesLg().filter((item) => {
+      return !['pr-5', 'pl-5', 'h-12', 'text-lg'].includes(item);
+    });
+    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
+
+    expect(textareaClasses).toEqual(expect.arrayContaining(res));
   });
 
   it('generates error classes', () => {
     const wrapper = createWrapper({ props: { size: 'md', errorMsg: 'Test error' } });
 
-    expect(wrapper.vm.inputClasses).toBe(
-      baseInputClasses().replace(
-        'ring-p-gray-30 hover:ring-primary focus:ring-primary',
-        'ring-on-error hover:ring-on-error focus:ring-on-error'
-      )
-    );
-    expect(wrapper.vm.errorMsgClasses).toBe('text-xs text-on-error mt-1');
+    const inputClasses = wrapper.vm.inputClasses.split(' ');
+    const resInputClasses = baseInputClassesMd()
+      .filter((item) => {
+        return !['ring-p-gray-30', 'hover:ring-primary', 'focus:ring-primary'].includes(item);
+      })
+      .concat(['ring-on-error', 'hover:ring-on-error', 'focus:ring-on-error']);
+    const errorMsgClasses = wrapper.vm.errorMsgClasses.split(' ');
+
+    expect(inputClasses).toEqual(expect.arrayContaining(resInputClasses));
+    expect(errorMsgClasses).toEqual(expect.arrayContaining(['text-xs', 'text-on-error', 'mt-1']));
   });
 });