@weni/unnnic-system 3.35.2 → 3.35.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.35.2",
+  "version": "3.35.3",
   "type": "commonjs",
   "files": [
     "dist",
@@ -88,6 +88,7 @@
     "@iconify/vue": "^5.0.0",
     "@vueuse/components": "^10.4.1",
     "@vueuse/core": "^14.0.0",
+    "date-fns": "^4.4.0",
     "dayjs": "^1.11.23",
     "emoji-mart-vue-fast": "^15.0.5",
     "lucide-vue-next": "^0.546.0",
@@ -143,4 +144,4 @@
     "vue-eslint-parser": "^10.4.0",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/DateFilter/DateFilter.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import dayjs from '@/utils/date';
+import { formatDate } from '@/utils/formatDate';
 import UnnnicInput from '../Input/Input.vue';
 
 export default {
@@ -45,23 +45,26 @@ export default {
       type: String,
       default: '',
     },
+    useDateFns: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     dateRange() {
       let range = '';
+      const outputFormat = this.dateFormat.replaceAll('/', '');
 
       if (this.startDate) {
-        const formattedDate = dayjs(this.startDate).format(
-          this.dateFormat.replaceAll('/', ''),
-        );
-        range += formattedDate.toString();
+        range += formatDate(this.startDate, outputFormat, {
+          useDateFns: this.useDateFns,
+        });
       }
 
       if (this.endDate) {
-        const formattedDate = dayjs(this.endDate).format(
-          this.dateFormat.replaceAll('/', ''),
-        );
-        range += formattedDate.toString();
+        range += formatDate(this.endDate, outputFormat, {
+          useDateFns: this.useDateFns,
+        });
       }
 
       return range;

package/src/components/DateFilter/__test__/DateFilter.spec.js

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import DateFilter from '../DateFilter.vue';
+
+const factory = (props = {}) =>
+  mount(DateFilter, {
+    props,
+  });
+
+describe('DateFilter.vue', () => {
+  it('computes dateRange from start and end dates with dayjs', () => {
+    const wrapper = factory({
+      startDate: new Date(2025, 0, 10),
+      endDate: new Date(2025, 0, 20),
+      dateFormat: 'DD/MM/YYYY',
+    });
+
+    expect(wrapper.vm.dateRange).toBe('1001202520012025');
+    wrapper.unmount();
+  });
+
+  it('computes dateRange from start and end dates with date-fns', () => {
+    const wrapper = factory({
+      startDate: new Date(2025, 0, 10),
+      endDate: new Date(2025, 0, 20),
+      dateFormat: 'DD/MM/YYYY',
+      useDateFns: true,
+    });
+
+    expect(wrapper.vm.dateRange).toBe('1001202520012025');
+    wrapper.unmount();
+  });
+
+  it('returns an empty dateRange when there is no date selected', () => {
+    const wrapper = factory();
+
+    expect(wrapper.vm.dateRange).toBe('');
+    wrapper.unmount();
+  });
+});

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -53,7 +53,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useSlots } from 'vue';
-import dayjs from '@/utils/date';
+import { formatDate } from '@/utils/formatDate';
 
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicDatePicker from '../DatePicker/DatePicker.vue';
@@ -110,6 +110,8 @@ interface InputDatePickerProps {
   disabled?: boolean;
 
   disableShowOverwrittenValue?: boolean;
+
+  useDateFns?: boolean;
 }
 
 const props = withDefaults(defineProps<InputDatePickerProps>(), {
@@ -133,6 +135,7 @@ const props = withDefaults(defineProps<InputDatePickerProps>(), {
   periodBaseDate: '',
   disabled: false,
   disableShowOverwrittenValue: false,
+  useDateFns: false,
 });
 
 const emit = defineEmits<{
@@ -146,6 +149,17 @@ const popoverAlign = computed<'start' | 'end'>(() =>
   props.position === 'right' ? 'end' : 'start',
 );
 
+function formatPickerDate(
+  value: string,
+  outputFormat: string,
+  parseFormat?: string,
+) {
+  return formatDate(value, outputFormat, {
+    parseFormat,
+    useDateFns: props.useDateFns,
+  });
+}
+
 const inputText = computed(() => {
   if (props.disableShowOverwrittenValue) {
     return filterText.value || '';
@@ -160,11 +174,11 @@ const filterText = computed(() => {
   const { start, end } = props.modelValue || {};
 
   if (start) {
-    dates.push(dayjs(start, props.format).format(props.inputFormat || ''));
+    dates.push(formatPickerDate(start, props.inputFormat || '', props.format));
   }
 
   if (end) {
-    dates.push(dayjs(end, props.format).format(props.inputFormat || ''));
+    dates.push(formatPickerDate(end, props.inputFormat || '', props.format));
   }
 
   if (!dates.length) {
@@ -178,38 +192,36 @@ const filterText = computed(() => {
 
 const initialStartDate = computed<string | undefined>(() => {
   return props.modelValue.start
-    ? dayjs(props.modelValue.start, props.format).format('MM DD YYYY')
+    ? formatPickerDate(props.modelValue.start, 'MM DD YYYY', props.format)
     : undefined;
 });
 
 const initialEndDate = computed<string | undefined>(() => {
   return props.modelValue.end
-    ? dayjs(props.modelValue.end, props.format).format('MM DD YYYY')
+    ? formatPickerDate(props.modelValue.end, 'MM DD YYYY', props.format)
     : undefined;
 });
 
 function emitSelectDate(date: { startDate: string; endDate: string }) {
   const { startDate, endDate } = date;
   const formattedDates: DateRangeValue = {
-    start: dayjs(startDate, 'MM-DD-YYYY').format(props.format),
-    end: dayjs(endDate, 'MM-DD-YYYY').format(props.format),
+    start: formatPickerDate(startDate, props.format, 'MM-DD-YYYY'),
+    end: formatPickerDate(endDate, props.format, 'MM-DD-YYYY'),
   };
 
   emit('selectDate', formattedDates);
 }
 
 function changeDate(value: { startDate: string; endDate: string }) {
-  const startDate = value.startDate.replace(/(\d+)-(\d+)-(\d+)/, '$3-$1-$2');
-
-  const endDate = value.endDate.replace(/(\d+)-(\d+)-(\d+)/, '$3-$1-$2');
-
   isPopoverOpen.value = false;
 
   emit('update:model-value', {
-    start: startDate
-      ? dayjs(startDate, 'YYYY-MM-DD').format(props.format)
+    start: value.startDate
+      ? formatPickerDate(value.startDate, props.format, 'MM-DD-YYYY')
+      : null,
+    end: value.endDate
+      ? formatPickerDate(value.endDate, props.format, 'MM-DD-YYYY')
       : null,
-    end: endDate ? dayjs(endDate, 'YYYY-MM-DD').format(props.format) : null,
   });
 }
 

package/src/components/InputDatePicker/__test__/InputDatePicker.spec.js

@@ -83,6 +83,21 @@ describe('InputDatePicker.vue', () => {
     withDates.unmount();
   });
 
+  it('computes filterText from start and end dates with date-fns', () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+      format: 'YYYY-MM-DD',
+      inputFormat: 'MM-DD-YYYY',
+      useDateFns: true,
+    });
+
+    expect(withDates.vm.filterText).toBe('01-10-2025 ~ 01-20-2025');
+    withDates.unmount();
+  });
+
   it('computes initialStartDate and initialEndDate for DatePicker', () => {
     const withDates = factory({
       modelValue: {
@@ -96,6 +111,20 @@ describe('InputDatePicker.vue', () => {
     withDates.unmount();
   });
 
+  it('computes initialStartDate and initialEndDate with date-fns', () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+      useDateFns: true,
+    });
+
+    expect(withDates.vm.initialStartDate).toBe('01 10 2025');
+    expect(withDates.vm.initialEndDate).toBe('01 20 2025');
+    withDates.unmount();
+  });
+
   it('emits selectDate with formatted dates when DatePicker emits change', async () => {
     wrapper.vm.isPopoverOpen = true;
     await wrapper.vm.$nextTick();
@@ -119,6 +148,65 @@ describe('InputDatePicker.vue', () => {
     });
   });
 
+  it('emits selectDate with formatted dates using date-fns', async () => {
+    wrapper = factory({ useDateFns: true });
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    await datePicker.vm.$emit('change', {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    });
+
+    const emitted = wrapper.emitted('selectDate');
+    expect(emitted).toBeTruthy();
+
+    const [formatted] = emitted[0];
+    expect(formatted).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+  });
+
+  it('formats unpadded DatePicker dates on selectDate', async () => {
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    await datePicker.vm.$emit('change', {
+      startDate: '9-21-2026',
+      endDate: '9-22-2026',
+    });
+
+    const [formatted] = wrapper.emitted('selectDate')[0];
+    expect(formatted).toEqual({
+      start: '2026-09-21',
+      end: '2026-09-22',
+    });
+  });
+
+  it('formats unpadded DatePicker dates on submit with date-fns', async () => {
+    wrapper = factory({ useDateFns: true });
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    await datePicker.vm.$emit('submit', {
+      startDate: '9-21-2026',
+      endDate: '9-22-2026',
+    });
+
+    const [newValue] = wrapper.emitted('update:model-value')[0];
+    expect(newValue).toEqual({
+      start: '2026-09-21',
+      end: '2026-09-22',
+    });
+  });
+
   it('emits update:model-value and closes dropdown when DatePicker emits submit', async () => {
     wrapper.vm.isPopoverOpen = true;
     await wrapper.vm.$nextTick();
@@ -144,6 +232,30 @@ describe('InputDatePicker.vue', () => {
     expect(wrapper.vm.isPopoverOpen).toBe(false);
   });
 
+  it('emits update:model-value with date-fns and closes dropdown on submit', async () => {
+    wrapper = factory({ useDateFns: true });
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    await datePicker.vm.$emit('submit', {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    });
+
+    const emitted = wrapper.emitted('update:model-value');
+    expect(emitted).toBeTruthy();
+
+    const [newValue] = emitted[0];
+    expect(newValue).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+
+    expect(wrapper.vm.isPopoverOpen).toBe(false);
+  });
+
   it('passes minDate, maxDate, options and periodBaseDate down to DatePicker', async () => {
     const props = {
       minDate: '2025-01-01',

package/src/components/InputDatePicker/__test__/formatDate.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  formatDate,
+  formatWithDateFns,
+  formatWithDayjs,
+} from '@/utils/formatDate';
+
+describe('formatDate helpers', () => {
+  it('formats ISO dates to input format with dayjs', () => {
+    expect(formatWithDayjs('2025-01-10', 'MM-DD-YYYY', 'YYYY-MM-DD')).toBe(
+      '01-10-2025',
+    );
+  });
+
+  it('formats ISO dates to input format with date-fns using dayjs tokens', () => {
+    expect(formatWithDateFns('2025-01-10', 'MM-DD-YYYY', 'YYYY-MM-DD')).toBe(
+      '01-10-2025',
+    );
+  });
+
+  it('formats picker dates to MM DD YYYY with both libraries', () => {
+    expect(formatWithDayjs('2025-01-10', 'MM DD YYYY', 'YYYY-MM-DD')).toBe(
+      '01 10 2025',
+    );
+    expect(formatWithDateFns('2025-01-10', 'MM DD YYYY', 'YYYY-MM-DD')).toBe(
+      '01 10 2025',
+    );
+  });
+
+  it('parses MM-DD-YYYY into YYYY-MM-DD with both libraries', () => {
+    expect(formatWithDayjs('01-10-2025', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2025-01-10',
+    );
+    expect(formatWithDateFns('01-10-2025', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2025-01-10',
+    );
+  });
+
+  it('parses unpadded DatePicker values like 9-21-2026 with both libraries', () => {
+    expect(formatWithDayjs('9-21-2026', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2026-09-21',
+    );
+    expect(formatWithDateFns('9-21-2026', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2026-09-21',
+    );
+    expect(formatWithDayjs('9-5-2026', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2026-09-05',
+    );
+    expect(formatWithDateFns('9-5-2026', 'YYYY-MM-DD', 'MM-DD-YYYY')).toBe(
+      '2026-09-05',
+    );
+  });
+
+  it('dispatches to dayjs by default and to date-fns when useDateFns is true', () => {
+    expect(
+      formatDate('2025-01-10', 'MM-DD-YYYY', { parseFormat: 'YYYY-MM-DD' }),
+    ).toBe('01-10-2025');
+
+    expect(
+      formatDate('2025-01-10', 'MM-DD-YYYY', {
+        parseFormat: 'YYYY-MM-DD',
+        useDateFns: true,
+      }),
+    ).toBe('01-10-2025');
+  });
+
+  it('formats Date objects with both libraries', () => {
+    const date = new Date(2025, 0, 10);
+
+    expect(formatWithDayjs(date, 'DDMMYYYY')).toBe('10012025');
+    expect(formatWithDateFns(date, 'DDMMYYYY')).toBe('10012025');
+    expect(formatDate(date, 'DDMMYYYY', { useDateFns: true })).toBe('10012025');
+  });
+});

package/src/stories/DateFilter.stories.js

@@ -7,6 +7,7 @@ export default {
     dateFormat: { control: { type: 'text' } },
     startDate: { control: { type: 'date' } },
     endDate: { control: { type: 'date' } },
+    useDateFns: { control: 'boolean' },
   },
 };
 

package/src/stories/InputDatePicker.stories.js

@@ -17,6 +17,9 @@ export default {
         options: ['left', 'right'],
       },
     },
+    useDateFns: {
+      control: 'boolean',
+    },
   },
   render: (args) => ({
     components: {

package/src/utils/formatDate.ts

@@ -0,0 +1,76 @@
+import {
+  format as dateFnsFormat,
+  isValid,
+  parse as dateFnsParse,
+} from 'date-fns';
+
+import dayjs from '@/utils/date';
+
+export type DateInput = string | Date;
+
+export type FormatDateOptions = {
+  parseFormat?: string;
+  useDateFns?: boolean;
+};
+
+function toDateFnsFormatPattern(dayjsPattern: string): string {
+  return dayjsPattern.replaceAll('YYYY', 'yyyy').replaceAll('DD', 'dd');
+}
+
+// DatePicker emits unpadded values like "9-21-2026". Padded tokens (MM/DD)
+// fail to parse those in dayjs; unpadded tokens still accept "09-21-2026".
+function toFlexibleDayjsParsePattern(dayjsPattern: string): string {
+  return dayjsPattern.replaceAll('DD', 'D').replaceAll('MM', 'M');
+}
+
+function toDateFnsParsePattern(dayjsPattern: string): string {
+  return toFlexibleDayjsParsePattern(dayjsPattern)
+    .replaceAll('YYYY', 'yyyy')
+    .replaceAll('D', 'd');
+}
+
+export function formatWithDayjs(
+  value: DateInput,
+  outputFormat: string,
+  parseFormat?: string,
+): string {
+  const parsed =
+    parseFormat && typeof value === 'string'
+      ? dayjs(value, toFlexibleDayjsParsePattern(parseFormat))
+      : dayjs(value);
+  return parsed.format(outputFormat);
+}
+
+export function formatWithDateFns(
+  value: DateInput,
+  outputFormat: string,
+  parseFormat?: string,
+): string {
+  let date: Date;
+
+  if (value instanceof Date) {
+    date = value;
+  } else if (parseFormat) {
+    date = dateFnsParse(value, toDateFnsParsePattern(parseFormat), new Date());
+  } else {
+    date = new Date(value);
+  }
+
+  if (!isValid(date)) {
+    return 'Invalid Date';
+  }
+
+  return dateFnsFormat(date, toDateFnsFormatPattern(outputFormat));
+}
+
+export function formatDate(
+  value: DateInput,
+  outputFormat: string,
+  options: FormatDateOptions = {},
+): string {
+  const { parseFormat, useDateFns = false } = options;
+
+  return useDateFns
+    ? formatWithDateFns(value, outputFormat, parseFormat)
+    : formatWithDayjs(value, outputFormat, parseFormat);
+}