@tagplus/components 5.3.2 → 5.3.4

package/dist/lib/src/components/Autosuggest/useSelect.js

@@ -1,803 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const shared_esmBundler = require("../../../node_modules/@vue/shared/dist/shared.esm-bundler.js");
-const lodashEs = require("lodash-es");
-const index$5 = require("../../../node_modules/@vueuse/core/index.js");
-const types = require("../../utils/types.js");
-const error = require("../../utils/error.js");
-const icon = require("../../utils/icon.js");
-const scroll = require("../../utils/scroll.js");
-const useInput = require("../../utils/use-input.js");
-const useFormItem = require("../../utils/use-form-item.js");
-const useFormCommonProps = require("../../utils/use-form-common-props.js");
-const index = require("../../../node_modules/element-plus/es/hooks/use-locale/index.js");
-const index$1 = require("../../../node_modules/element-plus/es/hooks/use-id/index.js");
-const index$2 = require("../../../node_modules/element-plus/es/hooks/use-namespace/index.js");
-const index$3 = require("../../../node_modules/element-plus/es/hooks/use-focus-controller/index.js");
-const index$4 = require("../../../node_modules/@vueuse/shared/index.js");
-const UPDATE_MODEL_EVENT = "update:modelValue";
-const CHANGE_EVENT = "change";
-const EVENT_CODE = {
-  delete: "Delete"
-};
-const MINIMUM_INPUT_WIDTH = 11;
-const useSelect = (props, { emit }) => {
-  const { t } = index.useLocale();
-  const contentId = index$1.useId();
-  const nsSelect = index$2.useNamespace("select");
-  const nsInput = index$2.useNamespace("input");
-  const states = vue.reactive({
-    inputValue: "",
-    options: /* @__PURE__ */ new Map(),
-    cachedOptions: /* @__PURE__ */ new Map(),
-    disabledOptions: /* @__PURE__ */ new Map(),
-    optionValues: [],
-    // sorted value of options
-    selected: props.multiple ? [] : {},
-    selectionWidth: 0,
-    calculatorWidth: 0,
-    collapseItemWidth: 0,
-    selectedLabel: "",
-    hoveringIndex: -1,
-    previousQuery: null,
-    inputHovering: false,
-    menuVisibleOnFocus: false,
-    isBeforeHide: false
-  });
-  const selectRef = vue.ref(null);
-  const selectionRef = vue.ref(null);
-  const tooltipRef = vue.ref(null);
-  const inputRef = vue.ref(null);
-  const calculatorRef = vue.ref(null);
-  const suffixRef = vue.ref(null);
-  const menuRef = vue.ref(null);
-  const collapseItemRef = vue.ref(null);
-  const scrollbarRef = vue.ref(null);
-  const { wrapperRef, isFocused, handleFocus, handleBlur } = index$3.useFocusController(
-    inputRef,
-    {
-      afterFocus() {
-        if (props.automaticDropdown && !expanded.value) {
-          expanded.value = true;
-          states.menuVisibleOnFocus = true;
-        }
-      },
-      beforeBlur(event) {
-        var _a;
-        return (_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
-      },
-      afterBlur() {
-        expanded.value = false;
-        states.menuVisibleOnFocus = false;
-      }
-    }
-  );
-  const expanded = vue.ref(false);
-  const hoverOption = vue.ref();
-  const { form, formItem } = useFormItem.useFormItem();
-  const { inputId } = useFormItem.useFormItemInputId(props, {
-    formItemContext: formItem
-  });
-  const selectDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled));
-  const hasModelValue = vue.computed(() => {
-    return props.multiple ? shared_esmBundler.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
-  });
-  const showClose = vue.computed(() => {
-    const criteria = props.clearable && !selectDisabled.value && hasModelValue.value;
-    return criteria;
-  });
-  const iconReverse = vue.computed(() => {
-    return expanded.value ? "is-reverse" : "";
-  });
-  const formattedValue = vue.computed(() => {
-    let newVal = "";
-    if (typeof props.modelValue === "boolean") {
-      newVal = "";
-    } else if (Array.isArray(props.modelValue)) {
-      newVal = props.modelValue;
-    } else if (props.modelValue && typeof props.modelValue === "object") {
-      if (!Object.keys(newVal).length) {
-        return {};
-      }
-      if (!props.modelValue[props.valueKey] && props.modelValue[props.valueKey] !== "") {
-        if (process.env.DEBUG === "true") {
-          const instance = vue.getCurrentInstance();
-          console.error(`Componente '${instance.type.componentName}'  option doesn't have a valueKey '${props.valueKey}' key`);
-        }
-      } else {
-        newVal = props.modelValue[props.valueKey];
-      }
-    }
-    return newVal;
-  });
-  const validateState = vue.computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
-  const validateIcon = vue.computed(
-    () => icon.ValidateComponentsMap[validateState.value]
-  );
-  const debounce = 300;
-  const emptyText = vue.computed(() => {
-    if (props.loading) {
-      return props.loadingText || t("el.select.loading");
-    } else {
-      if (!states.inputValue && states.options.size === 0)
-        return false;
-      if (states.inputValue && states.options.size > 0 && filteredOptionsCount.value === 0) {
-        return props.noMatchText || t("el.select.noMatch");
-      }
-      if (states.options.size === 0) {
-        return props.noDataText || t("autosuggests.sem_dados");
-      }
-    }
-    return null;
-  });
-  const filteredOptionsCount = vue.computed(
-    () => optionsArray.value.filter((option) => option.visible).length
-  );
-  const optionsArray = vue.computed(() => {
-    const list = Array.from(states.options.values());
-    const newList = [];
-    states.optionValues.forEach((item) => {
-      const index2 = list.findIndex((i) => i.value === item);
-      if (index2 > -1) {
-        newList.push(list[index2]);
-      }
-    });
-    return newList.length >= list.length ? newList : list;
-  });
-  const cachedOptionsArray = vue.computed(
-    () => Array.from(states.cachedOptions.values())
-  );
-  const showNewOption = vue.computed(() => {
-    const hasExistingOption = optionsArray.value.filter((option) => {
-      return !option.created;
-    }).some((option) => {
-      return option.currentLabel === states.inputValue;
-    });
-    return props.allowCreate && states.inputValue !== "" && !hasExistingOption;
-  });
-  const updateOptions = () => {
-    return;
-  };
-  const selectSize = useFormCommonProps.useFormSize();
-  const collapseTagSize = vue.computed(
-    () => ["small"].includes(selectSize.value) ? "small" : "default"
-  );
-  const dropdownMenuVisible = vue.computed({
-    get() {
-      return expanded.value && emptyText.value !== false;
-    },
-    set(val) {
-      states.doRequest = true;
-      expanded.value = val;
-    }
-  });
-  const shouldShowPlaceholder = vue.computed(() => {
-    if (shared_esmBundler.isArray(props.modelValue)) {
-      return props.modelValue.length === 0 && !states.inputValue;
-    }
-    return !states.inputValue;
-  });
-  const currentPlaceholder = vue.computed(() => {
-    const _placeholder = props.placeholder ?? t("el.select.placeholder");
-    return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
-  });
-  const suggestionsList = vue.computed(() => {
-    if (props.loading) return [];
-    const list = typeof props.suggestions === "object" ? Object.values(props.suggestions) : props.suggestions;
-    if (props.allowCreate) {
-      const createdSuggestion = { created: true };
-      createdSuggestion[props.labelKey] = states.inputValue !== "" ? states.inputValue : null;
-      createdSuggestion[props.valueKey] = createdSuggestion[props.labelKey];
-      list.push(createdSuggestion);
-    }
-    return list;
-  });
-  const newItem = vue.computed(() => {
-    const instance = vue.getCurrentInstance();
-    return states.inputValue ? t("autosuggests.cadastrar", { nameItem: states.inputValue }) : t(`autosuggests.newItem.${instance.type.componentName}`);
-  });
-  const myId = vue.computed(() => {
-    const instance = vue.getCurrentInstance();
-    return props.id || instance.type.componentName;
-  });
-  const firstValueStopHandle = vue.watch(
-    () => props.suggestions,
-    (val, oldVal) => {
-      if (!types.isNumber(props.modelValue)) {
-        firstValueStopHandle();
-      }
-      if (val.length) {
-        setSelected();
-      }
-      firstValueStopHandle();
-    }
-  );
-  vue.watch(
-    () => props.modelValue,
-    (val, oldVal) => {
-      if (props.multiple) {
-        if (!props.reserveKeyword) {
-          states.inputValue = "";
-          handleQueryChange("");
-        }
-      }
-      setSelected();
-      if (!lodashEs.isEqual(val, oldVal) && props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-    },
-    {
-      flush: "post",
-      deep: true
-    }
-  );
-  vue.watch(
-    () => expanded.value,
-    (val) => {
-      if (val) {
-        handleQueryChange(states.inputValue);
-      } else {
-        states.inputValue = "";
-        states.previousQuery = null;
-        states.isBeforeHide = true;
-      }
-      emit("visible-change", val);
-    }
-  );
-  vue.watch(
-    // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
-    // https://github.com/vuejs/vue-next/issues/2116
-    () => states.options.entries(),
-    () => {
-      if (!index$4.isClient) return;
-      if (props.defaultFirstOption && filteredOptionsCount.value) {
-        checkDefaultFirstOption();
-      }
-    },
-    {
-      flush: "post"
-    }
-  );
-  vue.watch(
-    () => states.hoveringIndex,
-    (val) => {
-      if (types.isNumber(val) && val > -1) {
-        hoverOption.value = optionsArray.value[val] || {};
-      } else {
-        hoverOption.value = {};
-      }
-      optionsArray.value.forEach((option) => {
-        option.hover = hoverOption.value === option;
-      });
-    }
-  );
-  vue.watchEffect(() => {
-    if (states.isBeforeHide) return;
-  });
-  const handleQueryChange = (val) => {
-    if (!states.doRequest && states.previousQuery === val) {
-      return;
-    }
-    if (states.previousQuery === val) {
-      return;
-    }
-    states.previousQuery = val;
-    if (shared_esmBundler.isFunction(props.remoteMethod)) {
-      props.remoteMethod(val);
-    }
-    if (props.defaultFirstOption) {
-      vue.nextTick(checkDefaultFirstOption);
-    } else {
-      vue.nextTick(updateHoveringIndex);
-    }
-  };
-  const checkDefaultFirstOption = () => {
-    const optionsInDropdown = optionsArray.value.filter(
-      (n) => n.visible && !n.disabled && !n.states.groupDisabled
-    );
-    const userCreatedOption = optionsInDropdown.find((n) => n.created);
-    const firstOriginOption = optionsInDropdown[0];
-    states.hoveringIndex = getValueIndex(
-      optionsArray.value,
-      userCreatedOption || firstOriginOption
-    );
-  };
-  const setSelected = () => {
-    if (!props.multiple) {
-      const option = getOption(props.modelValue);
-      states.selectedLabel = option.currentLabel;
-      states.selected = option;
-      return;
-    } else {
-      states.selectedLabel = "";
-    }
-    const result = [];
-    if (shared_esmBundler.isArray(props.modelValue)) {
-      props.modelValue.forEach((value) => {
-        result.push(getOption(value));
-      });
-    }
-    states.selected = result;
-  };
-  const getObjectFromSuggestions = (value) => {
-    for (let i = 0; i < props.suggestions.length; i++) {
-      const item = props.suggestions[i];
-      if (item[props.valueKey] === value) {
-        return {
-          ...item,
-          [props.valueKey]: JSON.parse(JSON.stringify(value)),
-          [props.labelKey]: item[props.labelKey]
-        };
-      }
-    }
-    return {
-      [props.valueKey]: value,
-      [props.labelKey]: value
-    };
-  };
-  const getValueLabelForOption = (modelValue) => {
-    let value;
-    let initialLabel = modelValue ?? false;
-    if (typeof modelValue === "boolean") {
-      value = "";
-    } else if (Array.isArray(modelValue)) {
-      value = modelValue;
-    } else if (typeof modelValue === "number" && props.suggestions.length && typeof props.suggestions[0] === "object") {
-      const suggestionsValue = getObjectFromSuggestions(modelValue);
-      value = suggestionsValue[props.valueKey];
-      initialLabel = suggestionsValue[props.labelKey];
-    } else if (modelValue && typeof modelValue === "object") {
-      if (!Object.keys(modelValue).length) {
-        return {};
-      }
-      if (!modelValue[props.valueKey] && modelValue[props.valueKey] !== "") {
-        const instance = vue.getCurrentInstance();
-        console.error(`Componente '${instance.type.componentName}' option doesn't have a valueKey '${props.valueKey}' key`);
-      } else {
-        if (modelValue[props.labelKey]) {
-          initialLabel = modelValue[props.labelKey];
-        }
-        value = modelValue[props.valueKey];
-      }
-    } else {
-      value = modelValue;
-    }
-    return { value, initialLabel };
-  };
-  const getOption = (val) => {
-    const { value, initialLabel } = getValueLabelForOption(val);
-    let option;
-    if (value && initialLabel) {
-      option = {
-        value,
-        currentLabel: initialLabel
-      };
-    }
-    const isObjectValue = shared_esmBundler.toRawType(value).toLowerCase() === "object";
-    const isNull = shared_esmBundler.toRawType(value).toLowerCase() === "null";
-    const isUndefined = shared_esmBundler.toRawType(value).toLowerCase() === "undefined";
-    for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
-      const cachedOption = cachedOptionsArray.value[i];
-      const isEqualValue = isObjectValue ? lodashEs.get(cachedOption.value, props.valueKey) === lodashEs.get(value, props.valueKey) : cachedOption.value === value;
-      if (isEqualValue) {
-        option = {
-          value,
-          currentLabel: cachedOption.currentLabel,
-          isDisabled: cachedOption.isDisabled
-        };
-        break;
-      }
-    }
-    if (option) return option;
-    const label = isObjectValue ? value.label : !isNull && !isUndefined ? value : "";
-    const newOption = {
-      value,
-      currentLabel: initialLabel || label
-    };
-    return newOption;
-  };
-  const updateHoveringIndex = () => {
-    if (!props.multiple) {
-      states.hoveringIndex = optionsArray.value.findIndex((item) => {
-        return getValueKey(item) === getValueKey(states.selected);
-      });
-    } else {
-      if (states.selected.length > 0) {
-        states.hoveringIndex = Math.min(
-          ...states.selected.map((selected) => {
-            return optionsArray.value.findIndex((item) => {
-              return getValueKey(item) === getValueKey(selected);
-            });
-          })
-        );
-      } else {
-        states.hoveringIndex = -1;
-      }
-    }
-  };
-  const resetSelectionWidth = () => {
-    states.selectionWidth = selectionRef.value.getBoundingClientRect().width;
-  };
-  const resetCalculatorWidth = () => {
-    states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
-  };
-  const resetCollapseItemWidth = () => {
-    states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
-  };
-  const updateTooltip = () => {
-    var _a, _b;
-    (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
-  };
-  const onInputChange = () => {
-    if (states.inputValue.length > 0 && !expanded.value) {
-      expanded.value = true;
-    }
-    handleQueryChange(states.inputValue);
-  };
-  const onInput = (event) => {
-    states.inputValue = event.target.value;
-    debouncedOnInputChange();
-  };
-  const debouncedOnInputChange = lodashEs.debounce(() => {
-    onInputChange();
-  }, debounce.value);
-  const emitChange = (val) => {
-    if (!lodashEs.isEqual(formattedValue, val)) {
-      emit(CHANGE_EVENT, val);
-    }
-  };
-  const getLastNotDisabledIndex = (value) => lodashEs.findLastIndex(value, (it) => !states.disabledOptions.has(it));
-  const deletePrevTag = (e) => {
-    if (!props.multiple) return;
-    if (e.code === EVENT_CODE.delete) return;
-    if (e.target.value.length <= 0) {
-      const value = props.modelValue.slice();
-      const lastNotDisabledIndex = getLastNotDisabledIndex(value);
-      if (lastNotDisabledIndex < 0) return;
-      value.splice(lastNotDisabledIndex, 1);
-      emit(UPDATE_MODEL_EVENT, value);
-      emitChange(value);
-    }
-  };
-  const deleteTag = (event, tag) => {
-    const index2 = states.selected.indexOf(tag);
-    if (index2 > -1 && !selectDisabled.value) {
-      const value = props.modelValue.slice();
-      value.splice(index2, 1);
-      emit(UPDATE_MODEL_EVENT, value);
-      emitChange(value);
-      emit("remove-tag", tag.value);
-    }
-    event.stopPropagation();
-    focus();
-  };
-  const deleteSelected = (event) => {
-    event.stopPropagation();
-    const value = props.multiple ? [] : "";
-    if (!shared_esmBundler.isString(value)) {
-      for (const item of states.selected) {
-        if (item.isDisabled) value.push(item.value);
-      }
-    }
-    emit(UPDATE_MODEL_EVENT, value);
-    emitChange(value);
-    states.hoveringIndex = -1;
-    expanded.value = false;
-    emit("clear");
-    focus();
-  };
-  const normalizarValor = (value) => {
-    if (shared_esmBundler.isObject(value) && props.legacyModel) {
-      return value[props.valueKey];
-    } else if (!shared_esmBundler.isObject(value) && !props.legacyModel) {
-      return getObjectFromSuggestions(value);
-    }
-    return value;
-  };
-  const normalizarTipos = (value) => {
-    if (props.multiple) {
-      return value.map((item) => {
-        return normalizarValor(item);
-      });
-    }
-    return normalizarValor(value);
-  };
-  const handleOptionSelect = (option) => {
-    if (props.multiple) {
-      const value = (props.modelValue || []).slice();
-      const optionIndex = getValueIndex(value, option.value);
-      if (optionIndex > -1) {
-        value.splice(optionIndex, 1);
-      } else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) {
-        const emitValue = props.legacyModel ? option.value : option.item;
-        value.push(emitValue);
-      }
-      const formattedValue2 = normalizarTipos(value);
-      emit(UPDATE_MODEL_EVENT, formattedValue2);
-      emitChange(formattedValue2);
-      if (option.created) {
-        handleQueryChange("");
-      }
-      if (!props.reserveKeyword) {
-        states.inputValue = "";
-      }
-    } else {
-      const emitValue = props.legacyModel ? option.value : option.item;
-      const formattedValue2 = normalizarTipos(emitValue);
-      emit(UPDATE_MODEL_EVENT, formattedValue2);
-      emitChange(formattedValue2);
-      expanded.value = false;
-    }
-    focus();
-    if (expanded.value) return;
-    vue.nextTick(() => {
-      scrollToOption(option);
-    });
-  };
-  const getValueIndex = (arr = [], value) => {
-    const compareValue = shared_esmBundler.isObject(value) ? value[props.valueKey] : value;
-    for (let i = 0; i < arr.length; i++) {
-      const el = arr[i];
-      const elCompareValue = shared_esmBundler.isObject(el) ? el[props.valueKey] : el;
-      if (compareValue === elCompareValue) {
-        return i;
-      }
-    }
-    return -1;
-  };
-  const scrollToOption = (option) => {
-    var _a, _b, _c, _d, _e;
-    const targetOption = shared_esmBundler.isArray(option) ? option[0] : option;
-    let target = null;
-    if (targetOption == null ? void 0 : targetOption.value) {
-      const options = optionsArray.value.filter(
-        (item) => item.value === targetOption.value
-      );
-      if (options.length > 0) {
-        target = options[0].$el;
-      }
-    }
-    if (tooltipRef.value && target) {
-      const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(
-        _c,
-        `.${nsSelect.be("dropdown", "wrap")}`
-      );
-      if (menu) {
-        scroll.scrollIntoView(menu, target);
-      }
-    }
-    (_e = scrollbarRef.value) == null ? void 0 : _e.handleScroll();
-  };
-  const onOptionCreate = (vm) => {
-    states.options.set(vm.value, vm);
-    states.cachedOptions.set(vm.value, vm);
-    vm.disabled && states.disabledOptions.set(vm.value, vm);
-  };
-  const onOptionDestroy = (key, vm) => {
-    if (states.options.get(key) === vm) {
-      states.options.delete(key);
-    }
-  };
-  const {
-    handleCompositionStart,
-    handleCompositionUpdate,
-    handleCompositionEnd
-  } = useInput.useInput((e) => onInput(e));
-  const popperRef = vue.computed(() => {
-    var _a, _b;
-    return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
-  });
-  const handleMenuEnter = () => {
-    vue.nextTick(() => scrollToOption(states.selected));
-  };
-  const focus = () => {
-    var _a;
-    (_a = inputRef.value) == null ? void 0 : _a.focus();
-  };
-  const blur = () => {
-    handleClickOutside();
-  };
-  const handleClearClick = (event) => {
-    deleteSelected(event);
-  };
-  const handleClickOutside = (event) => {
-    expanded.value = false;
-    if (isFocused.value) {
-      const _event = new FocusEvent("focus", event);
-      vue.nextTick(() => handleBlur(_event));
-    }
-  };
-  const handleEsc = () => {
-    if (states.inputValue.length > 0) {
-      states.inputValue = "";
-    } else {
-      expanded.value = false;
-    }
-  };
-  const toggleMenu = () => {
-    if (selectDisabled.value) return;
-    if (states.menuVisibleOnFocus) {
-      states.menuVisibleOnFocus = false;
-    } else {
-      expanded.value = !expanded.value;
-    }
-  };
-  const selectOption = () => {
-    if (!expanded.value) {
-      toggleMenu();
-    } else {
-      if (optionsArray.value[states.hoveringIndex]) {
-        handleOptionSelect(optionsArray.value[states.hoveringIndex]);
-      }
-    }
-  };
-  const getValueKey = (item) => {
-    return shared_esmBundler.isObject(item.value) ? lodashEs.get(item.value, props.valueKey) : item.value;
-  };
-  const optionsAllDisabled = vue.computed(
-    () => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled)
-  );
-  const showTagList = vue.computed(() => {
-    if (!props.multiple) {
-      return [];
-    }
-    return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
-  });
-  const collapseTagList = vue.computed(() => {
-    if (!props.multiple) {
-      return [];
-    }
-    return props.collapseTags ? states.selected.slice(props.maxCollapseTags) : [];
-  });
-  const navigateOptions = (direction) => {
-    if (!expanded.value) {
-      expanded.value = true;
-      return;
-    }
-    if (states.options.size === 0 || filteredOptionsCount.value === 0) return;
-    if (!optionsAllDisabled.value) {
-      if (direction === "next") {
-        states.hoveringIndex++;
-        if (states.hoveringIndex === states.options.size) {
-          states.hoveringIndex = 0;
-        }
-      } else if (direction === "prev") {
-        states.hoveringIndex--;
-        if (states.hoveringIndex < 0) {
-          states.hoveringIndex = states.options.size - 1;
-        }
-      }
-      const option = optionsArray.value[states.hoveringIndex];
-      if (option.disabled === true || option.states.groupDisabled === true || !option.visible) {
-        navigateOptions(direction);
-      }
-      vue.nextTick(() => scrollToOption(hoverOption.value));
-    }
-  };
-  const getGapWidth = () => {
-    if (!selectionRef.value) return 0;
-    const style = window.getComputedStyle(selectionRef.value);
-    return Number.parseFloat(style.gap || "6px");
-  };
-  const tagStyle = vue.computed(() => {
-    const gapWidth = getGapWidth();
-    const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
-    return { maxWidth: `${maxWidth}px` };
-  });
-  const collapseTagStyle = vue.computed(() => {
-    return { maxWidth: `${states.selectionWidth}px` };
-  });
-  const inputStyle = vue.computed(() => ({
-    width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`
-  }));
-  if (props.multiple && !shared_esmBundler.isArray(props.modelValue)) {
-    emit(UPDATE_MODEL_EVENT, []);
-  }
-  if (!props.multiple && shared_esmBundler.isArray(props.modelValue)) {
-    emit(UPDATE_MODEL_EVENT, "");
-  }
-  const clearTags = () => {
-    states.selectedLabel = "";
-    states.doRequest = true;
-    states.previousQuery = false;
-    handleQueryChange("");
-    emit(UPDATE_MODEL_EVENT, null);
-    if (typeof props.modelValue === "undefined") {
-      emit("change", null, null);
-    } else {
-      emit("change", null, props.modelValue);
-    }
-  };
-  index$5.useResizeObserver(selectionRef, resetSelectionWidth);
-  index$5.useResizeObserver(calculatorRef, resetCalculatorWidth);
-  index$5.useResizeObserver(menuRef, updateTooltip);
-  index$5.useResizeObserver(wrapperRef, updateTooltip);
-  index$5.useResizeObserver(collapseItemRef, resetCollapseItemWidth);
-  vue.onMounted(() => {
-    states.doRequest = false;
-    if (props.loadOnCreate) {
-      states.previousQuery = false;
-      handleQueryChange("");
-    } else {
-      states.doRequest = true;
-    }
-    setSelected();
-  });
-  return {
-    inputId,
-    contentId,
-    nsSelect,
-    nsInput,
-    states,
-    isFocused,
-    expanded,
-    optionsArray,
-    hoverOption,
-    selectSize,
-    filteredOptionsCount,
-    resetCalculatorWidth,
-    updateTooltip,
-    debouncedOnInputChange,
-    onInput,
-    deletePrevTag,
-    deleteTag,
-    deleteSelected,
-    handleOptionSelect,
-    scrollToOption,
-    hasModelValue,
-    shouldShowPlaceholder,
-    currentPlaceholder,
-    showClose,
-    iconReverse,
-    validateState,
-    validateIcon,
-    showNewOption,
-    updateOptions,
-    collapseTagSize,
-    setSelected,
-    selectDisabled,
-    emptyText,
-    handleCompositionStart,
-    handleCompositionUpdate,
-    handleCompositionEnd,
-    onOptionCreate,
-    onOptionDestroy,
-    handleMenuEnter,
-    handleFocus,
-    focus,
-    blur,
-    handleBlur,
-    handleClearClick,
-    handleClickOutside,
-    handleEsc,
-    toggleMenu,
-    selectOption,
-    getValueKey,
-    navigateOptions,
-    dropdownMenuVisible,
-    showTagList,
-    collapseTagList,
-    clearTags,
-    suggestionsList,
-    newItem,
-    myId,
-    // computed style
-    tagStyle,
-    collapseTagStyle,
-    inputStyle,
-    // DOM ref
-    popperRef,
-    inputRef,
-    tooltipRef,
-    calculatorRef,
-    suffixRef,
-    selectRef,
-    wrapperRef,
-    selectionRef,
-    scrollbarRef,
-    menuRef,
-    collapseItemRef
-  };
-};
-exports.useSelect = useSelect;