@pequity/squirrel 6.0.12 → 6.0.14

package/squirrel/components/p-input-number/p-input-number.spec.js

@@ -33,7 +33,7 @@ describe('PInputNumber.vue', () => {
 
     expect(input.exists()).toBe(true);
 
-    expect(input.classes()).toEqual(baseClasses());
+    expect(input.classes()).toEqual(expect.arrayContaining(baseClasses()));
     expect(wrapper.find('label').exists()).toBe(false);
     expect(wrapper.find('input-prefix').exists()).toBe(false);
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
@@ -67,14 +67,9 @@ describe('PInputNumber.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', () => {
@@ -116,15 +111,15 @@ describe('PInputNumber.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('input').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('input').classes()).toEqual(expect.arrayContaining(res));
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(true);
   });
 
@@ -138,8 +133,10 @@ describe('PInputNumber.vue', () => {
       },
     });
 
+    const res = baseClasses().map((c) => (c === 'pl-4' ? 'pl-8' : c));
+
     expect(wrapper.find('i.icon')).toBeTruthy();
-    expect(wrapper.find('input').classes()).toEqual(baseClasses().map((c) => (c === 'pl-4' ? 'pl-8' : c)));
+    expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
   });
 
   it('emits a number on input', async () => {

package/squirrel/components/p-input-percent/p-input-percent.spec.js

@@ -35,15 +35,10 @@ describe('PInputPercent.vue', () => {
       },
     });
 
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
     expect(wrapper.find('label').text()).toBe('test input');
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').text()).toBe('error message');
   });
 

package/squirrel/components/p-input-percent/p-input-percent.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script setup lang="ts">
+import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
-import { type InputSize } from '@squirrel/utils/inputClassesShared';
 import { isNumber } from 'lodash-es';
 import { computed, type PropType } from 'vue';
 
-const prefixClasses: Record<InputSize, string> = {
+const prefixClasses: Record<Size, string> = {
   sm: 'text-sm h-8 left-2',
   md: 'text-base h-10 left-3',
   lg: 'text-lg h-12 left-5',
@@ -30,7 +30,7 @@ const props = defineProps({
     default: null,
   },
   size: {
-    type: String as PropType<InputSize>,
+    type: String as PropType<Size>,
     default: 'md',
   },
 });

package/squirrel/components/p-input-search/p-input-search.vue

@@ -33,8 +33,8 @@
 </template>
 
 <script lang="ts">
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import PInput from '@squirrel/components/p-input/p-input.vue';
-import { INPUT_SIZES, type InputSize } from '@squirrel/utils/inputClassesShared';
 import { defineComponent, type PropType } from 'vue';
 
 type PInputInstance = InstanceType<typeof PInput>;
@@ -51,10 +51,10 @@ export default defineComponent({
       default: '',
     },
     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);
       },
     },
     showEnterIcon: {

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

@@ -3,31 +3,30 @@ 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',
-  'bg-[right_1rem_center]',
+  'truncate',
+  'bg-no-repeat',
+  'h-10',
+  'pl-4',
+  'text-base',
+  'bg-[position: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-tabs/p-tabs.stories.js

@@ -1,4 +1,4 @@
-import FileUploadIcon from '@squirrel/assets/file-upload-upload-icon.svg?inline';
+import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
 import { action } from '@storybook/addon-actions';
 
@@ -34,7 +34,7 @@ export const Default = {
       {
         title: 'Tab 2',
         name: 'tab2',
-        icon: FileUploadIcon,
+        icon: PaginateRightIcon,
       },
       {
         title: 'Tab 3',

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-[position: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-[position: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-[position: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');
   });
 });