@weni/unnnic-system 3.27.0 → 3.27.2

package/package.json

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

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/Toast/Toast.vue

@@ -172,22 +172,25 @@ onUnmounted(() => {
 
   &--informational {
     border-color: $unnnic-color-border-info;
-    background-color: $unnnic-color-bg-info;
+    background: linear-gradient($unnnic-color-bg-info), $unnnic-color-bg-base;
   }
 
   &--attention {
     border-color: $unnnic-color-border-warning;
-    background-color: $unnnic-color-bg-warning;
+    background:
+      linear-gradient($unnnic-color-bg-warning), $unnnic-color-bg-base;
   }
 
   &--success {
     border-color: $unnnic-color-border-success;
-    background-color: $unnnic-color-bg-success;
+    background:
+      linear-gradient($unnnic-color-bg-success), $unnnic-color-bg-base;
   }
 
   &--error {
     border-color: $unnnic-color-border-critical;
-    background-color: $unnnic-color-bg-critical;
+    background:
+      linear-gradient($unnnic-color-bg-critical), $unnnic-color-bg-base;
   }
 
   &__content,

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/Select.stories.js

@@ -1,4 +1,5 @@
 import UnnnicSelect from '../components/Select/index.vue';
+import UnnnicTag from '../components/Tag/Tag.vue';
 
 const options = [
   { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
@@ -181,6 +182,124 @@ export const WithSearch = {
   },
 };
 
+export const WithStatus = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Customizes option and selected content through the `#option` and `#selected` scoped slots. The status tag lives entirely in the consumer, keeping the Select decoupled from the concept of status.',
+      },
+      source: {
+        code: `<UnnnicSelect
+  v-model="selected"
+  :options="options"
+  label="Representative"
+  placeholder="Select a representative"
+  clearable
+>
+  <template #option="{ label, option }">
+    <span class="select-status__label">{{ label }}</span>
+    <UnnnicTag
+      type="default"
+      size="small"
+      :scheme="statusConfig[option.status].scheme"
+      :text="statusConfig[option.status].text"
+    />
+  </template>
+
+  <template #selected="{ label, option }">
+    <span class="select-status__label">{{ label }}</span>
+    <UnnnicTag
+      type="default"
+      size="small"
+      :scheme="statusConfig[option.status].scheme"
+      :text="statusConfig[option.status].text"
+    />
+  </template>
+</UnnnicSelect>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { UnnnicSelect, UnnnicTag },
+    data() {
+      return {
+        emptyValue: null,
+        selectedValue: 'anna',
+        statusOptions: [
+          { label: 'Ana', value: 'ana', status: 'online' },
+          { label: 'Anna', value: 'anna', status: 'online' },
+          { label: 'Davi', value: 'davi', status: 'lunch' },
+          { label: 'João', value: 'joao', status: 'offline' },
+          { label: 'Ricardo', value: 'ricardo', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+      <div style="width: 512px; display: flex; flex-direction: column; gap: 32px;">
+        <unnnic-select
+          v-model="emptyValue"
+          :options="statusOptions"
+          label="Representative"
+          placeholder="Select a representative"
+          clearable
+        >
+          <template #option="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+          <template #selected="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+        </unnnic-select>
+
+        <unnnic-select
+          v-model="selectedValue"
+          :options="statusOptions"
+          label="Representative"
+          placeholder="Select a representative"
+          clearable
+        >
+          <template #option="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+          <template #selected="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+        </unnnic-select>
+      </div>
+    `,
+  }),
+};
+
 export const WithInfiniteScroll = {
   render: () => ({
     components: { UnnnicSelect },