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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.7-alpha-teleports.0",
+  "version": "3.12.8-alpha-teleports.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/DatePicker/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="unnnic-date-picker"
+    :class="['unnnic-date-picker', `unnnic-date-picker--${props.variant}`]"
     data-testid="date-picker-root"
   >
     <template v-if="type === 'day'">
@@ -296,6 +296,8 @@ export interface DatePickerProps {
 
   locale?: string;
   translations?: Record<string, unknown>;
+
+  variant?: 'card' | 'popover';
 }
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
@@ -315,6 +317,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   disableClear: false,
   locale: undefined,
   translations: undefined,
+  variant: 'card',
 });
 
 const emit = defineEmits<{
@@ -963,6 +966,13 @@ onMounted(() => {
   box-shadow: $unnnic-shadow-level-separated;
   overflow: hidden;
 
+  &--popover {
+    background-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
+  }
+
   .month-container {
     display: flex;
     flex-direction: column;

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();
   });
 });

package/src/components/ModalDialog/ModalDialog.vue

@@ -77,8 +77,8 @@
             class="unnnic-modal-dialog__container__actions__primary-button"
             @click.stop="$emit('primaryButtonClick')"
           />
-          </UnnnicDialogFooter>
-        </section>
+        </UnnnicDialogFooter>
+      </section>
     </UnnnicDialogContent>
   </UnnnicDialog>
 </template>
@@ -102,8 +102,8 @@ export default {
     UnnnicDialogTitle,
     UnnnicDialogFooter,
   },
-  inheritAttrs: false,
   mixins: [UnnnicI18n],
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
 import ModalDialog from '../ModalDialog.vue';
 
 describe('ModalDialog.vue', () => {
@@ -43,4 +43,34 @@ describe('ModalDialog.vue', () => {
       expect(modalContainer.attributes('size')).toContain('small');
     });
   });
+
+  describe('persistentHandler', () => {
+    it('prevents default when persistent is true', () => {
+      wrapper = mount(ModalDialog, {
+        props: {
+          title: 'Test Title',
+          modelValue: true,
+          persistent: true,
+          primaryButtonProps: { text: 'Confirm' },
+        },
+        global: {
+          stubs: [
+            'teleport',
+            'UnnnicIcon',
+            'UnnnicButton',
+            'UnnnicDialogContent',
+          ],
+        },
+      });
+
+      const mockEvent = {
+        preventDefault: vi.fn(),
+        target: document.createElement('div'),
+      };
+
+      wrapper.vm.persistentHandler(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+  });
 });

package/src/components/ui/popover/PopoverContent.vue

@@ -2,14 +2,13 @@
   <PopoverPortal :to="portalTarget">
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
+      :style="{ width: contentWidth, zIndex: popoverZIndex }"
       :class="
         cn(
           'unnnic-popover',
-          `unnnic-popover--size-${props.size}`,
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
-      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -46,7 +45,8 @@ const props = withDefaults(
   defineProps<
     PopoverContentProps & {
       class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
+      size?: string;
+      width?: string;
     }
   >(),
   {
@@ -54,6 +54,7 @@ const props = withDefaults(
     sideOffset: 4,
     size: 'medium',
     class: '',
+    width: '',
   },
 );
 const emits = defineEmits<PopoverContentEmits>();
@@ -85,6 +86,18 @@ const footerChildren = computed(() => {
     (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
   );
 });
+
+const contentWidth = computed(() => {
+  if (props.width) return props.width;
+
+  const sizes = {
+    small: '240px',
+    medium: '320px',
+    large: '400px',
+  };
+
+  return sizes[props.size as keyof typeof sizes];
+});
 </script>
 
 <style lang="scss">
@@ -95,15 +108,20 @@ $popover-space: $unnnic-space-4;
 .unnnic-popover {
   border-radius: $unnnic-radius-2;
   box-shadow: $unnnic-shadow-1;
+  border: 1px solid $unnnic-color-border-soft;
 
-  &--size-small {
-    width: 240px;
+  &::-webkit-scrollbar {
+    width: $unnnic-space-1;
   }
-  &--size-medium {
-    width: 320px;
+
+  &::-webkit-scrollbar-thumb {
+    background: $unnnic-color-neutral-cleanest;
+    border-radius: $unnnic-border-radius-pill;
   }
-  &--size-large {
-    width: 400px;
+
+  &::-webkit-scrollbar-track {
+    background: $unnnic-color-neutral-soft;
+    border-radius: $unnnic-border-radius-pill;
   }
 
   &__content {

package/src/components/ui/popover/PopoverOption.vue

@@ -76,7 +76,7 @@ const schemeColor = computed(() => {
 .unnnic-popover-option {
   cursor: pointer;
   border-radius: $unnnic-radius-2;
-  padding: $unnnic-space-2;
+  padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
   display: flex;
   gap: $unnnic-space-2;

package/src/stories/ModalDialog.stories.js

@@ -1,6 +1,9 @@
 import UnnnicModalDialog from '../components/ModalDialog/ModalDialog.vue';
 import UnnnicInput from '../components/Input/Input.vue';
 import UnnnicLabel from '../components/Label/Label.vue';
+import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicSwitch from '../components/Switch/Switch.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 import { action } from '@storybook/addon-actions';
 import iconsList from '../utils/iconList';
@@ -182,6 +185,85 @@ const TemplateLeftSidebar = (args) => ({
   },
 });
 
+const TemplateWithDatePicker = (args) => ({
+  components: {
+    UnnnicModalDialog,
+    UnnnicInputDatePicker,
+    UnnnicSwitch,
+    UnnnicButton,
+  },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  data() {
+    return {
+      forms: [{ date: { start: null, end: null }, repeat: false }],
+      isLoading: false,
+    };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal with DatePicker</button>
+    <unnnic-modal-dialog 
+      v-bind="args" 
+      @primaryButtonClick="handleSave" 
+      @secondaryButtonClick="secondaryButtonClick" 
+      @update:modelValue="updateModelValue"
+    >
+      <section style="display: flex; flex-direction: column; gap: 16px;">
+        <section 
+          v-for="(form, index) in forms"
+          :key="index"
+          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #E2E6ED; border-radius: 8px;"
+        >
+          <section style="display: flex; flex-direction: column; gap: 8px;">
+            <p style="font-family: 'Lato'; font-size: 14px; font-weight: 600; margin: 0; color: #3B414D;">
+              Select date or period
+            </p>
+            <UnnnicInputDatePicker
+              v-model="form.date"
+              :options="[{ id: 'custom', name: 'Custom' }]"
+              next
+              fillW
+              actionText="Confirm"
+              disableClear
+            />
+          </section>
+          <UnnnicSwitch
+            v-model="form.repeat"
+            textRight="Repeat annually"
+            size="small"
+          />
+        </section>
+        <UnnnicButton
+          iconCenter="add-1"
+          type="tertiary"
+          text="Add"
+          @click="addForm"
+        />
+      </section>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+    handleSave() {
+      action('primaryButtonClick')();
+      action('save')(this.forms);
+      console.log('Forms data:', this.forms);
+    },
+    addForm() {
+      this.forms.push({ date: { start: null, end: null }, repeat: false });
+      action('addForm')();
+    },
+  },
+});
+
 export const Default = Template.bind({});
 Default.args = {
   title: 'Default Modal',
@@ -261,3 +343,16 @@ Image.args = {
   },
   showActionsDivider: true,
 };
+
+export const WithDatePicker = TemplateWithDatePicker.bind({});
+WithDatePicker.args = {
+  title: 'Add Non-Working Dates',
+  type: '',
+  primaryButtonProps: {
+    text: 'Save',
+    loading: false,
+  },
+  secondaryButtonProps: {
+    text: 'Cancel',
+  },
+};

package/src/stories/Popover.stories.js

@@ -26,6 +26,11 @@ export default {
     },
   },
   argTypes: {
+    width: {
+      control: { type: 'text' },
+      description:
+        'The width of the popover. This overrides the size prop. If not provided, the size prop will be used.',
+    },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],