@weni/unnnic-system 3.27.1 → 3.28.2-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.27.1",
+  "version": "3.28.2-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -140,4 +140,4 @@
     "vue-eslint-parser": "^10.4.0",
     "vue-tsc": "^3.0.5"
   }
-}
+}

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, afterEach, test } from 'vitest';
+import { h } from 'vue';
 import UnnnicSelect from '../index.vue';
 import i18n from '@/utils/plugins/i18n';
 
@@ -484,4 +485,142 @@ describe('UnnnicSelect.vue', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
   });
+
+  describe('option slot', () => {
+    test('renders custom content for each option through the option slot', async () => {
+      const slotWrapper = mountWrapper(
+        {},
+        {
+          option: (slotProps) =>
+            h('span', { class: 'custom-option' }, `custom-${slotProps.label}`),
+        },
+      );
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+
+      const options = slotWrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options.length).toBe(3);
+      expect(options[0].find('.custom-option').exists()).toBe(true);
+      expect(options[0].find('.custom-option').text()).toBe('custom-Option 1');
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to default label rendering without option slot', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const options = wrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options[0].find('.custom-option').exists()).toBe(false);
+      expect(options[0].find('.unnnic-popover-option__label').exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('selected slot (custom trigger)', () => {
+    const selectedSlot = {
+      selected: (slotProps) =>
+        h('span', { class: 'custom-selected' }, `selected-${slotProps.label}`),
+    };
+
+    test('renders custom trigger when selected slot is used and an item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(true);
+      expect(slotWrapper.find('.custom-selected').text()).toBe(
+        'selected-Option 1',
+      );
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when no item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: null }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(false);
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        true,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when selected slot is not provided', () => {
+      const fallbackWrapper = mountWrapper({ modelValue: 'option1' });
+
+      expect(fallbackWrapper.find('.unnnic-select__trigger').exists()).toBe(
+        false,
+      );
+      expect(
+        fallbackWrapper.findComponent({ name: 'UnnnicInput' }).exists(),
+      ).toBe(true);
+
+      fallbackWrapper.unmount();
+    });
+
+    test('shows the field label above the custom trigger', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', label: 'Representative' },
+        selectedSlot,
+      );
+
+      const label = slotWrapper.find('.unnnic-select__trigger-label');
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe('Representative');
+
+      slotWrapper.unmount();
+    });
+
+    test('reflects the popover state through the chevron icon', async () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      const arrow = slotWrapper.find('.unnnic-select__trigger-arrow');
+      expect(arrow.exists()).toBe(true);
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+      expect(slotWrapper.vm.openPopover).toBe(true);
+
+      slotWrapper.unmount();
+    });
+
+    test('emits update:modelValue with empty value when clear is clicked', async () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: true },
+        selectedSlot,
+      );
+
+      const clear = slotWrapper.find('.unnnic-select__trigger-clear');
+      expect(clear.exists()).toBe(true);
+
+      await clear.trigger('click');
+
+      expect(slotWrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(slotWrapper.emitted('update:modelValue')[0]).toEqual(['']);
+
+      slotWrapper.unmount();
+    });
+
+    test('does not render clear icon when clearable is false', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: false },
+        selectedSlot,
+      );
+
+      expect(slotWrapper.find('.unnnic-select__trigger-clear').exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+  });
 });

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

@@ -19,7 +19,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default pro
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" 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">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="reka-popover-content-v-1" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
@@ -55,7 +55,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with infinite sc
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" 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">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="reka-popover-content-v-1" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
@@ -73,7 +73,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enab
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with selected value 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" 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">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="reka-popover-content-v-1" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="Option 1">

package/src/components/Select/index.vue

@@ -5,7 +5,53 @@
       @update:open="setOpenPopover"
     >
       <PopoverTrigger class="w-full">
+        <section
+          v-if="hasSelectedSlot && selectedItem"
+          ref="selectInputRef"
+          class="unnnic-select__trigger-wrapper"
+        >
+          <span
+            v-if="props.label"
+            class="unnnic-select__trigger-label"
+          >
+            {{ props.label }}
+          </span>
+          <section
+            :class="[
+              'unnnic-select__trigger',
+              `unnnic-select__trigger--${props.size}`,
+              {
+                'unnnic-select__trigger--focused': openPopover,
+                'unnnic-select__trigger--disabled': props.disabled,
+              },
+            ]"
+          >
+            <section class="unnnic-select__trigger-content">
+              <slot
+                name="selected"
+                :option="selectedItem"
+                :label="inputValue as string"
+              />
+            </section>
+            <UnnnicIcon
+              v-if="props.clearable && !props.disabled"
+              class="unnnic-select__trigger-clear"
+              icon="close"
+              size="ant"
+              scheme="fg-base"
+              clickable
+              @click.stop="emit('update:modelValue', '')"
+            />
+            <UnnnicIcon
+              class="unnnic-select__trigger-arrow"
+              :icon="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+              size="ant"
+              scheme="fg-base"
+            />
+          </section>
+        </section>
         <UnnnicInput
+          v-else
           ref="selectInputRef"
           :modelValue="inputValue as string"
           class="unnnic-select__input"
@@ -60,7 +106,23 @@
               :focused="focusedOptionIndex === index"
               :disabled="option.disabled"
               @click="handleSelectOption(option)"
-            />
+            >
+              <template
+                v-if="$slots.option"
+                #default
+              >
+                <slot
+                  name="option"
+                  :option="option"
+                  :label="option[props.itemLabel] as string"
+                  :active="
+                    option[props.itemValue] === selectedItem?.[props.itemValue]
+                  "
+                  :focused="focusedOptionIndex === index"
+                  :index="index"
+                />
+              </template>
+            </PopoverOption>
             <div
               v-if="props.infiniteScroll && infiniteScrollLoading"
               class="unnnic-select__infinite-loading"
@@ -85,11 +147,13 @@ import {
   nextTick,
   onBeforeUnmount,
   useTemplateRef,
+  useSlots,
 } from 'vue';
 
 import { useInfiniteScroll } from '@vueuse/core';
 
 import UnnnicInput from '../Input/Input.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 import {
   Popover,
@@ -141,6 +205,20 @@ const emit = defineEmits<{
   'scroll-end': [];
 }>();
 
+defineSlots<{
+  option?: (props: {
+    option: SelectOption;
+    label: string;
+    active: boolean;
+    focused: boolean;
+    index: number;
+  }) => unknown;
+  selected?: (props: { option: SelectOption; label: string }) => unknown;
+}>();
+
+const slots = useSlots();
+const hasSelectedSlot = computed(() => !!slots.selected);
+
 const selectInputRef = useTemplateRef<HTMLElement>('selectInputRef');
 const contentRef = useTemplateRef<HTMLDivElement>('contentRef');
 
@@ -155,8 +233,11 @@ function setOpenPopover(value: boolean) {
   base.openPopover.value = value;
 }
 
-const selectedItem = computed(() => {
-  if (props.returnObject) return props.modelValue;
+const selectedItem = computed((): SelectOption | undefined => {
+  if (props.returnObject) {
+    if (props.modelValue == null || props.modelValue === '') return undefined;
+    return props.modelValue as SelectOption;
+  }
 
   return props.options.find(
     (option) => option[props.itemValue] === props.modelValue,
@@ -289,6 +370,70 @@ defineExpose({
 }
 
 .unnnic-select {
+  &__trigger-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+    width: 100%;
+    text-align: left;
+    font: $unnnic-font-body;
+  }
+
+  &__trigger-label {
+    font: $unnnic-font-body;
+    color: $unnnic-color-fg-base;
+  }
+
+  &__trigger {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    background: $unnnic-color-bg-base;
+    border: 1px solid $unnnic-color-border-base;
+    border-radius: $unnnic-radius-2;
+    padding: $unnnic-space-3 $unnnic-space-4;
+    height: 45px;
+
+    transition: border-color 0.1s ease-in-out;
+
+    &--sm {
+      padding: $unnnic-space-2 $unnnic-space-4;
+      height: 37px;
+    }
+
+    &--focused {
+      border-color: $unnnic-color-border-accent-strong;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      border-color: $unnnic-color-border-muted;
+      background-color: $unnnic-color-bg-muted;
+    }
+
+    &-content {
+      flex: 1 1 0;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: $unnnic-space-2;
+      overflow: hidden;
+      font: $unnnic-font-body;
+      color: $unnnic-color-fg-emphasized;
+    }
+
+    &-clear,
+    &-arrow {
+      flex-shrink: 0;
+    }
+  }
+
   &__content {
     display: flex;
     flex-direction: column;

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

@@ -73,20 +73,34 @@ const getComponentName = (vnode: VNode): string | undefined => {
   return componentType?.name || componentType?.__name;
 };
 
-const contentChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) !== 'UnnnicPopoverFooter',
-  );
-});
+const isFooter = (vnode: VNode) =>
+  getComponentName(vnode) === 'UnnnicPopoverFooter';
+
+// This function recursively checks if there is a UnnnicPopoverFooter in the slot,
+// and splits the content into content and footer
+const splitSlot = computed(() => {
+  const footers: VNode[] = [];
+
+  const content = (function extract(vnodes: VNode[]): VNode[] {
+    return vnodes.filter((vnode: VNode) => {
+      if (!vnode || typeof vnode !== 'object') return true;
+      if (isFooter(vnode)) return footers.push(vnode) && false;
 
-const footerChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
-  );
+      if (Array.isArray(vnode.children) && vnode.children.length) {
+        vnode.children = extract(vnode.children as VNode[]);
+        return (vnode.children as VNode[]).length > 0;
+      }
+
+      return true;
+    });
+  })(slots.default?.() || []);
+
+  return { content, footers };
 });
 
+const contentChildren = computed(() => splitSlot.value.content);
+const footerChildren = computed(() => splitSlot.value.footers);
+
 const contentWidth = computed(() => {
   if (props.width) return props.width;
 

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

@@ -21,12 +21,8 @@ $popover-space: $unnnic-space-4;
   padding: $popover-space;
 
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   gap: $unnnic-space-2;
-
-  > * {
-    width: 100%;
-  }
 }
 </style>

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

@@ -6,6 +6,7 @@
         'unnnic-popover-option--disabled': props.disabled,
         'unnnic-popover-option--active': props.active,
         'unnnic-popover-option--focused': props.focused,
+        'unnnic-popover-option--with-content': hasDefaultSlot,
       },
     ]"
   >
@@ -15,15 +16,17 @@
       :scheme="schemeColor"
       size="ant"
     />
-    <p
-      :class="[
-        'unnnic-popover-option__label',
-        `unnnic-popover-option__label--${schemeColor}`,
-        `unnnic-popover-option--disabled: ${props.disabled}`,
-      ]"
-    >
-      {{ props.label }}
-    </p>
+    <slot>
+      <p
+        :class="[
+          'unnnic-popover-option__label',
+          `unnnic-popover-option__label--${schemeColor}`,
+          `unnnic-popover-option--disabled: ${props.disabled}`,
+        ]"
+      >
+        {{ props.label }}
+      </p>
+    </slot>
   </div>
 </template>
 
@@ -31,7 +34,7 @@
 import UnnnicIcon from '@/components/Icon.vue';
 
 import type { SchemeColor } from '@/types/scheme-colors';
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 
 defineOptions({
   name: 'UnnnicPopoverOption',
@@ -54,6 +57,9 @@ const props = withDefaults(defineProps<PopoverOptionProps>(), {
   icon: '',
 });
 
+const slots = useSlots();
+const hasDefaultSlot = computed(() => !!slots.default);
+
 const schemeColor = computed(() => {
   if (props.active) {
     return 'fg-on-primary';
@@ -82,6 +88,10 @@ const schemeColor = computed(() => {
   gap: $unnnic-space-2;
   align-items: center;
 
+  &--with-content {
+    justify-content: space-between;
+  }
+
   &:hover:not(&--active):not(&--disabled),
   &--focused {
     background-color: $unnnic-color-bg-soft;

package/src/stories/PopoverOption.stories.js

@@ -1,4 +1,5 @@
 import { PopoverOption } from '../components/ui/popover';
+import UnnnicTag from '../components/Tag/Tag.vue';
 import colorsList from '../utils/colorsList';
 
 export default {
@@ -73,3 +74,55 @@ export const Default = {
     `,
   }),
 };
+
+export const WithTag = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses the default slot to render custom content, such as a label alongside a status tag. The option keeps the `space-between` layout, so the tag stays aligned to the end.',
+      },
+      source: {
+        code: `<UnnnicPopoverOption v-for="option in options" :key="option.value">
+  <span class="popover-option__label">{{ option.label }}</span>
+  <UnnnicTag
+    type="default"
+    size="small"
+    :scheme="statusConfig[option.status].scheme"
+    :text="statusConfig[option.status].text"
+  />
+</UnnnicPopoverOption>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { PopoverOption, UnnnicTag },
+    data() {
+      return {
+        options: [
+          { label: 'John Doe', value: 'john-doe', status: 'online' },
+          { label: 'Jane Doe', value: 'jane-doe', status: 'lunch' },
+          { label: 'James Smith', value: 'james-smith', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px; width: 280px;">
+      <PopoverOption v-for="option in options" :key="option.value" :label="option.label">
+        <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ option.label }}</span>
+        <unnnic-tag
+          type="default"
+          size="small"
+          :scheme="statusConfig[option.status].scheme"
+          :text="statusConfig[option.status].text"
+        />
+      </PopoverOption>
+    </section>
+    `,
+  }),
+};