@weni/unnnic-system 3.34.0 → 3.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.34.0",
+  "version": "3.34.2",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/DatePicker/DatePicker.vue

@@ -879,7 +879,10 @@ function getStartAndEndDateByPeriod(period: string) {
   const daysMatch = period.match(/^last-(\d+)-days$/);
   const monthsMatch = period.match(/^last-(\d+)-months$/);
 
-  if (daysMatch) {
+  if (period === 'today') {
+    periodStartDate = dateToString(todayClone);
+    periodEndDate = dateToString(todayClone);
+  } else if (daysMatch) {
     const howMuch = Number(daysMatch[1]);
 
     periodEndDate = dateToString(todayClone);

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

@@ -95,6 +95,28 @@ describe('DatePicker.vue', () => {
     expect(updateEquivalent[0][0]).toBe('Last 7 days');
   });
 
+  it('submits with today period and emits equivalent option name', async () => {
+    wrapper = factory({
+      options: [
+        { name: 'Today', id: 'today' },
+        { name: 'Custom', id: 'custom' },
+      ],
+    });
+
+    await wrapper.vm.autoSelect('today');
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const submit = wrapper.emitted('submit');
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+
+    expect(submit).toBeTruthy();
+    expect(submit[0][0]).toHaveProperty('startDate');
+    expect(submit[0][0]).toHaveProperty('endDate');
+    expect(submit[0][0].startDate).toBe(submit[0][0].endDate);
+
+    expect(updateEquivalent[0][0]).toBe('Today');
+  });
+
   it('submits with custom selection and clears equivalent option', async () => {
     wrapper.vm.optionSelected = 'custom';
     await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');

package/src/components/DatePicker/translations.ts

@@ -28,6 +28,7 @@ const englishMonths = [
 const englishDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
 const englishPeriods: PeriodOption[] = [
+  { name: 'Today', id: 'today' },
   { name: 'Last 7 days', id: 'last-7-days' },
   { name: 'Last 14 days', id: 'last-14-days' },
   { name: 'Last 30 days', id: 'last-30-days' },
@@ -96,6 +97,10 @@ buttons.en = buttons['en-us'];
 
 export const periods: Record<string, PeriodOption[]> = {
   'pt-br': [
+    {
+      name: 'Hoje',
+      id: 'today',
+    },
     {
       name: 'Últimos 7 dias',
       id: 'last-7-days',
@@ -128,6 +133,10 @@ export const periods: Record<string, PeriodOption[]> = {
   en: englishPeriods,
   'en-us': englishPeriods,
   es: [
+    {
+      name: 'Hoy',
+      id: 'today',
+    },
     {
       name: 'Últimos 7 días',
       id: 'last-7-days',

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

@@ -1,8 +1,36 @@
 import { mount, flushPromises } from '@vue/test-utils';
-import { beforeEach, describe, expect, afterEach, test } from 'vitest';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
 import UnnnicMultiSelect from '../index.vue';
 import i18n from '@/utils/plugins/i18n';
 
+const { infiniteScrollResetMock, useInfiniteScrollMock } = vi.hoisted(() => {
+  const infiniteScrollResetMock = vi.fn();
+  const useInfiniteScrollMock = vi.fn((_element, _onLoadMore, _options) => ({
+    reset: infiniteScrollResetMock,
+    isLoading: { value: false },
+  }));
+  return { infiniteScrollResetMock, useInfiniteScrollMock };
+});
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useInfiniteScroll: (...args) => useInfiniteScrollMock(...args),
+  };
+});
+
+function getInfiniteScrollCallbacks() {
+  const lastCall = useInfiniteScrollMock.mock.calls.at(-1);
+  return {
+    onLoadMore: lastCall?.[1],
+    canLoadMore: lastCall?.[2]?.canLoadMore,
+  };
+}
+
+const visibleScrollEl = { clientHeight: 200 };
+const overflowingScrollEl = { clientHeight: 200, scrollHeight: 800 };
+
 describe('UnnnicMultiSelect.vue', () => {
   let wrapper;
 
@@ -32,6 +60,8 @@ describe('UnnnicMultiSelect.vue', () => {
   };
 
   beforeEach(() => {
+    infiniteScrollResetMock.mockClear();
+    useInfiniteScrollMock.mockClear();
     wrapper = mountWrapper();
   });
 
@@ -627,6 +657,176 @@ describe('UnnnicMultiSelect.vue', () => {
     });
   });
 
+  describe('infinite scroll functionality', () => {
+    test('infinite scroll is disabled by default', () => {
+      expect(wrapper.vm.infiniteScroll).toBe(false);
+    });
+
+    test('applies infinite scroll props correctly', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        infiniteScrollDistance: 20,
+        infiniteScrollCanLoadMore: () => false,
+      });
+
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+      expect(wrapper.vm.infiniteScrollDistance).toBe(20);
+      expect(wrapper.vm.infiniteScrollCanLoadMore()).toBe(false);
+    });
+
+    test('does not render loading when infiniteScrollLoading is false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const loading = wrapper.find('.unnnic-multi-select__infinite-loading');
+      expect(loading.exists()).toBe(false);
+    });
+
+    test('sets infiniteScrollLoading to true and verifies state', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        options: [
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+        ],
+      });
+
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+
+      wrapper.vm.infiniteScrollLoading = true;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+    });
+
+    test('finishInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.finishInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+
+    test('resetInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.resetInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+
+    test('calls useInfiniteScroll once and does not recreate it on finish', async () => {
+      wrapper.unmount();
+      useInfiniteScrollMock.mockClear();
+      infiniteScrollResetMock.mockClear();
+
+      const scrollWrapper = mountWrapper({ infiniteScroll: true });
+      expect(useInfiniteScrollMock).toHaveBeenCalledTimes(1);
+
+      scrollWrapper.vm.setOpenPopover(true);
+      await scrollWrapper.vm.$nextTick();
+      scrollWrapper.vm.infiniteScrollLoading = true;
+      scrollWrapper.vm.finishInfiniteScroll();
+      await scrollWrapper.vm.$nextTick();
+
+      expect(useInfiniteScrollMock).toHaveBeenCalledTimes(1);
+      expect(infiniteScrollResetMock).toHaveBeenCalled();
+
+      scrollWrapper.unmount();
+    });
+
+    test('emits scroll-end once when the list does not fill the popover', async () => {
+      const fewOptions = [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+      ];
+      const scrollWrapper = mountWrapper({
+        infiniteScroll: true,
+        options: fewOptions,
+      });
+
+      scrollWrapper.vm.setOpenPopover(true);
+      await scrollWrapper.vm.$nextTick();
+
+      const { onLoadMore, canLoadMore } = getInfiniteScrollCallbacks();
+      expect(canLoadMore(visibleScrollEl)).toBe(true);
+      expect(scrollWrapper.emitted('scroll-end')).toBeFalsy();
+
+      onLoadMore();
+      expect(scrollWrapper.emitted('scroll-end')).toHaveLength(1);
+      expect(scrollWrapper.vm.infiniteScrollLoading).toBe(true);
+      expect(canLoadMore(visibleScrollEl)).toBe(false);
+
+      onLoadMore();
+      expect(scrollWrapper.emitted('scroll-end')).toHaveLength(1);
+
+      scrollWrapper.unmount();
+    });
+
+    test('does not emit scroll-end on open when the list already overflows', async () => {
+      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+        label: `Option ${i + 1}`,
+        value: `option${i + 1}`,
+      }));
+      const scrollWrapper = mountWrapper({
+        infiniteScroll: true,
+        options: manyOptions,
+        optionsLines: 5,
+      });
+
+      scrollWrapper.vm.setOpenPopover(true);
+      await scrollWrapper.vm.$nextTick();
+
+      expect(scrollWrapper.emitted('scroll-end')).toBeFalsy();
+
+      const { canLoadMore } = getInfiniteScrollCallbacks();
+      expect(canLoadMore(overflowingScrollEl)).toBe(true);
+      expect(canLoadMore({ clientHeight: 0 })).toBe(false);
+
+      scrollWrapper.unmount();
+    });
+
+    test('canLoadMore is false when infinite scroll is disabled or the popover is closed', () => {
+      const { canLoadMore } = getInfiniteScrollCallbacks();
+      expect(canLoadMore(visibleScrollEl)).toBe(false);
+
+      wrapper.vm.setOpenPopover(true);
+      expect(canLoadMore(visibleScrollEl)).toBe(false);
+    });
+
+    test('displays loading indicator when infiniteScrollLoading is true', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const { onLoadMore } = getInfiniteScrollCallbacks();
+      onLoadMore();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+      expect(
+        document.querySelector('.unnnic-multi-select__infinite-loading'),
+      ).not.toBeNull();
+    });
+
+    test('does not display infinite scroll loading when infiniteScroll is false', async () => {
+      await wrapper.setProps({ infiniteScroll: false });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      expect(
+        document.querySelector('.unnnic-multi-select__infinite-loading'),
+      ).toBeNull();
+    });
+  });
+
   describe('snapshot testing', () => {
     test('matches snapshot with default props', () => {
       expect(wrapper.html()).toMatchSnapshot();
@@ -651,5 +851,17 @@ describe('UnnnicMultiSelect.vue', () => {
       await wrapper.setProps({ disabled: true });
       expect(wrapper.html()).toMatchSnapshot();
     });
+
+    test('matches snapshot with infinite scroll enabled', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const { onLoadMore } = getInfiniteScrollCallbacks();
+      onLoadMore();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
   });
 });

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

@@ -36,6 +36,24 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabl
 </div>"
 `;
 
+exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with infinite scroll enabled 1`] = `
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="reka-popover-content-v-1" data-state="open">
+    <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
+      <!--v-if-->
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right focus use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_up" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+        <!--v-if-->
+        <section data-v-a0d36167="" class="icon-right-container">
+          <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_up</span>
+        </section>
+      </div>
+      <!--v-if-->
+    </section>
+  </button>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
+
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multiple selected values 1`] = `
 "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">

package/src/components/MultiSelect/index.vue

@@ -47,21 +47,29 @@
           >
             {{ $t('without_results') }}
           </p>
-          <div
-            v-else
-            class="unnnic-multi-select__options"
-          >
-            <UnnnicMultiSelectOption
-              v-for="(option, index) in filteredOptions"
-              :key="String(option[props.itemValue])"
-              :data-option-index="index"
-              :label="String(option[props.itemLabel] ?? '')"
-              :active="getActivatedOptionStatus(option)"
-              :focused="focusedOptionIndex === index"
-              :disabled="option.disabled"
-              @update:model-value="handleSelectOption(option, $event)"
-            />
-          </div>
+          <template v-else>
+            <div class="unnnic-multi-select__options">
+              <UnnnicMultiSelectOption
+                v-for="(option, index) in filteredOptions"
+                :key="String(option[props.itemValue])"
+                :data-option-index="index"
+                :label="String(option[props.itemLabel] ?? '')"
+                :active="getActivatedOptionStatus(option)"
+                :focused="focusedOptionIndex === index"
+                :disabled="option.disabled"
+                @update:model-value="handleSelectOption(option, $event)"
+              />
+            </div>
+            <div
+              v-if="props.infiniteScroll && infiniteScrollLoading"
+              class="unnnic-multi-select__infinite-loading"
+            >
+              <UnnnicIconLoading
+                scheme="fg-base"
+                size="sm"
+              />
+            </div>
+          </template>
         </div>
       </PopoverContent>
     </Popover>
@@ -69,10 +77,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, useTemplateRef } from 'vue';
+import { computed, ref, watch, nextTick, useTemplateRef } from 'vue';
+
+import { useInfiniteScroll } from '@vueuse/core';
 
 import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover';
 import UnnnicInput from '../Input/Input.vue';
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 import UnnnicMultiSelectOption from './MultiSelectOption.vue';
 
 import { useSelectBase } from '../../composables/useSelectBase';
@@ -85,6 +96,9 @@ defineOptions({
 
 interface MultiSelectProps extends SelectBaseProps {
   modelValue: (SelectOption | unknown)[];
+  infiniteScroll?: boolean;
+  infiniteScrollDistance?: number;
+  infiniteScrollCanLoadMore?: () => boolean;
 }
 
 const props = withDefaults(defineProps<MultiSelectProps>(), {
@@ -103,15 +117,19 @@ const props = withDefaults(defineProps<MultiSelectProps>(), {
   message: '',
   search: '',
   clearable: false,
+  infiniteScroll: false,
+  infiniteScrollDistance: 10,
+  infiniteScrollCanLoadMore: () => true,
 });
 
 const emit = defineEmits<{
   'update:modelValue': [value: (SelectOption | unknown)[]];
   'update:search': [value: string];
+  'scroll-end': [];
 }>();
 
 const multiSelectInputRef = useTemplateRef<HTMLElement>('multiSelectInputRef');
-const contentRef = useTemplateRef<HTMLElement>('contentRef');
+const contentRef = useTemplateRef<HTMLDivElement>('contentRef');
 
 const base = useSelectBase(props, 'multi', multiSelectInputRef, contentRef);
 
@@ -184,14 +202,66 @@ keyboard.setupKeydownBinding();
 
 const focusedOptionIndex = keyboard.focusedOptionIndex;
 
-watch(openPopover, () => {
-  if (!base.openPopover.value) {
+const infiniteScrollLoading = ref(false);
+
+function canLoadMoreInfiniteScroll(el?: unknown) {
+  if (
+    !props.infiniteScroll ||
+    !base.openPopover.value ||
+    infiniteScrollLoading.value ||
+    !props.infiniteScrollCanLoadMore()
+  ) {
+    return false;
+  }
+
+  if (!el || typeof el !== 'object' || !('clientHeight' in el)) return false;
+  return (el as HTMLElement).clientHeight > 0;
+}
+
+const scrollElement = computed(
+  () =>
+    (contentRef.value?.closest('.unnnic-popover') as HTMLElement | null) ??
+    contentRef.value,
+);
+
+const { reset: resetInfiniteScrollObserver } = useInfiniteScroll(
+  scrollElement,
+  () => {
+    if (infiniteScrollLoading.value) return;
+    infiniteScrollLoading.value = true;
+    emit('scroll-end');
+  },
+  {
+    distance: props.infiniteScrollDistance,
+    canLoadMore: canLoadMoreInfiniteScroll,
+  },
+);
+
+watch(base.openPopover, (isOpen) => {
+  if (!isOpen) {
     handleSearch('');
-  } else {
-    keyboard.focusedOptionIndex.value = -1;
+    infiniteScrollLoading.value = false;
+    return;
+  }
+
+  keyboard.focusedOptionIndex.value = -1;
+  if (props.infiniteScroll) {
+    nextTick(() => resetInfiniteScrollObserver());
   }
 });
 
+function finishInfiniteScroll() {
+  infiniteScrollLoading.value = false;
+  if (base.openPopover.value && props.infiniteScroll) {
+    nextTick(() => resetInfiniteScrollObserver());
+  }
+}
+
+function resetInfiniteScroll() {
+  infiniteScrollLoading.value = false;
+  nextTick(() => resetInfiniteScrollObserver());
+}
+
 defineExpose({
   openPopover,
   setOpenPopover,
@@ -199,6 +269,9 @@ defineExpose({
   calculatedPopoverHeight: base.calculatedPopoverHeight,
   selectedItems,
   inputValue,
+  infiniteScrollLoading,
+  finishInfiniteScroll,
+  resetInfiniteScroll,
 });
 </script>
 
@@ -236,5 +309,13 @@ defineExpose({
     flex-direction: column;
     gap: $unnnic-space-6;
   }
+
+  &__infinite-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: $unnnic-space-2 0;
+    min-height: $unnnic-space-10;
+  }
 }
 </style>

package/src/stories/MultiSelect.stories.js

@@ -82,6 +82,18 @@ export default {
     disabled: {
       description: 'Disable the select.',
     },
+    infiniteScroll: {
+      description:
+        'Enable infinite scroll functionality. When enabled, the component will emit a `scroll-end` event when the user scrolls near the bottom of the options list.',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the scroll area to trigger the `scroll-end` event. Default is 10.',
+    },
+    infiniteScrollCanLoadMore: {
+      description:
+        'Function that returns a boolean indicating whether more items can be loaded. Used to prevent unnecessary scroll-end events.',
+    },
   },
   render: (args) => ({
     components: { UnnnicMultiSelect },
@@ -167,3 +179,77 @@ export const WithSearch = {
     search: '',
   },
 };
+
+export const WithInfiniteScroll = {
+  render: () => ({
+    components: { UnnnicMultiSelect },
+    data() {
+      return {
+        selectedValue: [],
+        loadedOptions: [],
+        currentPage: 1,
+        totalPages: 10,
+        isLoading: false,
+      };
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      loadInitialOptions() {
+        this.loadedOptions = this.generateOptions(1);
+      },
+      generateOptions(page) {
+        const startIndex = (page - 1) * 10 + 1;
+        return Array.from({ length: 10 }, (_, i) => ({
+          label: `Option ${startIndex + i}`,
+          value: `option${startIndex + i}`,
+        }));
+      },
+      async handleScrollEnd() {
+        if (this.currentPage >= this.totalPages || this.isLoading) {
+          return;
+        }
+
+        this.isLoading = true;
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        this.currentPage++;
+        const newOptions = this.generateOptions(this.currentPage);
+        this.loadedOptions = [...this.loadedOptions, ...newOptions];
+
+        this.isLoading = false;
+
+        this.$refs.multiSelectRef.finishInfiniteScroll();
+      },
+      canLoadMore() {
+        return this.currentPage < this.totalPages && !this.isLoading;
+      },
+    },
+    template: `
+      <div style="width: 300px;">
+        <h3>Infinite Scroll Example</h3>
+        <p style="color: #666; font-size: 14px;">
+          Scroll down in the options list to load more items.
+          <br />
+          Page: {{ currentPage }} / {{ totalPages }}
+          <br />
+          Total options: {{ loadedOptions.length }}
+        </p>
+        <p>Selected: {{ selectedValue }}</p>
+        <unnnic-multi-select
+          ref="multiSelectRef"
+          v-model="selectedValue"
+          :options="loadedOptions"
+          placeholder="Select options"
+          label="Infinite Scroll MultiSelect"
+          :infinite-scroll="true"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-can-load-more="canLoadMore"
+          @scroll-end="handleScrollEnd"
+        />
+      </div>
+    `,
+  }),
+};