@tagplus/components 5.2.19 → 5.3.1

package/dist/es/src/components/Autosuggest/useSelect.mjs

@@ -0,0 +1,803 @@
+import { reactive, ref, computed, getCurrentInstance, watch, watchEffect, nextTick, onMounted } from "vue";
+import { isArray, isFunction, toRawType, isObject, isString } from "../../../node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
+import { isEqual, get, debounce, findLastIndex } from "lodash-es";
+import { useResizeObserver } from "../../../node_modules/@vueuse/core/index.mjs";
+import { isNumber } from "../../utils/types.mjs";
+import { debugWarn } from "../../utils/error.mjs";
+import { ValidateComponentsMap } from "../../utils/icon.mjs";
+import { scrollIntoView } from "../../utils/scroll.mjs";
+import { useInput } from "../../utils/use-input.mjs";
+import { useFormItem, useFormItemInputId } from "../../utils/use-form-item.mjs";
+import { useFormSize } from "../../utils/use-form-common-props.mjs";
+import { useLocale } from "../../../node_modules/element-plus/es/hooks/use-locale/index.mjs";
+import { useId } from "../../../node_modules/element-plus/es/hooks/use-id/index.mjs";
+import { useNamespace } from "../../../node_modules/element-plus/es/hooks/use-namespace/index.mjs";
+import { useFocusController } from "../../../node_modules/element-plus/es/hooks/use-focus-controller/index.mjs";
+import { isClient } from "../../../node_modules/@vueuse/shared/index.mjs";
+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 } = useLocale();
+  const contentId = useId();
+  const nsSelect = useNamespace("select");
+  const nsInput = useNamespace("input");
+  const states = 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 = ref(null);
+  const selectionRef = ref(null);
+  const tooltipRef = ref(null);
+  const inputRef = ref(null);
+  const calculatorRef = ref(null);
+  const suffixRef = ref(null);
+  const menuRef = ref(null);
+  const collapseItemRef = ref(null);
+  const scrollbarRef = ref(null);
+  const { wrapperRef, isFocused, handleFocus, handleBlur } = 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 = ref(false);
+  const hoverOption = ref();
+  const { form, formItem } = useFormItem();
+  const { inputId } = useFormItemInputId(props, {
+    formItemContext: formItem
+  });
+  const selectDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled));
+  const hasModelValue = computed(() => {
+    return props.multiple ? isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
+  });
+  const showClose = computed(() => {
+    const criteria = props.clearable && !selectDisabled.value && hasModelValue.value;
+    return criteria;
+  });
+  const iconReverse = computed(() => {
+    return expanded.value ? "is-reverse" : "";
+  });
+  const formattedValue = 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 = 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 = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
+  const validateIcon = computed(
+    () => ValidateComponentsMap[validateState.value]
+  );
+  const debounce$1 = 300;
+  const emptyText = 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 = computed(
+    () => optionsArray.value.filter((option) => option.visible).length
+  );
+  const optionsArray = computed(() => {
+    const list = Array.from(states.options.values());
+    const newList = [];
+    states.optionValues.forEach((item) => {
+      const index = list.findIndex((i) => i.value === item);
+      if (index > -1) {
+        newList.push(list[index]);
+      }
+    });
+    return newList.length >= list.length ? newList : list;
+  });
+  const cachedOptionsArray = computed(
+    () => Array.from(states.cachedOptions.values())
+  );
+  const showNewOption = 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 = useFormSize();
+  const collapseTagSize = computed(
+    () => ["small"].includes(selectSize.value) ? "small" : "default"
+  );
+  const dropdownMenuVisible = computed({
+    get() {
+      return expanded.value && emptyText.value !== false;
+    },
+    set(val) {
+      states.doRequest = true;
+      expanded.value = val;
+    }
+  });
+  const shouldShowPlaceholder = computed(() => {
+    if (isArray(props.modelValue)) {
+      return props.modelValue.length === 0 && !states.inputValue;
+    }
+    return !states.inputValue;
+  });
+  const currentPlaceholder = computed(() => {
+    const _placeholder = props.placeholder ?? t("el.select.placeholder");
+    return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
+  });
+  const suggestionsList = 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 = computed(() => {
+    const instance = getCurrentInstance();
+    return states.inputValue ? t("autosuggests.cadastrar", { nameItem: states.inputValue }) : t(`autosuggests.newItem.${instance.type.componentName}`);
+  });
+  const myId = computed(() => {
+    const instance = getCurrentInstance();
+    return props.id || instance.type.componentName;
+  });
+  const firstValueStopHandle = watch(
+    () => props.suggestions,
+    (val, oldVal) => {
+      if (!isNumber(props.modelValue)) {
+        firstValueStopHandle();
+      }
+      if (val.length) {
+        setSelected();
+      }
+      firstValueStopHandle();
+    }
+  );
+  watch(
+    () => props.modelValue,
+    (val, oldVal) => {
+      if (props.multiple) {
+        if (!props.reserveKeyword) {
+          states.inputValue = "";
+          handleQueryChange("");
+        }
+      }
+      setSelected();
+      if (!isEqual(val, oldVal) && props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
+      }
+    },
+    {
+      flush: "post",
+      deep: true
+    }
+  );
+  watch(
+    () => expanded.value,
+    (val) => {
+      if (val) {
+        handleQueryChange(states.inputValue);
+      } else {
+        states.inputValue = "";
+        states.previousQuery = null;
+        states.isBeforeHide = true;
+      }
+      emit("visible-change", val);
+    }
+  );
+  watch(
+    // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
+    // https://github.com/vuejs/vue-next/issues/2116
+    () => states.options.entries(),
+    () => {
+      if (!isClient) return;
+      if (props.defaultFirstOption && filteredOptionsCount.value) {
+        checkDefaultFirstOption();
+      }
+    },
+    {
+      flush: "post"
+    }
+  );
+  watch(
+    () => states.hoveringIndex,
+    (val) => {
+      if (isNumber(val) && val > -1) {
+        hoverOption.value = optionsArray.value[val] || {};
+      } else {
+        hoverOption.value = {};
+      }
+      optionsArray.value.forEach((option) => {
+        option.hover = hoverOption.value === option;
+      });
+    }
+  );
+  watchEffect(() => {
+    if (states.isBeforeHide) return;
+  });
+  const handleQueryChange = (val) => {
+    if (!states.doRequest && states.previousQuery === val) {
+      return;
+    }
+    if (states.previousQuery === val) {
+      return;
+    }
+    states.previousQuery = val;
+    if (isFunction(props.remoteMethod)) {
+      props.remoteMethod(val);
+    }
+    if (props.defaultFirstOption) {
+      nextTick(checkDefaultFirstOption);
+    } else {
+      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 (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 = 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 = toRawType(value).toLowerCase() === "object";
+    const isNull = toRawType(value).toLowerCase() === "null";
+    const isUndefined = toRawType(value).toLowerCase() === "undefined";
+    for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
+      const cachedOption = cachedOptionsArray.value[i];
+      const isEqualValue = isObjectValue ? get(cachedOption.value, props.valueKey) === 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 = debounce(() => {
+    onInputChange();
+  }, debounce$1.value);
+  const emitChange = (val) => {
+    if (!isEqual(formattedValue, val)) {
+      emit(CHANGE_EVENT, val);
+    }
+  };
+  const getLastNotDisabledIndex = (value) => 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 index = states.selected.indexOf(tag);
+    if (index > -1 && !selectDisabled.value) {
+      const value = props.modelValue.slice();
+      value.splice(index, 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 (!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 (isObject(value) && props.legacyModel) {
+      return value[props.valueKey];
+    } else if (!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;
+    nextTick(() => {
+      scrollToOption(option);
+    });
+  };
+  const getValueIndex = (arr = [], value) => {
+    const compareValue = isObject(value) ? value[props.valueKey] : value;
+    for (let i = 0; i < arr.length; i++) {
+      const el = arr[i];
+      const elCompareValue = isObject(el) ? el[props.valueKey] : el;
+      if (compareValue === elCompareValue) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  const scrollToOption = (option) => {
+    var _a, _b, _c, _d, _e;
+    const targetOption = 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) {
+        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((e) => onInput(e));
+  const popperRef = computed(() => {
+    var _a, _b;
+    return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
+  });
+  const handleMenuEnter = () => {
+    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);
+      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 isObject(item.value) ? get(item.value, props.valueKey) : item.value;
+  };
+  const optionsAllDisabled = computed(
+    () => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled)
+  );
+  const showTagList = computed(() => {
+    if (!props.multiple) {
+      return [];
+    }
+    return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
+  });
+  const collapseTagList = 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);
+      }
+      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 = computed(() => {
+    const gapWidth = getGapWidth();
+    const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
+    return { maxWidth: `${maxWidth}px` };
+  });
+  const collapseTagStyle = computed(() => {
+    return { maxWidth: `${states.selectionWidth}px` };
+  });
+  const inputStyle = computed(() => ({
+    width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`
+  }));
+  if (props.multiple && !isArray(props.modelValue)) {
+    emit(UPDATE_MODEL_EVENT, []);
+  }
+  if (!props.multiple && 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);
+    }
+  };
+  useResizeObserver(selectionRef, resetSelectionWidth);
+  useResizeObserver(calculatorRef, resetCalculatorWidth);
+  useResizeObserver(menuRef, updateTooltip);
+  useResizeObserver(wrapperRef, updateTooltip);
+  useResizeObserver(collapseItemRef, resetCollapseItemWidth);
+  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
+  };
+};
+export {
+  useSelect
+};