@weni/unnnic-system 3.11.1-alpha.2 → 3.11.1-alpha.4

package/src/components/DatePicker/__tests__/DatePicker.spec.js

@@ -0,0 +1,227 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import DatePicker from '../DatePicker.vue';
+
+const factory = (props = {}) =>
+  mount(DatePicker, {
+    props: {
+      size: 'large',
+      type: 'day',
+      ...props,
+    },
+    global: {
+      mocks: {
+        $i18n: { locale: 'en-us' },
+      },
+      stubs: {
+        UnnnicButton: true,
+      },
+    },
+  });
+
+const findFirstSelectableDay = (wrapper) =>
+  wrapper
+    .findAll('[data-testid="date-picker-day"]')
+    .find((day) => day.classes().includes('selectable'));
+
+describe('DatePicker.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = factory({
+      options: [
+        { name: 'Last 7 days', id: 'last-7-days' },
+        { name: 'Custom', id: 'custom' },
+      ],
+    });
+  });
+
+  it('renders day view with two months and options', () => {
+    expect(wrapper.find('[data-testid="date-picker-root"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.findAll('[data-testid="date-picker-month-container"]').length,
+    ).toBe(2);
+    expect(wrapper.findAll('[data-testid="date-picker-option"]').length).toBe(
+      2,
+    );
+  });
+
+  it('selects a date range and emits change', async () => {
+    const first = findFirstSelectableDay(wrapper);
+    const second = wrapper
+      .findAll('[data-testid="date-picker-day"]')
+      .reverse()
+      .find((day) => day.classes().includes('selectable'));
+
+    await first.trigger('click');
+    await second.trigger('click');
+
+    const emittedChange = wrapper.emitted('change');
+    expect(emittedChange).toBeTruthy();
+    const [{ startDate, endDate }] = emittedChange.pop();
+    expect(startDate).not.toBe('');
+    expect(endDate).not.toBe('');
+  });
+
+  it('clears selection when clear button is clicked', async () => {
+    const day = findFirstSelectableDay(wrapper);
+    await day.trigger('click');
+
+    await wrapper.find('[data-testid="date-picker-clear"]').trigger('click');
+
+    expect(wrapper.vm.startDate).toBe('');
+    expect(wrapper.vm.endDate).toBe('');
+    expect(wrapper.vm.optionSelected).toBe('');
+  });
+
+  it('submits with selected period and emits equivalent option name', async () => {
+    await wrapper.vm.autoSelect('last-7-days');
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const submit = wrapper.emitted('submit');
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+
+    expect(submit).toBeTruthy();
+    expect(submit[0][0]).toHaveProperty('startDate');
+    expect(submit[0][0]).toHaveProperty('endDate');
+
+    expect(updateEquivalent[0][0]).toBe('Last 7 days');
+  });
+
+  it('submits with custom selection and clears equivalent option', async () => {
+    wrapper.vm.optionSelected = 'custom';
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+    expect(updateEquivalent[0][0]).toBe('');
+  });
+
+  it('uses periodBaseDate to compute relative ranges', async () => {
+    const base = '2025-01-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+
+    await wrapper.vm.autoSelect('last-7-days');
+
+    const [year, month, day] = base.split('-');
+    const baseDate = new Date(Number(year), Number(month) - 1, Number(day));
+    const expectedEnd = wrapper.vm.dateToString(baseDate);
+
+    expect(wrapper.vm.endDate).toBe(expectedEnd);
+  });
+
+  it('renders month view and selects a month', async () => {
+    wrapper = factory({
+      type: 'month',
+      options: [{ name: 'Last 12 months', id: 'last-12-months' }],
+    });
+
+    const monthCell = wrapper.find('[data-testid="date-picker-month-cell"]');
+    await monthCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('renders year view and selects a year', async () => {
+    wrapper = factory({
+      type: 'year',
+      options: [{ name: 'Previous year', id: 'previous-year' }],
+    });
+
+    const yearCell = wrapper.find('[data-testid="date-picker-year-cell"]');
+    await yearCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('hides options when size is small and respects disableClear', async () => {
+    wrapper = factory({
+      size: 'small',
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-options"]').exists()).toBe(
+      false,
+    );
+
+    wrapper = factory({
+      disableClear: true,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-clear"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="date-picker-submit"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('navigates between months using navigation buttons', async () => {
+    const initialReference = wrapper.vm.referenceDate;
+
+    const nextButton = wrapper.find('[data-testid="date-picker-nav-right"]');
+    await nextButton.trigger('click');
+
+    expect(wrapper.vm.referenceDate).not.toBe(initialReference);
+  });
+
+  it('exposes i18n helper compatible with previous mixin', () => {
+    const text = wrapper.vm.i18n('clean', 'Clean');
+    expect(text).toBeTruthy();
+  });
+
+  it('computes previous-month period correctly based on periodBaseDate', () => {
+    const base = '2025-03-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Previous month', id: 'previous-month' }],
+    });
+
+    const { startDate, endDate } =
+      wrapper.vm.getStartAndEndDateByPeriod('previous-month');
+
+    const baseDate = new Date(base);
+    const firstPrevMonth = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth() - 1,
+      1,
+    );
+    const lastPrevMonth = new Date(
+      firstPrevMonth.getFullYear(),
+      firstPrevMonth.getMonth() + 1,
+      0,
+    );
+
+    const expectedStart = wrapper.vm.dateToString(firstPrevMonth);
+    const expectedEnd = wrapper.vm.dateToString(lastPrevMonth);
+
+    expect(startDate).toBe(expectedStart);
+    expect(endDate).toBe(expectedEnd);
+  });
+
+  it('marks dates outside minDate and maxDate as out of range', () => {
+    const min = '2025-02-10';
+    const max = '2025-02-20';
+
+    wrapper = factory({
+      minDate: min,
+      maxDate: max,
+    });
+
+    const [year, month] = min.split('-');
+    const reference = `${Number(month)} 1 ${year}`;
+
+    const dates = wrapper.vm.getDatesOfTheMonth(reference);
+
+    const hasOutOfRange = dates.some((d) =>
+      d.properties.includes('out of range'),
+    );
+
+    expect(hasOutOfRange).toBe(true);
+  });
+});

package/src/components/Drawer/__tests__/Drawer.spec.js

@@ -10,12 +10,6 @@ describe('Drawer.vue', () => {
     UnnnicIcon: true,
     UnnnicButton: true,
     Teleport: templateSlot,
-    Drawer: templateSlot,
-    DrawerContent: templateSlot,
-    DrawerFooter: templateSlot,
-    DrawerClose: templateSlot,
-    DrawerTitle: templateSlot,
-    DrawerDescription: templateSlot,
   };
 
   beforeEach(() => {
@@ -35,7 +29,7 @@ describe('Drawer.vue', () => {
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawer = () => element('drawer');
+  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -43,6 +37,8 @@ describe('Drawer.vue', () => {
   const footer = () => element('footer');
   const closeIcon = () => component('close-icon');
   const drawerContainer = () => element('drawer-container');
+  const drawerContentComponent = () =>
+    wrapper.findComponent({ name: 'UnnnicDrawerContent' });
 
   describe('Component Rendering', () => {
     describe('Component Rendering', () => {
@@ -51,23 +47,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().attributes('open')).toBe('true');
+        expect(drawerRoot().props('open')).toBe(true);
       });
 
       it('should not render the drawer when modelValue is false', async () => {
         await wrapper.setProps({ modelValue: false });
-        expect(drawer().attributes('open')).toBe('false');
+        expect(drawerRoot().props('open')).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        console.log('wrapper.html()', wrapper.html());
-
-        expect(drawerContainer().attributes('showoverlay')).toBe('true');
+        expect(drawerContentComponent().props('showOverlay')).toBe(true);
       });
 
       it('should not render the overlay when withoutOverlay is true', async () => {
         await wrapper.setProps({ withoutOverlay: true });
-        expect(drawerContainer().attributes('showoverlay')).toBe('false');
+        expect(drawerContentComponent().props('showOverlay')).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -217,14 +211,16 @@ describe('Drawer.vue', () => {
   describe('Props and Computed Properties', () => {
     it('should render the correct size class based on size prop', async () => {
       await wrapper.setProps({ size: 'lg' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--lg',
       );
+      expect(drawerContentComponent().props('size')).toBe('large');
 
       await wrapper.setProps({ size: 'xl' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--xl',
       );
+      expect(drawerContentComponent().props('size')).toBe('extra-large');
     });
 
     it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {

package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<div data-v-196de012="" open="true" class="unnnic-drawer" data-testid="drawer">
-  <div data-v-196de012="" showoverlay="true" data-testid="drawer-container" size="medium" class="unnnic-drawer__container unnnic-drawer__container--md">
+"<div data-v-e761d31f="" data-v-196de012="" disabled="false" defer="false" forcemount="false" data-testid="drawer-container">
+  <div data-v-7f241b30="" data-v-e761d31f="" data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="unnnic-drawer__overlay"></div>
+  <div data-v-e761d31f="" data-dismissable-layer="" style="--snap-point-height: 0; --initial-transform: calc(100% + 8px); pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" size="medium" showoverlay="true" class="unnnic-drawer__content unnnic-drawer__content--medium unnnic-drawer__container unnnic-drawer__container--md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <header data-v-39d0dfb8="" data-v-196de012="" class="unnnic-drawer__header unnnic-drawer__header">
       <section data-v-196de012="" class="unnnic-drawer__title-container">
-        <div data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</div>
-        <div data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</div>
-      </section>
-      <div data-v-196de012="">
+        <h2 data-v-97709962="" data-v-196de012="" id="reka-dialog-title-v-0" class="unnnic-drawer__title unnnic-drawer__title" data-testid="drawer-title">Test Title</h2>
+        <p data-v-750ea255="" data-v-196de012="" id="reka-dialog-description-v-1" class="unnnic-drawer__description unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+      </section><button data-v-4a771f40="" data-v-196de012="" type="button" class="unnnic-drawer__close">
         <unnnic-button-stub data-v-196de012="" size="small" text="" type="tertiary" float="false" iconleft="" iconright="" iconcenter="arrow_forward" iconsfilled="false" disabled="false" loading="false" class="unnnic-drawer__close-icon" data-testid="close-icon"></unnnic-button-stub>
-      </div>
+      </button>
     </header>
     <section data-v-196de012="" class="unnnic-drawer__content"></section>
-    <div data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
+    <footer data-v-02ebc5b4="" data-v-196de012="" class="unnnic-drawer__footer unnnic-drawer__footer" data-testid="footer">
       <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
       <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
-    </div>
+    </footer>
   </div>
 </div>"
 `;

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -6,11 +6,11 @@
     <UnnnicInput
       :class="['input', { 'date-picker-input-next': next }]"
       :size="size"
-      :iconLeft="iconPosition === 'left' && 'calendar_month'"
-      :iconRight="iconPosition === 'right' && 'calendar_month'"
+      :iconLeft="iconPosition === 'left' ? 'calendar_month' : undefined"
+      :iconRight="iconPosition === 'right' ? 'calendar_month' : undefined"
       hasCloudyColor
       readonly
-      :modelValue="overwrittenValue || filterText"
+      :modelValue="overwrittenValue || filterText || ''"
       @focus="showCalendarFilter = true"
     />
 
@@ -27,6 +27,7 @@
         :months="months"
         :days="days"
         :options="options"
+        :periodBaseDate="periodBaseDate"
         :initialStartDate="initialStartDate"
         :initialEndDate="initialEndDate"
         :minDate="minDate"
@@ -39,191 +40,156 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import moment from 'moment';
+
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicDatePicker from '../DatePicker/DatePicker.vue';
 
-export default {
-  components: {
-    UnnnicInput,
-    UnnnicDatePicker,
-  },
-  model: {
-    event: 'changed',
-  },
-
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
-    },
-
-    iconPosition: {
-      type: String,
-      default: 'left',
-      validator(position) {
-        return ['left', 'right'].includes(position);
-      },
-    },
-
-    minDate: { type: String, default: '' },
-    maxDate: { type: String, default: '' },
-
-    fillW: {
-      type: Boolean,
-      default: false,
-    },
-
-    type: {
-      type: String,
-      default: 'day',
-    },
-
-    size: {
-      type: String,
-      default: 'md',
-    },
-
-    clearText: {
-      type: String,
-      default: 'Clear',
-    },
-
-    actionText: {
-      type: String,
-      default: 'Filter',
-    },
-
-    months: {
-      type: Array,
-      default: () => [],
-    },
-
-    days: {
-      type: Array,
-      default: () => [],
-    },
-
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    next: {
-      type: Boolean,
-      default: false,
-    },
-
-    format: {
-      type: String,
-      default: 'YYYY-MM-DD',
-    },
-
-    inputFormat: {
-      type: String,
-      default: 'MM-DD-YYYY',
-    },
-
-    position: {
-      type: String,
-      default: 'left',
-    },
-    disableClear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['update:model-value', 'selectDate'],
-
-  data() {
-    return {
-      showCalendarFilter: false,
-      overwrittenValue: '',
-    };
-  },
-
-  computed: {
-    filterText() {
-      const dates = [];
-
-      if (this.modelValue?.start) {
-        dates.push(
-          moment(this.modelValue?.start, this.format).format(this.inputFormat),
-        );
-      }
-
-      if (this.modelValue?.end) {
-        dates.push(
-          moment(this.modelValue?.end, this.format).format(this.inputFormat),
-        );
-      }
-
-      if (!dates.length) {
-        return String(this.inputFormat).replaceAll('-', '/').toLowerCase();
-      }
-
-      return dates.join(' ~ ');
-    },
-
-    initialStartDate() {
-      return this.modelValue.start
-        ? moment(this.modelValue.start, this.format).format('MM DD YYYY')
-        : null;
-    },
-
-    initialEndDate() {
-      return this.modelValue.end
-        ? moment(this.modelValue.end, this.format).format('MM DD YYYY')
-        : null;
-    },
-  },
-
-  mounted() {
-    window.document.body.addEventListener('click', this.mouseout);
-  },
-
-  beforeUnmount() {
-    window.document.body.removeEventListener('click', this.mouseout);
-  },
-
-  methods: {
-    emitSelectDate(date) {
-      const { startDate, endDate } = date;
-      const formattedDates = {
-        start: moment(startDate, 'MM-DD-YYYY').format(this.format),
-        end: moment(endDate, 'MM-DD-YYYY').format(this.format),
-      };
-      this.$emit('selectDate', formattedDates);
-    },
-    mouseout(event) {
-      if (this.$refs.dropdown?.contains(event.target)) {
-        return;
-      }
-
-      this.showCalendarFilter = false;
-    },
-
-    changeDate(value) {
-      const startDate = value.startDate.replace(
-        /(\d+)-(\d+)-(\d+)/,
-        '$3-$1-$2',
-      );
-
-      const endDate = value.endDate.replace(/(\d+)-(\d+)-(\d+)/, '$3-$1-$2');
-
-      this.showCalendarFilter = false;
-
-      this.$emit('update:model-value', {
-        start: startDate
-          ? moment(startDate, 'YYYY-MM-DD').format(this.format)
-          : null,
-        end: endDate ? moment(endDate, 'YYYY-MM-DD').format(this.format) : null,
-      });
-    },
-  },
+defineOptions({
+  name: 'UnnnicInputDatePicker',
+});
+
+type DateRangeValue = {
+  start: string | null;
+  end: string | null;
 };
+
+interface InputDatePickerProps {
+  modelValue: DateRangeValue;
+
+  iconPosition?: 'left' | 'right';
+
+  minDate?: string;
+  maxDate?: string;
+
+  fillW?: boolean;
+
+  type?: 'day' | 'month' | 'year';
+  size?: string;
+
+  clearText?: string;
+  actionText?: string;
+
+  months?: string[];
+  days?: string[];
+  options?: Array<{ name: string; id: string }>;
+
+  next?: boolean;
+
+  format?: string;
+  inputFormat?: string | null;
+
+  position?: 'left' | 'right';
+  disableClear?: boolean;
+
+  periodBaseDate?: string;
+}
+
+const props = withDefaults(defineProps<InputDatePickerProps>(), {
+  iconPosition: 'left',
+  minDate: '',
+  maxDate: '',
+  fillW: false,
+  type: 'day',
+  size: 'md',
+  clearText: 'Clear',
+  actionText: 'Filter',
+  months: () => [],
+  days: () => [],
+  options: () => [],
+  next: false,
+  format: 'YYYY-MM-DD',
+  inputFormat: 'MM-DD-YYYY',
+  position: 'left',
+  disableClear: false,
+  periodBaseDate: '',
+});
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: DateRangeValue): void;
+  (e: 'selectDate', value: DateRangeValue): void;
+}>();
+
+const dropdown = ref<HTMLElement | null>(null);
+const showCalendarFilter = ref(false);
+const overwrittenValue = ref('');
+
+const filterText = computed(() => {
+  const dates: string[] = [];
+
+  const { start, end } = props.modelValue || {};
+
+  if (start) {
+    dates.push(moment(start, props.format).format(props.inputFormat || ''));
+  }
+
+  if (end) {
+    dates.push(moment(end, props.format).format(props.inputFormat || ''));
+  }
+
+  if (!dates.length) {
+    return String(props.inputFormat || '')
+      .replaceAll('-', '/')
+      .toLowerCase();
+  }
+
+  return dates.join(' ~ ');
+});
+
+const initialStartDate = computed<string | undefined>(() => {
+  return props.modelValue.start
+    ? moment(props.modelValue.start, props.format).format('MM DD YYYY')
+    : undefined;
+});
+
+const initialEndDate = computed<string | undefined>(() => {
+  return props.modelValue.end
+    ? moment(props.modelValue.end, props.format).format('MM DD YYYY')
+    : undefined;
+});
+
+function emitSelectDate(date: { startDate: string; endDate: string }) {
+  const { startDate, endDate } = date;
+  const formattedDates: DateRangeValue = {
+    start: moment(startDate, 'MM-DD-YYYY').format(props.format),
+    end: moment(endDate, 'MM-DD-YYYY').format(props.format),
+  };
+
+  emit('selectDate', formattedDates);
+}
+
+function mouseout(event: MouseEvent | { target: EventTarget | null }) {
+  if (dropdown.value?.contains(event.target as Node)) {
+    return;
+  }
+
+  showCalendarFilter.value = false;
+}
+
+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');
+
+  showCalendarFilter.value = false;
+
+  emit('update:model-value', {
+    start: startDate
+      ? moment(startDate, 'YYYY-MM-DD').format(props.format)
+      : null,
+    end: endDate ? moment(endDate, 'YYYY-MM-DD').format(props.format) : null,
+  });
+}
+
+onMounted(() => {
+  window.document.body.addEventListener('click', mouseout as any);
+});
+
+onBeforeUnmount(() => {
+  window.document.body.removeEventListener('click', mouseout as any);
+});
 </script>
 
 <style lang="scss" scoped>