@pequity/squirrel 5.4.8 → 5.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.8",
+  "version": "5.4.9",
   "packageManager": "pnpm@9.12.3",
   "type": "module",
   "scripts": {
@@ -38,12 +38,11 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
   "peerDependencies": {
-    "@popperjs/core": "^2.11.8",
     "@tanstack/vue-virtual": "^3.8.3",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "dayjs": "^1.11.12",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",
-    "v-calendar": "^3.1.2",
     "vue": "^3.4.33",
     "vue-currency-input": "^3.1.0",
     "vue-router": "^4.4.0",
@@ -54,7 +53,6 @@
     "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^1.0.1",
     "@playwright/test": "^1.48.2",
-    "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^8.4.2",
@@ -69,14 +67,15 @@
     "@storybook/theming": "^8.4.2",
     "@storybook/vue3": "^8.4.2",
     "@storybook/vue3-vite": "^8.4.2",
-    "@tanstack/vue-virtual": "3.10.8",
+    "@tanstack/vue-virtual": "3.10.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.9.0",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.1.5",
     "@vitest/coverage-v8": "^2.1.4",
     "@vue/compiler-sfc": "3.5.12",
     "@vue/test-utils": "^2.4.6",
+    "@vuepic/vue-datepicker": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
     "eslint": "^9.14.0",
@@ -89,7 +88,7 @@
     "lint-staged": "^15.2.10",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
@@ -100,8 +99,7 @@
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.14",
     "typescript": "5.6.3",
-    "v-calendar": "3.1.2",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vitest": "^2.1.4",
     "vue": "3.5.12",
     "vue-currency-input": "3.1.0",

package/squirrel/assets/squirrel.css

@@ -1,6 +1,6 @@
 @import 'floating-vue/dist/style.css';
 @import 'vue-toastification/dist/index.css';
-@import 'v-calendar/style.css';
+@import '@vuepic/vue-datepicker/dist/main.css';
 
 :root {
   /* Design system colors */
@@ -76,16 +76,55 @@
   overflow-wrap: break-word;
 }
 
-/* Datepicker - v-calendar */
-.vc-container.vc-blue {
-  font-family: Inter;
-}
-
 /* Skeleton fade */
 .skeleton-fade {
   mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
 }
 
+/* Date picker - Vue datepicker */
+:root {
+  --dp-font-family: 'Inter', 'Helvetica', 'Arial', 'sans-serif';
+  --dp-cell-border-radius: 50%;
+}
+
+.dp__theme_light {
+  --dp-background-color: rgb(var(--color-surface));
+  --dp-text-color: rgb(var(--color-on-surface));
+  --dp-hover-color: rgb(var(--color-p-blue-10));
+  --dp-hover-text-color: rgb(var(--color-p-gray-100));
+  --dp-hover-icon-color: rgb(var(--color-p-gray-40));
+  --dp-primary-color: rgb(var(--color-primary));
+  --dp-primary-disabled-color: rgb(var(--color-p-blue-40));
+  --dp-primary-text-color: rgb(var(--color-surface));
+  --dp-secondary-color: rgb(var(--color-p-gray-30));
+  --dp-border-color: rgb(var(--color-p-gray-30));
+  --dp-menu-border-color: rgb(var(--color-p-gray-30));
+  --dp-border-color-hover: rgb(var(--color-p-gray-30));
+  --dp-border-color-focus: rgb(var(--color-p-gray-30));
+  --dp-disabled-color: rgb(var(--color-p-blue-10));
+  --dp-scroll-bar-background: rgb(var(--color-p-blue-10));
+  --dp-scroll-bar-color: rgb(var(--color-p-gray-40));
+  --dp-success-color: rgb(var(--color-on-success));
+  --dp-success-color-disabled: rgb(var(--color-p-green-40));
+  --dp-icon-color: rgb(var(--color-p-gray-40));
+  --dp-danger-color: rgb(var(--color-on-error));
+  --dp-marker-color: rgb(var(--color-on-error));
+  --dp-tooltip-color: rgb(var(--color-p-blue-10));
+  --dp-disabled-color-text: rgb(var(--color-p-gray-40));
+  --dp-highlight-color: rgb(var(--color-p-blue-15));
+  --dp-range-between-dates-background-color: var(--dp-hover-color, rgb(var(--color-p-blue-10)));
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, rgb(var(--color-p-gray-100)));
+  --dp-range-between-border-color: var(--dp-hover-color, rgb(var(--color-p-blue-10)));
+}
+
+.dp__theme_light .dp__today {
+  border: 1px solid rgb(var(--color-p-blue-40));
+}
+
+[data-has-error='true'] .dp__theme_light {
+  border-color: var(--dp-danger-color, rgb(var(--color-on-error)));
+}
+
 /* Toasts - vue-toastification */
 .Vue-Toastification__toast {
   font-family: Inter;

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

@@ -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 { useInputClasses } from '@squirrel/composables/useInputClasses';
-import dayjs from 'dayjs';
-import { isDate, isString } from 'lodash-es';
-import { DatePicker } from 'v-calendar';
-import { computed, nextTick, ref, type StyleValue, useAttrs, watch } from 'vue';
+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>