@type-dom/ui 0.1.1 → 0.1.2

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

@@ -1,5 +1,4 @@
 "use strict";
-// @ts-nocheck
 // import {
 //   computed,
 //   nextTick,
@@ -26,13 +25,13 @@ const useSelect = (props, emit) => {
     const nsInput = (0, hooks_1.useNamespace)('input');
     const states = {
         inputValue: (0, signals_1.signal)(''),
-        options: new Map(),
+        options: (0, signals_1.signal)(new Map()),
         cachedOptions: new Map(),
         optionValues: [], // sorted value of options
         selected: [],
         selectionWidth: 0,
         collapseItemWidth: 0,
-        selectedLabel: '',
+        selectedLabel: (0, signals_1.signal)(''),
         hoveringIndex: -1,
         previousQuery: null,
         inputHovering: false,
@@ -56,18 +55,18 @@ const useSelect = (props, emit) => {
     });
     const { wrapperRef, isFocused, handleBlur } = (0, hooks_1.useFocusController)(inputRef, {
         beforeFocus() {
-            return selectDisabled.get();
+            return (0, signals_1.unref)(selectDisabled);
         },
         afterFocus() {
-            if (props.automaticDropdown && !expanded.get()) {
+            if ((0, signals_1.unref)(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)));
+            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);
@@ -82,50 +81,52 @@ const useSelect = (props, emit) => {
         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 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)(() => {
-        return (0, utils_1.isArray)(props.modelValue)
-            ? props.modelValue.length > 0
-            : !isEmptyValue(props.modelValue);
+        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 (props.clearable &&
+        return ((0, signals_1.unref)(props.clearable) &&
             !selectDisabled.get() &&
             states.inputHovering &&
             hasModelValue.get());
     });
-    const iconComponent = (0, signals_1.computed)(() => props.remote && props.filterable && !props.remoteShowSuffix
+    const iconComponent = (0, signals_1.computed)(() => (0, signals_1.unref)(props.remote) && (0, signals_1.unref)(props.filterable) && !(0, signals_1.unref)(props.remoteShowSuffix)
         ? ''
-        : props.suffixIcon);
+        : (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)(() => (props.remote ? 300 : 0));
-    const isRemoteSearchEmpty = (0, signals_1.computed)(() => props.remote && !states.inputValue.get() && states.options.size === 0);
+    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 (props.loading) {
-            return props.loadingText || t('el.select.loading');
+        if ((0, signals_1.unref)(props.loading)) {
+            return (0, signals_1.unref)(props.loadingText) || t('el.select.loading');
         }
         else {
-            if (props.filterable &&
+            if ((0, signals_1.unref)(props.filterable) &&
                 states.inputValue.get() &&
-                states.options.size > 0 &&
+                states.options.get().size > 0 &&
                 filteredOptionsCount.get() === 0) {
-                return props.noMatchText || t('el.select.noMatch');
+                return (0, signals_1.unref)(props.noMatchText) || t('el.select.noMatch');
             }
-            if (states.options.size === 0) {
-                return props.noDataText || t('el.select.noData');
+            if (states.options.get().size === 0) {
+                return (0, signals_1.unref)(props.noDataText) || t('el.select.noData');
             }
         }
-        return null;
+        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.values());
+        const list = Array.from(states.options.get().values());
         const newList = [];
         states.optionValues.forEach((item) => {
-            const index = list.findIndex((i) => i.value === 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]);
             }
@@ -134,154 +135,113 @@ const useSelect = (props, emit) => {
     });
     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();
+        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();
         });
-        return (props.filterable &&
-            props.allowCreate &&
+        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 = () => {
-        if (props.filterable && (0, utils_1.isFunction)(props.filterMethod))
+        var _a;
+        if ((0, signals_1.unref)(props.filterable) && (0, utils_1.isFunction)(props.filterMethod))
             return;
-        if (props.filterable && props.remote && (0, utils_1.isFunction)(props.remoteMethod))
+        if ((0, signals_1.unref)(props.filterable) && (0, signals_1.unref)(props.remote) && (0, utils_1.isFunction)((0, signals_1.unref)(props.remoteMethod)))
             return;
-        optionsArray.get().forEach((option) => {
+        (_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)({
-        get() {
-            return expanded.get() && !isRemoteSearchEmpty.get();
-        },
-        set(val) {
-            expanded.set(val);
-        },
+    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 (props.multiple && !(0, utils_1.isUndefined)(props.modelValue)) {
-            return ((0, utils_1.ensureArray)(props.modelValue).length === 0 && !states.inputValue.get());
+        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)(props.modelValue)
-            ? props.modelValue[0]
-            : props.modelValue;
-        return props.filterable || (0, utils_1.isUndefined)(value)
+        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;
-        const _placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : t('el.select.placeholder');
-        return props.multiple || !hasModelValue.get()
+        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
-            : states.selectedLabel;
+            : 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'));
-    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;
+    (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('');
+                }
             }
-        }
-        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) {
+            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('');
-                handleQueryChange('');
+                states.previousQuery = null;
+                states.isBeforeHide = true;
             }
-        }
-        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',
+            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, (val) => {
+    (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] || {});
         }
@@ -289,7 +249,8 @@ const useSelect = (props, emit) => {
             hoverOption.set({});
         }
         optionsArray.get().forEach((option) => {
-            option.hover = hoverOption.get() === option;
+            var _a;
+            (_a = option.hover) === null || _a === void 0 ? void 0 : _a.set(hoverOption.get() === option);
         });
     });
     (0, signals_1.effect)(() => {
@@ -300,20 +261,21 @@ const useSelect = (props, emit) => {
         updateOptions();
     });
     const handleQueryChange = (val) => {
+        var _a, _b;
         if (states.previousQuery === val || isComposing.get()) {
             return;
         }
         states.previousQuery = val;
-        if (props.filterable && (0, utils_1.isFunction)(props.filterMethod)) {
-            props.filterMethod(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 (props.filterable &&
-            props.remote &&
-            (0, utils_1.isFunction)(props.remoteMethod)) {
-            props.remoteMethod(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 (props.defaultFirstOption &&
-            (props.filterable || props.remote) &&
+        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);
         }
@@ -334,12 +296,66 @@ const useSelect = (props, emit) => {
     const checkDefaultFirstOption = () => {
         const optionsInDropdown = optionsArray
             .get()
-            .filter((n) => n.visible && !n.disabled && !n.states.groupDisabled);
+            .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()
@@ -349,9 +365,8 @@ const useSelect = (props, emit) => {
         states.selectionWidth = selectionRef.get().getBoundingClientRect().width;
     };
     const resetCollapseItemWidth = () => {
-        states.collapseItemWidth = collapseItemRef
-            .get()
-            .getBoundingClientRect().width;
+        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;
@@ -368,8 +383,8 @@ const useSelect = (props, emit) => {
         handleQueryChange(states.inputValue.get());
     };
     const onInput = (event) => {
-        states.inputValue.set(event.target.value);
-        if (props.remote) {
+        states.inputValue.set((event === null || event === void 0 ? void 0 : event.target).value);
+        if ((0, signals_1.unref)(props.remote)) {
             debouncedOnInputChange();
         }
         else {
@@ -380,21 +395,24 @@ const useSelect = (props, emit) => {
         onInputChange();
     }, debounce.get());
     const emitChange = (val) => {
-        if (!(0, lodash_1.isEqual)(props.modelValue, 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.disabled && !option.states.groupDisabled;
+        return option && !option.props.disabled && !((_a = option.states) === null || _a === void 0 ? void 0 : _a.groupDisabled);
     });
     const deletePrevTag = (e) => {
-        if (!props.multiple)
+        var _a;
+        if (!(0, signals_1.unref)(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();
+        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;
@@ -408,19 +426,19 @@ const useSelect = (props, emit) => {
     const deleteTag = (event, tag) => {
         const index = states.selected.indexOf(tag);
         if (index > -1 && !selectDisabled.get()) {
-            const value = (0, utils_1.ensureArray)(props.modelValue).slice();
+            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.stopPropagation();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
         focus();
     };
     const deleteSelected = (event) => {
-        event.stopPropagation();
-        const value = props.multiple ? [] : valueOnClear.get();
-        if (props.multiple) {
+        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);
@@ -435,28 +453,31 @@ const useSelect = (props, emit) => {
     };
     const handleOptionSelect = (option) => {
         var _a;
-        if (props.multiple) {
-            const value = (0, utils_1.ensureArray)((_a = props.modelValue) !== null && _a !== void 0 ? _a : []).slice();
+        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 (props.multipleLimit <= 0 ||
-                value.length < props.multipleLimit) {
-                value.push(option.value);
+            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 (props.filterable && !props.reserveKeyword) {
+            if ((0, signals_1.unref)(props.filterable) && !(0, signals_1.unref)(props.reserveKeyword)) {
                 states.inputValue.set('');
             }
         }
         else {
-            emit(constants_1.UPDATE_MODEL_EVENT, option.value);
-            emitChange(option.value);
+            // 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();
@@ -472,11 +493,11 @@ const useSelect = (props, emit) => {
         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));
+            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;
+        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) {
@@ -484,7 +505,7 @@ const useSelect = (props, emit) => {
                 .get()
                 .filter((item) => item.value === targetOption.value);
             if (options.length > 0) {
-                target = options[0].$el;
+                target = options[0].dom;
             }
         }
         if (tooltipRef.get() && target) {
@@ -494,15 +515,19 @@ const useSelect = (props, emit) => {
                 (0, utils_1.scrollIntoView)(menu, target);
             }
         }
-        (_g = scrollbarRef.get()) === null || _g === void 0 ? void 0 : _g.handleScroll();
+        (_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) => {
-        states.options.set(vm.value, vm);
-        states.cachedOptions.set(vm.value, 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(key) === vm) {
-            states.options.delete(key);
+        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)(() => {
@@ -511,7 +536,11 @@ const useSelect = (props, emit) => {
     });
     const handleMenuEnter = () => {
         states.isBeforeHide = false;
-        (0, framework_1.nextTick)(() => scrollToOption(states.selected));
+        (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;
@@ -571,26 +600,26 @@ const useSelect = (props, emit) => {
         }
     };
     const getValueKey = (item) => {
-        return (0, utils_1.isObject)(item.value) ? (0, lodash_1.get)(item.value, props.valueKey) : item.value;
+        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 (!props.multiple) {
+        if (!(0, signals_1.unref)(props.multiple)) {
             return [];
         }
-        return props.collapseTags
-            ? states.selected.slice(0, props.maxCollapseTags)
+        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 (!props.multiple) {
+        if (!(0, signals_1.unref)(props.multiple)) {
             return [];
         }
-        return props.collapseTags
-            ? states.selected.slice(props.maxCollapseTags)
+        return (0, signals_1.unref)(props.collapseTags)
+            ? states.selected.slice((0, signals_1.unref)(props.maxCollapseTags))
             : [];
     });
     const navigateOptions = (direction) => {
@@ -598,21 +627,21 @@ const useSelect = (props, emit) => {
             expanded.set(true);
             return;
         }
-        if (states.options.size === 0 ||
+        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.size) {
+                if (states.hoveringIndex === states.options.get().size) {
                     states.hoveringIndex = 0;
                 }
             }
             else if (direction === 'prev') {
                 states.hoveringIndex--;
                 if (states.hoveringIndex < 0) {
-                    states.hoveringIndex = states.options.size - 1;
+                    states.hoveringIndex = states.options.get().size - 1;
                 }
             }
             const option = optionsArray.get()[states.hoveringIndex];
@@ -631,7 +660,7 @@ const useSelect = (props, emit) => {
     // computed style
     const tagStyle = (0, signals_1.computed)(() => {
         const gapWidth = getGapWidth();
-        const maxWidth = collapseItemRef.get() && props.maxCollapseTags === 1
+        const maxWidth = collapseItemRef.get() && (0, signals_1.unref)(props.maxCollapseTags) === 1
             ? states.selectionWidth - states.collapseItemWidth - gapWidth
             : states.selectionWidth;
         return { maxWidth: `${maxWidth}px` };