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

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>

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

@@ -0,0 +1,159 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import InputDatePicker from '../InputDatePicker.vue';
+
+const factory = (props = {}) =>
+  mount(InputDatePicker, {
+    props: {
+      modelValue: {
+        start: null,
+        end: null,
+      },
+      ...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>',
+        },
+      },
+    },
+  });
+
+describe('InputDatePicker.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = factory();
+  });
+
+  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);
+  });
+
+  it('opens datepicker when input receives focus', async () => {
+    const input = wrapper.find('[data-testid="input"]');
+    await input.trigger('focus');
+
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent({ name: 'UnnnicDatePicker' }).exists()).toBe(
+      true,
+    );
+  });
+
+  it('computes filterText placeholder when there is no date selected', () => {
+    expect(wrapper.vm.filterText).toBe('mm/dd/yyyy');
+  });
+
+  it('computes filterText from start and end dates', async () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+      format: 'YYYY-MM-DD',
+      inputFormat: 'MM-DD-YYYY',
+    });
+
+    expect(withDates.vm.filterText).toBe('01-10-2025 ~ 01-20-2025');
+  });
+
+  it('computes initialStartDate and initialEndDate for DatePicker', () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+    });
+
+    expect(withDates.vm.initialStartDate).toBe('01 10 2025');
+    expect(withDates.vm.initialEndDate).toBe('01 20 2025');
+  });
+
+  it('emits selectDate with formatted dates when DatePicker emits change', async () => {
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    const payload = {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    };
+
+    await datePicker.vm.$emit('change', payload);
+
+    const emitted = wrapper.emitted('selectDate');
+    expect(emitted).toBeTruthy();
+
+    const [formatted] = emitted[0];
+    expect(formatted).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+  });
+
+  it('emits update:model-value and closes dropdown when DatePicker emits submit', async () => {
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    const payload = {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    };
+
+    await datePicker.vm.$emit('submit', payload);
+
+    const emitted = wrapper.emitted('update:model-value');
+    expect(emitted).toBeTruthy();
+
+    const [newValue] = emitted[0];
+    expect(newValue).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
+  });
+
+  it('passes minDate, maxDate, options and periodBaseDate down to DatePicker', async () => {
+    const props = {
+      minDate: '2025-01-01',
+      maxDate: '2025-01-31',
+      periodBaseDate: '2025-01-15',
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    };
+
+    wrapper = factory(props);
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+    const dpProps = datePicker.props();
+
+    expect(dpProps.minDate).toBe(props.minDate);
+    expect(dpProps.maxDate).toBe(props.maxDate);
+    expect(dpProps.periodBaseDate).toBe(props.periodBaseDate);
+    expect(dpProps.options).toEqual(props.options);
+  });
+
+  it('closes dropdown on mouseout when clicking outside', () => {
+    wrapper.vm.showCalendarFilter = true;
+
+    wrapper.vm.mouseout({ target: document.createElement('div') });
+
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
+  });
+});

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-b3d24f2b="" class="unnnic-tooltip-trigger" data-testid="tooltip-trigger" data-state="closed" data-grace-area-trigger=""><span data-v-26446d8e="" data-v-b4e39fac="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-b3d24f2b="" class="unnnic-tooltip-trigger" data-testid="tooltip-trigger" data-state="closed" data-grace-area-trigger=""><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span></div>
         <!--teleport start-->
         <!--teleport end-->
       </li>

package/src/components/ui/drawer/Drawer.vue

@@ -3,6 +3,10 @@ import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue';
 import { useForwardPropsEmits } from 'reka-ui';
 import { DrawerRoot } from 'vaul-vue';
 
+defineOptions({
+  name: 'UnnnicDrawerNext',
+});
+
 const props = withDefaults(defineProps<DrawerRootProps>(), {
   shouldScaleBackground: true,
 });

package/src/components/ui/drawer/DrawerClose.vue

@@ -2,6 +2,10 @@
 import type { DrawerCloseProps } from 'vaul-vue';
 import { DrawerClose } from 'vaul-vue';
 
+defineOptions({
+  name: 'UnnnicDrawerClose',
+});
+
 const props = defineProps<DrawerCloseProps>();
 </script>
 

package/src/components/ui/drawer/DrawerContent.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { useForwardPropsEmits } from 'reka-ui';
 import { DrawerContent, DrawerPortal } from 'vaul-vue';
 import { cn } from '@/lib/utils';
 import DrawerOverlay from './DrawerOverlay.vue';
 
+defineOptions({
+  name: 'UnnnicDrawerContent',
+});
+
 const props = withDefaults(
   defineProps<
     DialogContentProps & {

package/src/components/ui/drawer/DrawerDescription.vue

@@ -5,6 +5,10 @@ import { reactiveOmit } from '@vueuse/core';
 import { DrawerDescription } from 'vaul-vue';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDrawerDescription',
+});
+
 const props = defineProps<
   DrawerDescriptionProps & { class?: HTMLAttributes['class'] }
 >();

package/src/components/ui/drawer/DrawerFooter.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDrawerFooter',
+});
+
 const props = defineProps<{
   class?: HTMLAttributes['class'];
 }>();

package/src/components/ui/drawer/DrawerHeader.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
 import UnnnicButton from '@/components/Button/Button.vue';
 import DrawerClose from './DrawerClose.vue';
 
+defineOptions({
+  name: 'UnnnicDrawerHeader',
+});
+
 const props = defineProps<{
   class?: HTMLAttributes['class'];
 }>();

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
 import type { DialogOverlayProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DrawerOverlay } from 'vaul-vue';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDrawerOverlay',
+});
+
 const props = defineProps<
   DialogOverlayProps & { class?: HTMLAttributes['class'] }
 >();

package/src/components/ui/drawer/DrawerTitle.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
 import type { DrawerTitleProps } from 'vaul-vue';
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DrawerTitle } from 'vaul-vue';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDrawerTitle',
+});
+
 const props = defineProps<
   DrawerTitleProps & { class?: HTMLAttributes['class'] }
 >();

package/src/components/ui/drawer/DrawerTrigger.vue

@@ -2,6 +2,10 @@
 import type { DrawerTriggerProps } from 'vaul-vue';
 import { DrawerTrigger } from 'vaul-vue';
 
+defineOptions({
+  name: 'UnnnicDrawerTrigger',
+});
+
 const props = defineProps<DrawerTriggerProps>();
 </script>