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

package/src/components/Popover/index.vue

@@ -1,146 +1,131 @@
 <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 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>
 </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,65 +1,59 @@
 <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,12 +147,10 @@ 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 () => {
@@ -160,25 +158,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();
     });
   });
@@ -199,20 +197,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');
@@ -220,7 +218,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');
@@ -228,7 +226,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);
     });
@@ -261,10 +259,7 @@ 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);
     });
@@ -331,16 +326,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,12 +76,8 @@ 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');
     });
   });
 
@@ -132,10 +128,7 @@ 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);
@@ -201,7 +194,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');
@@ -221,8 +214,7 @@ 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);
@@ -245,12 +237,8 @@ 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');
@@ -259,12 +247,8 @@ 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');
@@ -273,12 +257,8 @@ 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');
@@ -318,11 +298,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,9 +89,7 @@ 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');
     });
@@ -116,7 +114,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');
@@ -136,8 +134,7 @@ 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);