@pequity/squirrel 5.4.7 → 5.4.9

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js

@@ -1,5 +1,4 @@
 import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
-import { DatePicker } from 'v-calendar';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 const createWrapper = (props) => {
@@ -7,11 +6,7 @@ const createWrapper = (props) => {
     props,
     global: {
       stubs: {
-        DatePicker: {
-          name: 'DatePicker',
-          template: '<div class="date-picker-stub"></div>',
-          props: ['modelValue', 'selectAttribute', 'minDate', 'maxDate', 'masks', 'timezone', 'style'],
-        },
+        VueDatePicker: true,
       },
     },
   });
@@ -21,15 +16,13 @@ describe('PInlineDatePicker.vue', () => {
   it('renders a datepicker', () => {
     const wrapper = createWrapper();
 
-    const datePicker = wrapper.findComponent(DatePicker);
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
 
     expect(datePicker.props()).toMatchObject({
-      modelValue: null,
-      selectAttribute: { highlight: { class: 'bg-primary', contentClass: 'text-white' } },
+      modelValue: '',
       minDate: null,
       maxDate: null,
-      masks: { input: 'DD-MMM-YYYY', data: 'YYYY-MM-DD' },
-      timezone: '',
+      timezone: null,
     });
 
     expect(wrapper.find('label').exists()).toBe(false);
@@ -44,9 +37,9 @@ describe('PInlineDatePicker.vue', () => {
       timezone: 'UTC',
     });
 
-    const datePicker = wrapper.findComponent(DatePicker);
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
 
-    expect(datePicker.props().modelValue).toEqual(new Date('2024-05-19'));
+    expect(datePicker.props().modelValue).toBe('2024-05-19');
     expect(datePicker.props().minDate).toEqual(new Date('2024-05-01'));
     expect(datePicker.props().maxDate).toEqual(new Date('2024-05-31'));
     expect(datePicker.props().timezone).toBe('UTC');
@@ -78,8 +71,9 @@ describe('PInlineDatePicker.vue', () => {
 
     expect(wrapper.props().required).toBe(true);
   });
+
   it('passes listeners to the datepicker', () => {
-    // Since DatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
+    // Since VueDatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
     // [Vue warn]: Component emitted event "update:view" but it is neither declared in the emits option nor as an "onUpdate:view" prop.
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
 
@@ -100,7 +94,7 @@ describe('PInlineDatePicker.vue', () => {
       },
     });
 
-    const datePicker = wrapper.findComponent(DatePicker);
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
 
     datePicker.vm.$emit('update:view');
 
@@ -112,12 +106,16 @@ describe('PInlineDatePicker.vue', () => {
   it('sets the disabled state correctly', () => {
     const wrapper = createWrapper({ label: 'test datepicker', disabled: true });
 
-    const datePickerDiv = wrapper.find('.vc-container');
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
 
-    expect(['pointer-events-none', 'opacity-70'].every((c) => datePickerDiv.classes().includes(c))).toBe(true);
+    expect(datePicker.props().disabled).toBe(true);
   });
 
-  it(`updates the value when a day is clicked`, async () => {
+  it('updates the value bound with v-model', async () => {
+    // Since VueDatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
+    // [Vue warn]: Component emitted event "update:modelValue" but it is neither declared in the emits option nor as an "onUpdate:view" prop.
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
     const wrapper = createWrapperFor({
       template: `<PInlineDatePicker v-model="dateStrVal" />`,
       components: { PInlineDatePicker },
@@ -128,25 +126,13 @@ describe('PInlineDatePicker.vue', () => {
       },
     });
 
-    const datePicker = wrapper.findComponent(DatePicker);
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
 
-    datePicker.vm.$emit('dayclick', { id: '2024-09-02' });
+    datePicker.vm.$emit('update:modelValue', '2024-09-02');
 
     expect(wrapper.vm.dateStrVal).toBe('2024-09-02');
-  });
-
-  it(`updates the datepicker value when modelValue is changed`, async () => {
-    const wrapper = createWrapper({ modelValue: '2024-09-01' });
-
-    const datePicker = wrapper.findComponent(DatePicker);
-    datePicker.vm.move = vi.fn();
-
-    expect(datePicker.props().modelValue).toEqual(new Date('2024-09-01'));
-
-    await wrapper.setProps({ modelValue: '2024-09-02' });
 
-    expect(datePicker.vm.move).toHaveBeenCalled();
-    expect(datePicker.props().modelValue).toEqual(new Date('2024-09-02'));
+    warnSpy.mockRestore();
   });
 
   it('sets the error state correctly', () => {
@@ -155,20 +141,10 @@ describe('PInlineDatePicker.vue', () => {
       errorMsg: 'datepicker has error',
     });
 
-    expect(wrapper.attributes()['data-has-error']).toBeDefined();
-    const datePickerDiv = wrapper.find('.vc-container');
-
-    expect(datePickerDiv.element.style.border).toBe('1px solid #f0453c');
     const errorDiv = wrapper.find('div.text-xs.text-on-error.mt-1');
+
+    expect(wrapper.attributes()['data-has-error']).toBeDefined();
     expect(errorDiv.isVisible()).toBe(true);
     expect(errorDiv.text()).toBe('datepicker has error');
   });
-
-  it('emits null when date is invalid', async () => {
-    const wrapper = createWrapper({ label: 'test datepicker', modelValue: 'not a date' });
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(null);
-  });
 });

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.stories.js

@@ -1,7 +1,7 @@
 // import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 // import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
-import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
 
 export default {
   title: 'Components/PInlineDatePicker',
@@ -22,8 +22,8 @@ export default {
     docs: {
       description: {
         component: `Allows users to select a date by choosing a date from the calendar.  
-        This component uses \`<v-date-picker>\` from [V-Calendar](https://vcalendar.io/) internally.  
-        So please take a look also there at their extensive [documentation](https://vcalendar.io/api/v2.0/).`,
+        This component uses \`VueDatePicker\` from [@vuepic/vue-datepicker](https://vue3datepicker.com) internally.  
+        So please take a look also there at their extensive [documentation](https://vue3datepicker.com/).`,
       },
     },
   },

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue

@@ -5,123 +5,54 @@
         {{ label }}
       </label>
     </slot>
-    <DatePicker
-      ref="datepickerRef"
-      :class="{ 'pointer-events-none opacity-70': $attrs.disabled }"
-      :model-value="innerValue"
-      :select-attribute="selectAttribute"
-      :min-date="minDate || null"
-      :max-date="maxDate || null"
-      :masks="masks"
-      :style="styleDatepicker"
-      :timezone="timezone"
-      v-bind="listeners"
-      @dayclick="dayclick"
-    />
+    <VueDatePicker v-model="model" v-bind="datePickerProps" />
     <div v-show="errorMsg" :class="errorMsgClasses">{{ errorMsg }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import dayjs from 'dayjs';
-import { type AttributeConfig } from 'v-calendar/dist/types/src/utils/attribute.d';
-import { DatePicker } from 'v-calendar';
-import { type StyleValue, computed, ref, useAttrs, watch } from 'vue';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import VueDatePicker, { type VueDatePickerProps } from '@vuepic/vue-datepicker';
+import { computed, type StyleValue, useAttrs } from 'vue';
 
 defineOptions({
   name: 'PInlineDatePicker',
   inheritAttrs: false,
 });
 
-const selectAttribute: AttributeConfig = {
-  highlight: { class: 'bg-primary', contentClass: 'text-white' },
-};
-
-const DEFAULT_MASKS = {
-  // The mask for the input
-  input: 'DD-MMM-YYYY',
-  // The mask for the model value
-  data: 'YYYY-MM-DD',
-};
-
 type Props = {
-  modelValue?: string | null;
   label?: string;
   errorMsg?: string;
   required?: boolean;
-  minDate?: Date | null;
-  maxDate?: Date | null;
-  timezone?: string;
-};
+} & VueDatePickerProps;
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
   label: '',
   errorMsg: '',
   required: false,
-  minDate: null,
-  maxDate: null,
-  timezone: '',
+  inline: true,
+  autoApply: true,
+  enableTimePicker: false,
+  modelType: 'yyyy-MM-dd',
+  hideOffsetDates: true,
+  weekStart: 0,
 });
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | null];
-}>();
+const model = defineModel<Date | string | null>({ default: '' });
 
 // Data
-const { labelClasses, errorMsgClasses } = useInputClasses(props);
 const attrs = useAttrs();
-// innerValue is a Date object
-const innerValue = ref<Date | null>(null);
-const datepickerRef = ref<InstanceType<typeof DatePicker> | null>(null);
+const { labelClasses, errorMsgClasses } = useInputClasses(props);
 
 // Computed
-const masks = computed(() => {
-  return Object.assign(DEFAULT_MASKS, attrs.masks);
-});
+const datePickerProps = computed(() => {
+  const { modelValue: _, ...propsWithoutModelValue } = props;
+  const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
 
-const listeners = computed(() => {
-  return Object.keys(attrs).reduce((acc, curr) => {
-    if (curr.startsWith('on')) {
-      return { ...acc, [curr]: attrs[curr] };
-    } else {
-      return acc;
-    }
-  }, {});
+  return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle };
 });
 
 const style = computed(() => {
   return attrs.style as StyleValue;
 });
-
-const styleDatepicker = computed(() => {
-  return props.errorMsg ? { border: '1px solid #f0453c' } : {};
-});
-
-// Methods
-const dayclick = (e: { id: string }) => {
-  emit('update:modelValue', e.id);
-};
-
-// Watch
-watch(
-  () => props.modelValue,
-  async (nV) => {
-    const date = dayjs(nV, masks.value.data).toDate();
-
-    if (nV && date.toString() === 'Invalid Date') {
-      emit('update:modelValue', null);
-      return;
-    }
-
-    innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
-    const datepicker = datepickerRef.value as { move: (val: unknown) => void };
-
-    if (datepicker && typeof datepicker.move === 'function' && innerValue.value) {
-      await datepicker.move(innerValue.value);
-    }
-  },
-  { immediate: true }
-);
 </script>

package/squirrel/components/p-input/p-input.stories.js

@@ -1,5 +1,5 @@
-import PInput from '@squirrel/components/p-input/p-input.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PInput from '@squirrel/components/p-input/p-input.vue';
 
 export default {
   title: 'Components/PInput',

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

@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { type PropType, type StyleValue, defineComponent } from 'vue';
+import { defineComponent, type PropType, type StyleValue } from 'vue';
 
 const INPUT_TYPES = { TEXT: 'text', PASSWORD: 'password' };
 

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

@@ -1,5 +1,5 @@
-import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
 
 export default {
   title: 'Components/PInputNumber',

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

@@ -21,10 +21,10 @@
 <script lang="ts">
 import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { type CurrencyDisplay, type CurrencyInputOptions, useCurrencyInput } from 'vue-currency-input';
-import { type PropType, type StyleValue, computed, defineComponent, watch } from 'vue';
-import { kebabCase } from 'lodash-es';
 import { toNumberOrNull } from '@squirrel/utils/number';
+import { kebabCase } from 'lodash-es';
+import { computed, defineComponent, type PropType, type StyleValue, watch } from 'vue';
+import { type CurrencyDisplay, type CurrencyInputOptions, useCurrencyInput } from 'vue-currency-input';
 
 const ALL_OPTIONS = [
   'locale',

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

@@ -1,5 +1,5 @@
-import PInputPercent from '@squirrel/components/p-input-percent/p-input-percent.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PInputPercent from '@squirrel/components/p-input-percent/p-input-percent.vue';
 
 export default {
   title: 'Components/PInputPercent',

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

@@ -11,8 +11,8 @@
 <script setup lang="ts">
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
 import { type InputSize } from '@squirrel/utils/inputClassesShared';
-import { type PropType, computed } from 'vue';
 import { isNumber } from 'lodash-es';
+import { computed, type PropType } from 'vue';
 
 const prefixClasses: Record<InputSize, string> = {
   sm: 'text-sm h-8 left-2',

package/squirrel/components/p-input-search/p-input-search.stories.js

@@ -1,5 +1,5 @@
-import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
 
 export default {
   title: 'Components/PInputSearch',

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

@@ -35,7 +35,7 @@
 <script lang="ts">
 import PInput from '@squirrel/components/p-input/p-input.vue';
 import { INPUT_SIZES, type InputSize } from '@squirrel/utils/inputClassesShared';
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 type PInputInstance = InstanceType<typeof PInput>;
 

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

@@ -1,7 +1,7 @@
 import PLink from '@squirrel/components/p-link/p-link.vue';
-import { createWrapperFor } from '@tests/vitest.helpers';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 vi.mock('@squirrel/utils/sanitization');
 

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

@@ -8,9 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { RouterLink, type RouterLinkProps } from 'vue-router';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { RouterLink, type RouterLinkProps } from 'vue-router';
 
 defineOptions({
   name: 'PLink',

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

@@ -1,8 +1,8 @@
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
+import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
 import { createWrapperFor, waitNT } from '@tests/vitest.helpers';
 import { defineComponent, ref } from 'vue';
-import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const createAppWrapper = () =>
   createWrapperFor({
@@ -131,7 +131,7 @@ describe('PLoading.vue', () => {
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
 
-  it(`it waits for the queue to clear in order to hide the loading indicator`, async () => {
+  it(`waits for the queue to clear in order to hide the loading indicator`, async () => {
     const wrapper = createWrapper({ delay: 200 });
 
     await wrapper.find('.request-1-sec').trigger('click');

package/squirrel/components/p-loading/p-loading.stories.js

@@ -1,8 +1,8 @@
-import ComputationStatus1 from '@/playground/components/ComputationStatus1.vue';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
-import { defineComponent, ref } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
+import { defineComponent, ref } from 'vue';
+import ComputationStatus1 from '@/playground/components/ComputationStatus1.vue';
 
 const TestComponent = defineComponent({
   name: 'TestComponent',

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

@@ -28,9 +28,9 @@
 </template>
 
 <script setup lang="ts">
+import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 import { isComponent } from '@squirrel/utils/component';
 import { onBeforeUnmount, ref, toValue, watch } from 'vue';
-import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
 

package/squirrel/components/p-loading/usePLoading.ts

@@ -1,4 +1,4 @@
-import { type Component, type Ref, computed, getCurrentScope, markRaw, onScopeDispose, ref } from 'vue';
+import { type Component, computed, getCurrentScope, markRaw, onScopeDispose, type Ref, ref } from 'vue';
 
 type Options = {
   delay?: number;

package/squirrel/components/p-modal/p-modal-basic.spec.js

@@ -1,6 +1,6 @@
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
-import { mount } from '@vue/test-utils';
 import { waitRAF } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
 
 const createWrapperContainer = (componentArgs) => {
   const args = componentArgs || {};

package/squirrel/components/p-modal/p-modal-events.spec.js

@@ -1,6 +1,6 @@
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
-import { mount } from '@vue/test-utils';
 import { sleep, waitRAF } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
 
 const createWrapper = () => {
   return mount(PModal, {

package/squirrel/components/p-modal/p-modal-features.spec.js

@@ -1,6 +1,6 @@
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
-import { mount } from '@vue/test-utils';
 import { sleep, waitNT } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
 
 const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
 const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');

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

@@ -73,18 +73,18 @@
 <script setup lang="ts">
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
+import { usePModal } from '@squirrel/components/p-modal/usePModal';
 import {
-  type PropType,
-  type StyleValue,
   getCurrentInstance,
   nextTick,
   onBeforeMount,
   onBeforeUnmount,
   onMounted,
+  type PropType,
   ref,
+  type StyleValue,
   watch,
 } from 'vue';
-import { usePModal } from '@squirrel/components/p-modal/usePModal';
 
 const FOCUSABLE_ELEMENTS =
   'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';

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

@@ -32,8 +32,8 @@
 
 <script setup lang="ts">
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
-import { type PropType, computed } from 'vue';
 import { createPagingRange } from '@squirrel/utils/pagination';
+import { computed, type PropType } from 'vue';
 
 defineOptions({ name: 'PPagination' });
 

package/squirrel/components/p-progress-bar/p-progess-bar.spec.js

@@ -21,7 +21,7 @@ describe('PProgressBar.vue', () => {
     expect(div.classes()).toEqual(['flex', 'justify-start', 'overflow-hidden', 'rounded', 'bg-p-blue-20']);
   });
 
-  it('attrs fall through ', async () => {
+  it('attrs fall through', async () => {
     const ParentComponent = {
       template: `
         <PProgressBar :total="2" :items="items" class="test-class" data-testattr="test attribute" />

package/squirrel/components/p-progress-bar/p-progress-bar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 export type ProgressItem = {
   value: number;

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

@@ -1,6 +1,6 @@
 import PSelect from '@squirrel/components/p-select/p-select.vue';
-import { cloneDeep } from 'lodash-es';
 import { createWrapperFor, sleep, waitNT } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 
 const baseClasses = () => [
   'text-night',

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

@@ -1,5 +1,5 @@
-import PSelect from '@squirrel/components/p-select/p-select.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PSelect from '@squirrel/components/p-select/p-select.vue';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel' },

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

@@ -15,10 +15,10 @@
 </template>
 
 <script setup lang="ts">
+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';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
 
 defineOptions({
   name: 'PSelect',

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

@@ -1,6 +1,6 @@
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { cloneDeep } from 'lodash-es';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 
 const items = [
   { textCustom: 'Option 1', valueCustom: 1 },

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,6 +1,6 @@
+import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
 import { expect, userEvent, within } from '@storybook/test';
-import { fieldArgTypes } from '@root/stories/common/field';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },

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

@@ -27,8 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 
 type BtnGroupItem = Record<string, string | number | boolean>;
 type Key = string | number;

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

@@ -1,9 +1,9 @@
-import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
 import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
-import { cloneDeep } from 'lodash-es';
+import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
+import { useVirtualizer } from '@tanstack/vue-virtual';
 import { createWrapperFor, sleep } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 import { ref } from 'vue';
-import { useVirtualizer } from '@tanstack/vue-virtual';
 
 vi.mock('@tanstack/vue-virtual', () => ({
   useVirtualizer: vi.fn(),
@@ -355,7 +355,7 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
-  it.each([true, false])('renders correctly when "multiple" is set to %s ', async (val) => {
+  it.each([true, false])('renders correctly when "multiple" is set to %s', async (val) => {
     const items = cloneDeep(filterListItems).slice(0, 20);
     const wrapper = createWrapper({ items }, { multiple: val });
 

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

@@ -123,14 +123,14 @@ import {
   type AnyObject,
   type AnyValue,
   type ModelValue,
-  SIZES,
   type Size,
+  SIZES,
 } from '@squirrel/components/p-select-list/p-select-list.types';
-import { type ComponentPublicInstance, type PropType, type StyleValue, computed, onMounted, ref, useAttrs } from 'vue';
-import { splitStringForHighlight } from '@squirrel/utils/text';
-import { toString } from '@squirrel/utils/string';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { toString } from '@squirrel/utils/string';
+import { splitStringForHighlight } from '@squirrel/utils/text';
+import { type ComponentPublicInstance, computed, onMounted, type PropType, ref, type StyleValue, useAttrs } from 'vue';
 
 defineOptions({
   name: 'PSelectList',