@pequity/squirrel 5.4.8 → 5.4.9

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

@@ -1,17 +1,12 @@
 import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
-import { DatePicker } from 'v-calendar';
 
 const createWrapper = (props) => {
   return createWrapperFor(PInlineDatePicker, {
     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

@@ -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 { useInputClasses } from '@squirrel/composables/useInputClasses';
-import dayjs from 'dayjs';
-import { DatePicker } from 'v-calendar';
-import { type AttributeConfig } from 'v-calendar/dist/types/src/utils/attribute.d';
-import { computed, ref, type StyleValue, useAttrs, watch } from 'vue';
+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>