@weni/unnnic-system 3.14.0-alpha-teleports.0 → 3.15.0

package/src/components/FormElement/FormElement.vue

@@ -1,28 +1,37 @@
 <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>
@@ -34,104 +43,104 @@
 </template>
 
 <script lang="js">
-  import { fullySanitize } from '../../utils/sanitize';
-  import UnnnicLabel from '../Label/Label.vue';
-
-  export default {
-    components: {
-      UnnnicLabel,
+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),
     },
-    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;
-  }
+@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;
+    }
 
-  .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;
-      }
+    &--fixed {
+      margin-bottom: $unnnic-space-0;
+      position: absolute;
+      padding: $unnnic-space-0 $unnnic-space-1;
+      margin-left: $unnnic-space-2;
 
-      &--fixed {
-        margin-bottom: $unnnic-space-0;
+      &:after {
+        content: ' ';
         position: absolute;
-        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;
-        }
+        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/InputDatePicker/InputDatePicker.vue

@@ -1,61 +1,51 @@
 <template>
-  <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
+    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>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, 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',
@@ -122,11 +112,9 @@ const emit = defineEmits<{
   (e: 'selectDate', value: DateRangeValue): void;
 }>();
 
-const isPopoverOpen = ref(false);
+const dropdown = ref<HTMLElement | null>(null);
+const showCalendarFilter = ref(false);
 const overwrittenValue = ref('');
-const popoverAlign = computed<'start' | 'end'>(() =>
-  props.position === 'right' ? 'end' : 'start',
-);
 
 const filterText = computed(() => {
   const dates: string[] = [];
@@ -172,12 +160,20 @@ 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');
 
-  isPopoverOpen.value = false;
+  showCalendarFilter.value = false;
 
   emit('update:model-value', {
     start: startDate
@@ -187,30 +183,39 @@ function changeDate(value: { startDate: string; endDate: string }) {
   });
 }
 
-function openPopover() {
-  isPopoverOpen.value = true;
-}
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
+onMounted(() => {
+  window.document.body.addEventListener('click', mouseout as any);
+});
 
-.date-picker-popover-content {
-  overflow: hidden;
-  border-radius: $unnnic-radius-2;
-  padding: 0;
-}
-</style>
+onBeforeUnmount(() => {
+  window.document.body.removeEventListener('click', mouseout as any);
+});
+</script>
 
 <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,6 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
+import { beforeEach, describe, expect, it } from 'vitest';
 import InputDatePicker from '../InputDatePicker.vue';
 
 const factory = (props = {}) =>
@@ -12,7 +11,20 @@ const factory = (props = {}) =>
       },
       ...props,
     },
-    attachTo: document.body,
+    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>',
+        },
+      },
+    },
   });
 
 describe('InputDatePicker.vue', () => {
@@ -22,12 +34,6 @@ 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);
@@ -36,23 +42,13 @@ 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();
 
-    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');
+    wrapper.vm.showCalendarFilter = true;
     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', () => {
@@ -70,7 +66,6 @@ describe('InputDatePicker.vue', () => {
     });
 
     expect(withDates.vm.filterText).toBe('01-10-2025 ~ 01-20-2025');
-    withDates.unmount();
   });
 
   it('computes initialStartDate and initialEndDate for DatePicker', () => {
@@ -83,11 +78,10 @@ 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.isPopoverOpen = true;
+    wrapper.vm.showCalendarFilter = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -110,7 +104,7 @@ describe('InputDatePicker.vue', () => {
   });
 
   it('emits update:model-value and closes dropdown when DatePicker emits submit', async () => {
-    wrapper.vm.isPopoverOpen = true;
+    wrapper.vm.showCalendarFilter = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -131,7 +125,7 @@ describe('InputDatePicker.vue', () => {
       end: '2025-01-20',
     });
 
-    expect(wrapper.vm.isPopoverOpen).toBe(false);
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
   });
 
   it('passes minDate, maxDate, options and periodBaseDate down to DatePicker', async () => {
@@ -143,7 +137,7 @@ describe('InputDatePicker.vue', () => {
     };
 
     wrapper = factory(props);
-    wrapper.vm.isPopoverOpen = true;
+    wrapper.vm.showCalendarFilter = true;
     await wrapper.vm.$nextTick();
 
     const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
@@ -153,14 +147,13 @@ 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('aligns the popover to the end when position is right', () => {
-    const rightWrapper = factory({ position: 'right' });
+  it('closes dropdown on mouseout when clicking outside', () => {
+    wrapper.vm.showCalendarFilter = true;
 
-    expect(rightWrapper.vm.popoverAlign).toBe('end');
+    wrapper.vm.mouseout({ target: document.createElement('div') });
 
-    rightWrapper.unmount();
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
   });
 });