@weni/unnnic-system 3.12.7 → 3.12.8-alpha-teleports.0

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

@@ -1,23 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<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>"
+"<div data-v-196de012="" class="unnnic-drawer" data-testid="drawer" open="true">
+  <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>"
 `;

package/src/components/FormElement/FormElement.vue

@@ -1,37 +1,28 @@
 <template>
-  <section
-    class="unnnic-form-element"
-    :class="{ 'unnnic-form-element--disabled': disabled }"
-  >
-    <UnnnicLabel
-      v-if="label"
-      :label="label"
+  <section class="unnnic-form-element" :class="{ 'unnnic-form-element--disabled': disabled }">
+    <UnnnicLabel 
+      v-if="label" 
+      :label="label" 
       :tooltip="tooltip"
       :class="[
         'unnnic-form-element__label',
         {
           'unnnic-form-element__label--fixed': fixedLabel,
         },
-      ]"
+      ]" 
     />
 
     <slot></slot>
 
-    <section
+    <section 
       class="unnnic-form-element__hints-container"
       v-if="message || error || !!$slots.rightMessage"
     >
       <section class="unnnic-form-element__message-container">
-        <p
-          v-if="message"
-          class="unnnic-form-element__message"
-        >
+        <p v-if="message" class="unnnic-form-element__message">
           {{ fullySanitize(message) }}
         </p>
-        <p
-          v-if="!!error?.length"
-          class="unnnic-form-element__message error"
-        >
+        <p v-if="!!error?.length" class="unnnic-form-element__message error">
           {{ Array.isArray(error) ? error.join(', ') : error }}
         </p>
       </section>
@@ -43,104 +34,104 @@
 </template>
 
 <script lang="js">
-import { fullySanitize } from '../../utils/sanitize';
-import UnnnicLabel from '../Label/Label.vue';
-
-export default {
-  components: {
-    UnnnicLabel,
-  },
-  props: {
-    size: {
-      type: String,
-      default: 'md',
-      validator: (size) => ['md', 'sm'].includes(size),
+  import { fullySanitize } from '../../utils/sanitize';
+  import UnnnicLabel from '../Label/Label.vue';
+
+  export default {
+    components: {
+      UnnnicLabel,
     },
+    props: {
+      size: {
+        type: String,
+        default: 'md',
+        validator: (size) => ['md', 'sm'].includes(size),
+      },
 
-    label: { type: String, default: '' },
+      label: { type: String, default: '' },
 
-    fixedLabel: { type: Boolean, default: false },
+      fixedLabel: { type: Boolean, default: false },
 
-    error: {
-      type: [Boolean, String],
-      default: false,
-    },
+      error: {
+        type: [Boolean, String],
+        default: false,
+      },
 
-    message: { type: String, default: '' },
+      message: { type: String, default: '' },
 
-    disabled: { type: Boolean, default: false },
+      disabled: { type: Boolean, default: false },
 
-    tooltip: { type: String, default: '' },
-  },
-  methods: {
-    fullySanitize,
-  },
-};
+      tooltip: { type: String, default: '' },
+    },
+    methods: {
+      fullySanitize,
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: $unnnic-space-0;
-  padding: $unnnic-space-0;
-  box-sizing: border-box;
-}
-
-.unnnic-form-element {
-  &__label {
-    font: $unnnic-font-body;
-    color: $unnnic-color-neutral-cloudy;
-    margin-bottom: $unnnic-space-1;
-    display: flex;
-    align-items: center;
-    gap: $unnnic-space-2;
-
-    &--fixed {
-      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
-    }
+  @use '@/assets/scss/unnnic' as *;
+
+  * {
+    margin: $unnnic-space-0;
+    padding: $unnnic-space-0;
+    box-sizing: border-box;
+  }
 
-    &--fixed {
-      margin-bottom: $unnnic-space-0;
-      position: absolute;
-      padding: $unnnic-space-0 $unnnic-space-1;
-      margin-left: $unnnic-space-2;
+  .unnnic-form-element {
+    &__label {
+      font: $unnnic-font-body;
+      color: $unnnic-color-neutral-cloudy;
+      margin-bottom: $unnnic-space-1;
+      display: flex;
+      align-items: center;
+      gap: $unnnic-space-2;
+
+      &--fixed {
+        margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
+      }
 
-      &:after {
-        content: ' ';
+      &--fixed {
+        margin-bottom: $unnnic-space-0;
         position: absolute;
-        left: $unnnic-space-0;
-        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
-        width: 100%;
-        height: $unnnic-border-width-thinner;
-        background-color: $unnnic-color-white;
+        padding: $unnnic-space-0 $unnnic-space-1;
+        margin-left: $unnnic-space-2;
+
+        &:after {
+          content: ' ';
+          position: absolute;
+          left: $unnnic-space-0;
+          bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
+          width: 100%;
+          height: $unnnic-border-width-thinner;
+          background-color: $unnnic-color-white;
+        }
       }
     }
-  }
 
-  &__message {
-    &.error {
-      color: $unnnic-color-fg-critical;
+    &__message {
+      &.error {
+        color: $unnnic-color-fg-critical;
+      }
     }
-  }
 
-  &__hints-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $unnnic-space-1;
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
-  }
+    &__hints-container {
+      display: flex;
+      justify-content: space-between;
+      margin-top: $unnnic-space-1;
+      font: $unnnic-font-caption-2;
+      color: $unnnic-color-fg-base;
+    }
 
-  &__message-container {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-1;
-  }
+    &__message-container {
+      display: flex;
+      flex-direction: column;
+      gap: $unnnic-space-1;
+    }
 
-  &--disabled .unnnic-form-element__label,
-  &--disabled .unnnic-form-element__message {
-    user-select: none;
+    &--disabled .unnnic-form-element__label,
+    &--disabled .unnnic-form-element__message {
+      user-select: none;
+    }
   }
-}
 </style>

package/src/components/Input/Input.vue

@@ -43,8 +43,8 @@ import UnnnicFormElement from '../FormElement/FormElement.vue';
 
 export default {
   name: 'UnnnicInput',
-  components: {
-    TextInput,
+  components: { 
+    TextInput, 
     UnnnicFormElement,
   },
   props: {

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -1,51 +1,61 @@
 <template>
-  <div
-    ref="dropdown"
-    :class="['dropdown', { active: showCalendarFilter, 'fill-w': fillW }]"
-  >
-    <UnnnicInput
-      :class="['input', { 'date-picker-input-next': next }]"
-      :size="size"
-      :iconLeft="iconPosition === 'left' ? 'calendar_month' : undefined"
-      :iconRight="iconPosition === 'right' ? 'calendar_month' : undefined"
-      hasCloudyColor
-      readonly
-      :modelValue="overwrittenValue || filterText || ''"
-      @focus="showCalendarFilter = true"
-    />
-
-    <div
-      class="dropdown-data"
-      :style="{ [position]: '0' }"
-    >
-      <UnnnicDatePicker
-        v-if="showCalendarFilter"
-        v-model:equivalentOption="overwrittenValue"
-        :type="type"
-        :clearLabel="clearText"
-        :actionLabel="actionText"
-        :months="months"
-        :days="days"
-        :options="options"
-        :periodBaseDate="periodBaseDate"
-        :initialStartDate="initialStartDate"
-        :initialEndDate="initialEndDate"
-        :minDate="minDate"
-        :maxDate="maxDate"
-        :disableClear="disableClear"
-        @change="emitSelectDate"
-        @submit="changeDate"
-      />
-    </div>
+  <div :class="['dropdown', { 'fill-w': fillW }]">
+    <UnnnicPopover v-model:open="isPopoverOpen">
+      <UnnnicPopoverTrigger :asChild="true">
+        <UnnnicInput
+          data-testid="input"
+          :class="['input', { 'date-picker-input-next': next }]"
+          :size="size"
+          :iconLeft="iconPosition === 'left' ? 'calendar_month' : undefined"
+          :iconRight="iconPosition === 'right' ? 'calendar_month' : undefined"
+          readonly
+          :modelValue="overwrittenValue || filterText || ''"
+          @click="openPopover"
+          @focus="openPopover"
+        />
+      </UnnnicPopoverTrigger>
+
+      <UnnnicPopoverContent
+        width="auto"
+        side="bottom"
+        :align="popoverAlign"
+        class="date-picker-popover-content"
+      >
+        <UnnnicDatePicker
+          v-model:equivalentOption="overwrittenValue"
+          data-testid="date-picker"
+          variant="popover"
+          :type="type"
+          :clearLabel="clearText"
+          :actionLabel="actionText"
+          :months="months"
+          :days="days"
+          :options="options"
+          :periodBaseDate="periodBaseDate"
+          :initialStartDate="initialStartDate"
+          :initialEndDate="initialEndDate"
+          :minDate="minDate"
+          :maxDate="maxDate"
+          :disableClear="disableClear"
+          @change="emitSelectDate"
+          @submit="changeDate"
+        />
+      </UnnnicPopoverContent>
+    </UnnnicPopover>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import moment from 'moment';
 
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicDatePicker from '../DatePicker/DatePicker.vue';
+import {
+  Popover as UnnnicPopover,
+  PopoverContent as UnnnicPopoverContent,
+  PopoverTrigger as UnnnicPopoverTrigger,
+} from '../ui/popover';
 
 defineOptions({
   name: 'UnnnicInputDatePicker',
@@ -112,9 +122,11 @@ const emit = defineEmits<{
   (e: 'selectDate', value: DateRangeValue): void;
 }>();
 
-const dropdown = ref<HTMLElement | null>(null);
-const showCalendarFilter = ref(false);
+const isPopoverOpen = ref(false);
 const overwrittenValue = ref('');
+const popoverAlign = computed<'start' | 'end'>(() =>
+  props.position === 'right' ? 'end' : 'start',
+);
 
 const filterText = computed(() => {
   const dates: string[] = [];
@@ -160,20 +172,12 @@ function emitSelectDate(date: { startDate: string; endDate: string }) {
   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;
+  isPopoverOpen.value = false;
 
   emit('update:model-value', {
     start: startDate
@@ -183,39 +187,30 @@ function changeDate(value: { startDate: string; endDate: string }) {
   });
 }
 
-onMounted(() => {
-  window.document.body.addEventListener('click', mouseout as any);
-});
-
-onBeforeUnmount(() => {
-  window.document.body.removeEventListener('click', mouseout as any);
-});
+function openPopover() {
+  isPopoverOpen.value = true;
+}
 </script>
 
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+.date-picker-popover-content {
+  overflow: hidden;
+  border-radius: $unnnic-radius-2;
+  padding: 0;
+}
+</style>
+
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 .fill-w {
   width: 100%;
 }
+
 .dropdown {
-  position: relative;
   display: inline-block;
 
-  .dropdown-data {
-    position: absolute;
-    pointer-events: none;
-    display: none;
-    top: 100%;
-    z-index: 2;
-    margin-top: $unnnic-spacing-stack-nano;
-    width: max-content;
-  }
-
-  &.active .dropdown-data {
-    pointer-events: auto;
-    display: block;
-  }
-
   .input {
     display: inline-block;
   }

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import InputDatePicker from '../InputDatePicker.vue';
 
 const factory = (props = {}) =>
@@ -11,20 +12,7 @@ const factory = (props = {}) =>
       },
       ...props,
     },
-    global: {
-      stubs: {
-        UnnnicInput: {
-          name: 'UnnnicInput',
-          template:
-            '<input data-testid="input" v-bind="$attrs" @focus="$emit(\'focus\', $event)" />',
-        },
-        UnnnicDatePicker: {
-          name: 'UnnnicDatePicker',
-          props: ['minDate', 'maxDate', 'periodBaseDate', 'options'],
-          template: '<div data-testid="datepicker"></div>',
-        },
-      },
-    },
+    attachTo: document.body,
   });
 
 describe('InputDatePicker.vue', () => {
@@ -34,6 +22,12 @@ describe('InputDatePicker.vue', () => {
     wrapper = factory();
   });
 
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
   it('renders input and does not show datepicker by default', () => {
     expect(wrapper.find('[data-testid="input"]').exists()).toBe(true);
     expect(wrapper.find('[data-testid="datepicker"]').exists()).toBe(false);
@@ -42,13 +36,23 @@ describe('InputDatePicker.vue', () => {
   it('opens datepicker when input receives focus', async () => {
     const input = wrapper.find('[data-testid="input"]');
     await input.trigger('focus');
+    await wrapper.vm.$nextTick();
 
-    wrapper.vm.showCalendarFilter = true;
+    expect(wrapper.findComponent({ name: 'UnnnicDatePicker' }).exists()).toBe(
+      true,
+    );
+    expect(wrapper.vm.isPopoverOpen).toBe(true);
+  });
+
+  it('opens datepicker when input receives click', async () => {
+    const input = wrapper.find('[data-testid="input"]');
+    await input.trigger('click');
     await wrapper.vm.$nextTick();
 
     expect(wrapper.findComponent({ name: 'UnnnicDatePicker' }).exists()).toBe(
       true,
     );
+    expect(wrapper.vm.isPopoverOpen).toBe(true);
   });
 
   it('computes filterText placeholder when there is no date selected', () => {
@@ -66,6 +70,7 @@ describe('InputDatePicker.vue', () => {
     });
 
     expect(withDates.vm.filterText).toBe('01-10-2025 ~ 01-20-2025');
+    withDates.unmount();
   });
 
   it('computes initialStartDate and initialEndDate for DatePicker', () => {
@@ -78,10 +83,11 @@ describe('InputDatePicker.vue', () => {
 
     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.showCalendarFilter = true;
+    wrapper.vm.isPopoverOpen = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -104,7 +110,7 @@ describe('InputDatePicker.vue', () => {
   });
 
   it('emits update:model-value and closes dropdown when DatePicker emits submit', async () => {
-    wrapper.vm.showCalendarFilter = true;
+    wrapper.vm.isPopoverOpen = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -125,7 +131,7 @@ describe('InputDatePicker.vue', () => {
       end: '2025-01-20',
     });
 
-    expect(wrapper.vm.showCalendarFilter).toBe(false);
+    expect(wrapper.vm.isPopoverOpen).toBe(false);
   });
 
   it('passes minDate, maxDate, options and periodBaseDate down to DatePicker', async () => {
@@ -137,7 +143,7 @@ describe('InputDatePicker.vue', () => {
     };
 
     wrapper = factory(props);
-    wrapper.vm.showCalendarFilter = true;
+    wrapper.vm.isPopoverOpen = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -147,13 +153,14 @@ describe('InputDatePicker.vue', () => {
     expect(dpProps.maxDate).toBe(props.maxDate);
     expect(dpProps.periodBaseDate).toBe(props.periodBaseDate);
     expect(dpProps.options).toEqual(props.options);
+    expect(dpProps.variant).toBe('popover');
   });
 
-  it('closes dropdown on mouseout when clicking outside', () => {
-    wrapper.vm.showCalendarFilter = true;
+  it('aligns the popover to the end when position is right', () => {
+    const rightWrapper = factory({ position: 'right' });
 
-    wrapper.vm.mouseout({ target: document.createElement('div') });
+    expect(rightWrapper.vm.popoverAlign).toBe('end');
 
-    expect(wrapper.vm.showCalendarFilter).toBe(false);
+    rightWrapper.unmount();
   });
 });