vueless 0.0.2 → 0.0.3

package/ui.form-select/index.vue

@@ -1,1025 +1,753 @@
 <template>
-  <div class="mono-select-block">
-    <div :id="wrapperId" class="mono-select-wrapper" :class="multiselectClass">
-      <label v-if="label" class="label" :class="labelClasses" :for="id">
-        {{ label }}
-      </label>
-
-      <Multiselect
-        :id="id"
-        ref="select"
-        v-model="selectValue"
-        class="mono-select"
-        :options="options"
-        :options-limit="optionsLimit"
-        :label="itemLabel"
-        :group-label="groupLabel"
-        :group-values="groupValues"
-        :track-by="valueKey"
-        :open-direction="openDirection"
-        select-label=""
-        deselect-label=""
-        selected-label=""
-        :hide-selected="false"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :allow-empty="false"
-        :loading="isLoading"
-        :searchable="searchable"
-        :data-cy="dataCy"
-        :class="hideInactiveElement(modelValue, options)"
-        :option-height="optionHeight"
-        @open="onOpen"
-        @close="onClose"
-        @searchChange="onSearchChange"
-        @remove="removeValue"
+  <ULabel
+    ref="labelComponentRef"
+    :for="id"
+    :size="size"
+    :label="label"
+    :error="errorMessage"
+    :description="descriptionMessage"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <div
+      ref="wrapperRef"
+      :tabindex="searchable ? -1 : 0"
+      role="combobox"
+      :aria-owns="'listbox-' + id"
+      v-bind="wrapperAttrs"
+      @focus="activate"
+      @blur="deactivate"
+      @keydown.self.down.prevent="dropdownListRef.pointerForward"
+      @keydown.self.up.prevent="dropdownListRef.pointerBackward"
+      @keydown.enter.tab.stop.self="dropdownListRef.addPointerElement"
+      @keyup.esc="deactivate"
+    >
+      <div
+        v-if="hasSlotContent($slots['after-caret']) && !(multiple && localValue.length)"
+        v-bind="afterCaretSlotAttrs"
       >
-        <template #singleLabel="props">
-          <!-- @slot Use it to add single label. -->
-          <slot :scope-props="props" name="singleLabel" />
-          <span v-if="!isShownSingleLabelSlot" class="mono-select-single-slot">
-            {{ props.option[itemLabel] }}
-          </span>
+        <!-- @slot Use it to add something after caret. -->
+        <slot :scope-props="props" name="after-caret" />
+      </div>
 
-          <span>
-            <!-- @slot Use it to add after single label. -->
-            <slot :scope-props="props" name="singleLabelAfter" />
-          </span>
-        </template>
+      <div
+        v-show="!multiple || (!isLocalValue && multiple)"
+        v-bind="caretToggleAttrs"
+        @mousedown.prevent.stop="toggle"
+      >
+        <UIcon
+          interactive
+          color="gray"
+          :size="size"
+          :name="config.iconToggleName"
+          v-bind="iconToggleAttrs"
+        />
+      </div>
+
+      <div
+        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue.length)"
+        v-bind="beforeCaretSlotAttrs"
+      >
+        <!-- @slot Use it to add something after caret. -->
+        <slot :scope-props="props" name="before-caret" />
+      </div>
 
-        <template #option="props">
-          <!-- @slot Use it to add option. -->
-          <slot :scope-props="props" name="option" />
+      <div v-if="isLocalValue && !noClear && !disabled && !multiple" v-bind="caretClearAttrs">
+        <UIcon
+          interactive
+          color="gray"
+          :size="size"
+          :name="config.iconClearName"
+          v-bind="iconClearAttrs"
+          @mousedown="removeElement"
+        />
+      </div>
 
-          <div v-if="groupValues && !isShownOptionSlot">
-            <div v-if="props.option.$groupLabel">
-              {{ props.option.$groupLabel }}
-            </div>
+      <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
+        <div v-if="multiple" v-bind="selectedLabelsAttrs">
+          <span v-for="item in localValue" :key="item[valueKey]" v-bind="selectedLabelAttrs">
+            <!-- @slot Use it to add selected value label. -->
+            <slot
+              name="selected-label"
+              :selected-label="getOptionLabel(item)"
+              :value="item[valueKey]"
+              :raw-option="item"
+            >
+              {{ getOptionLabel(item) }}
+            </slot>
+
+            <!-- @slot Use it to add selected value label. -->
+            <slot :scope-props="props" name="selected-label-after" />
 
             <div
-              v-else-if="props.option.isSubGroup"
-              class="group-label"
-              :style="leftMarginForSubCategory(props.option.level)"
+              v-if="!disabled"
+              v-bind="caretRemoveItemAttrs"
+              @mousedown.prevent.capture
+              @click.prevent.capture
             >
-              {{ props.option[itemLabel] }}
+              <UIcon
+                interactive
+                color="gray"
+                :size="size"
+                :name="config.iconRemoveItemName"
+                v-bind="iconRemoveItemAttrs"
+                @mousedown="removeElement(item)"
+              />
             </div>
+          </span>
+        </div>
+
+        <div v-bind="searchAttrs">
+          <span
+            v-if="hasSlotContent($slots['left'])"
+            ref="leftSlotWrapperRef"
+            v-bind="leftSlotAttrs"
+          >
+            <!-- @slot Use it to add some component before text. -->
+            <slot name="left" />
+          </span>
 
-            <div v-else :style="leftMarginForSubCategory(props.option.level)" class="select-label">
-              <!-- @slot Use it to add something before option. -->
-              <slot :option="props.option" name="beforeOption"></slot>
-              {{ props.option[itemLabel] }}
-            </div>
-          </div>
-          <div v-else class="select-label">
-            <!-- @slot Use it to add something before option. -->
-            <slot :option="props.option" name="beforeOption"></slot>
-            {{ props.option[itemLabel] }}
-          </div>
-        </template>
+          <input
+            v-show="searchable || !localValue || multiple || !isOpen"
+            :id="id"
+            ref="searchInputRef"
+            v-model="search"
+            :name="name"
+            type="text"
+            autocomplete="off"
+            :spellcheck="false"
+            :placeholder="inputPlaceholder"
+            :value="search"
+            :disabled="disabled"
+            :aria-controls="'listbox-' + id"
+            v-bind="searchInputAttrs"
+            @focus="activate"
+            @blur.prevent="deactivate"
+            @keyup.esc="deactivate"
+            @keydown.down.prevent="dropdownListRef.pointerForward"
+            @keydown.up.prevent="dropdownListRef.pointerBackward"
+            @keydown.enter.prevent.stop.self="dropdownListRef.addPointerElement"
+          />
+        </div>
+
+        <span
+          v-if="isSelectedValueLabelVisible"
+          v-bind="selectedLabelAttrs"
+          @mousedown.prevent="toggle"
+        >
+          <!-- @slot Use it to add selected value label. -->
+          <slot name="selected-label" :selected-label="selectedLabel" :value="localValue[valueKey]">
+            {{ selectedLabel }}
+          </slot>
+
+          <!-- @slot Use it to add selected value label. -->
+          <slot :scope-props="props" name="selected-label-after" />
+        </span>
+
+        <div
+          v-if="isLocalValue && !noClear && !disabled && multiple"
+          v-bind="caretClearTextAttrs"
+          @mousedown.prevent.capture="removeElement(localValue)"
+          @click.prevent.capture
+          v-text="i18n.clear"
+        />
+      </div>
 
-        <template #noResult>
-          {{ i18n.listIsEmpty }}
+      <UDropdownList
+        v-show="isOpen"
+        ref="dropdownListRef"
+        v-model="dropdownValue"
+        :options="filteredOptions"
+        :disabled
+        :size
+        :max-height="optimizedHeight"
+        :option-height="optionHeight"
+        :value-key
+        :label-key
+        :add-option
+        tabindex="-1"
+        v-bind="dropdownListAttrs"
+        @focus="activate"
+        @addOption="onAddOption"
+        @mousedown.prevent.capture
+        @click.prevent.capture
+      >
+        <template #before-option="{ option }">
+          <!-- @slot Use it to add something before option. -->
+          <slot :option="option" name="before-option" />
         </template>
 
-        <template #noOptions>
-          {{ i18n.noDataToShow }}
+        <template #option="{ option, index }">
+          <slot name="option" :option="option" :index="index" />
         </template>
 
-        <template #caret="{ toggle }">
-          <div class="mono-select-caret-down" @mousedown.prevent.stop="toggle">
-            <UIcon
-              interactive
-              :size="iconSize"
-              color="gray"
-              name="expand_more"
-              class="icon"
-              :data-cy="`${dataCy}-caret`"
-            />
-          </div>
-
-          <div v-if="selectValue && allowEmpty && !disabled" class="mono-select-caret-close">
-            <UIcon
-              interactive
-              :size="iconSize"
-              color="gray"
-              name="close"
-              :data-cy="`${dataCy}-close`"
-              @mousedown="[onMousedownRemoveValue(), toggle()]"
-            />
-          </div>
+        <template #after-option="{ option }">
+          <!-- @slot Use it to add something after option. -->
+          <slot :option="option" name="after-option" />
         </template>
 
-        <template #afterList>
-          <div v-if="addOption" class="mono-select-add-wrapper" @click="onClickAddOption">
-            <div class="mono-select-add-title">
-              {{ i18n.add }}
-              <span class="mono-select-add-title-command">{{ addOptionKeyCombination }}</span>
-            </div>
-
-            <UButton ref="addOptionButton" class="mono-select-add-button">
-              <UIcon name="add" class="mono-select-add-icon" color="white" pill size="2xs" />
-            </UButton>
-          </div>
+        <template #empty="{ emptyStyles }">
+          <span v-show="isEmpty" :class="emptyStyles" v-text="i18n.listIsEmpty" />
+          <span
+            v-show="options.length === 0 && !search && !isEmpty"
+            :class="emptyStyles"
+            v-text="i18n.noDataToShow"
+          />
         </template>
-      </Multiselect>
-
-      <div v-if="isShownAfterCaretSlot" class="after-caret-slot">
-        <!-- @slot Use it to add something after caret. -->
-        <slot name="after-caret" />
-      </div>
+      </UDropdownList>
     </div>
-
-    <div v-if="description && !error" class="description">
-      {{ description }}
-    </div>
-
-    <p
-      v-if="error && !modelValue.length"
-      class="error-message"
-      :data-cy="`${dataCy}-error-message`"
-    >
-      {{ error }}
-    </p>
-  </div>
+  </ULabel>
 </template>
 
-<script>
-import Multiselect from "vue-multiselect";
-import { getRandomId, isMac, PX_IN_REM } from "vueless/service.ui";
-import I18nServiceDefault from "vueless/service.i18n";
+<script setup>
+import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
 import debounce from "lodash.debounce";
 
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
+import UIService, { getRandomId, isMac } from "vueless/service.ui";
+import I18nServiceDefault from "@vueless/services/i18n";
 
-export default {
-  name: "USelect",
-  components: {
-    Multiselect,
-    UButton,
-    UIcon,
-  },
+import SelectService from "./services/select.service";
+import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+import { USelect, DIRECTION, KEY_CODES } from "./constants";
 
-  props: {
-    /**
-     * Set input select value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set component label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Label from option Object, that will be visible in the dropdown.
-     */
-    itemLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set input placeholder.
-     */
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set error message.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make input inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Allows clear selected value.
-     */
-    allowEmpty: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Set a name of the property containing the group label.
-     */
-    groupLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set a name of the property containing the group values.
-     */
-    groupValues: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set limits the options displayed in the dropdown to the first X options.
-     */
-    optionsLimit: {
-      type: Number,
-      default: 100,
-    },
-
-    /**
-     * Set track value key.
-     */
-    valueKey: {
-      type: String,
-      default: "id",
-    },
-
-    /**
-     * Fixed opening direction (instead of auto). Options are "above"/"top" or "below"/"bottom".
-     * @values auto, top, bottom
-     */
-    openDirection: {
-      type: String,
-      default: "auto",
-    },
-
-    /**
-     * Set description for input.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Show add new option button to the list.
-     */
-    addOption: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set input size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Allow search value in list.
-     */
-    searchable: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "USelect", inheritAttrs: false });
 
-  emits: ["update:modelValue", "open", "addOption", "close", "change", "remove", "searchChange"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
+const props = defineProps({
+  /**
+   * Select value.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: "",
   },
 
-  data: () => ({
-    isLoading: false,
-    isOpen: null,
-    isFocused: false,
-    optionHeight: 0,
-  }),
-
-  computed: {
-    wrapperId() {
-      return `wrapper${this.id}`;
-    },
-
-    multiselectClass() {
-      return {
-        error: this.error && !this.modelValue.length,
-        "mono-select-wrapper-disabled": this.disabled,
-        "group-select": this.groupValues,
-        "after-caret": this.isShownAfterCaretSlot,
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-      };
-    },
-
-    addOptionKeyCombination() {
-      return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
-    },
-
-    isShownAfterCaretSlot() {
-      return !!this.$slots["after-caret"];
-    },
-
-    isShownOptionSlot() {
-      return !!this.$slots["option"];
-    },
-
-    isShownSingleLabelSlot() {
-      return !!this.$slots["singleLabel"];
-    },
-
-    isShownSingleLabelAfterSlot() {
-      return !!this.$slots["singleLabelAfter"];
-    },
-
-    labelClasses() {
-      return {
-        "label-color": this.isOpen,
-        "error-label": this.error && !this.modelValue.length,
-      };
-    },
-
-    i18n() {
-      return {
-        listIsEmpty: this.getTranslation("listIsEmpty"),
-        noDataToShow: this.getTranslation("noDataToShow"),
-        add: this.getTranslation("add"),
-      };
-    },
-
-    selectValue: {
-      get() {
-        if (this.groupValues) {
-          const option = this.options.find((option) => {
-            return option[this.groupValues]?.find(
-              (item) => item[this.valueKey] === this.modelValue,
-            );
-          });
-
-          return option?.[this.groupValues].find((option) => option.id === this.modelValue);
-        }
-
-        return this.options.find((option) => option[this.valueKey] === this.modelValue);
-      },
-      set(newItem) {
-        this.$emit("update:modelValue", newItem?.[this.valueKey]);
-      },
-    },
-
-    multiselectContentWrapper() {
-      return document.querySelector(`#${this.wrapperId} .multiselect__content-wrapper`);
-    },
-
-    iconSize() {
-      const sizes = {
-        sm: "sm",
-        md: "md",
-        lg: "lg",
-      };
-
-      return sizes[this.size];
-    },
+  /**
+   * Select options.
+   */
+  options: {
+    type: Array,
+    default: () => [],
   },
 
-  watch: {
-    options: {
-      handler: "onChangeOptions",
-      deep: true,
-    },
-
-    isOpen: {
-      handler: "onChangeOpenState",
-      deep: true,
-    },
-
-    selectValue: {
-      handler: "onChangeSelectValue",
-      deep: true,
-    },
+  /**
+   * Select label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  created() {
-    if (this.addOption) {
-      document.addEventListener("keydown", this.onKeydownAddOption);
-    }
+  /**
+   * Show label outside the select block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.labelOutside,
   },
 
-  mounted() {
-    if (this.addOption) {
-      this.multiselectContentWrapper.addEventListener("scroll", this.setAddOptionButtonPosition, {
-        passive: true,
-      });
-    }
+  /**
+   * Select placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
   },
 
-  beforeUnmount() {
-    if (this.addOption) {
-      document.removeEventListener("keydown", this.onKeydownAddOption);
-
-      this.multiselectContentWrapper.removeEventListener("scroll", this.setAddOptionButtonPosition);
-    }
+  /**
+   * Select description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    setAddOptionButtonPosition() {
-      const scrollBottomPosition = -this.multiselectContentWrapper.scrollTop;
-      const defaultButtonPosition = 9;
-      const addOptionPosition = (scrollBottomPosition + defaultButtonPosition) / PX_IN_REM;
-
-      this.$refs.addOptionButton.$el.style.bottom = `${addOptionPosition}rem`;
-    },
-
-    onOpen() {
-      this.$emit("open");
-      this.isOpen = true;
-      this.isFocused = true;
-    },
-
-    onMousedownRemoveValue() {
-      this.selectValue = "";
-    },
-
-    onKeydownAddOption(event) {
-      if (!this.isFocused) return;
-
-      const isEnter = event.keyCode === 13;
-      const isCtrl = event.ctrlKey;
-      const isMeta = event.metaKey;
-
-      if (isMeta && isEnter && isMac) {
-        this.$emit("addOption");
-      }
-
-      if (isEnter && isCtrl && !isMac) {
-        this.$emit("addOption");
-      }
-    },
-
-    onClickAddOption() {
-      this.$emit("addOption");
-    },
-
-    onChangeOptions() {
-      const subOptions = document.querySelectorAll(".group-label");
-
-      subOptions.forEach((subOption) => {
-        const subOptionsParent = subOption.parentElement.parentElement;
+  /**
+   * Select error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-        subOptionsParent.classList.add("multiselect__option", "multiselect__option--disabled");
-      });
-    },
+  /**
+   * Select size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.size,
+  },
 
-    onClose() {
-      this.isOpen = false;
+  /**
+   * Select open direction.
+   * @values auto, top, bottom
+   */
+  openDirection: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.openDirection,
+  },
 
-      setTimeout(() => {
-        this.isFocused = false;
-      }, 100);
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.labelKey,
+  },
 
-      this.$emit("close");
-    },
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.valueKey,
+  },
 
-    onChangeSelectValue() {
-      this.$emit("change");
-    },
+  /**
+   * Set a name of the property containing the group label.
+   */
+  // TODO: groupLabelKey ???
+  groupLabel: {
+    type: String,
+    default: "label",
+  },
 
-    leftMarginForSubCategory(level) {
-      const baseMargin = 1;
+  /**
+   * Set a name of the property containing the group values.
+   */
+  // TODO: groupValueKey ???
+  groupValues: {
+    type: String,
+    default: "",
+  },
 
-      if (level > 1) {
-        return `margin-left: ${baseMargin * (level - 1)}rem`;
-      }
-    },
+  /**
+   * name attribute to match optional label element.
+   */
+  // TODO: what is it?
+  name: {
+    type: String,
+    default: "",
+  },
 
-    removeValue(itemToRemove) {
-      this.$emit("remove", itemToRemove);
-    },
+  /**
+   * Number of options displayed in the dropdown.
+   */
+  optionsLimit: {
+    type: Number,
+    default: UIService.get(defaultConfig, USelect).default.optionsLimit,
+  },
 
-    onSearchChange: debounce(async function (query) {
-      this.$emit("searchChange", query);
-    }, 300),
+  /**
+   * Sets maxHeight style value of the dropdown
+   */
+  // TODO: Should be in option amount not in pixels (option may have be different height)
+  maxHeight: {
+    type: Number,
+    default: UIService.get(defaultConfig, USelect).default.maxHeight,
+  },
 
-    onChangeOpenState() {
-      this.onChangeOptions();
+  // TODO: there is no desc
+  optionHeight: {
+    type: Number,
+    default: UIService.get(defaultConfig, USelect).default.optionHeight,
+  },
 
-      this.$nextTick(() => {
-        this.optionHeight = this.$refs.select
-          ? this.$refs.select.$refs.list.firstChild.firstElementChild.clientHeight
-          : this.optionHeight;
-      });
-    },
+  /**
+   * Allow clearing selected value.
+   */
+  noClear: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.noClear,
+  },
 
-    hideInactiveElement(id) {
-      let selectedId = {};
+  /**
+   * Allows multiple selection.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.multiple,
+  },
 
-      if (this.groupValues !== "") {
-        this.options.forEach((option) => {
-          option[this.groupValues].forEach((item) => {
-            if (item.id === id) selectedId = item;
-          });
-        });
-      } else {
-        selectedId = this.options.find((item) => item.id === id);
-      }
-
-      if (!selectedId) return;
+  /**
+   * Allows to search value in a list.
+   */
+  searchable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.searchable,
+  },
 
-      return selectedId.isHidden ? "cross-out-option" : "";
-    },
+  /**
+   * Disable the select.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.disabled,
   },
-};
-</script>
 
-<i18n>
-en:
-  listIsEmpty: "List is empty."
-  noDataToShow: "No data to show."
-  add: Add
-ru:
-  listIsEmpty: "Список пуст."
-  noDataToShow: "Нет данных."
-  add: Добавить
-ua:
-  listIsEmpty: "Список порожній."
-  noDataToShow: "Дані відсутні."
-  add: Додати
-</i18n>
+  /**
+   * Show "Add new option" button in the list.
+   */
+  addOption: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USelect).default.addOption,
+  },
 
-<style lang="postcss" scoped>
-.mono-select-block {
-  @apply min-w-0;
-  @apply relative;
-}
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-.mono-select-wrapper {
-  @apply flex w-full items-center;
-  @apply box-border rounded-lg border border-gray-300 bg-white;
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &:hover {
-    @apply border-gray-400;
-    @apply transition duration-100 ease-in-out;
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits([
+  "open",
+  "close",
+  "searchChange",
+  "remove",
+  "update:modelValue",
+  "select",
+  "addOption",
+  "change",
+]);
+
+const slots = useSlots();
+
+const { getTranslation } = new I18nServiceDefault();
+
+const isOpen = ref(false);
+const preferredOpenDirection = ref(DIRECTION.bottom);
+const search = ref("");
+const optimizedHeight = ref(props.maxHeight);
+
+const dropdownListRef = ref(null);
+const wrapperRef = ref(null);
+const searchInputRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
+const innerWrapperRef = ref(null);
+
+const i18n = computed(() => {
+  return {
+    clear: getTranslation("clear"),
+    listIsEmpty: getTranslation("listIsEmpty"),
+    noDataToShow: getTranslation("noDataToShow"),
+    addMore: getTranslation("addMore"),
+    add: getTranslation("add"),
+  };
+});
+
+const inputPlaceholder = computed(() => {
+  return props.multiple && localValue.value.length ? i18n.value.addMore : props.placeholder;
+});
+
+const dropdownValue = computed({
+  get: () => props.modelValue,
+  set: (newValue) => {
+    let value = newValue;
+
+    if (props.multiple) {
+      value = Array.isArray(props.modelValue) ? [...props.modelValue, newValue] : [newValue];
+    }
 
-  &:focus-within {
-    @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
+    emit("update:modelValue", value);
+    deactivate();
+  },
+});
+
+const isSelectedValueLabelVisible = computed(() => {
+  return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
+});
+
+const selectedLabel = computed(() => {
+  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
+});
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const isTop = computed(() => {
+  if (props.openDirection === DIRECTION.top) return true;
+  if (props.openDirection === DIRECTION.bottom) return false;
+
+  return preferredOpenDirection.value === DIRECTION.top;
+});
+
+const filteredOptions = computed(() => {
+  const normalizedSearch = search.value.toLowerCase().trim();
+
+  let options = props.multiple
+    ? SelectService.removeSelectedValues(
+        props.options,
+        props.groupValues,
+        props.valueKey,
+        props.modelValue,
+      )
+    : [...props.options];
+
+  options = props.groupValues
+    ? filterAndFlat(options, normalizedSearch, props.labelKey)
+    : SelectService.filterOptions(options, normalizedSearch, props.labelKey);
+
+  return options.slice(0, props.optionsLimit);
+});
+
+const localValue = computed(() => {
+  if (!props.multiple) {
+    return SelectService.getCurrentOption(
+      props.modelValue,
+      props.options,
+      props.groupValues,
+      props.valueKey,
+    );
   }
 
-  .mono-select {
-    @apply flex flex-row-reverse justify-between;
-    @apply static min-h-full w-full overflow-hidden text-left;
-
-    &-caret-down,
-    &-caret-close {
-      @apply -mt-1.5 mr-4;
-      @apply cursor-pointer;
-    }
-
-    &-caret-down {
-      @apply scale-125 h-fit;
-    }
+  return props.modelValue
+    ? props.modelValue.map((item) =>
+        SelectService.getCurrentOption(item, props.options, props.groupValues, props.valueKey),
+      )
+    : [];
+});
+
+const isEmpty = computed(() => {
+  return (
+    (filteredOptions.value.length === 0 && search) ||
+    (props.multiple && localValue.value.length === props.options.length)
+  );
+});
+
+const isLocalValue = computed(() => {
+  if (props.multiple) return Boolean(localValue.value.length);
+
+  return typeof localValue.value !== "number"
+    ? Boolean(localValue.value)
+    : Boolean(String(localValue.value));
+});
+
+const errorMessage = computed(() => {
+  return !isOpen.value && props.error ? props.error : "";
+});
+
+const descriptionMessage = computed(() => {
+  return !isOpen.value && props.description ? props.description : "";
+});
+
+watch(search, () => onSearchChange);
+watch(
+  localValue,
+  () => {
+    setLabelPosition();
+    emit("change");
+  },
+  { deep: true },
+);
 
-    &-caret-close {
-      @apply mr-1;
-    }
+if (props.addOption) {
+  document.addEventListener("keydown", onKeydownAddOption);
+}
 
-    &--active {
-      @apply z-[inherit];
+onMounted(() => setLabelPosition());
 
-      .icon {
-        @apply rotate-180 transform transition-all duration-300;
-      }
-    }
+const onSearchChange = debounce(async function (query) {
+  emit("searchChange", query);
+}, 300);
 
-    &.multiselect--above {
-      &:deep(.multiselect__content-wrapper) {
-        @apply bottom-full top-auto;
-      }
-    }
+function getOptionLabel(option) {
+  if (!option) return "";
+  if (option.$isLabel) return option.$groupLabel;
 
-    :deep(.multiselect) {
-      &__tags {
-        @apply rounded-none border-0 bg-transparent;
-        @apply min-h-full w-full overflow-hidden;
-      }
-
-      &__input {
-        @apply font-normal text-gray-900;
-        @apply p-0;
-        @apply relative inline-block min-h-full w-full align-top;
-        @apply border-none bg-white;
-
-        &:focus {
-          @apply shadow-none outline-none ring-0;
-        }
-
-        &::placeholder {
-          @apply font-normal text-gray-400;
-        }
-      }
-
-      &__placeholder {
-        @apply inline-block;
-        @apply whitespace-nowrap font-normal text-gray-400;
-        @apply mb-0 w-0 pt-px;
-      }
-
-      &__content-wrapper {
-        @apply rounded-lg border border-gray-300 shadow;
-        @apply mb-2 mt-[2.625rem];
-        @apply absolute right-0;
-        @apply z-50 flex max-h-60 w-full overflow-auto;
-        @apply bg-white;
-        -webkit-overflow-scrolling: touch;
-      }
-
-      &__content {
-        @apply inline-block list-none align-top;
-        @apply m-0 min-w-full p-0;
-
-        .multiselect__element:first-child {
-          .multiselect__option--group {
-            @apply !mt-4;
-          }
-        }
-      }
-
-      &__element {
-        @apply block;
-      }
-
-      &__option {
-        @apply whitespace-nowrap text-base font-normal normal-case text-gray-900 no-underline;
-        @apply relative block cursor-pointer align-middle;
-        @apply px-3 py-2;
-
-        &:hover {
-          @apply bg-gray-100;
-        }
-
-        &:active,
-        &--selected {
-          @apply !bg-gray-200 font-medium;
-        }
-
-        &:disabled {
-          @apply text-gray-900;
-        }
-
-        &--highlight {
-          @apply bg-gray-100;
-        }
-
-        &--disabled {
-          @apply pointer-events-none;
-        }
-
-        &--group {
-          @apply bg-transparent;
-          @apply !text-xs font-medium uppercase text-gray-500/[85];
-          @apply pb-1 pt-6;
-        }
-      }
-
-      &__single {
-        @apply font-normal text-gray-900;
-        @apply mb-px p-0;
-        @apply relative inline-block w-full align-top;
-        @apply border-none bg-white;
-        @apply overflow-hidden text-ellipsis whitespace-nowrap;
-      }
-    }
-  }
+  return option[props.labelKey] || "";
 }
 
-.mono-select-wrapper-disabled {
-  @apply border-gray-100 bg-gray-100 text-gray-900;
+function onKeydownAddOption(event) {
+  if (!isOpen.value) return;
 
-  &:hover {
-    @apply border-gray-100;
-  }
+  const isEnter = event.keyCode === KEY_CODES.enter;
+  const isCtrl = event.ctrlKey;
+  const isMeta = event.metaKey;
 
-  &:focus-within {
-    @apply border-gray-100 ring-0;
+  if (isMeta && isEnter && isMac) {
+    emit("addOption");
   }
 
-  &:deep(.multiselect--disabled) {
-    @apply rounded-lg bg-transparent;
-    @apply pointer-events-none opacity-100;
-
-    .multiselect__single {
-      @apply bg-gray-100;
-    }
+  if (isEnter && isCtrl && !isMac) {
+    emit("addOption");
   }
 }
 
-.icon {
-  @apply transition-all duration-300;
+function onAddOption() {
+  emit("addOption");
 }
 
-.label {
-  @apply absolute left-4 block;
-  @apply font-normal text-gray-500;
-  @apply z-10;
-  @apply w-3/5 overflow-hidden text-ellipsis whitespace-nowrap;
-
-  &-color {
-    @apply font-normal text-gray-500;
-    z-index: 9999;
-  }
-}
+function filterAndFlat(options, search, label) {
+  const filteredGroups = SelectService.filterGroups(
+    options,
+    search,
+    label,
+    props.groupValues,
+    props.groupLabel,
+  );
 
-.select-label {
-  @apply flex;
+  return SelectService.flattenOptions(filteredGroups, props.groupValues, props.groupLabel);
 }
 
-.group-label {
-  @apply bg-transparent;
-  @apply !text-xs font-medium uppercase text-gray-500/[85] pt-1;
+function toggle() {
+  isOpen.value ? deactivate() : activate();
 }
 
-.size {
-  &-sm {
-    .group-label {
-      @apply !text-2xs;
-    }
+function deactivate() {
+  if (!isOpen.value) return;
 
-    > .mono-select {
-      @apply pt-5;
-
-      :deep(.multiselect__option) {
-        @apply py-2;
-      }
-
-      :deep(.multiselect) {
-        &__tags {
-          @apply mb-px pb-1.5 pl-4 pr-4 pt-1;
-        }
-
-        &__content-wrapper {
-          @apply mt-[2.375rem];
-        }
-
-        &__content {
-          .multiselect__element {
-            .multiselect__option--group {
-              @apply !text-2xs;
-              @apply pb-1 mt-4;
-            }
-          }
-        }
-
-        &__input {
-          @apply mb-0 pt-0.5 text-sm;
-
-          &::placeholder {
-            @apply text-sm font-normal;
-            @apply pt-0;
-          }
-        }
-
-        &__single {
-          @apply mt-1 text-sm;
-        }
-
-        &__placeholder {
-          @apply text-sm min-h-[0.875rem];
-        }
-
-        &__option {
-          @apply text-sm;
-        }
-      }
-    }
+  props.searchable && searchInputRef.value ? searchInputRef.value.blur() : wrapperRef.value?.blur();
 
-    > .label {
-      @apply top-2 text-xs;
+  search.value = "";
+  isOpen.value = false;
 
-      &-color {
-        @apply text-xs;
-      }
-    }
-  }
-
-  &-md {
-    > .mono-select {
-      @apply pt-6;
-
-      :deep(.multiselect) {
-        &__tags {
-          @apply mb-px pb-2 pl-4 pr-4 pt-1;
-        }
+  nextTick(() => emit("close", localValue.value, props.id));
+}
 
-        &__input {
-          @apply mb-px text-base;
+function activate() {
+  if (props.isOpen || props.disabled) return;
 
-          &::placeholder {
-            @apply text-base font-normal;
-            @apply pt-px;
-          }
-        }
+  adjustPosition();
 
-        &__single {
-          @apply text-base;
-        }
+  isOpen.value = true;
 
-        &__placeholder {
-          @apply text-base min-h-[1rem];
-        }
-      }
-    }
+  if (props.searchable) {
+    search.value = "";
 
-    > .label {
-      @apply top-2.5 text-sm;
-
-      &-color {
-        @apply text-sm;
-      }
-    }
+    nextTick(() => searchInputRef.value && searchInputRef.value.focus());
   }
 
-  &-lg {
-    .group-label {
-      @apply !text-sm;
-    }
+  if (wrapperRef.value !== undefined && !props.searchable) wrapperRef.value.focus();
 
-    > .mono-select {
-      @apply pt-7;
-
-      :deep(.multiselect) {
-        &__tags {
-          @apply mb-px pb-2.5 pl-4 pr-4 pt-1;
-        }
-
-        &__content-wrapper {
-          @apply mt-[2.875rem];
-        }
-
-        &__content {
-          .multiselect__element {
-            .multiselect__option--group {
-              @apply !text-sm;
-              @apply pb-1 mt-4;
-            }
-          }
-        }
-
-        .multiselect__option {
-          @apply py-4;
-        }
-
-        &__input {
-          @apply mb-0 pt-0.5 text-lg;
-
-          &::placeholder {
-            @apply text-lg font-normal;
-            @apply pt-0;
-          }
-        }
-
-        &__single {
-          @apply mt-1 text-lg;
-        }
-
-        &__placeholder {
-          @apply text-lg min-h-[1.125rem];
-        }
-
-        &__option {
-          @apply text-lg;
-        }
-      }
-    }
-
-    > .label {
-      @apply top-3 text-base;
-
-      &-color {
-        @apply text-base;
-      }
-    }
-  }
-}
-
-.icon {
-  @apply transition-all duration-300;
+  emit("open", props.id);
 }
 
-.error {
-  @apply border-red-300;
+function adjustPosition() {
+  if (typeof window === "undefined") return;
 
-  &:hover {
-    @apply border-red-400;
-  }
+  const spaceAbove = wrapperRef.value.getBoundingClientRect().top;
+  const spaceBelow = window.innerHeight - wrapperRef.value.getBoundingClientRect().bottom;
+  const hasEnoughSpaceBelow = spaceBelow > props.maxHeight;
 
-  &:focus-within {
-    @apply border-red-500 ring-4 ring-red-100;
-  }
-
-  &-label {
-    @apply text-red-500;
-  }
-
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
+  if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || props.openDirection === DIRECTION.bottom) {
+    preferredOpenDirection.value = DIRECTION.bottom;
+    // TODO: magic numbers
+    optimizedHeight.value = Math.min(spaceBelow - 40, props.maxHeight);
+  } else {
+    preferredOpenDirection.value = DIRECTION.top;
+    optimizedHeight.value = Math.min(spaceAbove - 40, props.maxHeight);
   }
 }
 
-.description {
-  @apply text-xs font-normal text-gray-500/[85];
-  @apply pl-4 pt-2;
-}
+function removeElement(option, shouldClose = true) {
+  if (props.disabled) return;
+  if (option.$isDisabled) return;
 
-.after-caret {
-  @apply flex-col items-start md:flex-row md:items-center;
+  if (props.noClear && !props.multiple) {
+    deactivate();
 
-  .after-caret-slot {
-    @apply pb-2.5 pl-4 pr-4 md:pb-0 md:pl-0;
+    return;
   }
-}
 
-.mono-select-add {
-  &-wrapper {
-    @apply flex items-center justify-between;
-    @apply cursor-pointer;
-    @apply p-3;
-
-    &:hover {
-      @apply bg-gray-100;
-    }
+  let value = "";
 
-    &:active {
-      @apply bg-gray-200 font-medium;
-    }
+  if (props.multiple) {
+    value = !Array.isArray(option)
+      ? [...props.modelValue].filter((item) => item !== option[props.valueKey])
+      : [];
   }
 
-  &-title {
-    @apply text-base font-medium text-gray-900;
+  emit("update:modelValue", value);
+  emit("remove", option, props.id);
 
-    &-command {
-      @apply text-gray-500;
-    }
+  if (shouldClose) {
+    deactivate();
   }
+}
 
-  &-button {
-    @apply absolute bottom-[0.5625rem] right-3;
-    @apply rounded-full p-0;
-  }
+function setLabelPosition() {
+  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
 
-  &-icon {
-    @apply bg-transparent;
-    @apply p-0;
+  const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
+  const innerWrapperPaddingLeft = parseInt(
+    window.getComputedStyle(innerWrapperRef.value).paddingLeft,
+  );
 
-    &:deep(svg) {
-      @apply !m-1;
-    }
+  if (props.multiple && localValue.value.length >= 1) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth - innerWrapperPaddingLeft}px`;
+    leftSlotWrapperRef.value.classList.remove("group-[]/placement-inside:-mt-4");
+  } else {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + innerWrapperPaddingLeft}px`;
   }
 }
 
-.cross-out-option {
-  :deep(.multiselect__option--selected) {
-    @apply hidden !important;
-  }
+const {
+  config,
+  hasSlotContent,
+  labelAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  leftSlotAttrs,
+  beforeCaretSlotAttrs,
+  afterCaretSlotAttrs,
+  caretToggleAttrs,
+  iconToggleAttrs,
+  caretClearAttrs,
+  caretClearTextAttrs,
+  iconClearAttrs,
+  caretRemoveItemAttrs,
+  iconRemoveItemAttrs,
+  searchAttrs,
+  searchInputAttrs,
+  selectedLabelsAttrs,
+  selectedLabelAttrs,
+  dropdownListAttrs,
+} = useAttrs(props, { isTop, isOpen, selectedLabel });
+</script>
 
-  :deep(.multiselect-single-slot) {
-    @apply !line-through;
-  }
-}
-</style>
+<i18n>
+en:
+  listIsEmpty: "List is empty."
+  noDataToShow: "No data to show."
+  clear: "clear"
+  addMore: "Add more..."
+  add: Add
+ru:
+  listIsEmpty: "Список пуст."
+  noDataToShow: "Нет данных."
+  clear: "очистить"
+  addMore: "Добавить ещё..."
+  add: Добавить
+ua:
+  listIsEmpty: "Список порожній."
+  noDataToShow: "Дані відсутні."
+  clear: "очистити"
+  addMore: "Додати ще..."
+  add: Додати
+</i18n>