@weni/unnnic-system 3.12.2 → 3.12.3-alpha.0

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

@@ -0,0 +1,229 @@
+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

@@ -0,0 +1,121 @@
+// 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

@@ -0,0 +1,51 @@
+// 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

@@ -0,0 +1,224 @@
+<template>
+  <div class="unnnic-multi-select">
+    <Popover
+      :open="openPopover"
+      @update:open="openPopover = $event"
+    >
+      <PopoverTrigger>
+        <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', [])"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        :style="{ maxHeight: calculatedMaxHeight, overflow: 'auto' }"
+      >
+        <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>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover';
+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>