@type-dom/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,728 @@
+"use strict";
+// @ts-nocheck
+// 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: new Map(),
+        cachedOptions: new Map(),
+        optionValues: [], // sorted value of options
+        selected: [],
+        selectionWidth: 0,
+        collapseItemWidth: 0,
+        selectedLabel: '',
+        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 selectDisabled.get();
+        },
+        afterFocus() {
+            if (props.automaticDropdown && !expanded.get()) {
+                expanded.set(true);
+                states.menuVisibleOnFocus = true;
+            }
+        },
+        beforeBlur(event) {
+            var _a, _b;
+            return (((_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent(event)) ||
+                ((_b = tagTooltipRef.get()) === null || _b === void 0 ? void 0 : _b.isFocusInsideContent(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)(() => props.disabled || (form === null || form === void 0 ? void 0 : form.disabled));
+    const hasModelValue = (0, signals_1.computed)(() => {
+        return (0, utils_1.isArray)(props.modelValue)
+            ? props.modelValue.length > 0
+            : !isEmptyValue(props.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 (props.clearable &&
+            !selectDisabled.get() &&
+            states.inputHovering &&
+            hasModelValue.get());
+    });
+    const iconComponent = (0, signals_1.computed)(() => props.remote && props.filterable && !props.remoteShowSuffix
+        ? ''
+        : 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)(() => (props.remote ? 300 : 0));
+    const isRemoteSearchEmpty = (0, signals_1.computed)(() => props.remote && !states.inputValue.get() && states.options.size === 0);
+    const emptyText = (0, signals_1.computed)(() => {
+        if (props.loading) {
+            return props.loadingText || t('el.select.loading');
+        }
+        else {
+            if (props.filterable &&
+                states.inputValue.get() &&
+                states.options.size > 0 &&
+                filteredOptionsCount.get() === 0) {
+                return props.noMatchText || t('el.select.noMatch');
+            }
+            if (states.options.size === 0) {
+                return props.noDataText || t('el.select.noData');
+            }
+        }
+        return null;
+    });
+    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.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 = (0, signals_1.computed)(() => Array.from(states.cachedOptions.values()));
+    const showNewOption = (0, signals_1.computed)(() => {
+        const hasExistingOption = optionsArray
+            .get()
+            .filter((option) => {
+            return !option.created;
+        })
+            .some((option) => {
+            return option.currentLabel === states.inputValue.get();
+        });
+        return (props.filterable &&
+            props.allowCreate &&
+            states.inputValue.get() !== '' &&
+            !hasExistingOption);
+    });
+    const updateOptions = () => {
+        if (props.filterable && (0, utils_1.isFunction)(props.filterMethod))
+            return;
+        if (props.filterable && props.remote && (0, utils_1.isFunction)(props.remoteMethod))
+            return;
+        optionsArray.get().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)({
+        get() {
+            return expanded.get() && !isRemoteSearchEmpty.get();
+        },
+        set(val) {
+            expanded.set(val);
+        },
+    });
+    const shouldShowPlaceholder = (0, signals_1.computed)(() => {
+        if (props.multiple && !(0, utils_1.isUndefined)(props.modelValue)) {
+            return ((0, utils_1.ensureArray)(props.modelValue).length === 0 && !states.inputValue.get());
+        }
+        const value = (0, utils_1.isArray)(props.modelValue)
+            ? props.modelValue[0]
+            : props.modelValue;
+        return props.filterable || (0, utils_1.isUndefined)(value)
+            ? !states.inputValue.get()
+            : true;
+    });
+    const currentPlaceholder = (0, signals_1.computed)(() => {
+        var _a;
+        const _placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : t('el.select.placeholder');
+        return props.multiple || !hasModelValue.get()
+            ? _placeholder
+            : states.selectedLabel;
+    });
+    // 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'));
+    const setSelected = () => {
+        if (!props.multiple) {
+            const value = (0, utils_1.isArray)(props.modelValue)
+                ? props.modelValue[0]
+                : props.modelValue;
+            const option = getOption(value);
+            states.selectedLabel = option.currentLabel;
+            states.selected = [option];
+            return;
+        }
+        else {
+            states.selectedLabel = '';
+        }
+        const result = [];
+        if (!(0, utils_1.isUndefined)(props.modelValue)) {
+            (0, utils_1.ensureArray)(props.modelValue).forEach((value) => {
+                result.push(getOption(value));
+            });
+        }
+        states.selected = result;
+    };
+    const getOption = (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, props.valueKey) === (0, lodash_1.get)(value, props.valueKey)
+                : cachedOption.value === value;
+            if (isEqualValue) {
+                option = {
+                    value,
+                    currentLabel: 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;
+    };
+    (0, signals_1.watch)(() => props.modelValue, (val, oldVal) => {
+        if (props.multiple) {
+            if (props.filterable && !props.reserveKeyword) {
+                states.inputValue.set('');
+                handleQueryChange('');
+            }
+        }
+        setSelected();
+        if (!(0, lodash_1.isEqual)(val, oldVal) && 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) => {
+        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.entries(), () => {
+        if (!utils_1.isClient)
+            return;
+        // tooltipRef.value?.updatePopper?.()
+        setSelected();
+        if (props.defaultFirstOption &&
+            (props.filterable || props.remote) &&
+            filteredOptionsCount.get()) {
+            checkDefaultFirstOption();
+        }
+    }, {
+        flush: 'post',
+    });
+    (0, signals_1.watch)(() => states.hoveringIndex, (val) => {
+        if ((0, utils_1.isNumber)(val) && val > -1) {
+            hoverOption.set(optionsArray.get()[val] || {});
+        }
+        else {
+            hoverOption.set({});
+        }
+        optionsArray.get().forEach((option) => {
+            option.hover = 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) => {
+        if (states.previousQuery === val || isComposing.get()) {
+            return;
+        }
+        states.previousQuery = val;
+        if (props.filterable && (0, utils_1.isFunction)(props.filterMethod)) {
+            props.filterMethod(val);
+        }
+        else if (props.filterable &&
+            props.remote &&
+            (0, utils_1.isFunction)(props.remoteMethod)) {
+            props.remoteMethod(val);
+        }
+        if (props.defaultFirstOption &&
+            (props.filterable || 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) => n.visible && !n.disabled && !n.states.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 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 = () => {
+        states.collapseItemWidth = collapseItemRef
+            .get()
+            .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.target.value);
+        if (props.remote) {
+            debouncedOnInputChange();
+        }
+        else {
+            return onInputChange();
+        }
+    };
+    const debouncedOnInputChange = (0, lodash_1.debounce)(() => {
+        onInputChange();
+    }, debounce.get());
+    const emitChange = (val) => {
+        if (!(0, lodash_1.isEqual)(props.modelValue, val)) {
+            emit(constants_1.CHANGE_EVENT, val);
+        }
+    };
+    const getLastNotDisabledIndex = (value) => (0, lodash_1.findLastIndex)(value, (it) => {
+        const option = states.cachedOptions.get(it);
+        return option && !option.disabled && !option.states.groupDisabled;
+    });
+    const deletePrevTag = (e) => {
+        if (!props.multiple)
+            return;
+        if (e.code === constants_1.EVENT_CODE.delete)
+            return;
+        if (e.target.value.length <= 0) {
+            const value = (0, utils_1.ensureArray)(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)(props.modelValue).slice();
+            value.splice(index, 1);
+            emit(constants_1.UPDATE_MODEL_EVENT, value);
+            emitChange(value);
+            emit('remove-tag', tag.value);
+        }
+        event.stopPropagation();
+        focus();
+    };
+    const deleteSelected = (event) => {
+        event.stopPropagation();
+        const value = props.multiple ? [] : valueOnClear.get();
+        if (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;
+        if (props.multiple) {
+            const value = (0, utils_1.ensureArray)((_a = props.modelValue) !== null && _a !== void 0 ? _a : []).slice();
+            const optionIndex = getValueIndex(value, option);
+            if (optionIndex > -1) {
+                value.splice(optionIndex, 1);
+            }
+            else if (props.multipleLimit <= 0 ||
+                value.length < props.multipleLimit) {
+                value.push(option.value);
+            }
+            emit(constants_1.UPDATE_MODEL_EVENT, value);
+            emitChange(value);
+            if (option.created) {
+                handleQueryChange('');
+            }
+            if (props.filterable && !props.reserveKeyword) {
+                states.inputValue.set('');
+            }
+        }
+        else {
+            emit(constants_1.UPDATE_MODEL_EVENT, option.value);
+            emitChange(option.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, props.valueKey), getValueKey(option));
+        });
+    };
+    const scrollToOption = (option) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        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].$el;
+            }
+        }
+        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);
+            }
+        }
+        (_g = scrollbarRef.get()) === null || _g === void 0 ? void 0 : _g.handleScroll();
+    };
+    const onOptionCreate = (vm) => {
+        states.options.set(vm.value, vm);
+        states.cachedOptions.set(vm.value, vm);
+    };
+    const onOptionDestroy = (key, vm) => {
+        if (states.options.get(key) === vm) {
+            states.options.delete(key);
+        }
+    };
+    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)(() => 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, 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 (!props.multiple) {
+            return [];
+        }
+        return props.collapseTags
+            ? states.selected.slice(0, props.maxCollapseTags)
+            : states.selected;
+    });
+    const collapseTagList = (0, signals_1.computed)(() => {
+        if (!props.multiple) {
+            return [];
+        }
+        return props.collapseTags
+            ? states.selected.slice(props.maxCollapseTags)
+            : [];
+    });
+    const navigateOptions = (direction) => {
+        if (!expanded.get()) {
+            expanded.set(true);
+            return;
+        }
+        if (states.options.size === 0 ||
+            filteredOptionsCount.get() === 0 ||
+            isComposing.get())
+            return;
+        if (!optionsAllDisabled.get()) {
+            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.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() && 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;