@pequity/squirrel 5.4.7 → 5.4.9

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

@@ -0,0 +1,292 @@
+import PDatePicker from '@squirrel/components/p-date-picker/p-date-picker.vue';
+import { createWrapperFor } from '@tests/vitest.helpers';
+
+const createWrapper = (props) => {
+  return createWrapperFor(PDatePicker, {
+    props,
+  });
+};
+
+describe('PDatePicker.vue', () => {
+  it('renders a datepicker', () => {
+    const wrapper = createWrapper();
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+
+    expect(datePicker.props()).toMatchObject({
+      modelValue: '',
+      minDate: null,
+      maxDate: null,
+      timezone: null,
+    });
+
+    expect(wrapper.find('label').exists()).toBe(false);
+    expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
+  });
+
+  it('passes all props to the datepicker', () => {
+    const wrapper = createWrapper({
+      modelValue: '2024-05-19',
+      minDate: new Date('2024-05-01'),
+      maxDate: new Date('2024-05-31'),
+      timezone: 'UTC',
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+
+    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');
+  });
+
+  it('renders a label when the label prop is set', () => {
+    const wrapper = createWrapper({ label: 'test datepicker' });
+
+    const pInput = wrapper.findComponent({ name: 'PInput' });
+
+    expect(pInput.props().label).toBe('test datepicker');
+  });
+
+  it('hides the component when the hidden prop is set', () => {
+    const wrapper = createWrapper({ hidden: true });
+
+    expect(wrapper.classes()).toContain('hidden');
+  });
+
+  it('adds the required class when the required prop is set', () => {
+    const wrapper = createWrapper({ label: 'test datepicker', required: true });
+
+    const pInput = wrapper.findComponent({ name: 'PInput' });
+
+    expect(pInput.props().required).toBe(true);
+  });
+
+  it('passes listeners to the input', async () => {
+    const testFn = vi.fn();
+
+    const wrapper = createWrapperFor({
+      template: `<PDatePicker v-model="dateStrVal" @input="testEvent" />`,
+      components: { PDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+      methods: {
+        testEvent() {
+          testFn();
+        },
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    await input.trigger('input');
+
+    expect(testFn).toHaveBeenCalled();
+  });
+
+  it('sets the disabled state correctly', () => {
+    const wrapper = createWrapperFor(PDatePicker, { props: { label: 'test datepicker', disabled: true } });
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+    const input = wrapper.find('input');
+
+    expect(datePicker.props().disabled).toBe(true);
+    expect(input.element.disabled).toBe(true);
+  });
+
+  it('updates the value bound with v-model', async () => {
+    // Since VueDatePicker emits are not defined on PDatePicker 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: `<PDatePicker v-model="dateStrVal" />`,
+      components: { PDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+
+    datePicker.vm.$emit('update:modelValue', '2024-09-02');
+
+    expect(wrapper.vm.dateStrVal).toBe('2024-09-02');
+
+    warnSpy.mockRestore();
+  });
+
+  it('sets the error state correctly', () => {
+    const wrapper = createWrapper({
+      label: 'test datepicker',
+      errorMsg: 'datepicker has error',
+    });
+
+    const pInput = wrapper.findComponent({ name: 'PInput' });
+
+    expect(pInput.props().errorMsg).toBe('datepicker has error');
+  });
+
+  it('input listens to the tab event', async () => {
+    const testFn = vi.fn();
+
+    const wrapper = createWrapperFor({
+      template: `<PDatePicker v-model="dateStrVal" @keydown.tab="testEvent"><input type="text" /></PDatePicker>`,
+      components: { PDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+      methods: {
+        testEvent() {
+          testFn();
+        },
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    await input.trigger('keydown.tab');
+
+    expect(testFn).toHaveBeenCalled();
+  });
+
+  it('clears the datepicker value when the input gets cleared', async () => {
+    // Since VueDatePicker emits are not defined on PDatePicker 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: `<PDatePicker v-model="dateStrVal" />`,
+      components: { PDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+
+    await datePicker.vm.$emit('update:modelValue', '');
+
+    expect(wrapper.vm.dateStrVal).toBe('');
+
+    warnSpy.mockRestore();
+  });
+
+  it('does not clear the datepicker value when the input has a value', async () => {
+    // Since VueDatePicker emits are not defined on PDatePicker 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: `<PDatePicker v-model="dateStrVal" />`,
+      components: { PDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'VueDatePicker' });
+
+    await datePicker.vm.$emit('update:modelValue', '2024-09-02');
+
+    expect(wrapper.vm.dateStrVal).toBe('2024-09-02');
+
+    warnSpy.mockRestore();
+  });
+
+  it('calls onInput, onEnter, and onTab when respective events occur', async () => {
+    // Mock the scoped slot functions
+    const onInput = vi.fn();
+    const onEnter = vi.fn();
+    const onTab = vi.fn();
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    const onClear = vi.fn();
+
+    // Stub VueDatePicker and pass the scoped slot props to the PInput component
+    const wrapper = createWrapperFor(PDatePicker, {
+      global: {
+        stubs: {
+          VueDatePicker: {
+            template: `
+              <div>
+                <slot name="dp-input" 
+                  :value="value"
+                  :onInput="onInput"
+                  :onEnter="onEnter"
+                  :onTab="onTab"
+                  :onFocus="onFocus"
+                  :onBlur="onBlur"
+                  :onClear="onClear"
+                />
+              </div>
+            `,
+            data() {
+              return {
+                value: '',
+              };
+            },
+            methods: {
+              onInput,
+              onEnter,
+              onTab,
+              onFocus,
+              onBlur,
+              onClear,
+            },
+          },
+        },
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    // Simulate the input and keyboard events
+    await input.setValue('2023-10-21');
+    await input.trigger('input');
+    await input.trigger('keydown.enter');
+    await input.trigger('keydown.tab');
+
+    // Simulate focus and blur events
+    await input.trigger('focus');
+    await input.trigger('blur');
+
+    // Simulate clearing the input (which should trigger onClear)
+    await input.setValue('');
+    await input.trigger('input');
+
+    expect(onInput).toHaveBeenCalled();
+    expect(onEnter).toHaveBeenCalled();
+    expect(onTab).toHaveBeenCalled();
+    expect(onFocus).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalled();
+    expect(onClear).toHaveBeenCalled();
+  });
+
+  it('returns the placeholder if it is provided in props', async () => {
+    const wrapper = createWrapperFor(PDatePicker, { props: { placeholder: 'Select a date', format: 'dd-MMM-yyyy' } });
+
+    const input = wrapper.find('input');
+
+    expect(input.element.placeholder).toBe('Select a date');
+  });
+
+  it('returns the format if no placeholder is provided', async () => {
+    const wrapper = createWrapperFor(PDatePicker, { props: { placeholder: '', format: 'dd-MMM-yyyy' } });
+
+    const input = wrapper.find('input');
+
+    expect(input.element.placeholder).toBe('dd-MMM-yyyy');
+  });
+});

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

@@ -1,5 +1,5 @@
-import PDatePicker from '@squirrel/components/p-date-picker/p-date-picker.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PDatePicker from '@squirrel/components/p-date-picker/p-date-picker.vue';
 
 export default {
   title: 'Components/PDatePicker',
@@ -15,8 +15,8 @@ export default {
     docs: {
       description: {
         component: `Allows users to enter a date either through text input, or 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-date-picker/p-date-picker.vue

@@ -1,126 +1,81 @@
 <template>
-  <div :class="[{ hidden: $attrs.hidden }, $attrs.class]" :data-has-error="!!errorMsg" :style="style">
-    <slot name="label" :label="label" :label-classes="labelClasses">
-      <label v-if="label" :class="labelClasses">
-        {{ label }}
-      </label>
-    </slot>
-    <DatePicker
-      v-model="innerValue"
-      :select-attribute="selectAttribute"
-      :popover="{ visibility: 'click', placement: 'auto' }"
-      :min-date="minDate || null"
-      :max-date="maxDate || null"
-      :masks="masks"
-      :timezone="timezone"
-    >
-      <template #default="{ inputValue, inputEvents }">
-        <PInput
-          :value="inputValue"
-          v-bind="attrsWithoutClassAndStyle"
-          :placeholder="displayPlaceholder"
-          v-on="inputEvents"
-        />
-      </template>
-    </DatePicker>
-    <div v-show="errorMsg" :class="errorMsgClasses">{{ errorMsg }}</div>
-  </div>
+  <VueDatePicker v-model="model" :class="[{ hidden: $attrs.hidden }, $attrs.class]" v-bind="datePickerProps">
+    <template #dp-input="{ value, onInput, onEnter, onTab, onFocus, onBlur, onClear }">
+      <PInput
+        :model-value="value"
+        v-bind="inputPropsAndAttrs"
+        @input="handleInput($event, onInput, onClear)"
+        @keydown.enter="onEnter($event)"
+        @keydown.tab="onTab($event)"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </template>
+  </VueDatePicker>
 </template>
 
 <script setup lang="ts">
 import PInput from '@squirrel/components/p-input/p-input.vue';
-import dayjs from 'dayjs';
-import { DatePicker } from 'v-calendar';
-import { type StyleValue, computed, nextTick, ref, useAttrs, watch } from 'vue';
-import { isDate, isString } from 'lodash-es';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import VueDatePicker, { type VueDatePickerProps } from '@vuepic/vue-datepicker';
+import { computed, useAttrs } from 'vue';
 
 defineOptions({
   name: 'PDatePicker',
   inheritAttrs: false,
 });
 
-// The type of the select attribute is defined in node_modules/v-calendar/dist/types/src/utils/attribute.d.ts
-// but there was no way to import it, so as a workaround we cast the selectAttribute as `any`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const selectAttribute = { highlight: { class: 'bg-primary', contentClass: 'text-white' } } as any;
-
-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: false,
+  autoApply: true,
+  enableTimePicker: false,
+  modelType: 'yyyy-MM-dd',
+  hideOffsetDates: true,
+  weekStart: 0,
+  textInput: true,
+  format: 'dd-MMM-yyyy',
 });
 
-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 stopWatch = ref(false);
 
 // Computed
-const masks = computed(() => {
-  return Object.assign(DEFAULT_MASKS, attrs.masks);
-});
+const datePickerProps = computed(() => {
+  const { modelValue: _, ...propsWithoutModelValue } = props;
 
-const displayPlaceholder = computed(() => {
-  return isString(attrs.placeholder) ? attrs.placeholder : masks.value.input;
+  return propsWithoutModelValue;
 });
 
-const attrsWithoutClassAndStyle = computed(() => {
-  const { class: classes, style, ...rest } = attrs;
+const inputPropsAndAttrs = computed(() => {
+  const { class: classes, style, ...res } = attrs;
 
-  return rest;
-});
+  res.label = props.label;
+  res.errorMsg = props.errorMsg;
+  res.required = props.required;
+  res.disabled = props.disabled;
+  res.placeholder = props.placeholder ? props.placeholder : props.format;
 
-const style = computed(() => {
-  return attrs.style as StyleValue;
+  return res;
 });
 
-// Watch
-watch(
-  () => props.modelValue,
-  (nV) => {
-    if (!stopWatch.value) {
-      innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
-    }
-  },
-  { immediate: true }
-);
+// Methods
+const handleInput = (e: Event, onInputFn: (e: Event) => void, onClearFn: (e: Event) => void) => {
+  if (e.target instanceof HTMLInputElement && e.target.value === '') {
+    onClearFn(e);
 
-watch(innerValue, (nV) => {
-  // We're emitting back a formatted String (value) or null in case we have an invalid date
-  const toEmit = isDate(nV) && nV.toString() !== 'Invalid Date' ? dayjs(nV).format(masks.value.data) : null;
-  // Stop watching when updating the value by clicking in the datepicker, in order to prevent double-emit.
-  stopWatch.value = true;
-  emit('update:modelValue', toEmit);
-  nextTick(() => {
-    stopWatch.value = false;
-  });
-});
+    return;
+  }
+
+  return onInputFn(e);
+};
 </script>

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

@@ -1,6 +1,6 @@
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
-import { createWrapperFor } from '@tests/vitest.helpers';
 import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 vi.mock('@squirrel/utils/listKeyboardNavigation', () => {
   return {

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

@@ -88,7 +88,7 @@ import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 type VPopper = {
   $refs: {

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

@@ -1,9 +1,9 @@
-import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
 import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
-import { cloneDeep } from 'lodash-es';
+import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
+import { useVirtualizer } from '@tanstack/vue-virtual';
 import { createWrapperFor, sleep, waitRAF } 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(),
@@ -415,7 +415,7 @@ describe('PDropdownSelect.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-dropdown-select/p-dropdown-select.stories.js

@@ -1,7 +1,7 @@
-import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
+import { fieldArgTypes } from '@root/stories/common/field';
 import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
+import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
 import { cloneDeep } from 'lodash-es';
-import { fieldArgTypes } from '@root/stories/common/field';
 import { ref } from 'vue';
 
 const items1 = filterListItems.slice(0, 999);

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

@@ -160,23 +160,23 @@
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
 import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
+import { type ModelValue, type Size, SIZES } from '@squirrel/components/p-select-list/p-select-list.types';
+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 { omit } from 'lodash-es';
 import {
   type ComponentPublicInstance,
-  type PropType,
-  type StyleValue,
   computed,
   onMounted,
   onUnmounted,
+  type PropType,
   ref,
+  type StyleValue,
   useAttrs,
   watch,
 } from 'vue';
-import { type ModelValue, SIZES, type Size } from '@squirrel/components/p-select-list/p-select-list.types';
-import { omit } from 'lodash-es';
-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';
 
 type AnyValue = string | number | boolean | null | undefined | Record<string, unknown>;
 type AnyObject = Record<string, AnyValue>;

package/squirrel/components/p-file-upload/p-file-upload.vue

@@ -70,10 +70,10 @@
 
 <script setup lang="ts">
 import { type FileUploadFile } from '@squirrel/components/p-file-upload/p-file-upload.types';
-import { type PropType, computed, onMounted, ref, shallowRef } from 'vue';
 import { formatBytes, getFileExtension } from '@squirrel/components/p-file-upload/p-file-upload.utils';
-import { uniq } from 'lodash-es';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { uniq } from 'lodash-es';
+import { computed, onMounted, type PropType, ref, shallowRef } from 'vue';
 import { useToast } from 'vue-toastification';
 
 defineOptions({

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

@@ -1,5 +1,5 @@
-import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 const createWrapper = (props, attrs) => {

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

@@ -1,5 +1,5 @@
-import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 
 export default {
   title: 'Components/PIcon',

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

@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { type IconifyIconAttributes } from 'iconify-icon';
-import { type PIconAlias, P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
 import 'iconify-icon';
+import { P_ICON_ALIASES, type PIconAlias } from '@squirrel/components/p-icon/p-icon.types';
+import { type IconifyIconAttributes } from 'iconify-icon';
 
 defineOptions({
   name: 'PIcon',