@vc-shell/framework 1.0.53 → 1.0.56

package/ui/components/molecules/vc-select/vc-select.vue

@@ -9,20 +9,31 @@
     }"
   >
     <!-- Select label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+      >
         <span v-html="tooltip"></span>
       </template>
     </VcLabel>
 
     <!-- Select field -->
-    <div class="tw-flex tw-flex-nowrap tw-items-start" ref="dropdownToggleRef">
-      <div class="tw-flex tw-flex-auto tw-text-left tw-max-w-full">
-        <slot name="control" :toggleHandler="toggleDropdown">
-          <div
-            class="tw-relative tw-flex tw-flex-auto tw-text-left tw-max-w-full"
-          >
+    <div class="tw-flex tw-flex-nowrap tw-items-start tw-relative">
+      <div
+        ref="dropdownToggleRef"
+        class="tw-flex tw-flex-auto tw-text-left tw-max-w-full"
+      >
+        <slot
+          name="control"
+          :toggleHandler="toggleDropdown"
+        >
+          <div class="tw-relative tw-flex tw-flex-auto tw-text-left tw-max-w-full">
             <div
               class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
               v-if="$slots['prepend']"
@@ -33,21 +44,15 @@
               <div
                 class="tw-truncate vc-select__field-wrapper tw-relative tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-rounded-[var(--select-border-radius)] tw-bg-[color:var(--select-background-color)] tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-items-stretch"
               >
-                <div
-                  class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative"
-                >
-                  <div
-                    class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-px-3"
-                  >
+                <div class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative">
+                  <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-px-3">
                     <div
                       class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
                       v-if="$slots['prepend-inner']"
                     >
                       <slot name="prepend-inner"></slot>
                     </div>
-                    <div
-                      class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-truncate"
-                    >
+                    <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-truncate">
                       <div
                         class="tw-flex tw-items-center tw-flex-wrap tw-pr-3 tw-pointer-events-none"
                         v-if="prefix"
@@ -58,14 +63,13 @@
                         class="tw-w-full tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
                         @click.stop="toggleDropdown"
                       >
-                        <div v-if="!hasValue" class="tw-text-[#a5a5a5]">
+                        <div
+                          v-if="!hasValue"
+                          class="tw-text-[#a5a5a5]"
+                        >
                           {{ placeholder }}
                         </div>
-                        <template
-                          v-else-if="
-                            selectedScope && selectedScope.length && hasValue
-                          "
-                        >
+                        <template v-else-if="selectedScope && selectedScope.length && hasValue">
                           <template v-if="$slots['selected-item']">
                             <slot
                               name="selected-item"
@@ -86,9 +90,7 @@
                                   <div
                                     class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                   >
-                                    <span>{{
-                                      getEmittingOptionValue(item.opt)
-                                    }}</span>
+                                    <span>{{ getEmittingOptionValue(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
@@ -117,7 +119,10 @@
                         class="tw-cursor-pointer tw-flex tw-items-center tw-pl-3 tw-text-[color:var(--select-clear-color)] hover:tw-text-[color:var(--select-clear-color-hover)]"
                         @click="onReset"
                       >
-                        <VcIcon size="s" icon="fas fa-times"></VcIcon>
+                        <VcIcon
+                          size="s"
+                          icon="fas fa-times"
+                        ></VcIcon>
                       </div>
                     </div>
                     <div
@@ -145,16 +150,20 @@
                         class="vc-select__chevron tw-cursor-pointer tw-flex-nowrap tw-text-[color:var(--select-chevron-color)] hover:tw-text-[color:var(--select-chevron-color-hover)]"
                         @click.stop="toggleDropdown"
                       >
-                        <VcIcon size="s" icon="fas fa-chevron-down"></VcIcon>
+                        <VcIcon
+                          size="s"
+                          icon="fas fa-chevron-down"
+                        ></VcIcon>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div
-                class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]"
-              >
-                <Transition name="slide-up" mode="out-in">
+              <div class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]">
+                <Transition
+                  name="slide-up"
+                  mode="out-in"
+                >
                   <div v-if="error">
                     <slot name="error">
                       <VcHint
@@ -189,64 +198,212 @@
         </slot>
       </div>
 
-      <!--      <teleport to="#app">-->
-      <div
-        v-if="isOpened"
-        class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
-        ref="dropdownRef"
-        v-click-outside="closeDropdown"
-      >
-        <input
-          v-if="searchable"
-          ref="searchRef"
-          class="tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2] tw-rounded-[4px] tw-h-[32px] tw-leading-[32px] tw-outline-none tw-mb-3 tw-px-2"
-          @input="onInput"
-        />
-
-        <VcContainer :no-padding="true" ref="root">
-          <div
-            v-if="!(optionsList && optionsList.length)"
-            class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+      <teleport to="#app">
+        <div
+          v-if="isOpened"
+          class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
+          ref="dropdownRef"
+          v-click-outside="closeDropdown"
+          :style="dropdownStyle"
+        >
+          <input
+            v-if="searchable"
+            ref="searchRef"
+            class="tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2] tw-rounded-[4px] tw-h-[32px] tw-leading-[32px] tw-outline-none tw-mb-3 tw-px-2"
+            @input="onInput"
+          />
+
+          <VcContainer
+            :no-padding="true"
+            ref="root"
           >
-            <slot name="no-options">
-              <span class="tw-m-4 tw-text-xl tw-font-medium">No options</span>
-            </slot>
-          </div>
-          <div
-            v-else
-            class="tw-flex tw-items-center tw-min-h-[36px] tw-my-1 tw-box-border tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc]"
-            v-for="(item, i) in optionScope"
-            :key="i"
-            @click="item.toggleOption(item.opt)"
-            :class="{ 'tw-bg-[#eff7fc]': item.selected }"
-          >
-            <slot name="option" v-bind="item">{{ item.label }}</slot>
-          </div>
-          <span ref="el" v-if="hasNextPage"></span>
-        </VcContainer>
-      </div>
-      <!--      </teleport>-->
+            <div
+              v-if="!(optionsList && optionsList.length)"
+              class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+            >
+              <slot name="no-options">
+                <span class="tw-m-4 tw-text-xl tw-font-medium">No options</span>
+              </slot>
+            </div>
+            <div
+              v-else
+              class="tw-flex tw-items-center tw-min-h-[36px] tw-my-1 tw-box-border tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc]"
+              v-for="(item, i) in optionScope"
+              :key="i"
+              @click="item.toggleOption(item.opt)"
+              :class="{ 'tw-bg-[#eff7fc]': item.selected }"
+            >
+              <slot
+                name="option"
+                v-bind="item"
+                >{{ item.label }}</slot
+              >
+            </div>
+            <span
+              ref="el"
+              v-if="hasNextPage"
+            ></span>
+          </VcContainer>
+        </div>
+      </teleport>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref, computed, watch, toRefs } from "vue";
+import { ref, computed, watch, toRefs, nextTick } from "vue";
 import { VcIcon, VcLabel, VcContainer } from "./../../../components";
 import { clickOutside as vClickOutside } from "./../../../../core/directives";
-import { createPopper, Instance, State } from "@popperjs/core";
-import { VcSelectProps, OptionProp } from "./vc-select-model";
 import { intersection, isEqual } from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
+import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+
+export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
+
+export interface Props {
+  /**
+   * Name of select
+   */
+  name?: string;
+  /**
+   * Model of the component; Must be Array if using 'multiple' prop; Use this property with a listener for 'update:modelValue' event OR use v-model directive
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue: any;
+  /**
+   * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;
+   * Default value: true
+   */
+  mapOptions?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Select label
+   */
+  label?: string;
+  /**
+   * Select description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Allow multiple selection; Model must be Array
+   */
+  multiple?: boolean;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options?:
+    | ((
+        keyword?: string,
+        skip?: number,
+        ids?: string[]
+      ) => Promise<{
+        results?: object[];
+        totalCount?: number;
+      }>)
+    | unknown[];
+  /**
+   * Property of option which holds the 'value'
+   * Default value: id
+   * @param option The current option being processed
+   * @returns Value of the current option
+   */
+  optionValue?: OptionProp;
+  /**
+   * Property of option which holds the 'label'
+   * Default value: title
+   * @param option The current option being processed
+   * @returns Label of the current option
+   */
+  optionLabel?: OptionProp;
+  /**
+   * Update model with the value of the selected option instead of the whole option
+   */
+  emitValue?: boolean;
+  /**
+   * Debounce the search input update with an amount of milliseconds
+   * Default value: 500
+   */
+  debounce?: number | string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+  /**
+   * Input search activation
+   */
+  searchable?: boolean;
+}
+
+export interface Emits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (event: "update:modelValue", inputValue: any): void;
+  /**
+   * Emitted when user wants to filter a value
+   */
+  (event: "search", inputValue: string): void;
+  /**
+   * Emitted when the select options list is hidden
+   */
+  (event: "close"): void;
+}
 
-const props = withDefaults(defineProps<VcSelectProps>(), {
+type FloatingInstanceType = UseFloatingReturn & {
+  middlewareData: {
+    sameWidthChangeBorders: {
+      borderTop?: string;
+      borderBottom?: string;
+      borderRadius?: string;
+      width?: string;
+    };
+  };
+};
+
+const props = withDefaults(defineProps<Props>(), {
   optionValue: "id",
   optionLabel: "title",
   debounce: 500,
   clearable: true,
   name: "Field",
-  searchable: false,
-  required: false,
   autofocus: true,
   emitValue: true,
   mapOptions: true,
@@ -254,14 +411,13 @@ const props = withDefaults(defineProps<VcSelectProps>(), {
   options: () => [],
 });
 
-const emit = defineEmits(["update:modelValue", "search", "close"]);
+const emit = defineEmits<Emits>();
 
 const { modelValue, options } = toRefs(props);
 
 const isOpened = ref(false);
 
 const searchRef = ref();
-const popper = ref<Instance>();
 const dropdownToggleRef = ref();
 const dropdownRef = ref();
 const root = ref();
@@ -270,10 +426,13 @@ const listLoading = ref(false);
 
 const filterString = ref();
 
-const defaultValue = ref([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const defaultValue = ref<any[]>([]);
 
-const optionsList = ref([]);
-const optionsTemp = ref([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const optionsList = ref<any[]>([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const optionsTemp = ref<any[]>([]);
 
 const totalItems = ref();
 
@@ -291,6 +450,17 @@ useIntersectionObserver(
   { threshold: 1, root: root.value?.component }
 );
 
+const popper = useFloating(dropdownToggleRef, dropdownRef, {
+  placement: "bottom",
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    flip({ fallbackPlacements: ["top", "bottom"] }),
+    shift({ mainAxis: false }),
+    sameWidthChangeBorders(),
+    offset(-2),
+  ],
+}) as FloatingInstanceType;
+
 watch(
   modelValue,
   async (newVal, oldVal) => {
@@ -312,17 +482,13 @@ watch(
           const data = await props.options(
             undefined,
             undefined,
-            Array.isArray(props.modelValue)
-              ? props.modelValue
-              : [props.modelValue]
+            Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
           );
-          defaultValue.value = data.results.filter(
+          defaultValue.value = data.results?.filter(
             (x) => x[props.optionValue as string] === props.modelValue
-          );
+          ) as unknown[];
         } else if (props.options && Array.isArray(props.options)) {
-          defaultValue.value = props.options.filter(
-            (x) => x[props.optionValue as string] === props.modelValue
-          );
+          defaultValue.value = props.options.filter((x) => x[props.optionValue as string] === props.modelValue);
         }
       }
     }
@@ -337,7 +503,7 @@ watch(
       try {
         listLoading.value = true;
         const data = await props.options();
-        optionsList.value = data.results;
+        optionsList.value = data.results as unknown[];
         totalItems.value = data.totalCount;
       } finally {
         listLoading.value = false;
@@ -357,15 +523,21 @@ watch(
   { immediate: true, deep: true }
 );
 
+watch(
+  () => popper.isPositioned.value,
+  (newVal) => {
+    if (newVal) {
+      popper.update();
+    }
+  }
+);
+
 async function onLoadMore() {
   if (props.options && typeof props.options === "function") {
     try {
       listLoading.value = true;
-      const data = await props.options(
-        filterString.value,
-        optionsList.value.length
-      );
-      optionsList.value.push(...data.results);
+      const data = await props.options(filterString.value, optionsList.value.length);
+      optionsList.value.push(...(data.results as unknown[]));
     } finally {
       listLoading.value = false;
     }
@@ -376,36 +548,26 @@ const hasNextPage = computed(() => {
   return optionsList.value.length < totalItems.value;
 });
 
-const getOptionValue = computed(() =>
-  getPropValueFn(props.optionValue, "value")
-);
+const getOptionValue = computed(() => getPropValueFn(props.optionValue, "value"));
 
-const getOptionLabel = computed(() =>
-  getPropValueFn(props.optionLabel, "label")
-);
+const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "label"));
 
 const innerValue = computed((): Record<string, unknown>[] | string[] => {
   const mapNull = props.mapOptions === true && props.multiple !== true;
 
   const val: Record<string, unknown>[] | string[] =
-    props.modelValue !== undefined &&
-    (props.modelValue !== null || mapNull === true)
+    props.modelValue !== undefined && (props.modelValue !== null || mapNull === true)
       ? props.multiple === true && Array.isArray(props.modelValue)
         ? props.modelValue
         : [props.modelValue]
       : [];
 
   if (props.mapOptions === true && Array.isArray(optionsList.value) === true) {
-    const cache =
-      props.mapOptions === true && innerValueCache !== undefined
-        ? innerValueCache
-        : [];
+    const cache = props.mapOptions === true && innerValueCache !== undefined ? innerValueCache : [];
 
     const values = val.map((v) => getOption(v, cache));
 
-    return props.modelValue === null && mapNull === true
-      ? values.filter((v) => v !== null)
-      : values;
+    return props.modelValue === null && mapNull === true ? values.filter((v) => v !== null) : values;
   }
 
   return val;
@@ -431,9 +593,7 @@ const selectedScope = computed(() => {
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 
-const innerOptionsValue = computed(() =>
-  innerValue.value.map((opt) => getOptionValue.value(opt))
-);
+const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
 
 const optionScope = computed(() => {
   return optionsTemp.value.map((opt, i) => {
@@ -447,26 +607,25 @@ const optionScope = computed(() => {
   });
 });
 
+const dropdownStyle = computed(() => {
+  return {
+    top: `${popper.y.value ?? 0}px`,
+    left: `${popper.x.value ?? 0}px`,
+    ...popper.middlewareData.value.sameWidthChangeBorders,
+  };
+});
+
 function getPropValueFn(propValue: OptionProp, defaultVal: OptionProp) {
   const val = propValue !== undefined ? propValue : defaultVal;
 
   return typeof val === "function"
     ? val
-    : (opt) =>
-        opt !== null && typeof opt === "object" && val in opt ? opt[val] : opt;
+    : (opt) => (opt !== null && typeof opt === "object" && (val as string) in opt ? opt[val as string] : opt);
 }
 
-function getOption(
-  value: Record<string, unknown> | string,
-  valueCache: Array<Record<string, unknown> | string>
-) {
+function getOption(value: Record<string, unknown> | string, valueCache: Array<Record<string, unknown> | string>) {
   const fn = (opt) => isEqual(getOptionValue.value(opt), value);
-  return (
-    defaultValue.value.find(fn) ||
-    optionsList.value.find(fn) ||
-    valueCache.find(fn) ||
-    value
-  );
+  return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
 function fieldValueIsFilled(val: Record<string, unknown>[] | unknown[]) {
@@ -474,9 +633,7 @@ function fieldValueIsFilled(val: Record<string, unknown>[] | unknown[]) {
 }
 
 function getEmittingOptionValue(opt: Record<string, unknown>) {
-  return props.emitValue === true
-    ? getOptionLabel.value(opt)
-    : getOptionValue.value(opt);
+  return props.emitValue === true ? getOptionLabel.value(opt) : getOptionValue.value(opt);
 }
 
 function removeAtIndex(index: number) {
@@ -498,7 +655,6 @@ function isOptionSelected(opt: Record<string, unknown>) {
 
 function closeDropdown() {
   isOpened.value = false;
-  popper.value?.destroy();
   emit("close");
 
   onDropdownClose();
@@ -506,7 +662,7 @@ function closeDropdown() {
 
 const onDropdownClose = async () => {
   if (props.options && typeof props.options === "function") {
-    optionsList.value = (await props.options()).results;
+    optionsList.value = (await props.options()).results as unknown[];
   } else {
     optionsList.value = props.options as Record<string, unknown>[];
   }
@@ -521,85 +677,46 @@ async function toggleDropdown() {
     } else {
       isOpened.value = true;
 
-      await nextTick(() => {
+      nextTick(() => {
         searchRef?.value?.focus();
-        popper.value = createPopper(
-          dropdownToggleRef.value,
-          dropdownRef.value,
-          {
-            placement: "bottom",
-            modifiers: [
-              {
-                name: "flip",
-                options: {
-                  fallbackPlacements: ["top", "bottom"],
-                },
-              },
-              {
-                name: "preventOverflow",
-                options: {
-                  mainAxis: false,
-                },
-              },
-              {
-                name: "sameWidthChangeBorders",
-                enabled: true,
-                phase: "beforeWrite",
-                requires: ["computeStyles"],
-                fn: ({ state }: { state: State }) => {
-                  const placement = state.placement;
-                  if (placement === "top") {
-                    state.styles.popper.borderTop =
-                      "1px solid var(--select-border-color)";
-                    state.styles.popper.borderBottom =
-                      "1px solid var(--select-background-color)";
-                    state.styles.popper.borderRadius =
-                      "var(--select-border-radius) var(--select-border-radius) 0 0";
-                  } else {
-                    state.styles.popper.borderBottom =
-                      "1px solid var(--select-border-color)";
-                    state.styles.popper.borderTop =
-                      "1px solid var(--select-background-color)";
-                    state.styles.popper.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-                  }
-                  state.styles.popper.width = `${state.rects.reference.width}px`;
-                },
-                effect: ({ state }: { state: State }) => {
-                  const ref = state.elements.reference as HTMLElement;
-                  const placement = state.placement;
-                  if (placement === "top") {
-                    state.elements.popper.style.borderTop =
-                      "1px solid var(--select-border-color)";
-                    state.elements.popper.style.borderBottom =
-                      "1px solid var(--select-background-color)";
-                    state.elements.popper.style.borderRadius =
-                      "var(--select-border-radius) var(--select-border-radius) 0 0";
-                  } else {
-                    state.elements.popper.style.borderBottom =
-                      "1px solid var(--select-border-color)";
-                    state.elements.popper.style.borderTop =
-                      "1px solid var(--select-background-color)";
-                    state.elements.popper.style.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-                  }
-                  state.elements.popper.style.width = `${ref.offsetWidth}px`;
-                },
-              },
-              {
-                name: "offset",
-                options: {
-                  offset: [0, -2],
-                },
-              },
-            ],
-          }
-        );
       });
     }
   }
 }
 
+function sameWidthChangeBorders() {
+  return {
+    name: "sameWidthChangeBorders",
+    fn: ({ rects, placement, x, y }) => {
+      let borderTop;
+      let borderBottom;
+      let borderRadius;
+      if (placement === "top") {
+        borderTop = "1px solid var(--select-border-color)";
+        borderBottom = "1px solid var(--select-background-color)";
+        borderRadius = "var(--select-border-radius) var(--select-border-radius) 0 0";
+      } else {
+        borderBottom = "1px solid var(--select-border-color)";
+        borderTop = "1px solid var(--select-background-color)";
+        borderRadius = "0 0 var(--select-border-radius) var(--select-border-radius)";
+      }
+
+      const width = `${rects.reference.width}px`;
+
+      return {
+        x,
+        y,
+        data: {
+          borderTop,
+          borderBottom,
+          borderRadius,
+          width,
+        },
+      };
+    },
+  };
+}
+
 function toggleOption(opt: { [x: string]: string }) {
   if (opt === void 0) {
     return;
@@ -608,10 +725,7 @@ function toggleOption(opt: { [x: string]: string }) {
   const optValue = getOptionValue.value(opt);
 
   if (props.multiple !== true) {
-    if (
-      innerValue.value.length === 0 ||
-      isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true
-    ) {
+    if (innerValue.value.length === 0 || isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
       emit("update:modelValue", props.emitValue === true ? optValue : opt);
       isOpened.value = false;
     }
@@ -637,7 +751,7 @@ function toggleOption(opt: { [x: string]: string }) {
   emit("update:modelValue", model);
 
   if (isOpened.value) {
-    popper.value.update();
+    popper.update();
   }
 }
 
@@ -646,15 +760,13 @@ async function onSearch(value: string) {
   if (props.options && typeof props.options === "function") {
     try {
       listLoading.value = true;
-      optionsTemp.value = (await props.options(filterString.value)).results;
+      optionsTemp.value = (await props.options(filterString.value)).results as unknown[];
     } finally {
       listLoading.value = false;
     }
   } else {
     optionsTemp.value = optionsList.value.filter((x) => {
-      return x[props.optionLabel as string]
-        .toLowerCase()
-        .includes(filterString.value.toLowerCase());
+      return x[props.optionLabel as string].toLowerCase().includes(filterString.value.toLowerCase());
     });
   }
 }