@type-dom/ui 0.6.0 → 0.9.0

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

@@ -1,37 +1,87 @@
-import { Div, Input, Span, TypeDiv, provide, Fragment, For, } from '@type-dom/framework';
-import { isArray, isFunction } from '@type-dom/utils';
-import { computed, toRefs, unref } from '@type-dom/signals';
+import { Div, Input, Span, Fragment, toRefs, unref, watch, provide, addEmits, addEvents, assignProps, addAttrClass, defaultProps, } from '@type-dom/framework';
+import { computed } from '@type-dom/signals';
+import { ensureArray, isArray, isFunction, isObject } from '@type-dom/utils';
+import { onClickOutside } from '@type-dom/use';
+import { flattedChildren } from '../../../utils/type-dom/vnode';
 import { useCalcInputWidth } from '../../../hooks/use-calc-input-width';
 import { TdTag } from '../../data/td-tag/td-tag.class';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { TdTooltip } from '../../feedback/td-tooltip/td-tooltip.class';
 import { TdScrollbar } from '../../basic/td-scrollbar/td-scrollbar.class';
 import { TdOption } from '../td-option/td-option.class';
-import { TdSelectDropdown } from './td-select-dropdown/td-select-dropdown.class';
+import { TdOptionGroup } from '../td-option-group/td-option-group.class';
 import { TdOptions } from './td-options/td-options.class';
+import { TdSelectDropdown } from './td-select-dropdown/td-select-dropdown.class';
 import { selectEmits, selectProps } from './td-select.const';
 import { selectKey } from './token';
 import { useSelect } from './useSelect';
 import './style';
-export class TdSelect extends TypeDiv {
+export class TdSelect extends Div {
+    selectedLabel;
+    blur;
+    focus;
+    expanded;
+    states;
+    onInput;
+    debouncedOnInputChange;
+    navigateOptions;
+    selectOption;
+    toggleMenu;
+    tagTooltipRef;
+    /** modelValue signal (vModel ?? modelValue), exposed for element-plus test parity */
+    value;
+    dropdownMenuVisible;
     constructor(params = {}) {
-        super();
-        this.className = 'TdSelect';
-        this.addEmits(selectEmits);
-        this.assignProps(selectProps);
-        this.props = this.useParams(params);
+        super(params);
+        defaultProps(this, selectProps);
+        addEmits(this, selectEmits);
     }
     setup() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        console.log('TdSelect setup. ');
         const props = this.props;
+        const slots = props.slots;
         const emit = this.emit;
+        // Field-alias support for the `options` prop (mirrors element-plus useProps).
+        // NOTE: `props.props` carries an index signature (`[key: string]: string`) that
+        // makes the framework's generic `unref<T>` infer `T = string`, so it would return
+        // a primitive (not the alias object) and break the spread below. Casting the
+        // argument through `any` lets `unref` unwrap the alias object correctly at runtime
+        // while satisfying the type checker.
+        const optionAlias = {
+            value: 'value',
+            label: 'label',
+            disabled: 'disabled',
+            options: 'options',
+            ...(unref(props.props) ?? {}),
+        };
+        const getOptValue = (o) => o?.[optionAlias.value];
+        const getOptLabel = (o) => o?.[optionAlias.label];
+        const getOptDisabled = (o) => o?.[optionAlias.disabled];
+        const getOptChildren = (o) => o?.[optionAlias.options];
+        const renderOptionsProp = (items) => items.map((item) => {
+            const children = getOptChildren(item);
+            if (isArray(children)) {
+                return new TdOptionGroup({
+                    label: getOptLabel(item),
+                    disabled: getOptDisabled(item),
+                    slots: { default: renderOptionsProp(children) },
+                });
+            }
+            return new TdOption({
+                value: getOptValue(item),
+                label: getOptLabel(item),
+                disabled: getOptDisabled(item),
+            });
+        });
+        // Collapsed-tags tooltip config (mirrors element-plus `tagTooltip` prop).
+        const tagTooltipCfg = unref(props.tagTooltip) ?? {};
         const modelValue = computed(() => {
-            var _a;
-            // const { modelValue: rawModelValue, multiple } = props;
-            const rawModelValue = (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get();
-            const multiple = props.multiple;
-            // console.warn('rawModelValue is ', rawModelValue)
+            // vModel 即真相源：外部传了 vModel 时优先，
+            // modelValue 保留给非 signal 的单向展示路径
+            const source = props.vModel ?? props.modelValue;
+            const rawModelValue = (source?.get
+                ? source.get()
+                : unref(source));
+            const multiple = unref(props.multiple);
             const fallback = multiple ? [] : undefined;
             // When it is array, we check if this is multi-select.
             // Based on the result we get
@@ -40,44 +90,153 @@ export class TdSelect extends TypeDiv {
             }
             return multiple ? fallback : rawModelValue;
         });
-        const _props = Object.assign(Object.assign({}, toRefs(props)), { modelValue: modelValue });
+        const _props = {
+            ...toRefs(props),
+            modelValue: modelValue,
+        };
+        const manuallyRenderSlots = (defaultSlots) => {
+            // After option rendering is completed, the useSelect internal state can collect the value of each option.
+            // If the persistent value is false, option will not be rendered by default, so in this case,
+            // manually render and load option data here.
+            if (!defaultSlots)
+                return;
+            const resolved = isFunction(defaultSlots) ? defaultSlots() : defaultSlots;
+            const children = flattedChildren(resolved);
+            children.filter((item) => {
+                // `instanceof` instead of a `ClassName` string check: ClassName is not
+                // reliably populated on not-yet-mounted instances, which made the
+                // previous check silently match nothing.
+                return item instanceof TdOption;
+            }).forEach((item) => {
+                if (unref(props.persistent)) {
+                    // `persistent` keeps the dropdown mounted once opened, but it is still
+                    // only mounted on first open, so until then `states.options` is empty
+                    // and `navigateOptions` bails out (hoveringIndex never moves).
+                    // Register the REAL TdOption instance up-front: it carries the full
+                    // signal interface (currentLabel etc.) that useSelect consumes. The
+                    // later onOptionCreate from the actual mount is de-duplicated (same
+                    // instance), so nothing is registered twice. A plain snapshot must not
+                    // be used here — useSelect calls `option.currentLabel.get()`, which a
+                    // snapshot cannot satisfy.
+                    API.onOptionCreate(item);
+                    return;
+                }
+                const raw = item.props ?? {};
+                const value = unref(raw.value);
+                const label = unref(raw.label);
+                // Build a plain snapshot with already-resolved value/label so
+                // getOption() can match against the raw modelValue (strings/numbers),
+                // and selectedLabel derives from a real currentLabel.
+                const obj = { ...raw };
+                obj.value = value;
+                obj.label = label;
+                obj.currentLabel = label ?? (isObject(value) ? '' : value);
+                obj.props = raw;
+                API.onOptionCreate(obj);
+            });
+        };
+        watch(() => {
+            const currentSlot = (slots?.default ?? props.slot);
+            // 仅在 getter 中返回 slot 引用用于依赖追踪，不在此处执行 slot 函数。
+            // 否则渲染 TdOption 会同步触发 useOption -> onOptionCreate 修改 states 信号，
+            // 被框架判定为「slot 函数内修改被追踪的响应式源」而报 infinite loop。
+            return currentSlot;
+        }, (newSlot) => {
+            manuallyRenderSlots((isFunction(newSlot) ? newSlot() : ensureArray(newSlot)));
+        }, {
+            immediate: true,
+        });
         const API = useSelect(_props, emit);
-        const { nsSelect, nsInput, states } = API;
+        // Register the slot-declared options synchronously for the `persistent` case,
+        // so `states.options` is already populated by the time setup finishes. The
+        // watch above runs its `immediate` callback asynchronously, which is too late
+        // for callers that navigate right after mount (e.g. keyboard operations).
+        // Function slots are left to that watcher to avoid executing a slot function
+        // (and mutating tracked signals) during setup.
+        const initialSlot = (slots?.default ?? props.slot);
+        if (unref(props.persistent) && !isFunction(initialSlot)) {
+            manuallyRenderSlots(initialSlot);
+        }
+        const { nsSelect, nsInput, states, expanded, onInput, debouncedOnInputChange, navigateOptions, selectOption, toggleMenu } = API;
         const { calculatorRef, inputStyle } = useCalcInputWidth();
+        // Handle click-outside to close dropdown (replaces v-click-outside:[popperRef])
+        onClickOutside(API.selectRef, (event) => API.handleClickOutside(event), { ignore: [API.menuRef] });
         provide(selectKey, 
         // reactive(
         {
             props: _props,
             states: states,
-            optionsArray: API.optionsArray.get(),
+            optionsArray: API.optionsArray, // todo
             handleOptionSelect: API.handleOptionSelect,
             onOptionCreate: API.onOptionCreate,
             onOptionDestroy: API.onOptionDestroy,
             selectRef: API.selectRef,
             setSelected: API.setSelected,
+            setHoverOption: API.setHoverOption,
         });
+        // `props.multiple` may be a signal (v-model style binding), so it must be
+        // unwrapped before being used as a plain boolean.
         this.selectedLabel = computed(() => {
-            if (!props.multiple) {
+            if (!unref(props.multiple)) {
                 return unref(states.selectedLabel);
             }
-            return states.selected.map((i) => { var _a; return (_a = i.currentLabel) === null || _a === void 0 ? void 0 : _a.get(); });
+            return states.selected.get().map((i) => unref(i.currentLabel?.get()));
         });
-        this.assignProps({
+        this.blur = API.blur;
+        this.focus = API.focus;
+        this.expanded = expanded;
+        // exposed for testing parity with element-plus (vm.value -> modelValue signal)
+        this.value = (props.vModel ?? props.modelValue);
+        // exposed for testing parity with element-plus (vm.states / vm.onInput)
+        this.states = states;
+        // exposed for testing parity with element-plus (vm.dropdownMenuVisible)
+        this.dropdownMenuVisible = API.dropdownMenuVisible;
+        this.onInput = onInput;
+        this.debouncedOnInputChange = debouncedOnInputChange;
+        this.navigateOptions = navigateOptions;
+        this.selectOption = selectOption;
+        this.toggleMenu = toggleMenu;
+        this.tagTooltipRef = API.tagTooltipRef;
+        assignProps(this, {
             refDom: API.selectRef,
             //  v-click-outside:[popperRef]="handleClickOutside"
         });
-        this.attr.addClass(computed(() => [nsSelect.b(), nsSelect.m(API.selectSize.get())]));
+        addAttrClass(this, computed(() => [nsSelect.b(), nsSelect.m(API.selectSize.get())]));
         // console.warn('API.mouseEnterEventName.get() is ', API.mouseEnterEventName.get());
-        this.addEmits({
-            [API.mouseEnterEventName.get()]: () => (states.inputHovering = true),
-            mouseleave: () => (states.inputHovering = false),
+        addEvents(this, {
+            [API.mouseEnterEventName.get()]: () => states.inputHovering.set(true),
+            mouseleave: () => states.inputHovering.set(false),
         });
+        // Faithful to element-plus:
+        //   <slot name="tag" :data="states.selected" :delete-tag="deleteTag"
+        //         :select-disabled="selectDisabled">
+        //     ...default tag list + collapse tooltip...
+        //   </slot>
+        // The slot REPLACES the whole fallback block and is rendered **once** — it is
+        // not a per-item template. Both forms are accepted:
+        //   - node (e.g. `new TdTag({ vFor: ... })`), as used by the docs' 自定义标签
+        //     example;
+        //   - function `(scope) => node`, kept reactive by reading `selectDisabled` /
+        //     `states.selected` inside the render function.
+        const tagSlot = props.slots?.tag;
+        const customTagSlot = isFunction(tagSlot)
+            ? () => {
+                const selectDisabled = API.selectDisabled.get();
+                return tagSlot({
+                    data: states.selected.get(),
+                    deleteTag: API.deleteTag,
+                    selectDisabled,
+                    disabled: selectDisabled,
+                });
+            }
+            : tagSlot;
         this.addChild(new TdTooltip({
             refEl: API.tooltipRef,
             visible: API.dropdownMenuVisible,
             placement: props.placement,
             teleported: props.teleported,
             popperClass: [nsSelect.e('popper'), props.popperClass],
+            popperStyle: props.popperStyle,
             popperOptions: props.popperOptions,
             fallbackPlacements: props.fallbackPlacements,
             effect: props.effect,
@@ -90,28 +249,29 @@ export class TdSelect extends TypeDiv {
             appendTo: props.appendTo,
             showArrow: props.showArrow,
             offset: props.offset,
-            emits: {
-                beforeShow: API.handleMenuEnter,
-                hide: () => (states.isBeforeHide = false),
-            },
+            onBeforeShow: API.handleMenuEnter,
+            onHide: () => (states.isBeforeHide = false),
             slot: new Div({
                 refDom: API.wrapperRef,
                 class: computed(() => [
                     nsSelect.e('wrapper'),
                     nsSelect.is('focused', API.isFocused.get()),
-                    nsSelect.is('hovering', states.inputHovering),
+                    nsSelect.is('hovering', states.inputHovering.get()),
                     nsSelect.is('filterable', props.filterable),
                     nsSelect.is('disabled', unref(API.selectDisabled)),
                 ]),
-                events: {
-                    click: (evt) => {
-                        // console.warn('click . ');
-                        API.toggleMenu();
-                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    },
+                onClick: (evt) => {
+                    // Forward the user-provided `onClick` (element-plus emits `click` here).
+                    const userOnClick = props.onClick;
+                    if (isFunction(userOnClick)) {
+                        userOnClick(evt);
+                    }
+                    API.toggleMenu(evt);
+                    evt?.preventDefault();
+                    evt?.stopPropagation();
                 },
                 slot: [
-                    ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.prefix)
+                    props.slots?.prefix
                         ? new Div({
                             refDom: API.prefixRef,
                             class: nsSelect.e('prefix'),
@@ -120,139 +280,144 @@ export class TdSelect extends TypeDiv {
                         : undefined,
                     new Div({
                         refDom: API.selectionRef,
-                        class: [
+                        class: computed(() => [
                             nsSelect.e('selection'),
-                            nsSelect.is('near', props.multiple &&
-                                !((_b = props.slots) === null || _b === void 0 ? void 0 : _b.prefix) &&
-                                !!states.selected.length),
-                        ],
+                            nsSelect.is('near', unref(props.multiple) &&
+                                !props.slots?.prefix &&
+                                !!states.selected.get().length),
+                        ]),
                         slot: [
-                            props.multiple
-                                ? new Fragment({
-                                    slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.tag) !== null && _d !== void 0 ? _d : [
-                                        new For({
-                                            data: API.showTagList,
-                                            getter: (item) => {
-                                                var _a, _b, _c;
-                                                return new Div({
-                                                    // key: API.getValueKey(item),
-                                                    class: nsSelect.e('selected-item'),
-                                                    slot: new TdTag({
-                                                        closable: !API.selectDisabled && !item.isDisabled,
-                                                        size: API.collapseTagSize.get(),
-                                                        type: props.tagType,
-                                                        effect: props.tagEffect,
-                                                        disableTransitions: true,
-                                                        styleObj: API.tagStyle.get(),
-                                                        emits: {
-                                                            close: (evt) => {
-                                                                API.deleteTag(evt, item);
-                                                            },
-                                                        },
-                                                        slot: new Span({
-                                                            class: nsSelect.e('tags-text'),
-                                                            slot: (_c = (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.call(_a, item.currentLabel, item.value)) !== null && _c !== void 0 ? _c : item.currentLabel,
-                                                        }),
+                            new Fragment({
+                                // Faithful to EP `<slot name="tag" v-if="multiple">`: the whole tags
+                                // block (v-for list + collapse tooltip) is gated on `multiple` reactively.
+                                // `vIf` natively tracks a signal via `watch` (framework vIf.ts), so binding
+                                // the prop directly is both reactive and the most faithful translation —
+                                // the previous `props.multiple ? ... : undefined` ternary was evaluated once
+                                // at construction and never re-rendered on `multiple` toggle.
+                                vIf: props.multiple,
+                                // `customTagSlot` (when provided) replaces the whole fallback
+                                // (tag list + collapse tooltip); otherwise render the fallback.
+                                slot: customTagSlot ?? [
+                                    new TdTag({
+                                        // Faithful to EP: the `v-for` is on `<el-tag>` itself, so each tag
+                                        // carries `selected-item` directly — no extra wrapper element.
+                                        vFor: {
+                                            data: computed(() => {
+                                                // `selectDisabled` must be tracked so the tag list re-renders
+                                                // when the disabled state changes. Returning a fresh array forces
+                                                // the vFor to re-run `toParams`.
+                                                API.selectDisabled.get();
+                                                return API.showTagList.get().slice();
+                                            }),
+                                            toParams: (item) => {
+                                                return {
+                                                    class: [nsSelect.e('selected-item')],
+                                                    closable: !API.selectDisabled.get() && !unref(item.isDisabled),
+                                                    size: API.collapseTagSize.get(),
+                                                    type: props.tagType,
+                                                    effect: props.tagEffect,
+                                                    disableTransitions: true,
+                                                    // pass the signal itself so the td-tag re-applies the style
+                                                    // reactively as `tagStyle` (selected length / collapse width) changes.
+                                                    styleObj: API.tagStyle,
+                                                    onClose: (evt) => {
+                                                        API.deleteTag(evt, item);
+                                                    },
+                                                    slot: new Span({
+                                                        class: nsSelect.e('tags-text'),
+                                                        slot: props.slots?.label?.(unref(item.currentLabel), unref(item.value)) ?? item.currentLabel,
                                                     }),
-                                                });
+                                                };
                                             },
-                                        }),
-                                        new TdTooltip({
-                                            vIf: props.collapseTags &&
-                                                states.selected.length > props.maxCollapseTags,
-                                            refEl: API.tagTooltipRef,
-                                            disabled: API.dropdownMenuVisible ||
-                                                !props.collapseTagsTooltip,
-                                            fallbackPlacements: [
-                                                'bottom',
-                                                'top',
-                                                'right',
-                                                'left',
-                                            ],
-                                            effect: props.effect,
-                                            placement: 'bottom',
-                                            teleported: props.teleported,
-                                            slots: {
-                                                default: new Div({
-                                                    refDom: API.collapseItemRef,
-                                                    class: nsSelect.e('selected-item'),
-                                                    slot: new TdTag({
-                                                        closable: false,
-                                                        size: API.collapseTagSize.get(),
-                                                        type: props.tagType,
-                                                        effect: props.tagEffect,
-                                                        disableTransitions: true,
-                                                        styleObj: API.collapseTagStyle.get(),
-                                                        slot: new Span({
-                                                            class: nsSelect.e('tags-text'),
-                                                            slot: `+${states.selected.length -
-                                                                props.maxCollapseTags}`,
-                                                        }),
-                                                    }),
+                                        },
+                                    }),
+                                    new TdTooltip({
+                                        vIf: computed(() => props.collapseTags &&
+                                            states.selected.get().length > props.maxCollapseTags),
+                                        refEl: API.tagTooltipRef,
+                                        disabled: computed(() => API.dropdownMenuVisible.get() || !props.collapseTagsTooltip),
+                                        fallbackPlacements: tagTooltipCfg.fallbackPlacements ??
+                                            ['bottom', 'top', 'right', 'left'],
+                                        effect: tagTooltipCfg.effect ?? props.effect,
+                                        placement: tagTooltipCfg.placement ?? 'bottom',
+                                        teleported: tagTooltipCfg.teleported ?? props.teleported,
+                                        popperClass: tagTooltipCfg.popperClass ?? props.popperClass,
+                                        popperStyle: tagTooltipCfg.popperStyle ?? props.popperStyle,
+                                        appendTo: tagTooltipCfg.appendTo ?? props.appendTo,
+                                        popperOptions: tagTooltipCfg.popperOptions ?? props.popperOptions,
+                                        offset: tagTooltipCfg.offset ?? props.offset,
+                                        slots: {
+                                            default: new TdTag({
+                                                refDom: API.collapseItemRef,
+                                                class: [nsSelect.e('selected-item')],
+                                                closable: false,
+                                                size: API.collapseTagSize.get(),
+                                                type: props.tagType,
+                                                effect: props.tagEffect,
+                                                disableTransitions: true,
+                                                styleObj: API.collapseTagStyle,
+                                                slot: new Span({
+                                                    class: nsSelect.e('tags-text'),
+                                                    slot: () => `+${states.selected.get().length - props.maxCollapseTags}`,
                                                 }),
-                                                content: new Div({
-                                                    refDom: API.tagMenuRef,
-                                                    class: nsSelect.e('selection'),
-                                                    slot: new For({
-                                                        data: API.collapseTagList,
-                                                        getter: (item) => {
-                                                            var _a, _b;
-                                                            return new Div({
-                                                                // key: API.getValueKey(item),
-                                                                class: nsSelect.e('selected-item'),
-                                                                slot: new TdTag({
-                                                                    class: 'in-tooltip',
-                                                                    closable: !API.selectDisabled && !item.isDisabled,
-                                                                    size: API.collapseTagSize.get(),
-                                                                    type: props.tagType,
-                                                                    effect: props.tagEffect,
-                                                                    disableTransitions: true,
-                                                                    emits: {
-                                                                        close: (evt) => {
-                                                                            API.deleteTag(evt, item);
-                                                                        },
-                                                                    },
-                                                                    slot: new Span({
-                                                                        class: nsSelect.e('tags-text'),
-                                                                        slot: isFunction((_a = props.slots) === null || _a === void 0 ? void 0 : _a.label)
-                                                                            ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.label(item.currentLabel, item.vlaue)
-                                                                            : item.currentLabel,
-                                                                    }),
-                                                                }),
-                                                            });
-                                                        },
-                                                    }),
+                                            }),
+                                            content: new Div({
+                                                refDom: API.tagMenuRef,
+                                                class: nsSelect.e('selection'),
+                                                slot: new TdTag({
+                                                    vFor: { data: API.collapseTagList, toParams: (item) => ({
+                                                            class: [nsSelect.e('selected-item'), 'in-tooltip'],
+                                                            closable: !API.selectDisabled.get() && !unref(item.isDisabled),
+                                                            size: API.collapseTagSize.get(),
+                                                            type: props.tagType,
+                                                            effect: props.tagEffect,
+                                                            disableTransitions: true,
+                                                            onClose: (evt) => {
+                                                                API.deleteTag(evt, item);
+                                                            },
+                                                            slot: new Span({
+                                                                class: nsSelect.e('tags-text'),
+                                                                slot: isFunction(props.slots?.label)
+                                                                    ? props.slots?.label(unref(item.currentLabel), unref(item.value))
+                                                                    : item.currentLabel,
+                                                            }),
+                                                        }) },
                                                 }),
-                                            },
-                                        }),
-                                    ],
-                                })
-                                : undefined,
+                                            }),
+                                        },
+                                    }),
+                                ],
+                            }),
                             new Div({
-                                class: [
+                                // Must stay reactive: `displayInputWrapper` depends on the focused
+                                // state and the current filter text, so a plain (construction-time)
+                                // class array would freeze `is-hidden` at its initial value.
+                                class: computed(() => [
                                     nsSelect.e('selected-item'),
                                     nsSelect.e('input-wrapper'),
-                                    nsSelect.is('hidden', !props.filterable),
-                                ],
+                                    nsSelect.is('hidden', !API.displayInputWrapper.get()),
+                                ]),
                                 slot: [
                                     new Input({
                                         refDom: API.inputRef,
                                         vModel: states.inputValue,
                                         attrObj: {
-                                            id: API.inputId.get(),
+                                            // `inputId` is assigned in `useFormItemInputId`'s `onMounted`
+                                            // (it derives from `props.id` or a generated id), so bind the
+                                            // signal itself — a construction-time `.get()` would stay `undefined`
+                                            // and the input would never receive its id (breaking the
+                                            // `TdFormItem` label[for] ↔ input id linkage).
+                                            id: API.inputId,
                                             type: 'text',
                                             name: props.name,
-                                            class: [
-                                                nsSelect.e('input'),
-                                                nsSelect.is(API.selectSize.get()),
-                                            ],
+                                            class: [nsSelect.e('input'), nsSelect.is(API.selectSize.get())],
                                             disabled: API.selectDisabled,
                                             autocomplete: props.autocomplete,
                                             tabindex: props.tabindex,
                                             role: 'combobox',
                                             readonly: !props.filterable,
                                             spellcheck: false,
-                                            ariaActivedescendant: ((_e = API.hoverOption.get()) === null || _e === void 0 ? void 0 : _e.id) || '',
+                                            ariaActivedescendant: API.hoverOption.get()?.id || '',
                                             ariaControls: API.contentId.get(),
                                             ariaExpanded: API.dropdownMenuVisible,
                                             ariaLabel: props.ariaLabel,
@@ -260,41 +425,77 @@ export class TdSelect extends TypeDiv {
                                             ariaHaspopup: 'listbox',
                                         },
                                         styleObj: inputStyle,
-                                        events: {
-                                            keydown: (evt) => {
-                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Down') {
-                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                    API.navigateOptions('next');
-                                                }
-                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Up') {
-                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                    API.navigateOptions('prev');
-                                                }
-                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Escape') {
-                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                    API.handleEsc();
-                                                }
-                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                                                    API.selectOption();
-                                                }
-                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Delete') {
-                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                    API.deletePrevTag(evt);
-                                                }
-                                            },
-                                            compositionstart: API.handleCompositionStart,
-                                            compositionupdate: API.handleCompositionUpdate,
-                                            compositionend: API.handleCompositionEnd,
-                                            input: API.onInput,
-                                            click: (evt) => {
-                                                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                                                API.toggleMenu();
-                                            },
+                                        onKeydown: (evt) => {
+                                            // Keyboard events may only carry `code` or only `key`
+                                            // depending on how they are dispatched, so normalize
+                                            // both before matching.
+                                            const keyName = (evt?.key ?? evt?.code);
+                                            const codeName = (evt?.code ?? evt?.key);
+                                            const isKey = (...names) => names.includes(keyName) || names.includes(codeName);
+                                            if (isKey('ArrowDown', 'Down')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                API.navigateOptions('next');
+                                            }
+                                            if (isKey('ArrowUp', 'Up')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                API.navigateOptions('prev');
+                                            }
+                                            if (isKey('Home')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                if (!API.expanded.get())
+                                                    return;
+                                                API.focusOption(0, 'down');
+                                            }
+                                            if (isKey('End')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                if (!API.expanded.get())
+                                                    return;
+                                                API.focusOption(API.states.options.get().size - 1, 'up');
+                                            }
+                                            if (isKey('PageUp')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                if (!API.expanded.get())
+                                                    return;
+                                                API.focusOption(API.states.hoveringIndex - 10, 'up');
+                                            }
+                                            if (isKey('PageDown')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                if (!API.expanded.get())
+                                                    return;
+                                                API.focusOption(API.states.hoveringIndex + 10, 'down');
+                                            }
+                                            if (isKey('Escape', 'Esc')) {
+                                                evt?.preventDefault();
+                                                evt?.stopPropagation();
+                                                API.handleEsc();
+                                            }
+                                            if (isKey('Enter', 'NumpadEnter')) {
+                                                if (API.isComposing.get())
+                                                    return;
+                                                evt?.stopPropagation();
+                                                evt?.preventDefault();
+                                                API.selectOption();
+                                            }
+                                            // Vue's `@keydown.delete` matches Backspace as well.
+                                            if (isKey('Delete', 'Backspace')) {
+                                                evt?.stopPropagation();
+                                                API.deletePrevTag(evt);
+                                            }
+                                        },
+                                        onCompositionstart: API.handleCompositionStart,
+                                        onCompositionupdate: API.handleCompositionUpdate,
+                                        onCompositionend: API.handleCompositionEnd,
+                                        onInput: API.onInput,
+                                        onChange: (evt) => evt.stopPropagation(),
+                                        onClick: (evt) => {
+                                            evt?.stopPropagation();
+                                            API.toggleMenu(evt);
                                         },
                                     }),
                                     new Span({
@@ -309,32 +510,30 @@ export class TdSelect extends TypeDiv {
                                 ],
                             }),
                             new Div({
-                                vIf: API.shouldShowPlaceholder,
+                                vIf: computed(() => API.shouldShowPlaceholder.get()),
                                 class: computed(() => [
                                     nsSelect.e('selected-item'),
                                     nsSelect.e('placeholder'),
                                     nsSelect.is('transparent', !API.hasModelValue.get() ||
                                         (API.expanded.get() && !states.inputValue.get())),
                                 ]),
-                                slot: computed(() => {
-                                    var _a, _b, _c;
-                                    // console.warn('API.hasModelValue.get() is ', API.hasModelValue.get());
+                                slot: () => {
                                     if (API.hasModelValue.get()) {
-                                        if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.label) {
-                                            return (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.call(_b, unref(API.currentPlaceholder), props.modelValue);
+                                        if (props.slots?.label) {
+                                            return props.slots?.label?.(unref(API.currentPlaceholder), modelValue.get());
                                         }
                                         else {
                                             return new Span({
-                                                slot: API.currentPlaceholder.get()
+                                                slot: API.currentPlaceholder.get(),
                                             });
                                         }
                                     }
                                     else {
                                         return new Span({
-                                            slot: API.currentPlaceholder.get()
+                                            slot: API.currentPlaceholder.get(),
                                         });
                                     }
-                                })
+                                },
                             }),
                         ],
                     }),
@@ -353,16 +552,16 @@ export class TdSelect extends TypeDiv {
                                     new (API.iconComponent.get())(),
                             }),
                             new TdIcon({
-                                vIf: computed(() => API.showClose.get() && props.clearIcon),
+                                vIf: computed(() => {
+                                    return API.showClose.get() && props.clearIcon;
+                                }),
                                 class: [
                                     nsSelect.e('caret'),
                                     nsSelect.e('icon'),
-                                    API.iconReverse,
+                                    nsSelect.e('clear'),
                                 ],
                                 slot: new props.clearIcon(),
-                                events: {
-                                    click: API.handleClearClick,
-                                },
+                                onClick: API.handleClearClick,
                             }),
                             new TdIcon({
                                 vIf: computed(() => API.validateState.get() &&
@@ -385,22 +584,15 @@ export class TdSelect extends TypeDiv {
                     refDom: API.menuRef,
                     slot: [
                         new Div({
-                            vIf: (_f = props.slots) === null || _f === void 0 ? void 0 : _f.header,
+                            vIf: props.slots?.header,
                             class: nsSelect.be('dropdown', 'header'),
-                            slot: (_g = props.slots) === null || _g === void 0 ? void 0 : _g.header,
-                            events: {
-                                click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
-                            },
+                            slot: props.slots?.header,
+                            onClick: (evt) => evt?.stopPropagation(),
                         }),
                         new TdScrollbar({
-                            vShow: computed(() => {
-                                // console.error('API.states.options.get().size > 0 && !unref(props.loading) is ',
-                                //   states.options.get().size);
-                                return states.options.get().size > 0 && !unref(props.loading);
-                            } // todo
-                            ),
                             refEl: API.scrollbarRef,
                             tag: 'ul',
+                            maxHeight: 200,
                             wrapClass: nsSelect.be('dropdown', 'wrap'),
                             viewClass: nsSelect.be('dropdown', 'list'),
                             class: [
@@ -412,41 +604,63 @@ export class TdSelect extends TypeDiv {
                                 ariaLabel: props.ariaLabel,
                                 ariaOrientation: 'vertical',
                             },
-                            emits: {
-                                scroll: API.popupScroll,
-                            },
+                            onScroll: API.popupScroll,
+                            onEndReached: API.popupScrollEnd,
                             slot: [
-                                new TdOption({
-                                    vIf: API.showNewOption,
-                                    value: states.inputValue, // 这里的value是会变的，是选中的值
-                                    created: true,
-                                }),
+                                // element-plus 中该「新建选项」带 v-if="showNewOption"，而 showNewOption
+                                // 必然要求 allowCreate；未开启 allowCreate 时它既不会渲染也不会注册。
+                                // 这里在构造期直接省略，避免它被计入 states.options 而破坏远程空态判断。
+                                ...(unref(props.allowCreate)
+                                    ? [
+                                        new TdOption({
+                                            vIf: API.showNewOption,
+                                            value: states.inputValue, // 这里的value是会变的，是选中的值
+                                            isCreated: true,
+                                        }),
+                                    ]
+                                    : []),
                                 new TdOptions({
                                     // todo
-                                    slot: props.slot, // 这里面的 TdOption的value的值是不变的。
+                                    // 改为函数式 slot：当 props.options（信号）或用户传入的函数式
+                                    // slots.default 依赖的信号变化时，框架 transformSlot 会自动重渲染并
+                                    // 协调子节点（旧 TdOption 卸载触发 onOptionDestroy，新 TdOption 挂载
+                                    // 触发 onOptionCreate），从而支持动态 options。静态数组 slot 因无依赖
+                                    // 只 immediate 渲染一次，行为与之前一致。
+                                    slot: () => [
+                                        ...(isArray(unref(props.options))
+                                            ? renderOptionsProp(unref(props.options))
+                                            : []),
+                                        ...ensureArray(isFunction(props.slots?.default)
+                                            ? props.slots.default()
+                                            : (props.slots?.default ?? props.slot)),
+                                    ],
                                 }),
                             ],
                         }),
-                        ((_h = props.slots) === null || _h === void 0 ? void 0 : _h.loading) && unref(props.loading)
-                            ? new Div({
-                                class: nsSelect.be('dropdown', 'loading'),
-                                slot: (_j = props.slots) === null || _j === void 0 ? void 0 : _j.loading,
-                            })
-                            : unref(props.loading) || API.filteredOptionsCount.get() === 0
-                                ? new Div({
-                                    class: nsSelect.be('dropdown', 'empty'),
-                                    slot: (_l = (_k = props.slots) === null || _k === void 0 ? void 0 : _k.empty) !== null && _l !== void 0 ? _l : new Span({
-                                        slot: API.emptyText,
-                                    }),
-                                })
-                                : undefined,
                         new Div({
-                            vIf: (_m = props.slots) === null || _m === void 0 ? void 0 : _m.footer,
+                            vIf: computed(() => !!props.slots?.loading && unref(props.loading)),
+                            class: nsSelect.be('dropdown', 'loading'),
+                            slot: props.slots?.loading,
+                        }),
+                        new Div({
+                            vIf: computed(() => {
+                                const loading = unref(props.loading);
+                                // when a dedicated loading slot is present, it takes precedence
+                                if (loading && props.slots?.loading)
+                                    return false;
+                                return loading || API.filteredOptionsCount.get() === 0;
+                            }),
+                            class: nsSelect.be('dropdown', 'empty'),
+                            slot: props.slots?.empty ??
+                                new Span({
+                                    slot: API.emptyText,
+                                }),
+                        }),
+                        new Div({
+                            vIf: props.slots?.footer,
                             class: nsSelect.be('dropdown', 'footer'),
-                            events: {
-                                click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
-                            },
-                            slot: (_o = props.slots) === null || _o === void 0 ? void 0 : _o.footer,
+                            onClick: (evt) => evt?.stopPropagation(),
+                            slot: props.slots?.footer,
                         }),
                     ],
                 }),