@pequity/squirrel 6.0.12 → 6.0.13

package/squirrel/components/p-select/p-select.spec.js

@@ -3,30 +3,29 @@ import { createWrapperFor, sleep, waitNT } from '@tests/vitest.helpers';
 import { cloneDeep } from 'lodash-es';
 
 const baseClasses = () => [
-  'text-night',
   'w-full',
-  'bg-surface',
-  'focus:outline-none',
+  'rounded',
   'border-0',
+  'text-night',
   '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',
   'ring-p-gray-30',
+  'placeholder:text-p-gray-40',
   'hover:ring-primary',
+  'focus:outline-none',
+  'focus:ring-2',
   'focus:ring-primary',
-  'truncate',
+  'disabled:cursor-default',
+  'disabled:bg-p-blue-10',
+  'disabled:ring-p-gray-30',
+  'disabled:hover:ring-p-gray-30',
   'squirrel-bg-chevron-down',
-  'bg-no-repeat',
   'appearance-none',
+  'truncate',
+  'bg-no-repeat',
+  'h-10',
+  'pl-4',
+  'text-base',
   'bg-[right_1rem_center]',
   'pr-10',
 ];
@@ -44,7 +43,7 @@ describe('PSelect.vue', () => {
     const select = wrapper.find('select');
 
     expect(select.exists()).toBe(true);
-    expect(select.classes()).toEqual(baseClasses());
+    expect(select.classes()).toEqual(expect.arrayContaining(baseClasses()));
     expect(wrapper.find('label').exists()).toBe(false);
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
   });
@@ -69,7 +68,7 @@ describe('PSelect.vue', () => {
     expect(wrapper.classes()).toContain('hidden');
   });
 
-  it('adds the required class when the required prop is set', () => {
+  it('adds the required class 2 when the required prop is set', () => {
     const wrapper = createWrapperFor(PSelect, {
       props: {
         label: 'test select',
@@ -77,14 +76,9 @@ describe('PSelect.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('sets the disabled state correctly', () => {
@@ -108,15 +102,15 @@ describe('PSelect.vue', () => {
       },
     });
 
+    const res = baseClasses().map((c) => {
+      if (c === 'ring-p-gray-30') return 'ring-on-error';
+      if (c === 'hover:ring-primary') return 'hover:ring-on-error';
+      if (c === 'focus:ring-primary') return 'focus:ring-on-error';
+      return c;
+    });
+
     expect(wrapper.attributes()['data-has-error']).toBeDefined();
-    expect(wrapper.find('select').classes().join(' ')).toEqual(
-      baseClasses()
-        .join(' ')
-        .replace(
-          'ring-p-gray-30 hover:ring-primary focus:ring-primary',
-          'ring-on-error hover:ring-on-error focus:ring-on-error'
-        )
-    );
+    expect(wrapper.find('select').classes()).toEqual(expect.arrayContaining(res));
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(true);
   });
 

package/squirrel/components/p-select/p-select.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script setup lang="ts">
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
-import { INPUT_SIZES, type InputSize } from '@squirrel/utils/inputClassesShared';
 import { type PropType, type StyleValue } from 'vue';
 import { computed, useAttrs } from 'vue';
 
@@ -49,10 +49,10 @@ const props = defineProps({
     default: false,
   },
   size: {
-    type: String as PropType<InputSize>,
+    type: String as PropType<Size>,
     default: 'md',
-    validator(value: InputSize) {
-      return Object.keys(INPUT_SIZES).includes(value);
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
   itemText: {

package/squirrel/components/p-textarea/p-textarea.spec.js

@@ -50,14 +50,9 @@ describe('PTextarea.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('sets the disabled state correctly', () => {

package/squirrel/composables/useInputClasses.spec.js

@@ -1,50 +1,57 @@
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
-import { SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX } from '@squirrel/utils/inputClassesShared';
 import { reactive } from 'vue';
 
-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'];
 
 describe('useInputClasses', () => {
   it('generates input classes md', () => {
@@ -52,7 +59,7 @@ describe('useInputClasses', () => {
 
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toBe(baseInputClasses());
+    expect(inputClasses.value.split(' ')).toEqual(expect.arrayContaining(baseInputClassesMd()));
   });
 
   it('generates input classes sm', () => {
@@ -60,7 +67,7 @@ describe('useInputClasses', () => {
 
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toBe(baseInputClassesSm());
+    expect(inputClasses.value.split(' ')).toEqual(expect.arrayContaining(baseInputClassesSm()));
   });
 
   it('generates input classes lg', () => {
@@ -68,7 +75,7 @@ describe('useInputClasses', () => {
 
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toBe(baseInputClassesLg());
+    expect(inputClasses.value.split(' ')).toEqual(expect.arrayContaining(baseInputClassesLg()));
   });
 
   it('generates label classes md', () => {
@@ -76,133 +83,187 @@ describe('useInputClasses', () => {
 
     const { labelClasses } = useInputClasses(props);
 
-    expect(labelClasses.value).toBe(baseLabelClasses);
+    expect(labelClasses.value.split(' ')).toEqual(expect.arrayContaining(baseLabelClassesMd));
   });
 
   it('generates label classes sm', () => {
     const props = reactive({ size: 'sm' });
 
     const { labelClasses } = useInputClasses(props);
+    const baseLabelClasses = baseLabelClassesMd.map((item) => {
+      return (
+        {
+          'text-sm': 'text-xs',
+        }[item] || item
+      );
+    });
 
-    expect(labelClasses.value).toBe(baseLabelClasses.replace('text-sm', 'text-xs'));
+    expect(labelClasses.value.split(' ')).toEqual(expect.arrayContaining(baseLabelClasses));
   });
 
   it('generates label classes lg', () => {
     const props = reactive({ size: 'lg' });
 
     const { labelClasses } = useInputClasses(props);
+    const baseLabelClassesLg = baseLabelClassesMd.map((item) => {
+      return (
+        {
+          'text-sm': 'text-base',
+        }[item] || item
+      );
+    });
 
-    expect(labelClasses.value).toBe(baseLabelClasses.replace('text-sm', 'text-base'));
+    expect(labelClasses.value.split(' ')).toEqual(expect.arrayContaining(baseLabelClassesLg));
   });
 
   it('generates select classes md', () => {
     const props = reactive({ size: 'md' });
 
     const { selectClasses } = useInputClasses(props);
-
-    expect(selectClasses.value).toBe(
-      baseInputClasses().replace('pr-4 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_1rem_center] pr-10`
-    );
+    const baseInputClasses = baseInputClassesMd().filter((item) => {
+      return !['pr-4', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[right_1rem_center]',
+      'bg-no-repeat',
+      'pr-10',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates select classes sm', () => {
     const props = reactive({ size: 'sm' });
 
     const { selectClasses } = useInputClasses(props);
-
-    expect(selectClasses.value).toBe(
-      baseInputClassesSm().replace('pr-3 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_0.675rem_center] pr-8`
-    );
+    const baseInputClasses = baseInputClassesSm().filter((item) => {
+      return !['pr-3', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[right_0.675rem_center]',
+      'bg-no-repeat',
+      'pr-8',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates select classes lg', () => {
     const props = reactive({ size: 'lg' });
 
     const { selectClasses } = useInputClasses(props);
-
-    expect(selectClasses.value).toBe(
-      baseInputClassesLg().replace('pr-5 ', '') +
-        ` truncate squirrel-bg-chevron-down bg-no-repeat appearance-none bg-[right_1.25rem_center] pr-12`
-    );
+    const baseInputClasses = baseInputClassesLg().filter((item) => {
+      return !['pr-5', 'bg-surface'].includes(item);
+    });
+    const baseSelectClasses = [
+      'appearance-none',
+      'bg-[right_1.25rem_center]',
+      'bg-no-repeat',
+      'pr-12',
+      'squirrel-bg-chevron-down',
+      'truncate',
+    ];
+    const res = baseInputClasses.concat(baseSelectClasses);
+
+    expect(selectClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes md', () => {
     const props = reactive({ size: 'md' });
 
     const { textareaClasses } = useInputClasses(props);
+    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.value).toBe(baseInputClasses() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes sm', () => {
     const props = reactive({ size: 'sm' });
 
     const { textareaClasses } = useInputClasses(props);
+    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.value).toBe(baseInputClassesSm() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates textarea classes lg', () => {
     const props = reactive({ size: 'lg' });
 
     const { textareaClasses } = useInputClasses(props);
+    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.value).toBe(baseInputClassesLg() + ' resize-y px-3 py-3 overflow-auto h-auto');
+    expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
   it('generates error classes', () => {
     const props = reactive({ size: 'md', errorMsg: 'Test error' });
 
     const { inputClasses, errorMsgClasses } = useInputClasses(props);
-
-    expect(inputClasses.value).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(errorMsgClasses.value).toBe('text-xs text-on-error mt-1');
+    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']);
+
+    expect(inputClasses.value.split(' ')).toEqual(expect.arrayContaining(resInputClasses));
+    expect(errorMsgClasses.value.split(' ')).toEqual(expect.arrayContaining(['text-xs', 'text-on-error', 'mt-1']));
   });
 
-  it('should apply the SPACING_PREFIX when prefix is true', () => {
+  it('should apply left padding when prefix is true', () => {
     const props = reactive({
       size: 'md',
       prefix: true,
     });
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toContain(SPACING_PREFIX.md);
+    expect(inputClasses.value.split(' ')).toContain('pl-8');
   });
 
-  it('should apply the SPACING_SUFFIX when suffix is true', () => {
+  it('should apply right padding when suffix is true', () => {
     const props = reactive({
       size: 'md',
       suffix: true,
     });
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toContain(SPACING_SUFFIX.md);
+    expect(inputClasses.value.split(' ')).toContain('pr-8');
   });
 
-  it('should apply SPACING_LEFT when prefix is false', () => {
+  it('should apply the default left padding when prefix is false', () => {
     const props = reactive({
       size: 'md',
       prefix: false,
     });
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toContain(SPACING_LEFT.md);
+    expect(inputClasses.value.split(' ')).toContain('pl-4');
   });
 
-  it('should apply SPACING_RIGHT when suffix is false', () => {
+  it('should apply apply the default right padding when suffix is false', () => {
     const props = reactive({
       size: 'md',
       suffix: false,
     });
     const { inputClasses } = useInputClasses(props);
 
-    expect(inputClasses.value).toContain(SPACING_RIGHT.md);
+    expect(inputClasses.value.split(' ')).toContain('pr-4');
   });
 });

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,
 };