@type-dom/ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,999 @@
+import { clamp, findLastIndex, get, isEqual, debounce as lodashDebounce } from 'lodash-es';
+import { signal, computed, effect } from '@type-dom/signals';
+import { useResizeObserver } from '@type-dom/use';
+import { nextTick, onMounted, watch, unref, } from '@type-dom/framework';
+import { isClient, isIOS, debugWarn, ensureArray, isArray, isFunction, isNumber, isObject, isPlainObject, isUndefined, isEmpty, scrollIntoView, } from '@type-dom/utils';
+import { CHANGE_EVENT, EVENT_CODE, UPDATE_MODEL_EVENT, } from '../../../constants';
+import { useComposition, useEmptyValues, useFocusController, useId, useLocale, useNamespace, } from '../../../hooks';
+import { ValidateComponentsMap } from '../../../utils/icon';
+import { useFormItem, useFormItemInputId, useFormSize } from '../td-form';
+export const useSelect = (props, emit) => {
+    const { t } = useLocale();
+    const contentId = useId();
+    const nsSelect = useNamespace('select');
+    const nsInput = useNamespace('input');
+    const states = {
+        inputValue: signal(''),
+        options: signal(new Map()),
+        cachedOptions: new Map(),
+        optionValues: signal([]), // sorted value of options
+        selected: signal([]),
+        // Signals (not plain numbers) so external callers — notably the collapse-tags
+        // tests — can drive them via `.set()` and have `collapseTagStyle` recompute.
+        selectionWidth: signal(0),
+        collapseItemWidth: signal(0),
+        // `selectedLabel` is assigned a computed after `states` is declared (see below).
+        selectedLabel: signal(''),
+        hoveringIndex: -1,
+        previousQuery: null,
+        inputHovering: signal(false),
+        menuVisibleOnFocus: false,
+        isBeforeHide: false,
+    };
+    // `selectedLabel` is a computed derived from the selected option(s), so it
+    // stays in sync when an option's label changes or the selection changes.
+    const selectedLabel = computed(() => {
+        const selected = states.selected.get();
+        if (!selected.length) {
+            return unref(props.multiple) ? [] : '';
+        }
+        if (unref(props.multiple)) {
+            return selected.map((o) => unref(o.currentLabel));
+        }
+        return unref(selected[0].currentLabel) ?? '';
+    });
+    states.selectedLabel = selectedLabel;
+    // template refs
+    const selectRef = signal(undefined);
+    const selectionRef = signal(undefined);
+    const tooltipRef = signal(undefined);
+    const tagTooltipRef = signal(undefined);
+    const inputRef = signal(undefined);
+    const prefixRef = signal(undefined);
+    const suffixRef = signal(undefined);
+    const menuRef = signal(undefined);
+    const tagMenuRef = signal(undefined);
+    const collapseItemRef = signal(undefined);
+    const scrollbarRef = signal(undefined);
+    const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, } = useComposition({
+        afterComposition: (e) => onInput(e),
+    });
+    const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
+        beforeFocus() {
+            return selectDisabled.get();
+        },
+        afterFocus(event) {
+            if (props.automaticDropdown?.get() && !expanded.get()) {
+                expanded.set(true);
+                states.menuVisibleOnFocus = true;
+            }
+        },
+        beforeBlur(event) {
+            return (tooltipRef?.get()?.isFocusInsideContent?.(event) ||
+                tagTooltipRef?.get()?.isFocusInsideContent?.(event));
+        },
+        afterBlur(event) {
+            expanded.set(false);
+            states.menuVisibleOnFocus = false;
+            // Mirrors element-plus: trigger form-item validation on blur.
+            if (unref(props.validateEvent)) {
+                formItem?.validate('blur').catch((err) => debugWarn(err));
+            }
+        },
+    });
+    // the controller of the expanded popup
+    const expanded = signal(false);
+    const debouncing = signal(false);
+    const hoverOption = signal();
+    const { form, formItem } = useFormItem();
+    const { inputId } = useFormItemInputId(props, {
+        formItemContext: formItem,
+    });
+    const { valueOnClear, isEmptyValue } = useEmptyValues(props);
+    const selectDisabled = computed(() => unref(props.disabled?.get()) || unref(form?.disabled));
+    const hasModelValue = computed(() => {
+        // console.warn('hasModelValue computed . ');
+        const modelValue = unref(props.modelValue);
+        return isArray(modelValue)
+            ? modelValue.length > 0
+            : !isEmptyValue(modelValue);
+    });
+    const needStatusIcon = computed(() => form?.statusIcon ?? false);
+    const showClose = computed(() => {
+        return (props.clearable?.get() &&
+            !selectDisabled.get() &&
+            (states.inputHovering.get() || isFocused.get()) &&
+            hasModelValue.get());
+    });
+    const iconComponent = computed(() => unref(props.remote) && unref(props.filterable) && !unref(props.remoteShowSuffix)
+        ? ''
+        : unref(props.suffixIcon));
+    const iconReverse = computed(() => nsSelect.is('reverse', iconComponent.get() && expanded.get()));
+    const validateState = computed(() => formItem?.validateState.get() || '');
+    const validateIcon = computed(() => ValidateComponentsMap[validateState.get()]);
+    const debounce = computed(() => unref(props.remote) ? (unref(props.debounce) ?? 300) : 0);
+    const isRemoteSearchEmpty = computed(() => unref(props.remote) &&
+        // Mirrors element-plus: a remote search counts as "empty" only when the user
+        // has NOT typed a query yet and there are no options, so the dropdown stays
+        // hidden until results arrive.
+        !states.inputValue.get() &&
+        states.options.get().size === 0);
+    const emptyText = computed(() => {
+        if (unref(props.loading)) {
+            return unref(props.loadingText) || t('el.select.loading');
+        }
+        else {
+            if (unref(props.filterable) &&
+                states.inputValue.get() &&
+                states.options.get().size > 0 &&
+                filteredOptionsCount.get() === 0) {
+                return unref(props.noMatchText) || t('el.select.noMatch');
+            }
+            if (states.options.get().size === 0) {
+                return unref(props.noDataText) || t('el.select.noData');
+            }
+        }
+        return undefined;
+    });
+    const filteredOptionsCount = computed(() => {
+        const arr = optionsArray.get();
+        const visibleOptions = arr.filter((option) => {
+            const visible = option.visible?.get() !== false;
+            return visible;
+        });
+        return visibleOptions.length;
+    });
+    const optionsArray = computed(() => {
+        // Exclude options hidden by v-if (e.g. the always-present "create new option"
+        // placeholder whose value is the live inputValue signal). This keeps the
+        // phantom option out of selection/navigation while still including it once
+        // its v-if flips to true (the computed tracks props.vIf). Options without a
+        // v-if prop at all are always included.
+        const list = Array.from(states.options.get().values()).filter((option) => {
+            const vIf = option.props?.vIf;
+            return vIf === undefined || unref(vIf);
+        });
+        const newList = [];
+        states.optionValues.get().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 showNewOption = computed(() => {
+        // IMPORTANT: read `states.options` (a plain signal) directly here, NOT
+        // `optionsArray`. `optionsArray` filters each option by `unref(option.props.vIf)`,
+        // and the `allowCreate` option's `vIf` is THIS `showNewOption` computed — so reading
+        // `optionsArray` from inside `showNewOption` would re-enter `showNewOption`
+        // (infinite synchronous recursion) the moment the allowCreate option is registered
+        // into `states.options`. Reading the signal directly breaks the cycle; we simply
+        // skip created options manually (mirroring element-plus's `options` flattening, which
+        // excludes the synthetic "create new" option).
+        const hasExistingOption = Array.from(states.options.get().values()).some((option) => {
+            return !option.props.isCreated && option.currentLabel?.get() === states.inputValue.get();
+        });
+        return (unref(props.filterable) &&
+            unref(props.allowCreate) &&
+            states.inputValue.get() !== '' &&
+            !hasExistingOption);
+    });
+    const updateOptions = () => {
+        if (unref(props.filterable) && isFunction(props.filterMethod))
+            return;
+        if (unref(props.filterable) &&
+            unref(props.remote) &&
+            isFunction(unref(props.remoteMethod)))
+            return;
+        optionsArray.get()?.forEach((option) => {
+            option.updateOption?.(states.inputValue.get());
+        });
+    };
+    const selectSize = useFormSize(props.size);
+    const collapseTagSize = computed(() => ['small'].includes(selectSize.get()) ? 'small' : 'default');
+    const dropdownMenuVisible = computed(() => {
+        const visible = expanded.get() &&
+            (unref(props.loading) ||
+                !isRemoteSearchEmpty.get() ||
+                (unref(props.remote) && !!(unref(props.slots)?.empty))) &&
+            (!debouncing.get() ||
+                !isEmpty(states.previousQuery) ||
+                states.options.get().size > 0);
+        return visible;
+    }, (val) => {
+        expanded.set(val);
+    });
+    const shouldShowPlaceholder = computed(() => {
+        if (unref(props.multiple) && !isUndefined(unref(props.modelValue))) {
+            return (ensureArray(unref(props.modelValue)).length === 0 && !states.inputValue.get());
+        }
+        const value = isArray(unref(props.modelValue))
+            ? unref(props.modelValue)[0]
+            : unref(props.modelValue);
+        return unref(props.filterable) || isUndefined(value)
+            ? !states.inputValue.get()
+            : true;
+    });
+    const displayInputWrapper = computed(() => {
+        // Mirror element-plus: input-wrapper is hidden for non-filterable selects,
+        // when disabled, or (in multiple mode) when empty and not focused.
+        const hidden = !unref(props.filterable) ||
+            selectDisabled.get() ||
+            (unref(props.multiple) &&
+                !states.inputValue.get() &&
+                !isFocused.get());
+        return !hidden;
+    });
+    const currentPlaceholder = computed(() => {
+        // console.warn('currentPlaceholder . ');
+        const _placeholder = unref(props.placeholder) ?? t('el.select.placeholder');
+        // console.warn('_placeholder is ', _placeholder);
+        const label = states.selectedLabel.get();
+        // console.warn('label is ', label);
+        return 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 = computed(() => (isIOS ? null : 'mouseenter'));
+    onMounted(() => {
+        watch(() => unref(props.modelValue), (val, oldVal) => {
+            if (unref(props.multiple)) {
+                if (unref(props.filterable) && !unref(props.reserveKeyword)) {
+                    states.inputValue.set('');
+                    handleQueryChange('');
+                }
+            }
+            setSelected();
+            if (!isEqual(val, oldVal) && unref(props.validateEvent)) {
+                formItem?.validate('change').catch((err) => debugWarn(err));
+            }
+        }, {
+            flush: 'post',
+            deep: true,
+        });
+        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;
+            }
+        });
+        watch(
+        // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
+        // https://github.com/vuejs/vue-next/issues/2116
+        () => states.options.get(), () => {
+            // console.error('watch states.options.get().entries(), val is ', val);
+            if (!isClient)
+                return;
+            // tooltipRef.value?.updatePopper?.()
+            setSelected();
+            if (unref(props.defaultFirstOption) &&
+                (unref(props.filterable) || unref(props.remote)) &&
+                filteredOptionsCount.get()) {
+                checkDefaultFirstOption();
+            }
+        }, {
+            flush: 'post',
+        });
+    });
+    watch(() => [states.hoveringIndex, optionsArray.get()], ([val]) => {
+        // console.warn('watch [states.hoveringIndex, optionsArray.get()] , [val] is ', val);
+        if (isNumber(val) && val > -1) {
+            hoverOption.set(optionsArray.get()[val] || {});
+        }
+        else {
+            hoverOption.set({});
+        }
+        optionsArray.get().forEach((option) => {
+            option.hover?.set(hoverOption.get() === option);
+        });
+    });
+    // `states.hoveringIndex` is a plain number (read directly by tests), so the
+    // watch above only re-fires when `optionsArray` changes. This helper applies
+    // the hover highlight synchronously whenever `hoveringIndex` is set, keeping
+    // it aligned with element-plus's reactive `hoveringIndex`.
+    const setHoverOption = (index) => {
+        states.hoveringIndex = index;
+        if (isNumber(index) && index > -1) {
+            hoverOption.set(optionsArray.get()[index] || {});
+        }
+        else {
+            hoverOption.set({});
+        }
+        optionsArray.get().forEach((option) => {
+            option.hover?.set(hoverOption.get() === option);
+        });
+    };
+    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 (unref(props.filterable) && isFunction(unref(props.filterMethod))) {
+            unref(props.filterMethod)?.(val);
+        }
+        else if (unref(props.filterable) &&
+            unref(props.remote) &&
+            isFunction(unref(props.remoteMethod))) {
+            unref(props.remoteMethod)?.(val);
+        }
+        // Ensure options are filtered against the new query *synchronously* before we
+        // compute the default hovered option. In @type-dom the `updateOptions` effect is
+        // flushed asynchronously, so without this `checkDefaultFirstOption` would sometimes
+        // run against the pre-filter option list and pick the wrong index.
+        updateOptions();
+        if (unref(props.defaultFirstOption) &&
+            (unref(props.filterable) || unref(props.remote)) &&
+            filteredOptionsCount.get()) {
+            nextTick(checkDefaultFirstOption);
+        }
+        else if (states.selected.get().length > 0) {
+            // Only re-derive the hover index from the current selection when something is
+            // actually selected. On a plain (non-filterable) expand with no selection,
+            // `watch(expanded)` calls `handleQueryChange('')` and this branch would schedule
+            // `updateHoveringIndex` via nextTick, which then fires *after* synchronous
+            // keyboard navigation (`navigateOptions`) and clobbers the hover index it set.
+            // Skipping it here leaves the navigated hover index intact (mirrors Element Plus,
+            // where `previousQuery` defaults to '' so the empty expand call early-returns).
+            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?.get() !== false && !n.props.disabled && !unref(n.states?.groupDisabled));
+        const userCreatedOption = optionsInDropdown.find((n) => n.props.isCreated); // todo n.created
+        const firstOriginOption = optionsInDropdown[0];
+        const valueList = optionsArray.get().map((item) => item.value);
+        setHoverOption(getValueIndex(valueList, userCreatedOption || firstOriginOption));
+    };
+    const setSelected = () => {
+        if (!unref(props.multiple)) {
+            const modelValue = unref(props.modelValue);
+            const value = isArray(modelValue)
+                ? modelValue[0]
+                : modelValue;
+            // An empty value means nothing is selected. `getOption('')` returns a truthy
+            // placeholder object, so we must guard on the *value* (not on the option) to
+            // avoid keeping a bogus selection — otherwise `states.selected` reports length 1
+            // and the open-time `updateHoveringIndex` resets the hover index that keyboard
+            // navigation just set back to -1.
+            if (value === '' || isUndefined(value) || value === null) {
+                states.selected.set([]);
+            }
+            else {
+                states.selected.set([getOption(value)]);
+            }
+            return;
+        }
+        const result = [];
+        if (!isUndefined(unref(props.modelValue))) {
+            ensureArray(unref(props.modelValue)).forEach((value) => {
+                result.push(getOption(value));
+            });
+        }
+        states.selected.set(result);
+    };
+    const getOption = (value) => {
+        let option = undefined;
+        const isObjectValue = isPlainObject(value);
+        const valueKey = unref(props.valueKey);
+        // Iterate from the end so the last registered option wins (matches element-plus).
+        const cachedOptionsArray = Array.from(states.cachedOptions.values());
+        for (let i = cachedOptionsArray.length - 1; i >= 0; i--) {
+            const cachedOption = cachedOptionsArray[i];
+            if (!cachedOption)
+                continue;
+            const isEqualValue = isObjectValue
+                ? get(cachedOption.value, valueKey) === get(value, valueKey)
+                : cachedOption.value === value;
+            if (isEqualValue) {
+                option = {
+                    // Mirrors element-plus: index of the option among the rendered,
+                    // non-created options (`optionsArray.filter(o => !o.created).indexOf(...)`).
+                    index: optionsArray
+                        .get()
+                        .filter((opt) => !opt.props.isCreated)
+                        .indexOf(cachedOption),
+                    // expose `value` as a signal to mirror element-plus's option proxy
+                    // (tests read `selected[i].value.get()`), while the component uses `unref`.
+                    value: signal(cachedOption.value),
+                    currentLabel: cachedOption.currentLabel ?? computed(() => cachedOption.props?.label ?? value),
+                    get isDisabled() {
+                        return cachedOption.isDisabled;
+                    },
+                };
+                break;
+            }
+        }
+        if (option)
+            return option;
+        const existingSelected = states.selected.get().find((item) => isObjectValue
+            ? get(unref(item.value), valueKey) === get(value, valueKey)
+            : unref(item.value) === value);
+        const label = isObjectValue
+            ? value.label
+            : existingSelected
+                ? unref(existingSelected.currentLabel)
+                : (value ?? '');
+        const newOption = {
+            // element-plus reports -1 for values that are not currently rendered.
+            index: -1,
+            // keep `value` a signal for parity with the found branch (selected items expose
+            // `value.get()`); the component consumers use `unref(item.value)` which is fine.
+            value: signal(value),
+            currentLabel: computed(() => label),
+        };
+        return newOption;
+    };
+    const updateHoveringIndex = () => {
+        const selected = states.selected.get();
+        const length = selected.length;
+        if (length > 0) {
+            const lastOption = selected[length - 1];
+            setHoverOption(optionsArray
+                .get()
+                .findIndex((item) => getValueKey(lastOption) === getValueKey(item)));
+        }
+        else {
+            setHoverOption(-1);
+        }
+    };
+    const resetSelectionWidth = () => {
+        states.selectionWidth.set(Number.parseFloat(window.getComputedStyle(selectionRef.get()).width));
+    };
+    const resetCollapseItemWidth = () => {
+        states.collapseItemWidth.set(collapseItemRef?.get()?.getBoundingClientRect().width);
+    };
+    const updateTooltip = () => {
+        tooltipRef.get()?.updatePopper?.();
+    };
+    const updateTagTooltip = () => {
+        tagTooltipRef.get()?.updatePopper?.();
+    };
+    const onInputChange = () => {
+        if (states.inputValue.get().length > 0 && !expanded.get()) {
+            expanded.set(true);
+        }
+        handleQueryChange(states.inputValue.get());
+    };
+    const onInput = (event) => {
+        // Set `debouncing` *before* `inputValue` so that, under @type-dom's eager
+        // signals (which flush the `visible-change` watcher synchronously on every
+        // dependency change), the dropdown does not momentarily flip visible when
+        // only `inputValue` has changed. This mirrors element-plus's Vue batched
+        // reactivity, where both assignments land in the same flush tick.
+        if (unref(props.remote)) {
+            debouncing.set(true);
+        }
+        states.inputValue.set((event?.target).value);
+        if (unref(props.remote)) {
+            debouncedOnInputChange();
+        }
+        else {
+            return onInputChange();
+        }
+    };
+    const debouncedOnInputChange = lodashDebounce(() => {
+        onInputChange();
+        debouncing.set(false);
+    }, debounce.get());
+    // NOTE: in @type-dom the `update:modelValue` emit writes back to the vModel
+    // signal *synchronously* (unlike Vue where it is async). Because of that, by
+    // the time emitChange runs the modelValue is already the new value, so we must
+    // compare against the value captured BEFORE the update. Callers pass `oldVal`.
+    const emitChange = (val, oldVal) => {
+        const base = oldVal !== undefined ? oldVal : unref(props.modelValue);
+        if (!isEqual(base, val)) {
+            emit(CHANGE_EVENT, val);
+        }
+    };
+    const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => {
+        const option = states.cachedOptions.get(it);
+        return !option?.props.disabled && !option?.states?.groupDisabled;
+    });
+    const deletePrevTag = (e) => {
+        if (!unref(props.multiple))
+            return;
+        if (e.code === EVENT_CODE.delete)
+            return;
+        if (e.target?.value.length <= 0) {
+            const value = ensureArray(unref(props.modelValue)).slice();
+            const lastNotDisabledIndex = getLastNotDisabledIndex(value);
+            if (lastNotDisabledIndex < 0)
+                return;
+            const removeTagValue = value[lastNotDisabledIndex];
+            value.splice(lastNotDisabledIndex, 1);
+            const oldValue = unref(props.modelValue);
+            emit(UPDATE_MODEL_EVENT, value);
+            emitChange(value, oldValue);
+            emit('remove-tag', removeTagValue);
+        }
+    };
+    const deleteTag = (event, tag) => {
+        const index = states.selected.get().indexOf(tag);
+        if (index > -1 && !selectDisabled.get()) {
+            const value = ensureArray(unref(props.modelValue)).slice();
+            value.splice(index, 1);
+            const oldValue = unref(props.modelValue);
+            emit(UPDATE_MODEL_EVENT, value);
+            emitChange(value, oldValue);
+            // `selected[i].value` is a signal (see `getOption`), so unwrap it —
+            // element-plus emits the raw value here.
+            emit('remove-tag', unref(tag.value));
+        }
+        event?.stopPropagation();
+        focus();
+    };
+    const deleteSelected = (event) => {
+        event?.stopPropagation();
+        const value = unref(props.multiple) ? [] : valueOnClear.get();
+        if (unref(props.multiple)) {
+            for (const item of states.selected.get()) {
+                if (unref(item.isDisabled))
+                    value.push(unref(item.value));
+            }
+        }
+        const oldValue = unref(props.modelValue);
+        emit(UPDATE_MODEL_EVENT, value);
+        emitChange(value, oldValue);
+        setHoverOption(-1);
+        expanded.set(false);
+        emit('clear');
+        focus();
+    };
+    const handleOptionSelect = (option) => {
+        let emittedValue;
+        if (unref(props.multiple)) {
+            const oldValue = unref(props.modelValue);
+            const value = ensureArray(oldValue ?? []).slice();
+            const optionIndex = getValueIndex(value, option);
+            if (optionIndex > -1) {
+                value.splice(optionIndex, 1);
+            }
+            else if (unref(props.multipleLimit) <= 0 ||
+                unref(value.length) < unref(props.multipleLimit)) {
+                value.push(unref(option.props.value));
+            }
+            emittedValue = value;
+            emit(UPDATE_MODEL_EVENT, value);
+            emitChange(value, oldValue);
+            if (option.props.isCreated) { // TODO  option.created
+                handleQueryChange('');
+            }
+            if (unref(props.filterable) &&
+                (option.props.isCreated || !unref(props.reserveKeyword))) {
+                states.inputValue.set('');
+            }
+        }
+        else {
+            // states.selectedLabel?.set(option.props.label ?? ''); // add by me todo
+            // option.currentLabel?.set(option.props.label);
+            const oldValue = unref(props.modelValue);
+            const optionValue = unref(option.props.value);
+            emittedValue = optionValue;
+            if (!isEqual(oldValue, optionValue)) {
+                emit(UPDATE_MODEL_EVENT, optionValue);
+            }
+            emitChange(optionValue, oldValue);
+            states.selectedLabel.set(unref(option.currentLabel));
+            expanded.set(false);
+        }
+        // Keep `states.selected` in sync with the click immediately, regardless of whether
+        // a v-model is bound to the parent. The `modelValue` watch also calls setSelected(),
+        // but when no v-model is bound (modelValue stays undefined) that would otherwise
+        // leave `states.selected` empty after selection.
+        states.selected.set(unref(props.multiple)
+            ? ensureArray(emittedValue).map((v) => getOption(v))
+            : [getOption(emittedValue)]);
+        focus();
+        if (expanded.get())
+            return;
+        nextTick(() => {
+            scrollToOption(option);
+        });
+    };
+    const getValueIndex = (arr = [], option) => {
+        if (isUndefined(option))
+            return -1;
+        if (!isObject(option.value))
+            return arr.indexOf(option.value);
+        return arr.findIndex((item) => {
+            return isEqual(get(item, unref(props.valueKey)), getValueKey(option));
+        });
+    };
+    const scrollToOption = (option) => {
+        // Scroll to the most recently selected option (last in the selection) when an
+        // array is passed (e.g. on menu open), matching element-plus's behaviour.
+        const targetOption = isArray(option) ? option[option.length - 1] : option;
+        let target = null;
+        const targetValue = unref(targetOption?.value);
+        if (targetValue !== undefined && targetValue !== null) {
+            const options = optionsArray
+                .get()
+                .filter((item) => unref(item.value) === targetValue ||
+                item.props?.value === targetValue);
+            if (options.length > 0) {
+                target = options[0].dom;
+            }
+        }
+        if (tooltipRef.get() && target) {
+            const menu = tooltipRef
+                .get()
+                ?.popperRef?.get()
+                ?.contentRef?.get()
+                ?.querySelector?.(`.${nsSelect.be('dropdown', 'wrap')}`);
+            if (menu) {
+                scrollIntoView(menu, target);
+            }
+        }
+        scrollbarRef?.get()?.handleScroll?.();
+    };
+    const onOptionCreate = (vm) => {
+        const value = unref(vm.props.value);
+        // 去重保护：避免下拉因渲染选项触发 onOptionCreate -> set states -> 再次渲染而选项无限循环
+        if (states.cachedOptions.get(value) === vm)
+            return;
+        // Assign a fresh Map instance so the signal actually notifies subscribers
+        // (mutating the existing Map in place and re-setting the same reference would
+        // be a no-op under Object.is equality and `optionsArray`/`filteredOptionsCount`
+        // would never recompute on dynamic option changes).
+        const newOptions = new Map(states.options.get());
+        newOptions.set(value, vm);
+        states.options.set(newOptions);
+        states.cachedOptions.set(value, vm);
+        // option 注册时若命中 modelValue，立即同步反显，避免因 TdOption 经
+        // teleport / TdOptions 延迟挂载导致父组件 onMounted 中 setSelected() 拿不到 cachedOptions
+        const modelValue = unref(props.modelValue);
+        if (isArray(modelValue)) {
+            if (modelValue.some((v) => v === value)) {
+                if (unref(props.multiple)) {
+                    setSelected();
+                }
+                else if (!isUndefined(modelValue[0]) && modelValue[0] === value) {
+                    states.selected.set([getOption(value)]);
+                }
+            }
+        }
+        else if (modelValue === value) {
+            if (unref(props.multiple)) {
+                setSelected();
+            }
+            else {
+                states.selected.set([getOption(value)]);
+            }
+        }
+    };
+    const onOptionDestroy = (key, vm) => {
+        if (states.options.get().get(key) === vm) {
+            const newOptions = new Map(states.options.get());
+            newOptions.delete(key);
+            states.options.set(newOptions); // 触发监听
+        }
+    };
+    const popperRef = computed(() => {
+        return tooltipRef.get()?.popperRef?.get()?.contentRef?.get();
+    });
+    const handleMenuEnter = () => {
+        states.isBeforeHide = false;
+        nextTick(() => {
+            scrollbarRef.get()?.update?.();
+            scrollToOption(states.selected.get());
+        });
+    };
+    const focus = () => {
+        inputRef.get()?.focus();
+    };
+    const blur = () => {
+        if (expanded.get()) {
+            expanded.set(false);
+            nextTick(() => inputRef.get()?.blur());
+            return;
+        }
+        inputRef.get()?.blur();
+    };
+    const handleClearClick = (event) => {
+        deleteSelected(event);
+    };
+    const handleClickOutside = (event) => {
+        expanded.set(false);
+        if (isFocused.get()) {
+            const _event = new FocusEvent('blur', event);
+            nextTick(() => handleBlur(_event));
+        }
+    };
+    const handleEsc = () => {
+        if (states.inputValue.get().length > 0) {
+            states.inputValue.set('');
+        }
+        else {
+            expanded.set(false);
+        }
+    };
+    const toggleMenu = (event) => {
+        if (selectDisabled.get() ||
+            (unref(props.filterable) &&
+                expanded.get() &&
+                event &&
+                !suffixRef.get()?.contains(event.target)))
+            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 (isIOS)
+            states.inputHovering.set(true);
+        if (states.menuVisibleOnFocus) {
+            // controlled by automaticDropdown
+            states.menuVisibleOnFocus = false;
+        }
+        else {
+            expanded.set(!expanded.get());
+            // Mirror element-plus: focusing the input when the dropdown opens keeps the
+            // select interactive (and prevents a mousedown on an option from blurring it).
+            if (expanded.get()) {
+                focus();
+            }
+        }
+    };
+    const selectOption = () => {
+        if (!expanded.get()) {
+            toggleMenu();
+        }
+        else {
+            const options = optionsArray.get();
+            let option = options[states.hoveringIndex];
+            // allowCreate: when no real option is hovered but a synthetic "create new"
+            // option is shown (showNewOption), fall back to selecting that created option.
+            if ((!option || option.isDisabled?.get()) && showNewOption.get()) {
+                const created = options.find((o) => o.props.isCreated);
+                if (created)
+                    option = created;
+            }
+            if (option && !option.isDisabled?.get()) {
+                handleOptionSelect(option);
+            }
+        }
+    };
+    const getValueKey = (item) => {
+        const itemValue = unref(item.value);
+        return isObject(itemValue) ? get(itemValue, unref(props.valueKey)) : itemValue;
+    };
+    const optionsAllDisabled = computed(() => optionsArray
+        .get()
+        .filter((option) => option.visible?.get() !== false)
+        .every((option) => option.isDisabled?.get()));
+    const showTagList = computed(() => {
+        if (!unref(props.multiple)) {
+            return [];
+        }
+        const result = unref(props.collapseTags)
+            ? states.selected.get().slice(0, unref(props.maxCollapseTags))
+            : states.selected.get();
+        return result;
+    });
+    const collapseTagList = computed(() => {
+        if (!unref(props.multiple)) {
+            return [];
+        }
+        return unref(props.collapseTags)
+            ? states.selected.get().slice(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()) {
+            let idx = states.hoveringIndex;
+            if (direction === 'next') {
+                idx++;
+                if (idx === states.options.get().size) {
+                    idx = 0;
+                }
+            }
+            else if (direction === 'prev') {
+                idx--;
+                if (idx < 0) {
+                    idx = states.options.get().size - 1;
+                }
+            }
+            const option = optionsArray.get()[idx];
+            if (option?.isDisabled?.get() || option?.visible?.get() === false) {
+                states.hoveringIndex = idx;
+                navigateOptions(direction);
+                return;
+            }
+            setHoverOption(idx);
+            nextTick(() => scrollToOption(hoverOption.get()));
+        }
+    };
+    const findFocusableIndex = (arr, start, step, len) => {
+        for (let i = start; i >= 0 && i < len; i += step) {
+            const obj = arr[i];
+            if (!obj?.isDisabled?.get() && obj?.visible?.get() !== false) {
+                return i;
+            }
+        }
+        return null;
+    };
+    const focusOption = (targetIndex, mode) => {
+        const len = states.options.get().size;
+        if (len === 0)
+            return;
+        const start = clamp(targetIndex, 0, len - 1);
+        const options = optionsArray.get();
+        const direction = mode === 'up' ? -1 : 1;
+        const newIndex = findFocusableIndex(options, start, direction, len) ??
+            findFocusableIndex(options, start - direction, -direction, len);
+        if (newIndex != null) {
+            setHoverOption(newIndex);
+            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 MINIMUM_INPUT_WIDTH = 100;
+    const tagStyle = computed(() => {
+        const gapWidth = getGapWidth();
+        const inputSlotWidth = unref(props.filterable) && !selectDisabled.get()
+            ? gapWidth + MINIMUM_INPUT_WIDTH
+            : 0;
+        // `collapseItemRef` is a template ref that Vue only populates once the `+N`
+        // tag is actually mounted. TypeDOM's `refDom` populates it at construction time
+        // (even when the tag is vIf'd off), so it can't gate this width. Replicate the
+        // real element-plus condition: a collapse slot exists only when the collapse tag
+        // is rendered, i.e. `selected.length > maxCollapseTags`.
+        const collapseSlotWidth = unref(props.collapseTags) &&
+            unref(props.maxCollapseTags) === 1 &&
+            states.selected.get().length > unref(props.maxCollapseTags)
+            ? states.collapseItemWidth.get() + gapWidth
+            : 0;
+        const reservedWidth = inputSlotWidth + collapseSlotWidth;
+        return { maxWidth: `calc(100% - ${reservedWidth}px)` };
+    });
+    const collapseTagStyle = computed(() => {
+        return { maxWidth: `${states.selectionWidth.get()}px` };
+    });
+    const popupScroll = (data) => {
+        emit('popup-scroll', data);
+    };
+    const popupScrollEnd = (direction) => {
+        emit('end-reached', direction);
+    };
+    useResizeObserver(selectionRef, resetSelectionWidth);
+    useResizeObserver(menuRef, () => {
+        // #21498: only keep the tooltip in sync while the dropdown is visible
+        // (mirrors element-plus, which stops the menuRef observer when collapsed).
+        if (dropdownMenuVisible.get()) {
+            updateTooltip();
+        }
+    });
+    useResizeObserver(wrapperRef, updateTooltip);
+    useResizeObserver(tagMenuRef, updateTagTooltip);
+    useResizeObserver(collapseItemRef, resetCollapseItemWidth);
+    // Mirrors element-plus: `visible-change` is driven by `dropdownMenuVisible`
+    // (which accounts for loading / remote-empty / debouncing), NOT by the raw
+    // `expanded` state — otherwise a remote select with no results would emit
+    // `true` as soon as it is opened.
+    watch(() => dropdownMenuVisible.get(), (newVal) => {
+        emit('visible-change', newVal);
+    });
+    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,
+        displayInputWrapper,
+        currentPlaceholder,
+        mouseEnterEventName,
+        needStatusIcon,
+        showClose,
+        iconComponent,
+        iconReverse,
+        validateState,
+        validateIcon,
+        showNewOption,
+        updateOptions,
+        collapseTagSize,
+        setSelected,
+        setHoverOption,
+        selectDisabled,
+        emptyText,
+        handleCompositionStart,
+        handleCompositionUpdate,
+        handleCompositionEnd,
+        isComposing,
+        onOptionCreate,
+        onOptionDestroy,
+        handleMenuEnter,
+        focus,
+        blur,
+        handleClearClick,
+        handleClickOutside,
+        handleEsc,
+        toggleMenu,
+        selectOption,
+        getValueKey,
+        navigateOptions,
+        focusOption,
+        dropdownMenuVisible,
+        showTagList,
+        collapseTagList,
+        popupScroll,
+        popupScrollEnd,
+        // computed style
+        tagStyle,
+        collapseTagStyle,
+        // DOM ref
+        popperRef,
+        inputRef,
+        tooltipRef,
+        tagTooltipRef,
+        prefixRef,
+        suffixRef,
+        selectRef,
+        wrapperRef,
+        selectionRef,
+        scrollbarRef,
+        menuRef,
+        tagMenuRef,
+        collapseItemRef,
+    };
+};
+//# sourceMappingURL=useSelect.js.map