@weni/unnnic-system 3.9.2 → 3.9.3-alpha.0

package/src/components/Radio/__test__/Radio.spec.js

@@ -33,41 +33,35 @@ describe('Radio.vue', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  test('renders UnnnicIcon component with correct props', () => {
-    const unnnicIcon = wrapper.findComponent(UnnnicIcon);
-    expect(unnnicIcon.exists()).toBe(true);
-    expect(unnnicIcon.props('icon')).toBe('radio-default');
-    expect(unnnicIcon.props('scheme')).toBe('neutral-cleanest');
-    expect(unnnicIcon.props('size')).toBe('md');
-  });
-
-  test('applies the correct size class', async () => {
-    expect(wrapper.classes()).toContain('unnnic-radio-container--md');
-
-    await wrapper.setProps({ size: 'sm' });
-    expect(wrapper.classes()).toContain('unnnic-radio-container--sm');
+  test('renders input with correct attributes', () => {
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('radio');
+    expect(input.attributes('disabled')).toBe(undefined);
+    expect(input.attributes('checked')).toBe(undefined);
   });
 
   test('applies disabled class when disabled prop is true', async () => {
     await wrapper.setProps({ disabled: true });
-    expect(wrapper.classes()).toContain('disabled');
+    expect(wrapper.find('.unnnic-radio__label').classes()).toContain(
+      'unnnic-radio__label--disabled',
+    );
   });
 
   test('icon changes based on valueName', async () => {
     await wrapper.setProps({ modelValue: 'option1' });
-    const unnnicIcon = wrapper.findComponent(UnnnicIcon);
-    expect(unnnicIcon.props('icon')).toBe('radio-selected');
+    const input = wrapper.find('input');
+    expect(input.attributes()).toHaveProperty('checked');
   });
 
   test('icon and color change when disabled is true', async () => {
     await wrapper.setProps({ disabled: true });
-    const unnnicIcon = wrapper.findComponent(UnnnicIcon);
-    expect(unnnicIcon.props('icon')).toBe('radio-disable');
-    expect(unnnicIcon.props('scheme')).toBe('brand-sec');
+    const input = wrapper.find('input');
+    expect(input.attributes()).toHaveProperty('disabled');
   });
 
   test('emits update:modelValue with correct value when clicked and not disabled', async () => {
-    await wrapper.trigger('click');
+    await wrapper.find('input').trigger('change');
     expect(wrapper.emitted('update:modelValue')).toBeTruthy();
     expect(wrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
   });

package/src/components/Radio/__test__/__snapshots__/Radio.spec.js.snap

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio.vue > matches the snapshot 1`] = `
-"<div data-v-38c6bf5e="" class="unnnic-radio-container unnnic-radio-container--md"><svg data-v-26446d8e="" data-v-38c6bf5e="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon--size-svg-md unnnic-icon__size--md unnnic-icon-scheme--neutral-cleanest unnnic-radio" data-testid="custom-icon">
-    <circle cx="20" cy="20.0005" r="14.5" stroke="#3B414D" class="primary-stroke"></circle>
-  </svg><span data-v-38c6bf5e="" class="label">Option 1</span></div>"
+"<section data-v-38c6bf5e="" class="unnnic-radio" size="md"><label data-v-38c6bf5e="" class="unnnic-radio__input-wrapper"><input data-v-38c6bf5e="" class="unnnic-radio__input" type="radio" name="">
+    <p data-v-38c6bf5e="" class="unnnic-radio__label"> Option 1</p>
+    <!--v-if-->
+  </label></section>"
 `;

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,142 @@
+<template>
+  <section
+    :class="[
+      'unnnic-radio-group__container',
+      `unnnic-radio-group--state-${state}`,
+    ]"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
+      :tooltip="labelTooltip"
+      :useHtmlTooltip="labelUseHtmlTooltip"
+      class="unnnic-radio-group__label"
+    />
+
+    <section class="unnnic-radio-group__radios">
+      <slot />
+    </section>
+
+    <footer
+      v-if="helper"
+      class="unnnic-radio-group__helper"
+    >
+      {{ helper }}
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import { ref, provide, watch, computed } from 'vue';
+import UnnnicLabel from '../Label/Label.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+
+  state: {
+    type: String,
+    default: 'horizontal',
+    validator(value) {
+      return ['horizontal', 'vertical'].includes(value);
+    },
+  },
+
+  label: {
+    type: String,
+  },
+
+  labelTooltip: {
+    type: String,
+  },
+
+  labelUseHtmlTooltip: {
+    type: Boolean,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  helper: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const contextModelValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== contextModelValue.value) {
+      contextModelValue.value = newVal;
+    }
+  },
+);
+
+watch(contextModelValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit('update:modelValue', newVal);
+  }
+});
+
+const computedName = computed(() => {
+  return (
+    props.name ||
+    `unnnic-radio-group-${Math.random().toString(36).substring(2, 15)}`
+  );
+});
+
+provide('contextModelValue', contextModelValue);
+provide('contextName', computedName);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-radio-group {
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__label {
+    margin-bottom: $unnnic-space-3;
+  }
+
+  &__radios {
+    display: flex;
+    gap: $unnnic-space-4 $unnnic-space-6;
+  }
+
+  &__helper {
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
+
+  &--state-horizontal {
+    .unnnic-radio-group__radios {
+      flex-direction: row;
+    }
+
+    .unnnic-radio-group__helper {
+      margin-top: $unnnic-space-2;
+    }
+  }
+
+  &--state-vertical {
+    .unnnic-radio-group__radios {
+      flex-direction: column;
+    }
+
+    .unnnic-radio-group__helper {
+      margin-top: $unnnic-space-3;
+    }
+  }
+}
+</style>

package/src/components/Select/SelectOption.vue

@@ -0,0 +1,65 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'UnnnicSelectOption',
+});
+
+interface SelectOptionProps {
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  focused?: boolean;
+}
+
+const props = withDefaults(defineProps<SelectOptionProps>(), {
+  disabled: false,
+  active: false,
+  focused: false,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+* {
+  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;
+  }
+}
+</style>

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

@@ -0,0 +1,412 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import UnnnicSelect from '../index.vue';
+
+vi.mock('../../mixins/i18n', () => ({
+  default: {
+    methods: {
+      $t: (key) => key,
+    },
+  },
+}));
+
+describe('UnnnicSelect.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    modelValue: null,
+  };
+
+  const mountWrapper = (props = {}, slots = {}) => {
+    return mount(UnnnicSelect, {
+      props: {
+        ...defaultProps,
+        ...props,
+      },
+      global: {
+        mocks: {
+          $t: (key) => key,
+        },
+      },
+      slots,
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = mountWrapper();
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  describe('rendering', () => {
+    test('renders correctly', () => {
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find('.unnnic-select').exists()).toBe(true);
+    });
+
+    test('renders input component', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.exists()).toBe(true);
+    });
+
+    test('renders popover component', () => {
+      const popover = wrapper.findComponent({ name: 'UnnnicPopover' });
+      expect(popover.exists()).toBe(true);
+    });
+
+    test('renders select options when popover is open', async () => {
+      wrapper.vm.openPopover = true;
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents({ name: 'UnnnicSelectOption' });
+      expect(options.length).toBe(3);
+    });
+  });
+
+  describe('props validation', () => {
+    test('validates required options prop', () => {
+      const { options } = wrapper.vm.$options.props;
+      expect(options.required).toBe(true);
+    });
+
+    test('validates required modelValue prop', () => {
+      const { modelValue } = wrapper.vm.$options.props;
+      expect(modelValue.required).toBe(true);
+    });
+
+    test('applies default values correctly', () => {
+      expect(wrapper.vm.size).toBe('md');
+      expect(wrapper.vm.type).toBe('normal');
+      expect(wrapper.vm.placeholder).toBe('');
+      expect(wrapper.vm.optionsLines).toBe(5);
+      expect(wrapper.vm.returnObject).toBe(false);
+      expect(wrapper.vm.itemLabel).toBe('label');
+      expect(wrapper.vm.itemValue).toBe('value');
+      expect(wrapper.vm.locale).toBe('en');
+      expect(wrapper.vm.enableSearch).toBe(false);
+      expect(wrapper.vm.disabled).toBe(false);
+    });
+  });
+
+  describe('input display', () => {
+    test('displays placeholder when no option is selected', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('placeholder')).toBe('');
+    });
+
+    test('displays selected option label', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('modelValue')).toBe('Option 1');
+    });
+
+    test('displays custom placeholder', async () => {
+      await wrapper.setProps({ placeholder: 'Select an option' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('placeholder')).toBe('Select an option');
+    });
+
+    test('input is readonly', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('readonly')).toBe(true);
+    });
+
+    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();
+      expect(input.props('iconRight')).toBe('keyboard_arrow_up');
+    });
+  });
+
+  describe('option selection', () => {
+    test('emits update:modelValue when option is selected', async () => {
+      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']);
+    });
+
+    test('emits object when returnObject is true', async () => {
+      await wrapper.setProps({ returnObject: true });
+      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' },
+      ]);
+    });
+
+    test('does not emit when same option is selected', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      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 },
+      ];
+
+      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();
+    });
+  });
+
+  describe('search functionality', () => {
+    test('renders search input when enableSearch is true', async () => {
+      await wrapper.setProps({ enableSearch: true });
+      wrapper.vm.openPopover = true;
+      await wrapper.vm.$nextTick();
+      const searchInputs = wrapper.findAllComponents({ name: 'UnnnicInput' });
+      expect(searchInputs.length).toBe(2); // Main input + search input
+    });
+
+    test('does not render search input when enableSearch is false', async () => {
+      await wrapper.setProps({ enableSearch: false, modelValue: true });
+      const searchInputs = wrapper.findAllComponents({ name: 'UnnnicInput' });
+      expect(searchInputs.length).toBe(1); // Only main input
+    });
+
+    test('emits update:search when search input changes', async () => {
+      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');
+    });
+
+    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');
+    });
+
+    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);
+    });
+  });
+
+  describe('computed properties', () => {
+    test('calculatedMaxHeight returns correct value', () => {
+      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      expect(maxHeight).toBe('235px');
+    });
+
+    test('calculatedMaxHeight includes search height when enabled', async () => {
+      await wrapper.setProps({ enableSearch: true });
+      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      expect(maxHeight).toBe('289px');
+    });
+
+    test('calculatedMaxHeight returns unset when no options', async () => {
+      await wrapper.setProps({ options: [] });
+      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      expect(maxHeight).toBe('unset');
+    });
+
+    test('selectedItem returns correct item for returnObject false', async () => {
+      await wrapper.setProps({ modelValue: 'option2' });
+      const selectedItem = wrapper.vm.selectedItem;
+      expect(selectedItem.label).toBe('Option 2');
+      expect(selectedItem.value).toBe('option2');
+    });
+
+    test('selectedItem returns modelValue for returnObject true', async () => {
+      const selectedOption = { label: 'Option 2', value: 'option2' };
+      await wrapper.setProps({
+        returnObject: true,
+        modelValue: selectedOption,
+      });
+      const selectedItem = wrapper.vm.selectedItem;
+      expect(selectedItem).toStrictEqual(selectedOption);
+    });
+
+    test('inputValue returns correct label', async () => {
+      await wrapper.setProps({ modelValue: 'option3' });
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBe('Option 3');
+    });
+
+    test('inputValue returns undefined when no selection', () => {
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBeUndefined();
+    });
+  });
+
+  describe('disabled state', () => {
+    test('passes disabled prop to input', async () => {
+      await wrapper.setProps({ disabled: true });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('disabled')).toBe(true);
+    });
+
+    test('input is not disabled by default', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('disabled')).toBe(false);
+    });
+  });
+
+  describe('size prop', () => {
+    test('passes size prop to input', async () => {
+      await wrapper.setProps({ size: 'sm' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('size')).toBe('sm');
+    });
+
+    test('defaults to md size', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('size')).toBe('md');
+    });
+  });
+
+  describe('label and message props', () => {
+    test('passes label prop to input', async () => {
+      await wrapper.setProps({ label: 'Select Label' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('label')).toBe('Select Label');
+    });
+
+    test('passes message prop to input', async () => {
+      await wrapper.setProps({ message: 'Select Message' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('message')).toBe('Select Message');
+    });
+
+    test('passes errors prop to input', async () => {
+      await wrapper.setProps({ errors: 'Error message' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('errors')).toBe('Error message');
+    });
+  });
+
+  describe('custom item keys', () => {
+    test('uses custom itemLabel and itemValue', async () => {
+      const customOptions = [
+        { name: 'Custom 1', id: 'custom1' },
+        { name: 'Custom 2', id: 'custom2' },
+      ];
+
+      await wrapper.setProps({
+        options: customOptions,
+        itemLabel: 'name',
+        itemValue: 'id',
+        modelValue: 'custom1',
+      });
+
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBe('Custom 1');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles empty options array', async () => {
+      await wrapper.setProps({ options: [] });
+      expect(wrapper.vm.filteredOptions).toEqual([]);
+      expect(wrapper.vm.calculatedMaxHeight).toBe('unset');
+    });
+
+    test('handles null modelValue', async () => {
+      await wrapper.setProps({ modelValue: null });
+      expect(wrapper.vm.inputValue).toBeUndefined();
+      expect(wrapper.vm.selectedItem).toBeUndefined();
+    });
+
+    test('handles undefined modelValue', async () => {
+      await wrapper.setProps({ modelValue: undefined });
+      expect(wrapper.vm.inputValue).toBeUndefined();
+      expect(wrapper.vm.selectedItem).toBeUndefined();
+    });
+
+    test('handles case insensitive search', 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');
+    });
+
+    test('handles partial search matches', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'tion' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(3); // All options contain 'tion'
+    });
+  });
+
+  describe('component structure', () => {
+    test('has correct component name', () => {
+      expect(wrapper.vm.$options.name).toBe('UnnnicSelect');
+    });
+
+    test('includes i18n mixin', () => {
+      expect(wrapper.vm.$options.mixins).toBeDefined();
+    });
+  });
+
+  describe('snapshot testing', () => {
+    test('matches snapshot with default props', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with selected value', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with search enabled', async () => {
+      await wrapper.setProps({ enableSearch: true, modelValue: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with disabled state', async () => {
+      await wrapper.setProps({ disabled: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});