@type-dom/ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,1014 @@
+/**
+ * TdCascader 级联选择器组件
+ *
+ * Element Plus 源文件: cascader.vue (1060行)
+ *
+ * 依赖组件:
+ * - TdInput (input 组件) ✅
+ * - TdTag (tag 组件) ✅
+ * - TdCascaderPanel (cascader-panel 组件) ✅
+ * - TdTooltip (tooltip 组件) ✅
+ * - TdScrollbar (scrollbar 组件) ✅
+ *
+ * 转换策略:
+ * 完整转换 Element Plus 所有功能，包括 tooltip 包装、过滤面板、虚拟滚动等
+ */
+import { Div, Span, Fragment, Input, addEmits, emit, onMounted, onBeforeUnmount, watch, nextTick, } from '@type-dom/framework';
+import { signal, computed, effect } from '@type-dom/signals';
+import { useNamespace } from '../../../hooks/use-namespace';
+import { useComposition } from '../../../hooks/use-composition';
+import { useResizeObserver, onClickOutside, useDebounceFn } from '@type-dom/use';
+import { useFocusController } from '../../../hooks/use-focus-controller';
+import { useLocale } from '../../../hooks/use-locale';
+import { useFormItem } from '../td-form/hooks/use-form-item';
+import { useFormDisabled } from '../td-form/hooks/use-form-common-props';
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT, EVENT_CODE } from '../../../constants';
+import { TdInput } from '../td-input/td-input.class';
+import { TdTag } from '../../data/td-tag/td-tag.class';
+import { TdTooltip } from '../../feedback/td-tooltip/td-tooltip.class';
+import { ElCircleCloseSvg, ElArrowDownSvg, ElCheckSvg } from '@type-dom/svgs';
+import { TdCascaderPanel } from '../td-cascader-panel/td-cascader-panel.class';
+import { cascaderEmits } from './td-cascader.const';
+import './style';
+export class TdCascader extends Fragment {
+    // Exposed methods and properties (defineExpose)
+    /**
+     * @description get an array of currently selected node, (leafOnly) whether only return the leaf checked nodes, default is `false`
+     */
+    getCheckedNodes;
+    /**
+     * @description cascader panel ref
+     */
+    cascaderPanelRef;
+    /**
+     * @description toggle the visible of popper
+     */
+    togglePopperVisible;
+    /**
+     * @description cascader content ref
+     */
+    contentRef;
+    /**
+     * @description selected content text
+     */
+    presentText;
+    /** @description focus the input element */
+    focus;
+    /** @description blur the input element */
+    blur;
+    constructor(params = {}) {
+        super(params);
+        addEmits(this, cascaderEmits);
+    }
+    setup() {
+        const props = this.props;
+        // ========== Module-level variables (Element Plus L400-L401) ==========
+        let inputInitialHeight = 0;
+        const pressDeleteCount = signal(0);
+        // ========== Namespace (Element Plus L403-L404) ==========
+        const nsCascader = useNamespace('cascader');
+        const nsInput = useNamespace('input');
+        // ========== Hooks (Element Plus L411-L420) ==========
+        const { t } = useLocale();
+        const { formItem } = useFormItem();
+        const isDisabled = useFormDisabled();
+        // const formSize = useFormSize(); // TODO: Use formSize for dynamic sizing
+        const { isComposing: isComposingSignal, handleComposition } = useComposition({
+            afterComposition(event) {
+                const text = event?.target?.value;
+                if (text) {
+                    handleInput(text, event);
+                }
+            },
+        });
+        // ========== State (Element Plus L429+) ==========
+        const popperVisible = signal(false);
+        const inputValue = signal('');
+        const searchInputValue = signal('');
+        const inputHover = signal(false);
+        const filtering = signal(false);
+        // ========== Refs (Element Plus L422-L428) ==========
+        const tooltipRef = signal(undefined);
+        const tagTooltipRef = signal(undefined);
+        const inputRef = signal(undefined);
+        const wrapperRef = signal(undefined); // Element Plus L425
+        const panelRef = signal(undefined);
+        const tagsRef = signal(undefined); // Multi-select tags container
+        const suggestionPanel = signal(undefined); // Element Plus L427
+        // Computed properties - 忠实转换 Element Plus
+        const multiple = computed(() => !!props.props?.multiple);
+        const filterable = computed(() => !!props.filterable);
+        const readonly = computed(() => !filterable.get() || multiple.get());
+        // Focus controller - Element Plus L483-L496 (after computed properties)
+        const { isFocused: focusedState, handleBlur } = useFocusController(inputRef, {
+            disabled: isDisabled,
+            beforeBlur(event) {
+                // Check if focus is still inside tooltip content
+                return (tooltipRef.get()?.isFocusInsideContent?.(event) ||
+                    tagTooltipRef.get()?.isFocusInsideContent?.(event));
+            },
+            afterBlur() {
+                // Form validation on blur - Element Plus L492-L494
+                if (props.validateEvent) {
+                    formItem?.validate('blur').catch(() => { });
+                }
+            },
+        });
+        const inputPlaceholder = computed(() => props.placeholder || t('el.cascader.placeholder'));
+        const currentPlaceholder = computed(() => searchInputValue.get() || tags.get().length > 0 || isComposingSignal.get()
+            ? ''
+            : inputPlaceholder.get());
+        // Tags for multiple mode
+        const checkedNodes = signal([]);
+        const tags = signal([]);
+        const suggestions = signal([]);
+        const showTagList = computed(() => {
+            if (!multiple.get())
+                return [];
+            const list = props.collapseTags
+                ? tags.get().slice(0, props.maxCollapseTags ?? 1)
+                : tags.get();
+            // 对齐 Element Plus L77-L89：`<el-tag v-for="tag in showTagList">` 上并没有 v-if，
+            // 无 node 的项必须**从源头过滤**——vFor 的 `toParams` 返回空对象仍会生成 1 个空克隆
+            // （vFor.ts: `toParams(...) ?? {}`），并不会跳过该项。
+            return list.filter((tag) => tag.node);
+        });
+        const collapseTagList = computed(() => {
+            if (!multiple.get())
+                return [];
+            return props.collapseTags ? tags.get().slice(props.maxCollapseTags ?? 1) : [];
+        });
+        // Present text (single mode display text)
+        const presentText = computed(() => {
+            const { showAllLevels, separator } = props;
+            const nodes = checkedNodes.get();
+            return nodes.length
+                ? multiple.get()
+                    ? ''
+                    : nodes[0].calcText(showAllLevels ?? true, separator || ' / ')
+                : '';
+        });
+        // Content ref - get tooltip's content ref - Element Plus L510-L512
+        const contentRef = computed(() => {
+            return tooltipRef.get()?.popperRef?.get()?.contentRef?.get() ?? null;
+        });
+        // Clear button visibility
+        const clearBtnVisible = computed(() => {
+            if (!props.clearable ||
+                isDisabled.get() ||
+                filtering.get() ||
+                (!inputHover.get() && !focusedState.get())) {
+                return false;
+            }
+            return !!checkedNodes.get().length;
+        });
+        // Form validation state - Element Plus L519
+        const validateState = computed(() => formItem?.validateState.get() || '');
+        // Toggle popper visibility
+        const togglePopperVisible = (visible) => {
+            if (isDisabled.get())
+                return;
+            const newState = visible ?? !popperVisible.get();
+            if (newState !== popperVisible.get()) {
+                popperVisible.set(newState);
+                if (newState) {
+                    // Update popper position
+                    nextTick(() => {
+                        tooltipRef.get()?.updatePopper?.();
+                        // Scroll to expanding node
+                        if (panelRef.get()) {
+                            panelRef.get().scrollToExpandingNode?.();
+                        }
+                    });
+                }
+                else if (filterable.get()) {
+                    // Sync present text value when closing
+                    syncPresentTextValue();
+                }
+                emit(this, 'visibleChange', newState);
+            }
+        };
+        // Sync present text value
+        const syncPresentTextValue = () => {
+            const value = presentText.get();
+            inputValue.set(value);
+            searchInputValue.set(value);
+        };
+        // Handle clear - P0 fix: add syncPresentTextValue
+        const handleClear = (e) => {
+            e.stopPropagation();
+            // Clear panel checked nodes
+            if (panelRef.get()) {
+                panelRef.get().clearCheckedNodes?.();
+            }
+            // Sync present text value when closing with filterable
+            if (!popperVisible.get() && filterable.get()) {
+                syncPresentTextValue();
+            }
+            // Emit events
+            emit(this, UPDATE_MODEL_EVENT, props.valueOnClear ?? null);
+            emit(this, CHANGE_EVENT, props.valueOnClear ?? null);
+            // Form validation on change - Element Plus L530-L532
+            if (props.validateEvent) {
+                formItem?.validate('change').catch(() => { });
+            }
+            emit(this, 'clear');
+            togglePopperVisible(false);
+        };
+        // Calculate suggestions for filterable mode
+        const calculateSuggestions = () => {
+            const { filterMethod, showAllLevels, separator, props: cascaderProps } = props;
+            if (!panelRef.get())
+                return;
+            const searchKeywordValue = multiple.get() ? searchInputValue.get() : inputValue.get();
+            const res = panelRef.get()
+                .getFlattedNodes?.(!cascaderProps?.checkStrictly)
+                ?.filter((node) => {
+                if (node.isDisabled)
+                    return false;
+                node.calcText(showAllLevels ?? true, separator || ' / ');
+                return filterMethod ? filterMethod(node, searchKeywordValue) : node.text.includes(searchKeywordValue);
+            });
+            if (multiple.get()) {
+                // Reset hitState for all tags
+                tags.get().forEach((tag) => {
+                    tag.hitState = false;
+                });
+            }
+            filtering.set(true);
+            suggestions.set(res || []);
+            nextTick(() => {
+                // TODO: scrollToItem for virtual scroll
+                // if (props.virtualScroll && suggestions.get().length > 0) {
+                //   suggestionVirtualListRef.value?.scrollToItem(0);
+                // }
+                // updateStyle();
+            });
+            // Update popper position
+            nextTick(() => {
+                tooltipRef.get()?.updatePopper?.();
+            });
+        };
+        // Debounced filter handler
+        const debounceTime = computed(() => props.debounce ?? 300);
+        const handleFilter = useDebounceFn(() => {
+            const searchKeywordValue = multiple.get() ? searchInputValue.get() : inputValue.get();
+            if (!searchKeywordValue)
+                return;
+            const passed = props.beforeFilter ? props.beforeFilter(searchKeywordValue) : true;
+            if (passed && typeof passed.then === 'function') {
+                // Promise-based beforeFilter
+                passed.then(calculateSuggestions).catch(() => {
+                    /* prevent log error */
+                });
+            }
+            else if (passed !== false) {
+                calculateSuggestions();
+            }
+            else {
+                // Hide suggestion panel
+                filtering.set(false);
+            }
+        }, debounceTime);
+        // Handle input - P0 fix: complete implementation
+        const handleInput = (val, e) => {
+            // Open popper if not visible
+            if (!popperVisible.get()) {
+                togglePopperVisible(true);
+            }
+            // Skip if composing
+            if (e?.isComposing)
+                return;
+            if (val) {
+                handleFilter();
+            }
+            else {
+                const passed = props.beforeFilter ? props.beforeFilter('') : true;
+                if (passed && typeof passed.then === 'function') {
+                    passed.catch(() => {
+                        /* prevent log error */
+                    });
+                }
+                // Hide suggestion panel
+                filtering.set(false);
+            }
+        };
+        // Handle keydown
+        const handleKeyDown = (e) => {
+            if (isComposingSignal.get())
+                return;
+            const code = e.code;
+            switch (code) {
+                case EVENT_CODE.enter:
+                case EVENT_CODE.numpadEnter:
+                    togglePopperVisible();
+                    break;
+                case EVENT_CODE.down:
+                    togglePopperVisible(true);
+                    e.preventDefault();
+                    break;
+                case EVENT_CODE.esc:
+                    if (popperVisible.get()) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        togglePopperVisible(false);
+                    }
+                    break;
+                case EVENT_CODE.tab:
+                    togglePopperVisible(false);
+                    break;
+            }
+        };
+        // Handle tag close - deleteTag - P0 fix: match Element Plus exactly
+        const handleTagClose = (tagNode) => {
+            if (!panelRef.get())
+                return;
+            // Uncheck the node (Element Plus L608-L613)
+            tagNode.doCheck(false);
+            panelRef.get().calculateCheckedValue?.();
+            // Emit removeTag event
+            emit(this, 'removeTag', tagNode.valueByOption);
+        };
+        // Handle suggestion click - P0 implementation
+        const handleSuggestionClick = (node) => {
+            const { checked } = node;
+            if (multiple.get()) {
+                // Multiple mode: toggle check state
+                panelRef.get()?.handleCheckChange?.(node, !checked, false);
+            }
+            else {
+                // Single mode: select and close
+                if (!checked) {
+                    panelRef.get()?.handleCheckChange?.(node, true, false);
+                }
+                togglePopperVisible(false);
+            }
+        };
+        // Handle delete key for removing last tag - P1 (will implement in next step)
+        const handleDelete = () => {
+            const lastTag = tags.get()[tags.get().length - 1];
+            pressDeleteCount.set(searchInputValue.get() ? 0 : pressDeleteCount.get() + 1);
+            if (!lastTag ||
+                !pressDeleteCount.get() ||
+                (props.collapseTags && tags.get().length > 1)) {
+                return;
+            }
+            if (lastTag.hitState) {
+                handleTagClose(lastTag.node);
+            }
+            else {
+                lastTag.hitState = true;
+            }
+        };
+        // ========== Watchers ==========
+        // Handle click outside - Element Plus L559-L565
+        const handleClickOutside = (event) => {
+            if (focusedState.get()) {
+                const _event = new FocusEvent('blur', event);
+                handleBlur(_event); // Use useFocusController's handleBlur
+            }
+            togglePopperVisible(false);
+        };
+        // Listen to panel changes - update checkedNodes and tags
+        effect(() => {
+            if (panelRef.get()) {
+                syncLocalState();
+            }
+        });
+        // Sync checkedNodes and tags from panel to local state
+        const syncLocalState = () => {
+            const panel = panelRef.get();
+            if (!panel)
+                return;
+            const nodes = panel.getCheckedNodes?.(true) || [];
+            checkedNodes.set(nodes);
+            // Calculate present tags for multiple mode
+            calculatePresentTags();
+        };
+        // Calculate present tags
+        const calculatePresentTags = () => {
+            if (!multiple.get())
+                return;
+            const nodes = getStrategyCheckedNodes();
+            const allTags = [];
+            nodes.forEach((node) => {
+                allTags.push(genTag(node));
+            });
+            tags.set(allTags);
+        };
+        // Generate tag object
+        const genTag = (node) => {
+            const { showAllLevels, separator } = props;
+            return {
+                node,
+                key: node.uid,
+                text: node.calcText(showAllLevels ?? true, separator || ' / '),
+                hitState: false,
+                closable: !isDisabled.get() && !node.isDisabled,
+            };
+        };
+        // Get strategy checked nodes
+        const getStrategyCheckedNodes = () => {
+            switch (props.showCheckedStrategy) {
+                case 'child':
+                    return checkedNodes.get();
+                case 'parent': {
+                    const clickedNodes = panelRef.get()?.getCheckedNodes?.(false) || [];
+                    const clickedNodesValue = clickedNodes.map((o) => o.value);
+                    const parentNodes = clickedNodes.filter((o) => !o.parent || !clickedNodesValue.includes(o.parent.value));
+                    return parentNodes;
+                }
+                default:
+                    // Default strategy: show all checked nodes (same as 'child')
+                    return checkedNodes.get();
+            }
+        };
+        // Watch for external value changes
+        // Watch external modelValue changes - Element Plus L521-L534
+        watch(() => props?.vModel?.get(), (newVal) => {
+            // Push external (controlled) value changes down into the panel so that
+            // checked nodes, tags and the input rendering stay in sync.
+            const panel = panelRef.get();
+            if (panel) {
+                panel.setValue?.(newVal);
+                // Directly sync local state (checkedNodes + tags) from the panel,
+                // matching the same pattern used by td-select. This ensures tags
+                // update reliably even when the effect tracker may not fire.
+                syncLocalState();
+            }
+        });
+        // Watch filtering to update popper position
+        watch(filtering, () => {
+            nextTick(() => {
+                tooltipRef.get()?.updatePopper?.();
+            });
+        });
+        // Watch tags to update style
+        watch(tags, () => {
+            nextTick(() => {
+                updateStyle();
+            });
+        });
+        // Watch presentText to sync input value
+        watch(presentText, syncPresentTextValue, { immediate: true });
+        // Watch popperVisible for lazy loading
+        watch(popperVisible, (val) => {
+            if (val && props.props?.lazy && props.props?.lazyLoad) {
+                panelRef.get()?.loadLazyRootNodes?.();
+            }
+        });
+        // ========== Helper Functions ==========
+        // Get suggestion panel element - Element Plus L669-L672
+        const getSuggestionPanelEl = (selector) => {
+            const el = suggestionPanel.get()?.$el;
+            if (!el)
+                return undefined;
+            if (selector) {
+                const found = el.querySelector(selector);
+                return found ? found : undefined;
+            }
+            return el;
+        };
+        // Update suggestion panel width - Element Plus L696-L732
+        const updateSuggestionPanelWidth = (inputWidth) => {
+            const suggestionPanelEl = getSuggestionPanelEl();
+            if (!suggestionPanelEl)
+                return;
+            const panelWidth = typeof props.fitInputWidth === 'number'
+                ? `${props.fitInputWidth}px`
+                : `${inputWidth}px`;
+            const setPanelStyle = (el) => {
+                if (props.fitInputWidth !== false) {
+                    el.style.width = panelWidth;
+                    el.style.minWidth = '';
+                }
+                else {
+                    el.style.width = '';
+                    el.style.minWidth = panelWidth;
+                }
+            };
+            setPanelStyle(suggestionPanelEl);
+            // TODO: Virtual scroll support
+            // if (props.virtualScroll) {
+            //   suggestionListWidth.value = ...
+            //   return;
+            // }
+            const suggestionList = getSuggestionPanelEl(`.${nsCascader.e('suggestion-list')}`);
+            if (suggestionList) {
+                setPanelStyle(suggestionList);
+            }
+        };
+        // Update input and tag wrapper styles - Element Plus L747-L766
+        const updateStyle = () => {
+            const inputComponent = inputRef.get();
+            if (!inputComponent)
+                return;
+            const inputInner = inputComponent.input?.get();
+            const inputWrapper = inputComponent.$el;
+            if (!inputInner || !inputWrapper)
+                return;
+            // Update suggestion panel width - Element Plus L752-L754
+            updateSuggestionPanelWidth(inputWrapper.getBoundingClientRect().width);
+            // Update tag wrapper height and position - Element Plus L756-L765
+            // Note: tagWrapper is not directly accessible in TypeDOM,
+            // but we can adjust input height based on tags count
+            // TODO: get tagWrapper ref and update its style
+            // const tagWrapperEl = tagWrapper.value;
+            // if (tagWrapperEl) {
+            //   const height =
+            //     tags.get().length > 0
+            //       ? `${Math.max(tagWrapperEl.offsetHeight, inputInitialHeight) - 2}px`
+            //       : `${inputInitialHeight}px`;
+            //   inputInner.style.height = height;
+            //   tagWrapperEl.style.left = `${getTagWrapperLeft()}px`;
+            // }
+            if (multiple.get() && tags.get().length > 0) {
+                // Use the actual rendered tags container height instead of a rough
+                // estimate, so the input wrapper grows correctly for multi-line tags.
+                const tagsEl = tagsRef.get()?.dom;
+                const baseHeight = inputInitialHeight || 32;
+                const tagHeight = tagsEl ? tagsEl.offsetHeight : baseHeight;
+                const newHeight = Math.max(tagHeight + 2, baseHeight);
+                if (inputInner.style) {
+                    inputInner.style.height = `${newHeight}px`;
+                }
+                if (inputWrapper.style) {
+                    inputWrapper.style.height = `${newHeight}px`;
+                }
+            }
+            else {
+                // Reset to initial height
+                if (inputInner.style) {
+                    inputInner.style.height = `${inputInitialHeight}px`;
+                }
+                if (inputWrapper.style) {
+                    inputWrapper.style.height = `${inputInitialHeight}px`;
+                }
+            }
+            // Update popper position
+            updatePopperPosition();
+        };
+        // Update popper position - Element Plus L588-L592
+        const updatePopperPosition = () => {
+            nextTick(() => {
+                tooltipRef.get()?.updatePopper?.();
+            });
+        };
+        // Handle suggestion keydown navigation - Element Plus L876-L919
+        const handleSuggestionKeyDown = (e) => {
+            const target = e.target;
+            const code = e.code;
+            switch (code) {
+                case EVENT_CODE.up:
+                case EVENT_CODE.down: {
+                    e.preventDefault();
+                    const distance = code === EVENT_CODE.up ? -1 : 1;
+                    // TODO: Virtual scroll navigation
+                    // if (props.virtualScroll && suggestionVirtualListRef.get()) {
+                    //   const currentIndex = getSuggestionIndexFromTarget(target);
+                    //   if (currentIndex >= 0) {
+                    //     const length = suggestions.get().length;
+                    //     const targetIndex = (currentIndex + distance + length) % length;
+                    //     suggestionVirtualListRef.get().scrollToItem(targetIndex);
+                    //     nextTick(() => {
+                    //       const targetItem = document.querySelector(
+                    //         `#suggestion-${suggestions.get()[targetIndex].uid}`
+                    //       );
+                    //       targetItem && (targetItem as HTMLElement).focus();
+                    //     });
+                    //     return;
+                    //   }
+                    // }
+                    // Use DOM-based navigation (simplified version)
+                    // Find all suggestion items
+                    const suggestionPanel = target.closest(`.${nsCascader.e('suggestion-panel')}`);
+                    if (suggestionPanel) {
+                        const items = Array.from(suggestionPanel.querySelectorAll(`.${nsCascader.e('suggestion-item')}`));
+                        const currentIndex = items.indexOf(target);
+                        if (currentIndex >= 0) {
+                            const newIndex = (currentIndex + distance + items.length) % items.length;
+                            items[newIndex]?.focus();
+                        }
+                    }
+                    break;
+                }
+                case EVENT_CODE.enter:
+                case EVENT_CODE.numpadEnter:
+                    target.click();
+                    break;
+            }
+        };
+        // Focus the input element
+        const focus = () => {
+            inputRef.get()?.focus?.();
+        };
+        // Blur the input element
+        const blur = () => {
+            inputRef.get()?.blur?.();
+        };
+        // Get checked nodes
+        const getCheckedNodes = (leafOnly) => {
+            return panelRef.get()?.getCheckedNodes?.(leafOnly);
+        };
+        // ========== Lifecycle hooks ==========
+        onMounted(() => {
+            // Initialize input height and resize observer
+            const inputComponent = inputRef.get();
+            if (inputComponent && inputComponent.input) {
+                const inputInner = inputComponent.input.get();
+                const inputWrapper = inputComponent.$el;
+                if (inputInner && inputWrapper) {
+                    inputInitialHeight = inputInner.offsetHeight || 32;
+                    // Watch wrapper resize to update style
+                    useResizeObserver(inputWrapper, () => {
+                        updateStyle();
+                    });
+                }
+            }
+            // Setup click outside handler - Element Plus L22
+            onClickOutside(contentRef, handleClickOutside);
+        });
+        onBeforeUnmount(() => {
+            // Cleanup
+            // ResizeObserver will be automatically cleaned up by useResizeObserver
+        });
+        // ========== Expose methods (defineExpose) ==========
+        // Assign exposed methods and properties to class fields
+        this.getCheckedNodes = getCheckedNodes;
+        this.cascaderPanelRef = computed(() => panelRef.get() ?? null);
+        this.togglePopperVisible = togglePopperVisible;
+        this.contentRef = contentRef;
+        this.presentText = presentText;
+        this.focus = focus;
+        this.blur = blur;
+        // ========== Build UI (at the end of setup) ==========
+        // Element Plus template root is <el-tooltip>, so we inherit Fragment
+        // and directly add TdTooltip as child (TMPL-008 rule)
+        // All children are built declaratively in slot, no intermediate variables
+        this.addChild(new TdTooltip({
+            refEl: tooltipRef,
+            visible: popperVisible,
+            teleported: props.teleported ?? true,
+            popperClass: [nsCascader.e('dropdown'), props.popperClass],
+            popperStyle: props.popperStyle,
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: 'arrowPosition',
+                        enabled: true,
+                        phase: 'main',
+                        fn: ({ state }) => {
+                            const { modifiersData, placement } = state;
+                            if (['right', 'left', 'bottom', 'top'].includes(placement))
+                                return;
+                            if (modifiersData.arrow) {
+                                modifiersData.arrow.x = 35;
+                            }
+                        },
+                        requires: ['arrow'],
+                    },
+                ],
+            },
+            fallbackPlacements: props.fallbackPlacements ?? [
+                'bottom-start',
+                'bottom',
+                'top-start',
+                'top',
+                'right',
+                'left',
+            ],
+            stopPopperMouseEvent: false,
+            gpuAcceleration: false,
+            placement: props.placement ?? 'bottom-start',
+            transition: `${nsCascader.namespace.get()}-zoom-in-top`,
+            effect: props.effect ?? 'light',
+            pure: true,
+            persistent: props.persistent ?? true,
+            onHide: () => {
+                // hideSuggestionPanel - Element Plus L593-L595
+                filtering.set(false);
+            },
+            // #default slot: wrapper div with input and tags - Element Plus L20-L155
+            slot: new Div({
+                refEl: wrapperRef, // Element Plus L21
+                // 对齐 Element Plus：cascader.vue 第 542 行 cascaderKls 含 attrs.class，
+                // 根 wrapper 接收用户传入的 class；styleObj 同样落到根（inheritAttrs 透传）。
+                class: computed(() => [
+                    nsCascader.b(),
+                    nsCascader.m(props.size || 'default'),
+                    nsCascader.is('disabled', isDisabled.get()),
+                    nsCascader.is('focus', focusedState.get()),
+                    props.class,
+                ]),
+                styleObj: props.styleObj,
+                onClick: () => togglePopperVisible(readonly.get() ? undefined : true),
+                onKeyDown: handleKeyDown,
+                onMouseenter: () => inputHover.set(true),
+                onMouseleave: () => inputHover.set(false),
+                slot: [
+                    // Input component - Element Plus L30-L66
+                    new TdInput({
+                        refEl: inputRef,
+                        vModel: inputValue, // Get current value (Vue: v-model="inputValue")
+                        placeholder: currentPlaceholder,
+                        readonly: readonly.get(),
+                        disabled: isDisabled.get(),
+                        size: props.size,
+                        class: computed(() => nsCascader.e('input')),
+                        tabindex: multiple.get() && filterable.get() && !isDisabled.get() ? -1 : undefined,
+                        onInput: (val) => {
+                            inputValue.set(val);
+                            handleInput(val);
+                        },
+                        onFocus: (e) => {
+                            // useFocusController will handle isFocused state automatically
+                            emit(this, 'focus', e);
+                        },
+                        onBlur: (e) => {
+                            // useFocusController will handle isFocused state automatically
+                            emit(this, 'blur', e);
+                        },
+                        onCompositionstart: handleComposition,
+                        onCompositionupdate: handleComposition,
+                        onCompositionend: handleComposition,
+                        slots: {
+                            prefix: props.slots?.prefix,
+                            suffix: new Div({
+                                class: nsInput.e('icon'),
+                                slot: [
+                                    // Clear icon - Element Plus L49-L56
+                                    new Div({
+                                        vIf: clearBtnVisible,
+                                        key: 'clear',
+                                        class: [nsInput.e('icon'), nsCascader.e('clear')],
+                                        onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleClear(e);
+                                        },
+                                        slot: new ElCircleCloseSvg({
+                                            attrObj: {
+                                                width: '1em',
+                                                height: '1em',
+                                            },
+                                        }),
+                                    }),
+                                    // Arrow down icon - Element Plus L57-L64
+                                    new Div({
+                                        vIf: computed(() => !clearBtnVisible.get()),
+                                        key: 'arrow-down',
+                                        class: computed(() => [
+                                            nsInput.e('icon'),
+                                            nsCascader.e('arrow'),
+                                            nsCascader.is('reverse', popperVisible.get()),
+                                        ]),
+                                        onClick: (e) => {
+                                            e.stopPropagation();
+                                            togglePopperVisible();
+                                        },
+                                        slot: new ElArrowDownSvg({
+                                            attrObj: {
+                                                width: '1em',
+                                                height: '1em',
+                                            },
+                                        }),
+                                    }),
+                                ],
+                            }),
+                        },
+                    }),
+                    // Tags for multiple mode - Element Plus L68-L154
+                    // Use function slot to make the entire tags section reactive (transformSlot.ts L52-136)
+                    new Div({
+                        refEl: tagsRef,
+                        vIf: multiple,
+                        class: computed(() => [
+                            nsCascader.e('tags'),
+                            nsCascader.is('validate', validateState.get() === 'error'), // Element Plus L839
+                        ]),
+                        slot: () => [
+                            // Show visible tags - Element Plus L76-L90
+                            // Use vFor (same pattern as td-select) so that tag
+                            // children are reactively added/removed when showTagList changes.
+                            // A plain .map() inside a slot function only runs once on mount.
+                            new TdTag({
+                                vFor: { data: showTagList, toParams: (tag) => {
+                                        return {
+                                            type: props.tagType || 'info',
+                                            effect: props.tagEffect || 'light',
+                                            closable: !isDisabled.get() && !tag.node.isDisabled,
+                                            size: props.size === 'small' ? 'small' : 'default',
+                                            disableTransitions: true,
+                                            onClose: () => handleTagClose(tag.node),
+                                            slot: new Span({
+                                                slot: tag.text,
+                                            }),
+                                        };
+                                    } },
+                            }),
+                            // Collapse tag indicator - Element Plus L91-L140
+                            props.collapseTags && tags.get().length > (props.maxCollapseTags ?? 1)
+                                ? new TdTooltip({
+                                    refEl: tagTooltipRef,
+                                    disabled: computed(() => popperVisible.get() || !props.collapseTagsTooltip),
+                                    fallbackPlacements: ['bottom', 'top', 'right', 'left'],
+                                    placement: 'bottom',
+                                    popperClass: props.popperClass,
+                                    popperStyle: props.popperStyle,
+                                    effect: props.effect ?? 'light',
+                                    persistent: props.persistent ?? true,
+                                    slot: new TdTag({
+                                        closable: false,
+                                        size: props.size === 'small' ? 'small' : 'default',
+                                        type: props.tagType || 'info',
+                                        effect: props.tagEffect || 'light',
+                                        disableTransitions: true,
+                                        slot: new Span({
+                                            class: nsCascader.e('tags-text'),
+                                            slot: `+ ${tags.get().length - (props.maxCollapseTags ?? 1)}`,
+                                        }),
+                                    }),
+                                    slots: {
+                                        // 对齐 Element Plus L115-L138：v-for 在**内层** div(`collapse-tag`) 上，
+                                        // 外层 div(`collapse-tags`) 只是容器。vFor 必须挂在子项上，
+                                        // 否则容器自身会被复制 N 份（TMPL-002 常见错误 4）。
+                                        content: new Div({
+                                            class: nsCascader.e('collapse-tags'),
+                                            slot: new Div({
+                                                // `collapseTagList` is a computed — passing it as the `vFor`
+                                                // source keeps the collapsed `+N` list reactive when tags
+                                                // change (a `.get()` snapshot would freeze it at mount).
+                                                vFor: {
+                                                    data: collapseTagList,
+                                                    key: 'key',
+                                                    toParams: (tag) => ({
+                                                        class: nsCascader.e('collapse-tag'),
+                                                        slot: new TdTag({
+                                                            class: 'in-tooltip',
+                                                            type: props.tagType || 'info',
+                                                            size: props.size === 'small' ? 'small' : 'default',
+                                                            effect: props.tagEffect || 'light',
+                                                            hit: tag.hitState,
+                                                            closable: tag.closable,
+                                                            disableTransitions: true,
+                                                            onClose: () => handleTagClose(tag.node),
+                                                            slot: new Span({
+                                                                slot: tag.text,
+                                                            }),
+                                                        }),
+                                                    }),
+                                                },
+                                            }),
+                                        }),
+                                    },
+                                })
+                                : undefined,
+                            // Search input for filterable mode - Element Plus L141-L153
+                            filterable.get() && !isDisabled.get()
+                                ? new Input({
+                                    class: nsCascader.e('search-input'),
+                                    attrObj: {
+                                        type: 'text',
+                                        value: searchInputValue.get(), // Get current value (Vue: v-model="searchInputValue")
+                                    },
+                                    onInput: (e) => {
+                                        const target = e.target;
+                                        searchInputValue.set(target.value);
+                                        handleInput(target.value, e);
+                                    },
+                                    onClick: (e) => {
+                                        e.stopPropagation();
+                                        togglePopperVisible(true);
+                                    },
+                                    onKeyDown: (e) => {
+                                        if (e.code === EVENT_CODE.delete) {
+                                            handleDelete();
+                                        }
+                                    },
+                                    onCompositionstart: handleComposition,
+                                    onCompositionupdate: handleComposition,
+                                    onCompositionend: handleComposition,
+                                })
+                                : undefined,
+                        ],
+                    }),
+                ],
+            }),
+            // #content slot: Cascader Panel and Suggestion Panel - Element Plus L158-L268
+            slots: {
+                content: new Fragment({
+                    slot: [
+                        // Header slot - Element Plus L159-L161
+                        props.slots?.header
+                            ? new Div({
+                                class: nsCascader.e('header'),
+                                onClick: (e) => e.stopPropagation(),
+                                slot: props.slots.header,
+                            })
+                            : undefined,
+                        // Cascader panel (shown when not filtering) - Element Plus L162-L179
+                        new TdCascaderPanel({
+                            refEl: panelRef,
+                            vShow: computed(() => !filtering.get()),
+                            vModel: props.vModel,
+                            options: props.options,
+                            props: props.props,
+                            border: false,
+                            renderLabel: props.slots?.default,
+                            virtualScroll: props.virtualScroll,
+                            itemSize: props.itemSize,
+                            height: props.height,
+                            onExpandChange: (value) => {
+                                emit(this, 'expandChange', value);
+                                nextTick(() => {
+                                    tooltipRef.get()?.updatePopper?.();
+                                });
+                            },
+                            onUpdateModelValue: (value) => {
+                                // Propagate the panel's checked-value changes to the parent
+                                // (v-model) via `update:modelValue` and emit the standard
+                                // `change` event.
+                                emit(this, UPDATE_MODEL_EVENT, value);
+                                emit(this, CHANGE_EVENT, value);
+                                // Directly sync local state (checkedNodes + tags) from the
+                                // panel so the input correctly shows multi-selection tags.
+                                // This mirrors td-select's `setSelected()` pattern and avoids
+                                // relying solely on the `effect` tracker which may not fire
+                                // when the panel is lazily mounted inside the tooltip.
+                                syncLocalState();
+                            },
+                            onClose: () => {
+                                nextTick(() => togglePopperVisible(false));
+                            },
+                            slots: {
+                                empty: props.slots?.empty,
+                            },
+                        }),
+                        // Suggestion panel (shown when filtering) - Element Plus L180-L263
+                        filterable.get()
+                            ? new Fragment({
+                                vShow: filtering,
+                                slot: [
+                                    // Non-virtual scroll suggestion panel - Element Plus L181-L215
+                                    !props.virtualScroll
+                                        ? new Div({
+                                            refEl: suggestionPanel, // Element Plus L219
+                                            class: nsCascader.e('suggestion-panel'),
+                                            onKeyDown: handleSuggestionKeyDown, // Element Plus L189
+                                            slot: [
+                                                // EP: <li v-for="item in suggestions" :key="item.uid" ...>
+                                                // `suggestions` is a signal — passing it as the `vFor`
+                                                // source keeps the list reactive to filter changes (a
+                                                // `.get()` snapshot would freeze it at mount time).
+                                                new Div({
+                                                    vFor: {
+                                                        data: suggestions,
+                                                        key: 'uid',
+                                                        toParams: (item) => ({
+                                                            class: computed(() => [
+                                                                nsCascader.e('suggestion-item'),
+                                                                nsCascader.is('checked', item.checked),
+                                                            ]),
+                                                            onClick: () => {
+                                                                handleSuggestionClick(item);
+                                                            },
+                                                            slot: props.slots?.['suggestion-item']
+                                                                ? props.slots['suggestion-item'](item)
+                                                                : [
+                                                                    new Span({ slot: item.text }),
+                                                                    item.checked
+                                                                        ? new ElCheckSvg({
+                                                                            attrObj: { width: '1em', height: '1em' },
+                                                                        })
+                                                                        : undefined,
+                                                                ],
+                                                        }),
+                                                    },
+                                                }),
+                                                // No-match placeholder (EP: v-if="!suggestions.length")
+                                                new Div({
+                                                    vIf: computed(() => (suggestions.get() ?? []).length === 0),
+                                                    class: nsCascader.e('empty-text'),
+                                                    slot: props.slots?.empty ? props.slots.empty : t('el.cascader.noMatch'),
+                                                }),
+                                            ],
+                                        })
+                                        : undefined,
+                                    // TODO: Virtual scroll suggestion panel (FixedSizeList) - Element Plus L216-L263
+                                ],
+                            })
+                            : undefined,
+                        // Footer slot - Element Plus L265-L267
+                        props.slots?.footer
+                            ? new Div({
+                                class: nsCascader.e('footer'),
+                                onClick: (e) => e.stopPropagation(),
+                                slot: props.slots.footer,
+                            })
+                            : undefined,
+                    ],
+                }),
+            },
+        }));
+    }
+}
+//# sourceMappingURL=td-cascader.class.js.map