@type-dom/ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,671 @@
+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 { 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 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(params);
+        defaultProps(this, selectProps);
+        addEmits(this, selectEmits);
+    }
+    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(() => {
+            // 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
+            if (isArray(rawModelValue)) {
+                return multiple ? rawModelValue : fallback;
+            }
+            return multiple ? fallback : rawModelValue;
+        });
+        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);
+        // 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, // 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 (!unref(props.multiple)) {
+                return unref(states.selectedLabel);
+            }
+            return states.selected.get().map((i) => unref(i.currentLabel?.get()));
+        });
+        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"
+        });
+        addAttrClass(this, computed(() => [nsSelect.b(), nsSelect.m(API.selectSize.get())]));
+        // console.warn('API.mouseEnterEventName.get() is ', API.mouseEnterEventName.get());
+        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,
+            pure: true,
+            trigger: 'click',
+            transition: `${nsSelect.namespace.get()}-zoom-in-top`,
+            stopPopperMouseEvent: false,
+            gpuAcceleration: false,
+            persistent: props.persistent,
+            appendTo: props.appendTo,
+            showArrow: props.showArrow,
+            offset: props.offset,
+            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.get()),
+                    nsSelect.is('filterable', props.filterable),
+                    nsSelect.is('disabled', unref(API.selectDisabled)),
+                ]),
+                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: [
+                    props.slots?.prefix
+                        ? new Div({
+                            refDom: API.prefixRef,
+                            class: nsSelect.e('prefix'),
+                            slot: props.slots.prefix,
+                        })
+                        : undefined,
+                    new Div({
+                        refDom: API.selectionRef,
+                        class: computed(() => [
+                            nsSelect.e('selection'),
+                            nsSelect.is('near', unref(props.multiple) &&
+                                !props.slots?.prefix &&
+                                !!states.selected.get().length),
+                        ]),
+                        slot: [
+                            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: 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 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,
+                                                            }),
+                                                        }) },
+                                                }),
+                                            }),
+                                        },
+                                    }),
+                                ],
+                            }),
+                            new Div({
+                                // 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', !API.displayInputWrapper.get()),
+                                ]),
+                                slot: [
+                                    new Input({
+                                        refDom: API.inputRef,
+                                        vModel: states.inputValue,
+                                        attrObj: {
+                                            // `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())],
+                                            disabled: API.selectDisabled,
+                                            autocomplete: props.autocomplete,
+                                            tabindex: props.tabindex,
+                                            role: 'combobox',
+                                            readonly: !props.filterable,
+                                            spellcheck: false,
+                                            ariaActivedescendant: API.hoverOption.get()?.id || '',
+                                            ariaControls: API.contentId.get(),
+                                            ariaExpanded: API.dropdownMenuVisible,
+                                            ariaLabel: props.ariaLabel,
+                                            ariaAutocomplete: 'none',
+                                            ariaHaspopup: 'listbox',
+                                        },
+                                        styleObj: inputStyle,
+                                        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({
+                                        vIf: props.filterable,
+                                        refDom: calculatorRef,
+                                        class: nsSelect.e('input-calculator'),
+                                        attrObj: {
+                                            ariaHidden: true,
+                                        },
+                                        slot: states.inputValue,
+                                    }),
+                                ],
+                            }),
+                            new Div({
+                                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: () => {
+                                    if (API.hasModelValue.get()) {
+                                        if (props.slots?.label) {
+                                            return props.slots?.label?.(unref(API.currentPlaceholder), modelValue.get());
+                                        }
+                                        else {
+                                            return new Span({
+                                                slot: API.currentPlaceholder.get(),
+                                            });
+                                        }
+                                    }
+                                    else {
+                                        return new Span({
+                                            slot: API.currentPlaceholder.get(),
+                                        });
+                                    }
+                                },
+                            }),
+                        ],
+                    }),
+                    new Div({
+                        refDom: API.suffixRef,
+                        class: nsSelect.e('suffix'),
+                        slot: [
+                            new TdIcon({
+                                vIf: computed(() => API.iconComponent.get() && !API.showClose.get()),
+                                class: [
+                                    nsSelect.e('caret'),
+                                    nsSelect.e('icon'),
+                                    API.iconReverse,
+                                ],
+                                slot: API.iconComponent.get() &&
+                                    new (API.iconComponent.get())(),
+                            }),
+                            new TdIcon({
+                                vIf: computed(() => {
+                                    return API.showClose.get() && props.clearIcon;
+                                }),
+                                class: [
+                                    nsSelect.e('caret'),
+                                    nsSelect.e('icon'),
+                                    nsSelect.e('clear'),
+                                ],
+                                slot: new props.clearIcon(),
+                                onClick: API.handleClearClick,
+                            }),
+                            new TdIcon({
+                                vIf: computed(() => API.validateState.get() &&
+                                    API.validateIcon.get() &&
+                                    API.needStatusIcon.get()),
+                                class: [
+                                    nsInput.e('icon'),
+                                    nsInput.e('validateIcon'),
+                                    nsInput.is('loading', API.validateState.get() === 'validating'),
+                                ],
+                                slot: API.validateIcon.get() &&
+                                    new (API.validateIcon.get())(),
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            slots: {
+                content: new TdSelectDropdown({
+                    refDom: API.menuRef,
+                    slot: [
+                        new Div({
+                            vIf: props.slots?.header,
+                            class: nsSelect.be('dropdown', 'header'),
+                            slot: props.slots?.header,
+                            onClick: (evt) => evt?.stopPropagation(),
+                        }),
+                        new TdScrollbar({
+                            refEl: API.scrollbarRef,
+                            tag: 'ul',
+                            maxHeight: 200,
+                            wrapClass: nsSelect.be('dropdown', 'wrap'),
+                            viewClass: nsSelect.be('dropdown', 'list'),
+                            class: [
+                                computed(() => nsSelect.is('empty', API.filteredOptionsCount.get() === 0)),
+                            ],
+                            attrObj: {
+                                id: API.contentId,
+                                role: 'listbox',
+                                ariaLabel: props.ariaLabel,
+                                ariaOrientation: 'vertical',
+                            },
+                            onScroll: API.popupScroll,
+                            onEndReached: API.popupScrollEnd,
+                            slot: [
+                                // 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.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)),
+                                    ],
+                                }),
+                            ],
+                        }),
+                        new Div({
+                            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'),
+                            onClick: (evt) => evt?.stopPropagation(),
+                            slot: props.slots?.footer,
+                        }),
+                    ],
+                }),
+            },
+        }));
+    }
+}
+//# sourceMappingURL=td-select.class.js.map