@weni/unnnic-system 3.9.4-alpha.4 → 3.10.0

package/src/components/MultiSelectV2/__tests__/MultiSelectOption.spec.js

@@ -1,229 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test, afterEach } from 'vitest';
-import MultiSelectOption from '../MultSelectOption.vue';
-
-const createWrapper = (props = {}) => {
-  return mount(MultiSelectOption, { props });
-};
-
-describe('MultiSelectOption.vue', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = createWrapper({
-      label: 'Test Option',
-    });
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  test('applies the correct base CSS class', () => {
-    expect(wrapper.classes()).toContain('unnnic-multi-select-option');
-  });
-
-  test('renders UnnnicCheckbox component', () => {
-    const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-    expect(checkbox.exists()).toBe(true);
-  });
-
-  test('passes label prop to checkbox', () => {
-    const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-    expect(checkbox.props('label')).toBe('Test Option');
-  });
-
-  describe('props validation', () => {
-    test('validates required label prop', () => {
-      const wrapper = createWrapper({ label: 'Required Label' });
-      expect(wrapper.props('label')).toBe('Required Label');
-    });
-
-    test('validates optional disabled prop with default value', () => {
-      expect(wrapper.props('disabled')).toBe(false);
-    });
-
-    test('validates optional active prop with default value', () => {
-      expect(wrapper.props('active')).toBe(false);
-    });
-
-    test('validates optional focused prop with default value', () => {
-      expect(wrapper.props('focused')).toBe(false);
-    });
-  });
-
-  describe('disabled state', () => {
-    test('passes disabled prop to checkbox when disabled is true', async () => {
-      await wrapper.setProps({ disabled: true });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('disabled')).toBe(true);
-    });
-
-    test('passes disabled prop to checkbox when disabled is false', async () => {
-      await wrapper.setProps({ disabled: false });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('disabled')).toBe(false);
-    });
-  });
-
-  describe('active state', () => {
-    test('passes active prop to checkbox modelValue when active is true', async () => {
-      await wrapper.setProps({ active: true });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('modelValue')).toBe(true);
-    });
-
-    test('passes active prop to checkbox modelValue when active is false', async () => {
-      await wrapper.setProps({ active: false });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('modelValue')).toBe(false);
-    });
-  });
-
-  describe('events', () => {
-    test('emits update:modelValue when checkbox emits update:model-value', async () => {
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-
-      await checkbox.vm.$emit('update:model-value', true);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0][0]).toBe(true);
-    });
-
-    test('emits update:modelValue with toggled value when active is false', async () => {
-      await wrapper.setProps({ active: false });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-
-      await checkbox.vm.$emit('update:model-value', true);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0][0]).toBe(true);
-    });
-
-    test('emits update:modelValue with toggled value when active is true', async () => {
-      await wrapper.setProps({ active: true });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-
-      await checkbox.vm.$emit('update:model-value', false);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0][0]).toBe(false);
-    });
-  });
-
-  describe('combined states', () => {
-    test('can be both active and disabled', async () => {
-      await wrapper.setProps({ active: true, disabled: true });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-
-      expect(checkbox.props('modelValue')).toBe(true);
-      expect(checkbox.props('disabled')).toBe(true);
-    });
-
-    test('renders correctly with all props', async () => {
-      await wrapper.setProps({
-        label: 'Complex Option',
-        active: true,
-        disabled: false,
-        focused: true,
-      });
-
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('label')).toBe('Complex Option');
-      expect(checkbox.props('modelValue')).toBe(true);
-      expect(checkbox.props('disabled')).toBe(false);
-    });
-  });
-
-  describe('component structure', () => {
-    test('has correct component name', () => {
-      expect(wrapper.vm.$options.name).toBe('UnnnicMultiSelectOption');
-    });
-
-    test('renders a div element', () => {
-      expect(wrapper.element.tagName).toBe('DIV');
-    });
-
-    test('contains UnnnicCheckbox component', () => {
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.exists()).toBe(true);
-    });
-  });
-
-  describe('edge cases', () => {
-    test('handles empty label', async () => {
-      await wrapper.setProps({ label: '' });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('label')).toBe('');
-    });
-
-    test('handles long label text', async () => {
-      const longText =
-        'This is a very long label text that should be handled properly by the component';
-      await wrapper.setProps({ label: longText });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('label')).toBe(longText);
-    });
-
-    test('handles special characters in label', async () => {
-      const specialText = 'Option with special chars: @#$%^&*()';
-      await wrapper.setProps({ label: specialText });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('label')).toBe(specialText);
-    });
-
-    test('handles rapid state changes', async () => {
-      await wrapper.setProps({ active: true });
-      await wrapper.setProps({ active: false });
-      await wrapper.setProps({ active: true });
-
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('modelValue')).toBe(true);
-    });
-  });
-
-  describe('accessibility', () => {
-    test('checkbox receives disabled state for accessibility', async () => {
-      await wrapper.setProps({ disabled: true });
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('disabled')).toBe(true);
-    });
-
-    test('checkbox receives label for accessibility', () => {
-      const checkbox = wrapper.findComponent({ name: 'UnnnicCheckbox' });
-      expect(checkbox.props('label')).toBe('Test Option');
-    });
-  });
-
-  describe('snapshot testing', () => {
-    test('matches snapshot with default props', () => {
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('matches snapshot with active state', async () => {
-      await wrapper.setProps({ active: true });
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('matches snapshot with disabled state', async () => {
-      await wrapper.setProps({ disabled: true });
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('matches snapshot with both active and disabled states', async () => {
-      await wrapper.setProps({ active: true, disabled: true });
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('matches snapshot with focused state', async () => {
-      await wrapper.setProps({ focused: true });
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-});

package/src/components/MultiSelectV2/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -1,121 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="" disabled="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multiple selected values 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with selected values 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="Option 1">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;

package/src/components/MultiSelectV2/__tests__/__snapshots__/MultiSelectOption.spec.js.snap

@@ -1,51 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with active state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" checked="">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with both active and disabled states 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" disabled="" checked="">
-      <p data-v-18939422="" class="unnnic-checkbox__label unnnic-checkbox__label--disabled" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" disabled="">
-      <p data-v-18939422="" class="unnnic-checkbox__label unnnic-checkbox__label--disabled" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with focused state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;

package/src/components/MultiSelectV2/index.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="unnnic-multi-select">
-    <UnnnicPopover
-      v-model="openPopover"
-      :popoverBalloonProps="{ maxHeight: calculatedMaxHeight }"
-    >
-      <template #trigger>
-        <UnnnicInput
-          :modelValue="inputValue"
-          class="unnnic-multi-select__input"
-          readonly
-          :forceActiveStatus="openPopover"
-          :size="props.size"
-          :placeholder="props.placeholder"
-          :label="props.label"
-          :errors="props.errors"
-          :message="props.message"
-          :iconRight="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-          :disabled="props.disabled"
-          showClear
-          @clear="emit('update:modelValue', [])"
-        />
-      </template>
-      <template #content>
-        <div class="unnnic-multi-select__content">
-          <UnnnicInput
-            v-if="props.enableSearch"
-            class="unnnic-multi-select__input-search"
-            :modelValue="props.search"
-            :placeholder="$t('search')"
-            iconLeft="search"
-            @update:model-value="handleSearch"
-          />
-          <div class="unnnic-multi-select__options">
-            <UnnnicMultiSelectOption
-              v-for="(option, index) in filteredOptions"
-              :key="option[props.itemValue]"
-              :data-option-index="index"
-              :label="option[props.itemLabel]"
-              :active="getActivatedOptionStatus(option)"
-              :focused="focusedOptionIndex === index"
-              :disabled="option.disabled"
-              @update:model-value="handleSelectOption(option, $event)"
-            />
-          </div>
-        </div>
-      </template>
-    </UnnnicPopover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import UnnnicPopover from '../Popover/index.vue';
-import UnnnicInput from '../Input/Input.vue';
-import UnnnicMultiSelectOption from './MultSelectOption.vue';
-
-defineOptions({
-  name: 'UnnnicMultiSelect',
-});
-
-interface MultiSelectProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: Array<{ [key: string]: any }>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modelValue: any[];
-  returnObject?: boolean;
-  itemLabel?: string;
-  itemValue?: string;
-  placeholder?: string;
-  label?: string;
-  type?: 'normal' | 'error';
-  errors?: string | Array<string>;
-  message?: string;
-  size?: 'sm' | 'md';
-  optionsLines?: number;
-  enableSearch?: boolean;
-  search?: string;
-  locale?: string;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<MultiSelectProps>(), {
-  size: 'md',
-  type: 'normal',
-  placeholder: '',
-  optionsLines: 5,
-  returnObject: false,
-  itemLabel: 'label',
-  itemValue: 'value',
-  locale: 'en',
-  enableSearch: false,
-  disabled: false,
-  label: '',
-  errors: '',
-  message: '',
-  search: '',
-});
-
-const openPopover = ref(false);
-
-const calculatedMaxHeight = computed(() => {
-  if (!props.options || props.options.length === 0) return 'unset';
-  const popoverSearchGap = props.enableSearch ? 16 : 0;
-  const popoverGap = 24;
-  const fieldsHeight = 22 * props.optionsLines;
-  const size = fieldsHeight + (popoverGap * props.optionsLines - 2);
-  return `${props.enableSearch ? size + 51 + popoverSearchGap : size}px`;
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown[]];
-  'update:search': [string];
-}>();
-
-const focusedOptionIndex = ref<number>(-1);
-
-const selectedItems = computed(() => {
-  if (props.returnObject) return props.modelValue;
-
-  const modelValueValues = props.returnObject
-    ? props.modelValue.map((item) => item[props.itemValue])
-    : props.modelValue;
-
-  return props.options.filter((option) =>
-    modelValueValues.includes(option[props.itemValue]),
-  );
-});
-const inputValue = computed(() => {
-  return selectedItems.value.map((item) => item[props.itemLabel]).join(', ');
-});
-
-const filteredOptions = computed(() => {
-  if (!props.enableSearch || !props.search) return props.options;
-
-  return props.options.filter(
-    (option) =>
-      option[props.itemLabel]
-        .toLowerCase()
-        .includes(props.search?.toLowerCase()) ||
-      option[props.itemValue]
-        .toLowerCase()
-        .includes(props.search?.toLowerCase()),
-  );
-});
-
-const handleSearch = (value: string) => {
-  emit('update:search', value);
-};
-
-const getActivatedOptionStatus = (option: (typeof props.options)[number]) => {
-  if (props.returnObject) {
-    return props.modelValue.find(
-      (item) => item[props.itemValue] === option[props.itemValue],
-    );
-  }
-  return props.modelValue.includes(option[props.itemValue]);
-};
-
-const handleSelectOption = (
-  option: (typeof props.options)[number],
-  selected: boolean,
-) => {
-  if (selected) {
-    emit(
-      'update:modelValue',
-      props.returnObject
-        ? [...props.modelValue, option]
-        : [...props.modelValue, option[props.itemValue]],
-    );
-  } else {
-    emit(
-      'update:modelValue',
-      props.returnObject
-        ? props.modelValue.filter(
-            (item) => item[props.itemValue] !== option[props.itemValue],
-          )
-        : props.modelValue.filter((item) => item !== option[props.itemValue]),
-    );
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-:deep(.unnnic-multi-select__input) {
-  cursor: pointer;
-}
-
-:deep(.unnnic-multi-select__input-search) {
-  > .icon-left {
-    color: $unnnic-color-fg-base;
-  }
-}
-
-:deep(.unnnic-multi-select__input) {
-  > .icon-right {
-    color: $unnnic-color-fg-base;
-  }
-}
-
-.unnnic-multi-select {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    gap: $unnnic-space-4;
-  }
-
-  &__options {
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-6;
-  }
-}
-</style>