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

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

@@ -5,19 +5,6 @@ import Drawer from '../Drawer.vue';
 describe('Drawer.vue', () => {
   let wrapper;
 
-  const templateSlot = { template: `<div><slot /></div>` };
-  const globalStubs = {
-    UnnnicIcon: true,
-    UnnnicButton: true,
-    Teleport: templateSlot,
-    Drawer: templateSlot,
-    DrawerContent: templateSlot,
-    DrawerFooter: templateSlot,
-    DrawerClose: templateSlot,
-    DrawerTitle: templateSlot,
-    DrawerDescription: templateSlot,
-  };
-
   beforeEach(() => {
     wrapper = mount(Drawer, {
       props: {
@@ -28,7 +15,7 @@ describe('Drawer.vue', () => {
         secondaryButtonText: 'Secondary Action',
       },
       global: {
-        stubs: globalStubs,
+        stubs: ['UnnnicIcon', 'UnnnicButton'],
       },
     });
   });
@@ -36,6 +23,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 overlay = () => element('overlay');
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -51,23 +39,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().attributes('open')).toBe('true');
+        expect(drawer().exists()).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(drawer().exists()).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        console.log('wrapper.html()', wrapper.html());
-
-        expect(drawerContainer().attributes('showoverlay')).toBe('true');
+        expect(overlay().exists()).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(overlay().exists()).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -89,11 +75,7 @@ describe('Drawer.vue', () => {
           slots: {
             content: '<div data-testid="slot-content">Slot Content</div>',
           },
-          global: {
-            stubs: globalStubs,
-          },
         });
-
         expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(
           true,
         );
@@ -111,9 +93,6 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<h2 data-testid="custom-title">Custom Title Content</h2>',
           },
-          global: {
-            stubs: globalStubs,
-          },
         });
 
         expect(title().exists()).toBe(false);
@@ -134,9 +113,6 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<div data-testid="custom-title">Slot Title</div>',
           },
-          global: {
-            stubs: globalStubs,
-          },
         });
 
         expect(title().exists()).toBe(false);
@@ -188,7 +164,7 @@ describe('Drawer.vue', () => {
     });
   });
 
-  describe('Interactions', () => {
+  describe('Interactions and Transitions', () => {
     beforeEach(() => {
       vi.useFakeTimers();
     });
@@ -198,6 +174,9 @@ describe('Drawer.vue', () => {
 
     it('should close the drawer when the close icon is clicked', async () => {
       await closeIcon().trigger('click');
+
+      vi.advanceTimersByTime(200);
+
       expect(wrapper.emitted('close')).toBeTruthy();
     });
 
@@ -205,6 +184,8 @@ describe('Drawer.vue', () => {
       await wrapper.setProps({ distinctCloseBack: true });
       await closeIcon().trigger('click');
 
+      vi.advanceTimersByTime(200);
+
       expect(wrapper.emitted('back')).toBeTruthy();
     });
 
@@ -212,6 +193,36 @@ describe('Drawer.vue', () => {
       await closeIcon().trigger('click');
       expect(wrapper.emitted('back')).toBeUndefined();
     });
+
+    it('should correctly handle transitions when closing the drawer', async () => {
+      await wrapper.vm.close();
+      expect(wrapper.vm.showDrawer).toBe(false);
+
+      setTimeout(() => {
+        expect(drawer().exists()).toBe(false);
+      }, 200);
+    });
+
+    it('should handle overlay clicks to close the drawer when withoutOverlay is false', async () => {
+      expect(overlay().exists()).toBe(true);
+      await overlay().trigger('click');
+
+      vi.advanceTimersByTime(200);
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    it('should execute the callback after 200ms timeout and reset showDrawer', async () => {
+      const callbackMock = vi.fn();
+      wrapper.vm.transitionClose(callbackMock);
+
+      expect(wrapper.vm.showDrawer).toBe(false);
+
+      vi.advanceTimersByTime(200);
+
+      expect(callbackMock).toHaveBeenCalled();
+      expect(wrapper.vm.showDrawer).toBe(true);
+    });
   });
 
   describe('Props and Computed Properties', () => {
@@ -264,7 +275,7 @@ describe('Drawer.vue', () => {
 
     it('should use correct icon for close button based on closeIcon prop', async () => {
       await wrapper.setProps({ closeIcon: 'custom_close_icon' });
-      expect(closeIcon().props('iconCenter')).toBe('custom_close_icon');
+      expect(closeIcon().props('icon')).toBe('custom_close_icon');
     });
 
     it('should validate all size prop values correctly', () => {

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

@@ -1,22 +1,23 @@
 // 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">
-    <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="">
-        <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>
-    </header>
-    <section data-v-196de012="" class="unnnic-drawer__content"></section>
-    <div data-v-196de012="" class="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>
-  </div>
-</div>"
+"<aside data-v-196de012="" class="unnnic-drawer" data-testid="drawer">
+  <section data-v-196de012="" class="unnnic-drawer__overlay" data-testid="overlay"></section>
+  <transition-stub data-v-196de012="" name="drawer" appear="true" persisted="false" css="true">
+    <section data-v-196de012="" data-testid="drawer-container" class="unnnic-drawer__container unnnic-drawer__container--md">
+      <header data-v-196de012="" class="unnnic-drawer__header">
+        <section data-v-196de012="" class="unnnic-drawer__title-container">
+          <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
+          <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+        </section>
+        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
+      </header>
+      <section data-v-196de012="" class="unnnic-drawer__content"></section>
+      <footer data-v-196de012="" class="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>
+      </footer>
+    </section>
+  </transition-stub>
+</aside>"
 `;

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>