@weni/unnnic-system 3.2.9-alpha.12 → 3.2.9-alpha.13

package/src/components/Popover/index.vue

@@ -1,131 +1,146 @@
 <template>
-    <section class="unnnic-popover" ref="popover">
-        <div class="unnnic-popover__trigger" data-testid="popover-trigger" @click="toggleOpen()">
-            <slot name="trigger" />
-        </div>
-        <div v-if="open" class="unnnic-popover__balloon" data-testid="popover-balloon">
-            <slot name="content" />
-        </div>
-    </section>
+  <section
+    ref="popover"
+    class="unnnic-popover"
+  >
+    <div
+      class="unnnic-popover__trigger"
+      data-testid="popover-trigger"
+      @click="toggleOpen()"
+    >
+      <slot name="trigger" />
+    </div>
+    <div
+      v-if="open"
+      class="unnnic-popover__balloon"
+      data-testid="popover-balloon"
+    >
+      <slot name="content" />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { onClickOutside, useResizeObserver } from '@vueuse/core';
 
-const target = useTemplateRef<HTMLDivElement>('popover')
+const target = useTemplateRef<HTMLDivElement>('popover');
 
-const popoverWidth = ref<string>('')
+const popoverWidth = ref<string>('');
 
 useResizeObserver(target, (entries) => {
-    const entry = entries[0]
-    const { width } = entry.contentRect
-    popoverWidth.value = `${width}px`
-})
+  const entry = entries[0];
+  const { width } = entry.contentRect;
+  popoverWidth.value = `${width}px`;
+});
 
 onClickOutside(target, () => {
-    if (props.persistent) return;
-    open.value = false;
-})
+  if (props.persistent) return;
+  open.value = false;
+});
 
 defineOptions({
-    name: "UnnnicPopover"
-})
+  name: 'UnnnicPopover',
+});
 
 interface PopoverBalloonProps {
-    width?: string;
-    height?: string;
-    maxHeight?: string;
+  width?: string;
+  height?: string;
+  maxHeight?: string;
 }
 
 interface PopoverProps {
-    modelValue?: boolean;
-    persistent?: boolean;
-    popoverBalloonProps?: PopoverBalloonProps;
+  modelValue?: boolean;
+  persistent?: boolean;
+  popoverBalloonProps?: PopoverBalloonProps;
 }
 
 const props = withDefaults(defineProps<PopoverProps>(), {
-    modelValue: undefined,
-    persistent: false,
+  modelValue: undefined,
+  persistent: false,
 });
 
 const emit = defineEmits<{
-    'update:modelValue': [value: boolean];
-}>()
+  'update:modelValue': [value: boolean];
+}>();
 
 const useModelValue = computed(() => props.modelValue !== undefined);
 
-const open = ref<boolean>(useModelValue.value ? Boolean(props.modelValue) : false);
+const open = ref<boolean>(
+  useModelValue.value ? Boolean(props.modelValue) : false,
+);
 
 const toggleOpen = () => {
-    open.value = !open.value;
-}
+  open.value = !open.value;
+};
 
 const calculatedPopoverWidth = computed(() => {
-    return props.popoverBalloonProps?.width || popoverWidth.value
-})
+  return props.popoverBalloonProps?.width || popoverWidth.value;
+});
 
 const popoverHeight = computed(() => {
-    return props.popoverBalloonProps?.height || 'unset'
-})
+  return props.popoverBalloonProps?.height || 'unset';
+});
 
 const popoverMaxHeight = computed(() => {
-    return props.popoverBalloonProps?.maxHeight || 'unset'
-})
+  return props.popoverBalloonProps?.maxHeight || 'unset';
+});
 
 onMounted(() => {
-    if (useModelValue.value) {
-        open.value = Boolean(props.modelValue);
-    }
-})
+  if (useModelValue.value) {
+    open.value = Boolean(props.modelValue);
+  }
+});
 
 watch(open, (value) => {
-    if (useModelValue.value) {
-        emit('update:modelValue', value);
-    }
-})
+  if (useModelValue.value) {
+    emit('update:modelValue', value);
+  }
+});
 
-watch(() => props.modelValue, (value) => {
+watch(
+  () => props.modelValue,
+  (value) => {
     open.value = !!value;
-})
-
+  },
+);
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .unnnic-popover {
-    &__balloon {
-        border-radius: $unnnic-radius-2;
-        padding: $unnnic-space-4;
-        background: $unnnic-color-bg-base;
-        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-        // margin-top: $unnnic-space-1;
-        position: fixed;
-        width: v-bind(calculatedPopoverWidth);
-        height: v-bind(popoverHeight);
-        max-height: v-bind(popoverMaxHeight);
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-            width: $unnnic-spacing-inline-nano;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: $unnnic-color-neutral-cleanest;
-            border-radius: $unnnic-border-radius-pill;
-        }
-
-        &::-webkit-scrollbar-track {
-            background: $unnnic-color-neutral-soft;
-            border-radius: $unnnic-border-radius-pill;
-        }
+  &__balloon {
+    border-radius: $unnnic-radius-2;
+    padding: $unnnic-space-4;
+    background: $unnnic-color-bg-base;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
+    // margin-top: $unnnic-space-1;
+    position: fixed;
+    width: v-bind(calculatedPopoverWidth);
+    height: v-bind(popoverHeight);
+    max-height: v-bind(popoverMaxHeight);
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-pill;
     }
+  }
 }
-</style>
+</style>

package/src/components/Select/SelectOption.vue

@@ -1,59 +1,65 @@
 <template>
-    <div :class="['unnnic-select-option', {
+  <div
+    :class="[
+      'unnnic-select-option',
+      {
         'unnnic-select-option--disabled': props.disabled,
         'unnnic-select-option--active': props.active,
         'unnnic-select-option--focused': props.focused,
-    }]">
-        <p class="unnnic-select-option__label">{{ props.label }}</p>
-    </div>
+      },
+    ]"
+  >
+    <p class="unnnic-select-option__label">{{ props.label }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
 defineOptions({
-    name: "UnnnicSelectOption"
-})
+  name: 'UnnnicSelectOption',
+});
 
 interface SelectOptionProps {
-    label: string;
-    disabled?: boolean;
-    active?: boolean;
-    focused?: boolean;
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  focused?: boolean;
 }
 
 const props = withDefaults(defineProps<SelectOptionProps>(), {
-    disabled: false,
-    active: false,
-    focused: false,
-})
+  disabled: false,
+  active: false,
+  focused: false,
+});
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .unnnic-select-option {
-    cursor: pointer;
-    border-radius: $unnnic-radius-1;
-    padding: $unnnic-space-2 $unnnic-space-4;
-    font: $unnnic-font-emphasis;
-
-    &:hover:not(&--active):not(&--disabled), &--focused {
-        background-color: $unnnic-color-bg-soft;
-    }
-
-    &--active {
-        background-color: $unnnic-color-bg-active;
-        color: $unnnic-color-fg-inverted;
-    }
-
-    &--disabled {
-        color: $unnnic-color-fg-muted;
-        background-color: $unnnic-color-bg-muted;
-        cursor: not-allowed;
-    }
+  cursor: pointer;
+  border-radius: $unnnic-radius-1;
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-emphasis;
+
+  &:hover:not(&--active):not(&--disabled),
+  &--focused {
+    background-color: $unnnic-color-bg-soft;
+  }
+
+  &--active {
+    background-color: $unnnic-color-bg-active;
+    color: $unnnic-color-fg-inverted;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+    background-color: $unnnic-color-bg-muted;
+    cursor: not-allowed;
+  }
 }
-</style>
+</style>

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

@@ -5,9 +5,9 @@ import UnnnicSelect from '../index.vue';
 vi.mock('../../mixins/i18n', () => ({
   default: {
     methods: {
-      $t: (key) => key
-    }
-  }
+      $t: (key) => key,
+    },
+  },
 }));
 
 describe('UnnnicSelect.vue', () => {
@@ -17,23 +17,23 @@ describe('UnnnicSelect.vue', () => {
     options: [
       { label: 'Option 1', value: 'option1' },
       { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' }
+      { label: 'Option 3', value: 'option3' },
     ],
-    modelValue: null
+    modelValue: null,
   };
 
   const mountWrapper = (props = {}, slots = {}) => {
     return mount(UnnnicSelect, {
       props: {
         ...defaultProps,
-        ...props
+        ...props,
       },
       global: {
         mocks: {
-          $t: (key) => key
-        }
+          $t: (key) => key,
+        },
       },
-      slots
+      slots,
     });
   };
 
@@ -119,10 +119,10 @@ describe('UnnnicSelect.vue', () => {
 
     test('input shows correct icon based on popover state', async () => {
       const input = wrapper.findComponent({ name: 'UnnnicInput' });
-      
+
       // Initially closed
       expect(input.props('iconRight')).toBe('keyboard_arrow_down');
-      
+
       // When popover is open
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
@@ -135,9 +135,9 @@ describe('UnnnicSelect.vue', () => {
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
       const options = wrapper.findAllComponents({ name: 'UnnnicSelectOption' });
-      
+
       await options[0].vm.$emit('click');
-      
+
       expect(wrapper.emitted('update:modelValue')).toBeTruthy();
       expect(wrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
     });
@@ -147,10 +147,12 @@ describe('UnnnicSelect.vue', () => {
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
       const options = wrapper.findAllComponents({ name: 'UnnnicSelectOption' });
-      
+
       await options[0].vm.$emit('click');
-      
-      expect(wrapper.emitted('update:modelValue')[0]).toEqual([{ label: 'Option 1', value: 'option1' }]);
+
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([
+        { label: 'Option 1', value: 'option1' },
+      ]);
     });
 
     test('does not emit when same option is selected', async () => {
@@ -158,25 +160,25 @@ describe('UnnnicSelect.vue', () => {
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
       const options = wrapper.findAllComponents({ name: 'UnnnicSelectOption' });
-      
+
       await options[0].vm.$emit('click');
-      
+
       expect(wrapper.emitted('update:modelValue')).toBeFalsy();
     });
 
     test('does not emit when disabled option is clicked', async () => {
       const disabledOptions = [
         { label: 'Option 1', value: 'option1' },
-        { label: 'Disabled Option', value: 'disabled', disabled: true }
+        { label: 'Disabled Option', value: 'disabled', disabled: true },
       ];
-      
+
       await wrapper.setProps({ options: disabledOptions });
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
       const options = wrapper.findAllComponents({ name: 'UnnnicSelectOption' });
-      
+
       await options[1].vm.$emit('click');
-      
+
       expect(wrapper.emitted('update:modelValue')).toBeFalsy();
     });
   });
@@ -197,20 +199,20 @@ describe('UnnnicSelect.vue', () => {
     });
 
     test('emits update:search when search input changes', async () => {
-      await wrapper.setProps({ enableSearch: true});
+      await wrapper.setProps({ enableSearch: true });
       wrapper.vm.openPopover = true;
       await wrapper.vm.$nextTick();
       const searchInput = wrapper.findAllComponents({ name: 'UnnnicInput' })[1];
-      
+
       await searchInput.vm.$emit('update:modelValue', 'test search');
-      
+
       expect(wrapper.emitted('update:search')).toBeTruthy();
       expect(wrapper.emitted('update:search')[0]).toEqual(['test search']);
     });
 
     test('filters options based on search term', async () => {
       await wrapper.setProps({ enableSearch: true, search: 'Option 1' });
-      
+
       const filteredOptions = wrapper.vm.filteredOptions;
       expect(filteredOptions.length).toBe(1);
       expect(filteredOptions[0].label).toBe('Option 1');
@@ -218,7 +220,7 @@ describe('UnnnicSelect.vue', () => {
 
     test('filters options by both label and value', async () => {
       await wrapper.setProps({ enableSearch: true, search: 'option1' });
-      
+
       const filteredOptions = wrapper.vm.filteredOptions;
       expect(filteredOptions.length).toBe(1);
       expect(filteredOptions[0].value).toBe('option1');
@@ -226,7 +228,7 @@ describe('UnnnicSelect.vue', () => {
 
     test('shows all options when search is empty', async () => {
       await wrapper.setProps({ enableSearch: true, search: '' });
-      
+
       const filteredOptions = wrapper.vm.filteredOptions;
       expect(filteredOptions.length).toBe(3);
     });
@@ -259,7 +261,10 @@ describe('UnnnicSelect.vue', () => {
 
     test('selectedItem returns modelValue for returnObject true', async () => {
       const selectedOption = { label: 'Option 2', value: 'option2' };
-      await wrapper.setProps({ returnObject: true, modelValue: selectedOption });
+      await wrapper.setProps({
+        returnObject: true,
+        modelValue: selectedOption,
+      });
       const selectedItem = wrapper.vm.selectedItem;
       expect(selectedItem).toStrictEqual(selectedOption);
     });
@@ -326,16 +331,16 @@ describe('UnnnicSelect.vue', () => {
     test('uses custom itemLabel and itemValue', async () => {
       const customOptions = [
         { name: 'Custom 1', id: 'custom1' },
-        { name: 'Custom 2', id: 'custom2' }
+        { name: 'Custom 2', id: 'custom2' },
       ];
-      
-      await wrapper.setProps({ 
-        options: customOptions, 
-        itemLabel: 'name', 
+
+      await wrapper.setProps({
+        options: customOptions,
+        itemLabel: 'name',
         itemValue: 'id',
-        modelValue: 'custom1'
+        modelValue: 'custom1',
       });
-      
+
       const inputValue = wrapper.vm.inputValue;
       expect(inputValue).toBe('Custom 1');
     });

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

@@ -3,9 +3,9 @@ import { beforeEach, describe, expect, test } from 'vitest';
 import SelectItem from '../SelectItem.vue';
 
 const createWrapper = (props = {}, slots = {}) => {
-  return mount(SelectItem, { 
+  return mount(SelectItem, {
     props,
-    slots: slots.default ? { default: slots.default } : {}
+    slots: slots.default ? { default: slots.default } : {},
   });
 };
 
@@ -76,8 +76,12 @@ describe('SelectItem.vue', () => {
     test('does not apply size class when size is empty', async () => {
       await wrapper.setProps({ size: '' });
       const labelElement = wrapper.find('.unnnic-select-item__label');
-      expect(labelElement.classes()).not.toContain('unnnic-select-item__label--md');
-      expect(labelElement.classes()).not.toContain('unnnic-select-item__label--sm');
+      expect(labelElement.classes()).not.toContain(
+        'unnnic-select-item__label--md',
+      );
+      expect(labelElement.classes()).not.toContain(
+        'unnnic-select-item__label--sm',
+      );
     });
   });
 
@@ -128,7 +132,10 @@ describe('SelectItem.vue', () => {
     });
 
     test('emits click event even when selectable is false', async () => {
-      const clickWrapper = createWrapper({ selectable: false }, { default: 'Test Item' });
+      const clickWrapper = createWrapper(
+        { selectable: false },
+        { default: 'Test Item' },
+      );
       await clickWrapper.trigger('click');
       expect(clickWrapper.emitted('click')).toBeTruthy();
       expect(clickWrapper.emitted('click').length).toBeGreaterThanOrEqual(1);
@@ -194,7 +201,7 @@ describe('SelectItem.vue', () => {
     test('has proper semantic structure', () => {
       const div = wrapper.find('.unnnic-select-item');
       const span = wrapper.find('.unnnic-select-item__label');
-      
+
       expect(div.exists()).toBe(true);
       expect(span.exists()).toBe(true);
       expect(span.element.tagName).toBe('SPAN');
@@ -214,7 +221,8 @@ describe('SelectItem.vue', () => {
     });
 
     test('handles long slot content', async () => {
-      const longText = 'This is a very long text content that should be handled properly by the component';
+      const longText =
+        'This is a very long text content that should be handled properly by the component';
       const longWrapper = createWrapper({}, { default: longText });
       const labelElement = longWrapper.find('.unnnic-select-item__label');
       expect(labelElement.text()).toBe(longText);
@@ -237,8 +245,12 @@ describe('SelectItem.vue', () => {
 
   describe('CSS class combinations', () => {
     test('applies correct classes for non-selectable inactive item', async () => {
-      await wrapper.setProps({ selectable: false, active: false, textFocused: false });
-      
+      await wrapper.setProps({
+        selectable: false,
+        active: false,
+        textFocused: false,
+      });
+
       expect(wrapper.classes()).toContain('unnnic-select-item');
       expect(wrapper.classes()).not.toContain('unnnic-select-item--selectable');
       expect(wrapper.classes()).not.toContain('unnnic--clickable');
@@ -247,8 +259,12 @@ describe('SelectItem.vue', () => {
     });
 
     test('applies correct classes for selectable active item', async () => {
-      await wrapper.setProps({ selectable: true, active: true, textFocused: false });
-      
+      await wrapper.setProps({
+        selectable: true,
+        active: true,
+        textFocused: false,
+      });
+
       expect(wrapper.classes()).toContain('unnnic-select-item');
       expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
       expect(wrapper.classes()).toContain('unnnic--clickable');
@@ -257,8 +273,12 @@ describe('SelectItem.vue', () => {
     });
 
     test('applies correct classes for text-focused item', async () => {
-      await wrapper.setProps({ selectable: true, active: false, textFocused: true });
-      
+      await wrapper.setProps({
+        selectable: true,
+        active: false,
+        textFocused: true,
+      });
+
       expect(wrapper.classes()).toContain('unnnic-select-item');
       expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
       expect(wrapper.classes()).toContain('unnnic--clickable');
@@ -298,11 +318,11 @@ describe('SelectItem.vue', () => {
     });
 
     test('matches snapshot with all states combined', async () => {
-      await wrapper.setProps({ 
+      await wrapper.setProps({
         size: 'md',
         selectable: true,
         active: true,
-        textFocused: true 
+        textFocused: true,
       });
       expect(wrapper.html()).toMatchSnapshot();
     });

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

@@ -89,7 +89,9 @@ describe('SelectOption.vue', () => {
         disabled: false,
       });
 
-      expect(wrapper.find('.unnnic-select-option__label').text()).toBe('Complex Option');
+      expect(wrapper.find('.unnnic-select-option__label').text()).toBe(
+        'Complex Option',
+      );
       expect(wrapper.classes()).toContain('unnnic-select-option--active');
       expect(wrapper.classes()).not.toContain('unnnic-select-option--disabled');
     });
@@ -114,7 +116,7 @@ describe('SelectOption.vue', () => {
     test('has proper semantic structure', () => {
       const div = wrapper.find('.unnnic-select-option');
       const p = wrapper.find('.unnnic-select-option__label');
-      
+
       expect(div.exists()).toBe(true);
       expect(p.exists()).toBe(true);
       expect(p.element.tagName).toBe('P');
@@ -134,7 +136,8 @@ describe('SelectOption.vue', () => {
     });
 
     test('handles long label text', async () => {
-      const longText = 'This is a very long label text that should be handled properly by the component';
+      const longText =
+        'This is a very long label text that should be handled properly by the component';
       await wrapper.setProps({ label: longText });
       const labelElement = wrapper.find('.unnnic-select-option__label');
       expect(labelElement.text()).toBe(longText);