@type-dom/ui 0.1.2 → 0.2.0

package/src/components/form/td-select/useSelect.js

@@ -1,757 +0,0 @@
-"use strict";
-// import {
-//   computed,
-//   nextTick,
-//   onMounted,
-//   reactive,
-//   ref,
-//   watch,
-//   watchEffect,
-// } from 'vue'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelect = void 0;
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const lodash_1 = require("lodash");
-const utils_1 = require("@type-dom/utils");
-const svgs_1 = require("@type-dom/svgs");
-const constants_1 = require("../../../constants");
-const hooks_1 = require("../../../hooks");
-const td_form_1 = require("../td-form");
-const useSelect = (props, emit) => {
-    const { t } = (0, hooks_1.useLocale)();
-    const contentId = (0, hooks_1.useId)();
-    const nsSelect = (0, hooks_1.useNamespace)('select');
-    const nsInput = (0, hooks_1.useNamespace)('input');
-    const states = {
-        inputValue: (0, signals_1.signal)(''),
-        options: (0, signals_1.signal)(new Map()),
-        cachedOptions: new Map(),
-        optionValues: [], // sorted value of options
-        selected: [],
-        selectionWidth: 0,
-        collapseItemWidth: 0,
-        selectedLabel: (0, signals_1.signal)(''),
-        hoveringIndex: -1,
-        previousQuery: null,
-        inputHovering: false,
-        menuVisibleOnFocus: false,
-        isBeforeHide: false,
-    };
-    // template refs
-    const selectRef = (0, signals_1.signal)(undefined);
-    const selectionRef = (0, signals_1.signal)(undefined);
-    const tooltipRef = (0, signals_1.signal)(undefined);
-    const tagTooltipRef = (0, signals_1.signal)(undefined);
-    const inputRef = (0, signals_1.signal)(undefined);
-    const prefixRef = (0, signals_1.signal)(undefined);
-    const suffixRef = (0, signals_1.signal)(undefined);
-    const menuRef = (0, signals_1.signal)(undefined);
-    const tagMenuRef = (0, signals_1.signal)(undefined);
-    const collapseItemRef = (0, signals_1.signal)(undefined);
-    const scrollbarRef = (0, signals_1.signal)(undefined);
-    const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, } = (0, hooks_1.useComposition)({
-        afterComposition: (e) => onInput(e),
-    });
-    const { wrapperRef, isFocused, handleBlur } = (0, hooks_1.useFocusController)(inputRef, {
-        beforeFocus() {
-            return (0, signals_1.unref)(selectDisabled);
-        },
-        afterFocus() {
-            if ((0, signals_1.unref)(props.automaticDropdown) && !expanded.get()) {
-                expanded.set(true);
-                states.menuVisibleOnFocus = true;
-            }
-        },
-        beforeBlur(event) {
-            var _a, _b, _c, _d;
-            return (((_b = (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent) === null || _b === void 0 ? void 0 : _b.call(_a, event)) ||
-                ((_d = (_c = tagTooltipRef === null || tagTooltipRef === void 0 ? void 0 : tagTooltipRef.get()) === null || _c === void 0 ? void 0 : _c.isFocusInsideContent) === null || _d === void 0 ? void 0 : _d.call(_c, event)));
-        },
-        afterBlur() {
-            expanded.set(false);
-            states.menuVisibleOnFocus = false;
-        },
-    });
-    // the controller of the expanded popup
-    const expanded = (0, signals_1.signal)(false);
-    const hoverOption = (0, signals_1.signal)();
-    const { form, formItem } = (0, td_form_1.useFormItem)();
-    const { inputId } = (0, td_form_1.useFormItemInputId)(props, {
-        formItemContext: formItem,
-    });
-    const { valueOnClear, isEmptyValue } = (0, hooks_1.useEmptyValues)(props);
-    const selectDisabled = (0, signals_1.computed)(() => (0, signals_1.unref)(props.disabled) || (0, signals_1.unref)(form === null || form === void 0 ? void 0 : form.disabled));
-    const hasModelValue = (0, signals_1.computed)(() => {
-        console.warn('hasModelValue computed . ');
-        const modelValue = (0, signals_1.unref)(props.modelValue);
-        return (0, utils_1.isArray)(modelValue)
-            ? modelValue.length > 0
-            : !isEmptyValue(modelValue);
-    });
-    const needStatusIcon = (0, signals_1.computed)(() => { var _a; return (_a = form === null || form === void 0 ? void 0 : form.statusIcon) !== null && _a !== void 0 ? _a : false; });
-    const showClose = (0, signals_1.computed)(() => {
-        return ((0, signals_1.unref)(props.clearable) &&
-            !selectDisabled.get() &&
-            states.inputHovering &&
-            hasModelValue.get());
-    });
-    const iconComponent = (0, signals_1.computed)(() => (0, signals_1.unref)(props.remote) && (0, signals_1.unref)(props.filterable) && !(0, signals_1.unref)(props.remoteShowSuffix)
-        ? ''
-        : (0, signals_1.unref)(props.suffixIcon));
-    const iconReverse = (0, signals_1.computed)(() => nsSelect.is('reverse', iconComponent.get() && expanded.get()));
-    const validateState = (0, signals_1.computed)(() => (formItem === null || formItem === void 0 ? void 0 : formItem.validateState) || '');
-    const validateIcon = (0, signals_1.computed)(() => svgs_1.ValidateComponentsMap[validateState.get()]);
-    const debounce = (0, signals_1.computed)(() => ((0, signals_1.unref)(props.remote) ? 300 : 0));
-    const isRemoteSearchEmpty = (0, signals_1.computed)(() => (0, signals_1.unref)(props.remote) && !states.inputValue.get() && states.options.get().size === 0);
-    const emptyText = (0, signals_1.computed)(() => {
-        if ((0, signals_1.unref)(props.loading)) {
-            return (0, signals_1.unref)(props.loadingText) || t('el.select.loading');
-        }
-        else {
-            if ((0, signals_1.unref)(props.filterable) &&
-                states.inputValue.get() &&
-                states.options.get().size > 0 &&
-                filteredOptionsCount.get() === 0) {
-                return (0, signals_1.unref)(props.noMatchText) || t('el.select.noMatch');
-            }
-            if (states.options.get().size === 0) {
-                return (0, signals_1.unref)(props.noDataText) || t('el.select.noData');
-            }
-        }
-        return undefined;
-    });
-    const filteredOptionsCount = (0, signals_1.computed)(() => optionsArray.get().filter((option) => option.visible).length);
-    const optionsArray = (0, signals_1.computed)(() => {
-        const list = Array.from(states.options.get().values());
-        const newList = [];
-        states.optionValues.forEach((item) => {
-            const index = list.findIndex((i) => i.props.value === item.value); // todo  .props.value === item.value edit by me
-            if (index > -1) {
-                newList.push(list[index]);
-            }
-        });
-        return newList.length >= list.length ? newList : list;
-    });
-    const cachedOptionsArray = (0, signals_1.computed)(() => Array.from(states.cachedOptions.values()));
-    const showNewOption = (0, signals_1.computed)(() => {
-        var _a;
-        console.warn('showNewOption . optionsArray and states.inputValue is ', optionsArray, states.inputValue);
-        const hasExistingOption = (_a = optionsArray.get()) === null || _a === void 0 ? void 0 : _a.filter((option) => {
-            // console.warn('showNewOption . option.props.created is ', option.props.created);
-            return !option.props.created;
-        }).some((option) => {
-            var _a;
-            return ((_a = option.currentLabel) === null || _a === void 0 ? void 0 : _a.get()) === states.inputValue.get();
-        });
-        console.warn('showNewOption . hasExistingOption is ', hasExistingOption);
-        return ((0, signals_1.unref)(props.filterable) &&
-            (0, signals_1.unref)(props.allowCreate) &&
-            states.inputValue.get() !== '' &&
-            !hasExistingOption);
-    });
-    const updateOptions = () => {
-        var _a;
-        if ((0, signals_1.unref)(props.filterable) && (0, utils_1.isFunction)(props.filterMethod))
-            return;
-        if ((0, signals_1.unref)(props.filterable) && (0, signals_1.unref)(props.remote) && (0, utils_1.isFunction)((0, signals_1.unref)(props.remoteMethod)))
-            return;
-        (_a = optionsArray.get()) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
-            var _a;
-            (_a = option.updateOption) === null || _a === void 0 ? void 0 : _a.call(option, states.inputValue.get());
-        });
-    };
-    const selectSize = (0, td_form_1.useFormSize)();
-    const collapseTagSize = (0, signals_1.computed)(() => ['small'].includes(selectSize.get()) ? 'small' : 'default');
-    const dropdownMenuVisible = (0, signals_1.computed)(() => expanded.get() && !isRemoteSearchEmpty.get(), (val) => {
-        console.warn('dropdownMenuVisible , val is ', val);
-        expanded.set(val);
-    });
-    const shouldShowPlaceholder = (0, signals_1.computed)(() => {
-        if ((0, signals_1.unref)(props.multiple) && !(0, utils_1.isUndefined)((0, signals_1.unref)(props.modelValue))) {
-            return ((0, utils_1.ensureArray)((0, signals_1.unref)(props.modelValue)).length === 0 && !states.inputValue.get());
-        }
-        const value = (0, utils_1.isArray)((0, signals_1.unref)(props.modelValue))
-            ? (0, signals_1.unref)(props.modelValue)[0]
-            : (0, signals_1.unref)(props.modelValue);
-        return (0, signals_1.unref)(props.filterable) || (0, utils_1.isUndefined)(value)
-            ? !states.inputValue.get()
-            : true;
-    });
-    const currentPlaceholder = (0, signals_1.computed)(() => {
-        var _a;
-        console.warn('currentPlaceholder . ');
-        const _placeholder = (_a = (0, signals_1.unref)(props.placeholder)) !== null && _a !== void 0 ? _a : t('el.select.placeholder');
-        console.warn('_placeholder is ', _placeholder);
-        const label = states.selectedLabel.get();
-        console.warn('label is ', label);
-        return (0, signals_1.unref)(props.multiple) || !hasModelValue.get()
-            ? _placeholder
-            : label;
-    });
-    // iOS Safari does not handle click events when a mouseenter event is registered and a DOM-change happens in a child
-    // We use a Vue custom event binding to only register the event on non-iOS devices
-    // ref.: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
-    // Github Issue: https://github.com/vuejs/vue/issues/9859
-    const mouseEnterEventName = (0, signals_1.computed)(() => (utils_1.isIOS ? null : 'mouseenter'));
-    (0, framework_1.onMounted)(() => {
-        (0, signals_1.watch)(() => (0, signals_1.unref)(props.modelValue), (val, oldVal) => {
-            if ((0, signals_1.unref)(props.multiple)) {
-                if ((0, signals_1.unref)(props.filterable) && !(0, signals_1.unref)(props.reserveKeyword)) {
-                    states.inputValue.set('');
-                    handleQueryChange('');
-                }
-            }
-            setSelected();
-            if (!(0, lodash_1.isEqual)(val, oldVal) && (0, signals_1.unref)(props.validateEvent)) {
-                formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err));
-            }
-        }, {
-            flush: 'post',
-            deep: true,
-        });
-        (0, signals_1.watch)(() => expanded.get(), (val) => {
-            console.warn('watch expanded.get() , val is ', val);
-            if (val) {
-                handleQueryChange(states.inputValue.get());
-            }
-            else {
-                states.inputValue.set('');
-                states.previousQuery = null;
-                states.isBeforeHide = true;
-            }
-            emit('visible-change', val);
-        });
-        (0, signals_1.watch)(
-        // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
-        // https://github.com/vuejs/vue-next/issues/2116
-        () => states.options.get().entries(), (val) => {
-            console.error('watch states.options.get().entries(), val is ', val);
-            if (!utils_1.isClient)
-                return;
-            // tooltipRef.value?.updatePopper?.()
-            setSelected();
-            if ((0, signals_1.unref)(props.defaultFirstOption) &&
-                ((0, signals_1.unref)(props.filterable) || (0, signals_1.unref)(props.remote)) &&
-                filteredOptionsCount.get()) {
-                checkDefaultFirstOption();
-            }
-        }, {
-            flush: 'post',
-        });
-    });
-    (0, signals_1.watch)(() => [states.hoveringIndex, optionsArray.get()], ([val]) => {
-        console.warn('watch [states.hoveringIndex, optionsArray.get()] , [val] is ', val);
-        if ((0, utils_1.isNumber)(val) && val > -1) {
-            hoverOption.set(optionsArray.get()[val] || {});
-        }
-        else {
-            hoverOption.set({});
-        }
-        optionsArray.get().forEach((option) => {
-            var _a;
-            (_a = option.hover) === null || _a === void 0 ? void 0 : _a.set(hoverOption.get() === option);
-        });
-    });
-    (0, signals_1.effect)(() => {
-        // Anything could cause options changed, then update options
-        // If you want to control it by condition, write here
-        if (states.isBeforeHide)
-            return;
-        updateOptions();
-    });
-    const handleQueryChange = (val) => {
-        var _a, _b;
-        if (states.previousQuery === val || isComposing.get()) {
-            return;
-        }
-        states.previousQuery = val;
-        if ((0, signals_1.unref)(props.filterable) && (0, utils_1.isFunction)((0, signals_1.unref)(props.filterMethod))) {
-            (_a = (0, signals_1.unref)(props.filterMethod)) === null || _a === void 0 ? void 0 : _a(val);
-        }
-        else if ((0, signals_1.unref)(props.filterable) &&
-            (0, signals_1.unref)(props.remote) &&
-            (0, utils_1.isFunction)((0, signals_1.unref)(props.remoteMethod))) {
-            (_b = (0, signals_1.unref)(props.remoteMethod)) === null || _b === void 0 ? void 0 : _b(val);
-        }
-        if ((0, signals_1.unref)(props.defaultFirstOption) &&
-            ((0, signals_1.unref)(props.filterable) || (0, signals_1.unref)(props.remote)) &&
-            filteredOptionsCount.get()) {
-            (0, framework_1.nextTick)(checkDefaultFirstOption);
-        }
-        else {
-            (0, framework_1.nextTick)(updateHoveringIndex);
-        }
-    };
-    /**
-     * find and highlight first option as default selected
-     * @remark
-     * - if the first option in dropdown list is user-created,
-     *   it would be at the end of the optionsArray
-     *   so find it and set hover.
-     *   (NOTE: there must be only one user-created option in dropdown list with query)
-     * - if there's no user-created option in list, just find the first one as usual
-     *   (NOTE: exclude options that are disabled or in disabled-group)
-     */
-    const checkDefaultFirstOption = () => {
-        const optionsInDropdown = optionsArray
-            .get()
-            .filter((n) => { var _a; return n.visible && !n.props.disabled && !((_a = n.states) === null || _a === void 0 ? void 0 : _a.groupDisabled); });
-        const userCreatedOption = optionsInDropdown.find((n) => n.created);
-        const firstOriginOption = optionsInDropdown[0];
-        const valueList = optionsArray.get().map((item) => item.value);
-        states.hoveringIndex = getValueIndex(valueList, userCreatedOption || firstOriginOption);
-    };
-    const setSelected = () => {
-        var _a, _b;
-        console.warn('setSelected . ');
-        if (!(0, signals_1.unref)(props.multiple)) {
-            const modelValue = (0, signals_1.unref)(props.modelValue);
-            const value = (0, utils_1.isArray)(modelValue)
-                ? modelValue[0]
-                : modelValue;
-            const option = getOption(value);
-            console.warn('setSelected . option.currentLabel is ', option.currentLabel);
-            states.selectedLabel.set((_b = (_a = option.currentLabel) === null || _a === void 0 ? void 0 : _a.get()) !== null && _b !== void 0 ? _b : '');
-            states.selected = [option];
-            return;
-        }
-        else {
-            states.selectedLabel.set('');
-        }
-        const result = [];
-        if (!(0, utils_1.isUndefined)((0, signals_1.unref)(props.modelValue))) {
-            (0, utils_1.ensureArray)((0, signals_1.unref)(props.modelValue)).forEach((value) => {
-                result.push(getOption(value));
-            });
-        }
-        states.selected = result;
-    };
-    const getOption = (value) => {
-        console.warn('getOption . value is ', value);
-        let option = {};
-        const isObjectValue = (0, utils_1.isPlainObject)(value);
-        for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
-            const cachedOption = cachedOptionsArray.get()[i];
-            const isEqualValue = isObjectValue
-                ? (0, lodash_1.get)(cachedOption.value, (0, signals_1.unref)(props.valueKey)) === (0, lodash_1.get)(value, (0, signals_1.unref)(props.valueKey))
-                : (cachedOption === null || cachedOption === void 0 ? void 0 : cachedOption.value) === value;
-            if (isEqualValue) {
-                option = {
-                    value,
-                    currentLabel: cachedOption === null || cachedOption === void 0 ? void 0 : cachedOption.currentLabel,
-                    get isDisabled() {
-                        return cachedOption.isDisabled;
-                    },
-                };
-                break;
-            }
-        }
-        if (option)
-            return option;
-        const label = isObjectValue ? value.label : value !== null && value !== void 0 ? value : '';
-        const newOption = {
-            value,
-            currentLabel: label,
-        };
-        return newOption;
-    };
-    const updateHoveringIndex = () => {
-        states.hoveringIndex = optionsArray
-            .get()
-            .findIndex((item) => states.selected.some((selected) => getValueKey(selected) === getValueKey(item)));
-    };
-    const resetSelectionWidth = () => {
-        states.selectionWidth = selectionRef.get().getBoundingClientRect().width;
-    };
-    const resetCollapseItemWidth = () => {
-        var _a;
-        states.collapseItemWidth = (_a = collapseItemRef === null || collapseItemRef === void 0 ? void 0 : collapseItemRef.get()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-    };
-    const updateTooltip = () => {
-        var _a, _b;
-        (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
-    };
-    const updateTagTooltip = () => {
-        var _a, _b;
-        (_b = (_a = tagTooltipRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
-    };
-    const onInputChange = () => {
-        if (states.inputValue.get().length > 0 && !expanded.get()) {
-            expanded.set(true);
-        }
-        handleQueryChange(states.inputValue.get());
-    };
-    const onInput = (event) => {
-        states.inputValue.set((event === null || event === void 0 ? void 0 : event.target).value);
-        if ((0, signals_1.unref)(props.remote)) {
-            debouncedOnInputChange();
-        }
-        else {
-            return onInputChange();
-        }
-    };
-    const debouncedOnInputChange = (0, lodash_1.debounce)(() => {
-        onInputChange();
-    }, debounce.get());
-    const emitChange = (val) => {
-        console.warn('emitChange . val is ', val);
-        if (!(0, lodash_1.isEqual)((0, signals_1.unref)(props.modelValue), val)) {
-            emit(constants_1.CHANGE_EVENT, val);
-        }
-    };
-    const getLastNotDisabledIndex = (value) => (0, lodash_1.findLastIndex)(value, (it) => {
-        var _a;
-        const option = states.cachedOptions.get(it);
-        return option && !option.props.disabled && !((_a = option.states) === null || _a === void 0 ? void 0 : _a.groupDisabled);
-    });
-    const deletePrevTag = (e) => {
-        var _a;
-        if (!(0, signals_1.unref)(props.multiple))
-            return;
-        if (e.code === constants_1.EVENT_CODE.delete)
-            return;
-        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.value.length) <= 0) {
-            const value = (0, utils_1.ensureArray)((0, signals_1.unref)(props.modelValue)).slice();
-            const lastNotDisabledIndex = getLastNotDisabledIndex(value);
-            if (lastNotDisabledIndex < 0)
-                return;
-            const removeTagValue = value[lastNotDisabledIndex];
-            value.splice(lastNotDisabledIndex, 1);
-            emit(constants_1.UPDATE_MODEL_EVENT, value);
-            emitChange(value);
-            emit('remove-tag', removeTagValue);
-        }
-    };
-    const deleteTag = (event, tag) => {
-        const index = states.selected.indexOf(tag);
-        if (index > -1 && !selectDisabled.get()) {
-            const value = (0, utils_1.ensureArray)((0, signals_1.unref)(props.modelValue)).slice();
-            value.splice(index, 1);
-            emit(constants_1.UPDATE_MODEL_EVENT, value);
-            emitChange(value);
-            emit('remove-tag', tag.value);
-        }
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        focus();
-    };
-    const deleteSelected = (event) => {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        const value = (0, signals_1.unref)(props.multiple) ? [] : valueOnClear.get();
-        if ((0, signals_1.unref)(props.multiple)) {
-            for (const item of states.selected) {
-                if (item.isDisabled)
-                    value.push(item.value);
-            }
-        }
-        emit(constants_1.UPDATE_MODEL_EVENT, value);
-        emitChange(value);
-        states.hoveringIndex = -1;
-        expanded.set(false);
-        emit('clear');
-        focus();
-    };
-    const handleOptionSelect = (option) => {
-        var _a;
-        console.warn('handleOptionSelect . option is ', option);
-        if ((0, signals_1.unref)(props.multiple)) {
-            const value = (0, utils_1.ensureArray)((_a = (0, signals_1.unref)(props.modelValue)) !== null && _a !== void 0 ? _a : []).slice();
-            const optionIndex = getValueIndex(value, option);
-            if (optionIndex > -1) {
-                value.splice(optionIndex, 1);
-            }
-            else if ((0, signals_1.unref)(props.multipleLimit) <= 0 ||
-                (0, signals_1.unref)(value.length) < (0, signals_1.unref)(props.multipleLimit)) {
-                value.push((0, signals_1.unref)(option.props.value));
-            }
-            emit(constants_1.UPDATE_MODEL_EVENT, value);
-            emitChange(value);
-            if (option.created) {
-                handleQueryChange('');
-            }
-            if ((0, signals_1.unref)(props.filterable) && !(0, signals_1.unref)(props.reserveKeyword)) {
-                states.inputValue.set('');
-            }
-        }
-        else {
-            // states.selectedLabel?.set(option.props.label ?? ''); // add by me todo
-            // option.currentLabel?.set(option.props.label);
-            emit(constants_1.UPDATE_MODEL_EVENT, option.props.value);
-            emitChange(option.props.value);
-            expanded.set(false);
-        }
-        focus();
-        if (expanded.get())
-            return;
-        (0, framework_1.nextTick)(() => {
-            scrollToOption(option);
-        });
-    };
-    const getValueIndex = (arr = [], option) => {
-        if ((0, utils_1.isUndefined)(option))
-            return -1;
-        if (!(0, utils_1.isObject)(option.value))
-            return arr.indexOf(option.value);
-        return arr.findIndex((item) => {
-            return (0, lodash_1.isEqual)((0, lodash_1.get)(item, (0, signals_1.unref)(props.valueKey)), getValueKey(option));
-        });
-    };
-    const scrollToOption = (option) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const targetOption = (0, utils_1.isArray)(option) ? option[0] : option;
-        let target = null;
-        if (targetOption === null || targetOption === void 0 ? void 0 : targetOption.value) {
-            const options = optionsArray
-                .get()
-                .filter((item) => item.value === targetOption.value);
-            if (options.length > 0) {
-                target = options[0].dom;
-            }
-        }
-        if (tooltipRef.get() && target) {
-            const menu = (_f = (_e = (_d = (_c = (_b = (_a = tooltipRef
-                .get()) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.contentRef) === null || _d === void 0 ? void 0 : _d.get()) === null || _e === void 0 ? void 0 : _e.querySelector) === null || _f === void 0 ? void 0 : _f.call(_e, `.${nsSelect.be('dropdown', 'wrap')}`);
-            if (menu) {
-                (0, utils_1.scrollIntoView)(menu, target);
-            }
-        }
-        (_h = (_g = scrollbarRef === null || scrollbarRef === void 0 ? void 0 : scrollbarRef.get()) === null || _g === void 0 ? void 0 : _g.handleScroll) === null || _h === void 0 ? void 0 : _h.call(_g);
-    };
-    const onOptionCreate = (vm) => {
-        console.warn('onOptionCreate . ');
-        states.options.get().set((0, signals_1.unref)(vm.props.value), vm);
-        states.options.set(states.options.get()); // 触发监听
-        states.cachedOptions.set((0, signals_1.unref)(vm.props.value), vm);
-    };
-    const onOptionDestroy = (key, vm) => {
-        if (states.options.get().get(key) === vm) {
-            states.options.get().delete(key);
-            console.warn('onOptionDestroy . then states.options.set');
-            states.options.set(states.options.get()); // 触发监听
-        }
-    };
-    const popperRef = (0, signals_1.computed)(() => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.contentRef) === null || _d === void 0 ? void 0 : _d.get();
-    });
-    const handleMenuEnter = () => {
-        states.isBeforeHide = false;
-        (0, framework_1.nextTick)(() => {
-            var _a, _b;
-            (_b = (_a = scrollbarRef.get()) === null || _a === void 0 ? void 0 : _a.updateDom) === null || _b === void 0 ? void 0 : _b.call(_a);
-            scrollToOption(states.selected);
-        });
-    };
-    const focus = () => {
-        var _a;
-        (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const blur = () => {
-        var _a;
-        if (expanded.get()) {
-            expanded.set(false);
-            (0, framework_1.nextTick)(() => { var _a; return (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.blur(); });
-            return;
-        }
-        (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.blur();
-    };
-    const handleClearClick = (event) => {
-        deleteSelected(event);
-    };
-    const handleClickOutside = (event) => {
-        expanded.set(false);
-        if (isFocused.get()) {
-            const _event = new FocusEvent('focus', event);
-            (0, framework_1.nextTick)(() => handleBlur(_event));
-        }
-    };
-    const handleEsc = () => {
-        if (states.inputValue.get().length > 0) {
-            states.inputValue.set('');
-        }
-        else {
-            expanded.set(false);
-        }
-    };
-    const toggleMenu = () => {
-        if (selectDisabled.get())
-            return;
-        // We only set the inputHovering state to true on mouseenter event on iOS devices
-        // To keep the state updated we set it here to true
-        if (utils_1.isIOS)
-            states.inputHovering = true;
-        if (states.menuVisibleOnFocus) {
-            // controlled by automaticDropdown
-            states.menuVisibleOnFocus = false;
-        }
-        else {
-            expanded.set(!expanded.get());
-        }
-    };
-    const selectOption = () => {
-        if (!expanded.get()) {
-            toggleMenu();
-        }
-        else {
-            const option = optionsArray.get()[states.hoveringIndex];
-            if (option && !option.isDisabled) {
-                handleOptionSelect(option);
-            }
-        }
-    };
-    const getValueKey = (item) => {
-        return (0, utils_1.isObject)(item.value) ? (0, lodash_1.get)(item.value, (0, signals_1.unref)(props.valueKey)) : item.value;
-    };
-    const optionsAllDisabled = (0, signals_1.computed)(() => optionsArray
-        .get()
-        .filter((option) => option.visible)
-        .every((option) => option.isDisabled));
-    const showTagList = (0, signals_1.computed)(() => {
-        if (!(0, signals_1.unref)(props.multiple)) {
-            return [];
-        }
-        return (0, signals_1.unref)(props.collapseTags)
-            ? states.selected.slice(0, (0, signals_1.unref)(props.maxCollapseTags))
-            : states.selected;
-    });
-    const collapseTagList = (0, signals_1.computed)(() => {
-        if (!(0, signals_1.unref)(props.multiple)) {
-            return [];
-        }
-        return (0, signals_1.unref)(props.collapseTags)
-            ? states.selected.slice((0, signals_1.unref)(props.maxCollapseTags))
-            : [];
-    });
-    const navigateOptions = (direction) => {
-        if (!expanded.get()) {
-            expanded.set(true);
-            return;
-        }
-        if (states.options.get().size === 0 ||
-            filteredOptionsCount.get() === 0 ||
-            isComposing.get())
-            return;
-        if (!optionsAllDisabled.get()) {
-            if (direction === 'next') {
-                states.hoveringIndex++;
-                if (states.hoveringIndex === states.options.get().size) {
-                    states.hoveringIndex = 0;
-                }
-            }
-            else if (direction === 'prev') {
-                states.hoveringIndex--;
-                if (states.hoveringIndex < 0) {
-                    states.hoveringIndex = states.options.get().size - 1;
-                }
-            }
-            const option = optionsArray.get()[states.hoveringIndex];
-            if (option.isDisabled || !option.visible) {
-                navigateOptions(direction);
-            }
-            (0, framework_1.nextTick)(() => scrollToOption(hoverOption.get()));
-        }
-    };
-    const getGapWidth = () => {
-        if (!selectionRef.get())
-            return 0;
-        const style = window.getComputedStyle(selectionRef.get());
-        return Number.parseFloat(style.gap || '6px');
-    };
-    // computed style
-    const tagStyle = (0, signals_1.computed)(() => {
-        const gapWidth = getGapWidth();
-        const maxWidth = collapseItemRef.get() && (0, signals_1.unref)(props.maxCollapseTags) === 1
-            ? states.selectionWidth - states.collapseItemWidth - gapWidth
-            : states.selectionWidth;
-        return { maxWidth: `${maxWidth}px` };
-    });
-    const collapseTagStyle = (0, signals_1.computed)(() => {
-        return { maxWidth: `${states.selectionWidth}px` };
-    });
-    const popupScroll = (data) => {
-        emit('popup-scroll', data);
-    };
-    (0, framework_1.useResizeObserver)(selectionRef, resetSelectionWidth);
-    (0, framework_1.useResizeObserver)(menuRef, updateTooltip);
-    (0, framework_1.useResizeObserver)(wrapperRef, updateTooltip);
-    (0, framework_1.useResizeObserver)(tagMenuRef, updateTagTooltip);
-    (0, framework_1.useResizeObserver)(collapseItemRef, resetCollapseItemWidth);
-    (0, framework_1.onMounted)(() => {
-        setSelected();
-    });
-    return {
-        inputId,
-        contentId,
-        nsSelect,
-        nsInput,
-        states,
-        isFocused,
-        expanded,
-        optionsArray,
-        hoverOption,
-        selectSize,
-        filteredOptionsCount,
-        updateTooltip,
-        updateTagTooltip,
-        debouncedOnInputChange,
-        onInput,
-        deletePrevTag,
-        deleteTag,
-        deleteSelected,
-        handleOptionSelect,
-        scrollToOption,
-        hasModelValue,
-        shouldShowPlaceholder,
-        currentPlaceholder,
-        mouseEnterEventName,
-        needStatusIcon,
-        showClose,
-        iconComponent,
-        iconReverse,
-        validateState,
-        validateIcon,
-        showNewOption,
-        updateOptions,
-        collapseTagSize,
-        setSelected,
-        selectDisabled,
-        emptyText,
-        handleCompositionStart,
-        handleCompositionUpdate,
-        handleCompositionEnd,
-        onOptionCreate,
-        onOptionDestroy,
-        handleMenuEnter,
-        focus,
-        blur,
-        handleClearClick,
-        handleClickOutside,
-        handleEsc,
-        toggleMenu,
-        selectOption,
-        getValueKey,
-        navigateOptions,
-        dropdownMenuVisible,
-        showTagList,
-        collapseTagList,
-        popupScroll,
-        // computed style
-        tagStyle,
-        collapseTagStyle,
-        // DOM ref
-        popperRef,
-        inputRef,
-        tooltipRef,
-        tagTooltipRef,
-        prefixRef,
-        suffixRef,
-        selectRef,
-        wrapperRef,
-        selectionRef,
-        scrollbarRef,
-        menuRef,
-        tagMenuRef,
-        collapseItemRef,
-    };
-};
-exports.useSelect = useSelect;