@type-dom/ui 0.6.0 → 0.9.0

package/dist/components/data/td-tree/td-tree-node/td-tree-node.class.js

@@ -0,0 +1,706 @@
+import { Div, addAttrClass, addAttrObj, addStyleObj, addEvents, inject, provide, nextTick, defaultProps, watch, onBeforeUnmount, onMounted, } from '@type-dom/framework';
+import { signal, computed } from '@type-dom/signals';
+import { ElCaretRightSvg, ElLoadingSvg } from '@type-dom/svgs';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import { getNodeKey as getNodeKeyUtil, handleCurrentChange } from '../model/util';
+import { useNodeExpandEventBroadcast } from '../model/useNodeExpandEventBroadcast';
+import { treeNodeProps } from '../td-tree.const';
+import { ROOT_TREE_INJECTION_KEY, NODE_INSTANCE_INJECTION_KEY } from '../tokens';
+import { dragEventsKey } from '../model/use-drag-node';
+import { TdTreeNodeContent } from '../td-tree-node-content/td-tree-node-content.class';
+import { TdCheckbox } from '../../../form/td-checkbox/td-checkbox.class';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
+import { TdCollapseTransition } from '../../td-collapse-transition/td-collapse-transition.class';
+// 内部 bridge：父节点需要触发子节点的 nodeStateChanged，
+// 因 Vue 的响应式是自动传播的，TypeDOM 的 signal 需要手动 bridge。
+// 使用 WeakMap 避免暴露为类属性（无 defineExpose）。
+const childTriggerMap = new WeakMap();
+export class TdTreeNode extends Div {
+    // 公共 API 字段：ITdTreeNode 接口声明 + use-drag-node 外部访问 require，必须作为类属性保留
+    // （等价于 Vue setup 中通过 defineExpose 暴露的变量）
+    node;
+    constructor(params = {}) {
+        super(params);
+        defaultProps(this, treeNodeProps);
+    }
+    setup() {
+        const props = this.props;
+        this.node = props.node;
+        // 内部局部引用：setup 内的闭包函数使用局部变量 node，避免重复 this.node
+        const node = this.node;
+        const tree = props.tree;
+        // DOM 已创建但未挂载，setup 阶段访问/赋值 DOM 不安全；
+        // 拖拽逻辑依赖 node.element 调用 getBoundingClientRect，统一在 onMounted 中赋值。
+        onMounted(() => {
+            node.element = this.dom;
+        });
+        // Vue: const ns = useNamespace('tree')
+        //   - ns.b('node')             => 'td-tree-node'
+        //   - ns.be('node', 'content') => 'td-tree-node__content'
+        //   - ns.be('node', 'expand-icon') => 'td-tree-node__expand-icon'
+        //   - ns.be('node', 'loading-icon')=> 'td-tree-node__loading-icon'
+        //   - ns.be('node', 'children')    => 'td-tree-node__children'
+        const ns = useNamespace('tree');
+        // Called for provide/inject side effects (accordion expand event broadcasting)
+        const { broadcastExpanded } = useNodeExpandEventBroadcast({
+            node,
+            accordion: props.accordion || false,
+        });
+        const rootTree = inject(ROOT_TREE_INJECTION_KEY);
+        const dragEvents = inject(dragEventsKey);
+        provide(NODE_INSTANCE_INJECTION_KEY, this);
+        // --- Setup local signals (mirrors Element Plus tree-node.vue refs) ---
+        // Not exposed via defineExpose → stay as setup() locals, not class fields.
+        const expanded = signal(false);
+        const childNodeRendered = signal(false);
+        // TypeDOM bridge signals: Node model properties are plain booleans (non-reactive),
+        // signals are needed to drive reactive UI updates.
+        const checked = signal(false);
+        const indeterminate = signal(false);
+        const loaded = signal(false);
+        const loading = signal(false);
+        const isLeaf = signal(false);
+        let oldChecked;
+        let oldIndeterminate;
+        // Sync initial state from Node model
+        expanded.set(node.expanded);
+        childNodeRendered.set(node.expanded);
+        checked.set(node.checked);
+        indeterminate.set(node.indeterminate);
+        loaded.set(node.loaded);
+        loading.set(node.loading);
+        isLeaf.set(node.isLeaf);
+        // TypeDOM bridge: Node model properties are plain booleans (non-reactive).
+        // These signals/closures drive reactive UI updates, replacing Vue's reactive system.
+        const nodeStateChanged = signal(0);
+        // Register callback: when Node finishes async load or other state change,
+        // re-sync from model → signals (fixes isLeaf/loading stale after setChecked-triggered load).
+        // Also handles accordion collapse: broadcastExpanded → node.collapse() → onAfterStateChange
+        // must sync `expanded` so the UI collapses (Vue does this via reactive node.expanded).
+        node.onAfterStateChange = () => {
+            loading.set(node.loading);
+            loaded.set(node.loaded);
+            expanded.set(node.expanded);
+            nodeStateChanged.set(nodeStateChanged.get() + 1);
+        };
+        // --- Local methods (closures, mirrors Element Plus tree-node.vue setup) ---
+        const getNodeKey = (targetNode) => {
+            return tree.props.nodeKey
+                ? getNodeKeyUtil(tree.props.nodeKey, targetNode.data)
+                : targetNode.id;
+        };
+        const getNodeClass = () => {
+            const nodeClassFunc = props.treeProps?.class;
+            if (!nodeClassFunc)
+                return {};
+            let className;
+            if (typeof nodeClassFunc === 'function') {
+            }
+            else {
+            }
+            if (typeof className === 'string') {
+                return { [className]: true };
+            }
+            return className;
+        };
+        // 接收子节点的 node-expand 事件（Vue 模板: @node-expand="handleChildNodeExpand"）
+        //   - 广播 accordion 折叠（broadcastExpanded）
+        //   - 向上转发 emit('node-expand', ...)
+        const handleChildNodeExpand = (childData, childNode, childInstance) => {
+            broadcastExpanded(childNode);
+            tree.emit('node-expand', childData, childNode, childInstance);
+        };
+        const handleSelectChange = (isChecked, isIndeterminate) => {
+            if (oldChecked !== isChecked || oldIndeterminate !== isIndeterminate) {
+                tree.emit('check-change', node.data, isChecked, isIndeterminate);
+            }
+            oldChecked = isChecked;
+            oldIndeterminate = isIndeterminate;
+        };
+        // 声明式构建子节点列表，每次 childNodes 变化时由 renderChildren/watch 重建
+        let childTreeNodes = [];
+        // 渲染当前节点的子节点树：
+        //  - 对应 Vue 模板中 <el-tree-node v-for="child in node.childNodes" :node="child">
+        //  - 根节点（td-tree.class.ts）不会经过这里，而是单独 new TdTreeNode 渲染
+        const buildChildTreeNodes = (parentContainer) => {
+            childTreeNodes = [];
+            node.childNodes.forEach((childNode) => {
+                const childTreeNode = new TdTreeNode({
+                    key: childNode.id,
+                    node: childNode,
+                    accordion: props.accordion,
+                    renderContent: props.renderContent,
+                    renderAfterExpand: props.renderAfterExpand,
+                    showCheckbox: props.showCheckbox,
+                    draggable: props.draggable,
+                    allowDrag: props.allowDrag,
+                    allowDrop: props.allowDrop,
+                    treeProps: props.treeProps,
+                    indent: props.indent,
+                    tree,
+                    onNodeExpand: handleChildNodeExpand,
+                });
+                childTreeNodes.push(childTreeNode);
+                parentContainer.addChild(childTreeNode);
+            });
+        };
+        // children 容器（renderAfterExpand 未通过时 children DOM 不生成，通过 v-if 控制）
+        //   - 对应 Vue: <el-collapse-transition><div v-if="... v-show="... class="...">
+        //        @click.stop
+        //        <el-tree-node ... @node-expand="handleChildNodeExpand" /></div>
+        //     </el-collapse-transition>
+        const childrenWrapper = new Div({
+            vIf: computed(() => !props.renderAfterExpand || childNodeRendered.get()),
+            vShow: computed(() => expanded.get()),
+            class: ns.be('node', 'children'),
+            attrObj: {
+                role: 'group',
+                'aria-expanded': expanded,
+            },
+            onClick: (e) => {
+                // Vue 模板: @click.stop
+                e.stopPropagation();
+            },
+        });
+        // 懒加载/首次展开时 挂载 children，后续通过 watch childNodes 重建
+        const mountChildrenNodes = () => {
+            // 清空现有子节点（保留 childrenWrapper 自身的 DOM 结构）
+            childrenWrapper.clearChildren();
+            childTreeNodes = [];
+            buildChildTreeNodes(childrenWrapper);
+            // addChild 只将子节点加入 childNodes 数组，不挂载 DOM。
+            // 当组件已挂载后动态添加的子节点需要手动 mount 到 childrenWrapper.dom。
+            if (childrenWrapper.dom) {
+                childTreeNodes.forEach((child) => {
+                    if (!child.isMounted) {
+                        child.mount(childrenWrapper.dom);
+                    }
+                });
+            }
+        };
+        const handleExpandIconClick = () => {
+            if (node.isLeaf)
+                return;
+            if (expanded.get()) {
+                tree.emit('node-collapse', node.data, node, this.dom);
+                node.collapse();
+                expanded.set(false);
+            }
+            else {
+                // Show loading indicator immediately (node.loading will be set inside expand→loadData)
+                if (node.shouldLoadData()) {
+                    loading.set(true);
+                }
+                node.expand(() => {
+                    // Vue: ctx.emit('node-expand', ...) → parent catches via @node-expand
+                    //   - root-level nodes: tree.vue's handleNodeExpand catches it
+                    //   - child nodes: parent tree-node's handleChildNodeExpand catches it
+                    //     (calls parent's broadcastExpanded to collapse siblings, NOT root's)
+                    // TypeDOM: use onNodeExpand callback (set by parent) instead of
+                    // calling tree.handleNodeExpand directly, which would incorrectly
+                    // trigger root tree's broadcastExpanded for child node expansions.
+                    if (props.onNodeExpand) {
+                        props.onNodeExpand(node.data, node, this.dom);
+                    }
+                    else {
+                        tree.handleNodeExpand(node.data, node, this.dom);
+                    }
+                    loaded.set(node.loaded);
+                    loading.set(node.loading);
+                    isLeaf.set(node.isLeaf);
+                    if (node.isLeaf) {
+                        expanded.set(false);
+                    }
+                    else {
+                        expanded.set(true);
+                        childNodeRendered.set(true);
+                        mountChildrenNodes();
+                    }
+                });
+            }
+        };
+        const handleCheckChange = (value) => {
+            const checkStrictly = tree.props.checkStrictly;
+            const childNodes = node.childNodes;
+            if (!checkStrictly && childNodes.length) {
+                value = childNodes.some((n) => !n.isEffectivelyChecked);
+            }
+            node.setChecked(value, !checkStrictly);
+            // Trigger re-sync from Node model → signals (self + descendants).
+            // Vue achieves this via reactivity on node.checked; TypeDOM uses
+            // nodeStateChanged as a bridge since Node properties are non-reactive.
+            triggerNodeStateChanged();
+            nextTick(() => {
+                const store = tree.store;
+                tree.emit('check', node.data, {
+                    checkedNodes: store.getCheckedNodes(),
+                    checkedKeys: store.getCheckedKeys(),
+                    halfCheckedNodes: store.getHalfCheckedNodes(),
+                    halfCheckedKeys: store.getHalfCheckedKeys(),
+                });
+            });
+        };
+        const handleClick = (event) => {
+            event.stopPropagation();
+            handleCurrentChange(tree.store, (e, ...args) => tree.emit(e, ...args), () => {
+                const nodeKeyProp = tree.props.nodeKey;
+                if (nodeKeyProp) {
+                    tree.store.setCurrentNodeKey(getNodeKey(node));
+                }
+                else {
+                    tree.store.setCurrentNode(node);
+                }
+            });
+            // Match Element Plus: update currentNode ref after handleCurrentChange
+            if (rootTree) {
+                rootTree.currentNode.set(node);
+            }
+            if (tree.props.expandOnClickNode) {
+                handleExpandIconClick();
+            }
+            if ((tree.props.checkOnClickNode ||
+                (node.isLeaf && tree.props.checkOnClickLeaf && props.showCheckbox)) &&
+                !node.disabled) {
+                handleCheckChange(!node.checked);
+            }
+            tree.emit('node-click', node.data, node, this.dom, event);
+        };
+        const handleContextMenu = (event) => {
+            // Match Element Plus: stopPropagation/preventDefault only when listener exists
+            if (tree.props.onNodeContextmenu) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            tree.emit('node-contextmenu', event, node.data, node, this.dom);
+        };
+        // --- 拖拽相关（setup 内闭包函数，对应 Vue setup 内的 handleDragStart/Over/Drop/End）---
+        const getDraggingNode = () => {
+            const treeEl = this.dom?.closest('.td-tree');
+            return treeEl?.__draggingNode || null;
+        };
+        const getDraggingNodeElement = () => {
+            return getDraggingNode()?.element || null;
+        };
+        const getDropPosition = (event) => {
+            const dropRect = this.dom?.getBoundingClientRect();
+            if (!dropRect || !event)
+                return 0;
+            const verticalMid = (dropRect.top + dropRect.bottom) / 2;
+            const isNearTop = event.clientY < verticalMid;
+            const draggingNodeEl = getDraggingNodeElement();
+            if (!draggingNodeEl)
+                return isNearTop ? -1 : 1;
+            const draggingRect = draggingNodeEl.getBoundingClientRect();
+            const draggingRectWidth = draggingRect.right - draggingRect.left;
+            const dropRectWidth = dropRect.right - dropRect.left;
+            if (Math.abs(draggingRectWidth - dropRectWidth) < 3 || node.childNodes.length === 0) {
+                return isNearTop ? -1 : 1;
+            }
+            const horizontalMid = (dropRect.left + dropRect.right) / 2;
+            const isNearLeft = event.clientX < horizontalMid;
+            return isNearLeft ? (isNearTop ? -1 : 1) : 0;
+        };
+        const createDropType = (dropPosition) => {
+            if (dropPosition === -1)
+                return 'before';
+            if (dropPosition === 0)
+                return 'inner';
+            return 'after';
+        };
+        const updateDropIndicator = (_event, dropType) => {
+            const dropEl = this.dom;
+            if (!dropEl)
+                return;
+            const treeEl = dropEl.closest(`.${ns.b('tree')}`);
+            if (!treeEl)
+                return;
+            const dropIndicator = treeEl.querySelector(`.${ns.e('drop-indicator')}`);
+            if (dropIndicator) {
+                const contentEl = dropEl.querySelector(`.${ns.be('node', 'content')}`);
+                const iconEl = dropEl.querySelector(`.${ns.be('node', 'expand-icon')}`);
+                if (contentEl && iconEl) {
+                    const treePosition = treeEl.getBoundingClientRect();
+                    const treeScrollTop = treeEl.scrollTop;
+                    const iconPosition = iconEl.getBoundingClientRect();
+                    let indicatorTop = -9999;
+                    if (dropType === 'before') {
+                        indicatorTop = iconPosition.top - treePosition.top + treeScrollTop;
+                    }
+                    else if (dropType === 'after') {
+                        indicatorTop = iconPosition.bottom - treePosition.top + treeScrollTop;
+                    }
+                    dropIndicator.style.top = `${indicatorTop}px`;
+                    dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
+                }
+            }
+        };
+        const handleDragOverFallback = (event) => {
+            const dropPosition = getDropPosition(event);
+            const dropType = createDropType(dropPosition);
+            let allowDropPrev = true;
+            let allowDropInner = true;
+            let allowDropNext = true;
+            if (typeof props.allowDrop === 'function') {
+                const draggingNode = getDraggingNode();
+                if (draggingNode) {
+                    allowDropPrev = props.allowDrop(draggingNode, node, 'prev');
+                    allowDropInner = props.allowDrop(draggingNode, node, 'inner');
+                    allowDropNext = props.allowDrop(draggingNode, node, 'next');
+                }
+            }
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect =
+                    allowDropInner || allowDropPrev || allowDropNext ? 'move' : 'none';
+            }
+            const draggingNode = getDraggingNode();
+            if (!draggingNode)
+                return;
+            const treeEl = this.dom?.closest('.td-tree');
+            const oldDropNode = treeEl?.__dropNode || null;
+            if (oldDropNode && oldDropNode.id !== node.id) {
+                this.dom?.dispatchEvent(new CustomEvent('node-drag-leave', {
+                    detail: { draggingNode, oldDropNode, evt: event },
+                    bubbles: true,
+                }));
+            }
+            if ((allowDropPrev || allowDropInner || allowDropNext) &&
+                (!oldDropNode || oldDropNode.id !== node.id)) {
+                this.dom?.dispatchEvent(new CustomEvent('node-drag-enter', {
+                    detail: { draggingNode, dropNode: node, evt: event },
+                    bubbles: true,
+                }));
+            }
+            if (node.nextSibling === draggingNode)
+                allowDropNext = false;
+            if (node.previousSibling === draggingNode)
+                allowDropPrev = false;
+            if (node.contains(draggingNode, false))
+                allowDropInner = false;
+            if (draggingNode === node || draggingNode.contains(node)) {
+                allowDropPrev = false;
+                allowDropInner = false;
+                allowDropNext = false;
+            }
+            if (treeEl) {
+                treeEl.__dropNode = allowDropPrev || allowDropInner || allowDropNext ? node : null;
+            }
+            updateDropIndicator(event, dropType);
+            this.dom?.dispatchEvent(new CustomEvent('node-drag-over', {
+                detail: { draggingNode, dropNode: node, evt: event },
+                bubbles: true,
+            }));
+        };
+        const bindDragEvents = () => {
+            addEvents(this, {
+                dragstart: (event) => {
+                    if (!event)
+                        return;
+                    if (!props.draggable || node.disabled) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (props.allowDrag && !props.allowDrag(node)) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.dataTransfer) {
+                        event.dataTransfer.effectAllowed = 'move';
+                        event.dataTransfer.setData('text/plain', '');
+                    }
+                    if (dragEvents) {
+                        dragEvents.treeNodeDragStart(event, this);
+                    }
+                    else {
+                        this.dom?.dispatchEvent(new CustomEvent('node-drag-start', {
+                            detail: { node, evt: event },
+                            bubbles: true,
+                        }));
+                    }
+                },
+                dragover: (event) => {
+                    if (!event)
+                        return;
+                    event.preventDefault();
+                    if (!props.draggable)
+                        return;
+                    if (dragEvents) {
+                        dragEvents.treeNodeDragOver(event, this);
+                    }
+                    else {
+                        handleDragOverFallback(event);
+                    }
+                },
+                drop: (event) => {
+                    if (!event)
+                        return;
+                    event.preventDefault();
+                    const dropPosition = getDropPosition(event);
+                    const dropType = createDropType(dropPosition);
+                    const draggingNode = getDraggingNode();
+                    if (draggingNode && typeof props.allowDrop === 'function') {
+                        const allowDropType = dropType === 'before' ? 'prev' : dropType === 'after' ? 'next' : 'inner';
+                        if (!props.allowDrop(draggingNode, node, allowDropType))
+                            return;
+                    }
+                    this.dom?.dispatchEvent(new CustomEvent('node-drop', {
+                        detail: { draggingNode, dropNode: node, dropPosition, dropType },
+                        bubbles: true,
+                    }));
+                },
+                dragend: (event) => {
+                    if (!event)
+                        return;
+                    if (dragEvents) {
+                        dragEvents.treeNodeDragEnd(event);
+                    }
+                    else {
+                        const treeEl = this.dom?.closest('.td-tree');
+                        const dropNode = treeEl?.__dropNode || null;
+                        this.dom?.dispatchEvent(new CustomEvent('node-drag-end', {
+                            detail: {
+                                node,
+                                dropNode,
+                                dropType: dropNode ? getDropPosition(event) : 'none',
+                            },
+                            bubbles: true,
+                        }));
+                    }
+                },
+            });
+        };
+        // --- Build component tree (template equivalent) ---
+        // Vue 模板根节点：
+        //   <div
+        //     v-show="node.visible"
+        //     :class="[
+        //       [
+        //         ns.b('node'),
+        //         ns.is('expanded', expanded),
+        //         ns.is('current', node.isCurrent),
+        //         ns.is('hidden', !node.visible),
+        //         ns.is('focusable', !node.disabled),
+        //         ns.is('checked', !node.disabled && checked),
+        //         getNodeClass(),
+        //       ],
+        //     ]"
+        //   >
+        const nodeKls = computed(() => {
+            nodeStateChanged.get(); // dependency tracking
+            const classes = [ns.b('node')];
+            if (expanded.get())
+                classes.push(ns.is('expanded', true));
+            if (node.isCurrent)
+                classes.push(ns.is('current', true));
+            if (!node.disabled)
+                classes.push(ns.is('focusable', true));
+            if (!node.disabled && checked.get())
+                classes.push(ns.is('checked', true));
+            const nodeClass = getNodeClass();
+            for (const key in nodeClass) {
+                if (nodeClass[key])
+                    classes.push(key);
+            }
+            return classes;
+        });
+        // Vue:
+        //   <el-icon :class="[ns.be('node', 'expand-icon'), ns.is('leaf', node.isLeaf), { expanded: !node.isLeaf && expanded }]" />
+        const expandIconKls = computed(() => {
+            nodeStateChanged.get(); // dependency tracking
+            const classes = [ns.be('node', 'expand-icon')];
+            const leaf = isLeaf.get();
+            if (leaf)
+                classes.push(ns.is('leaf', true));
+            if (!leaf && expanded.get())
+                classes.push(ns.is('expanded', true));
+            return classes;
+        });
+        // 加载图标类
+        const loadingIconKls = computed(() => [ns.be('node', 'loading-icon'), ns.is('loading', true)]);
+        // --- 根节点的可见性 + 响应式类 + 属性
+        //   Vue: <div v-show="node.visible" ...>
+        //   Node.visible 是非响应式字段，filter 时通过 onAfterStateChange 桥触发本组件的
+        //   nodeStateChanged 信号；这里用 computed 读取它以建立依赖，并通过 addStyleObj
+        //   的响应式样式机制等价还原 Vue 的 v-show 显示/隐藏。
+        const selfVisible = computed(() => {
+            nodeStateChanged.get();
+            return node.visible ? '' : 'none';
+        });
+        addStyleObj(this, { display: selfVisible });
+        addAttrClass(this, nodeKls);
+        addAttrObj(this, {
+            role: 'treeitem',
+            tabindex: '-1',
+            'aria-expanded': expanded,
+            'aria-disabled': computed(() => node.disabled),
+            'aria-checked': checked,
+            'data-key': getNodeKey(node),
+        });
+        // Match Element Plus: draggable attribute and drag events are always bound
+        addAttrObj(this, { draggable: props.draggable });
+        bindDragEvents();
+        addEvents(this, {
+            click: (event) => handleClick(event),
+            contextmenu: (event) => handleContextMenu(event),
+        });
+        // --- Content children ---
+        const contentChildren = [];
+        // 自定义展开图标 / 默认 ElCaretRightSvg
+        // Vue:
+        //   <el-icon v-if="tree.props.icon || CaretRight" :class="..." @click.stop="handleExpandIconClick">
+        //     <component :is="tree.props.icon || CaretRight" />
+        //   </el-icon>
+        const IconComp = tree.props.icon || ElCaretRightSvg;
+        const expandIconSlot = typeof IconComp === 'string' ? IconComp : new IconComp();
+        const expandIconEl = new TdIcon({
+            slot: expandIconSlot,
+            onClick: (e) => {
+                e.stopPropagation();
+                handleExpandIconClick();
+            },
+        });
+        addAttrClass(expandIconEl, expandIconKls);
+        contentChildren.push(expandIconEl);
+        // Checkbox
+        // Vue: <el-checkbox :model-value="node.checked" :indeterminate="..." :disabled="..." @change="..." />
+        // TypeDOM: TdCheckbox 的 vModel 接受 Ref，内部通过 computed 监听 vModel.get()
+        //   使用 computed(() => node.checked) 把 Node model 的非响应式值桥接到 signal 响应式系统
+        if (props.showCheckbox) {
+            contentChildren.push(new TdCheckbox({
+                // 单向绑定（Vue 用 :model-value，不用 v-model）
+                //   computed 依赖 nodeStateChanged 用于强制刷新
+                vModel: computed(() => {
+                    nodeStateChanged.get(); // 依赖
+                    return node.checked;
+                }),
+                indeterminate: computed(() => {
+                    nodeStateChanged.get();
+                    return node.indeterminate;
+                }),
+                disabled: node.disabled,
+                onClick: (e) => {
+                    e.stopPropagation();
+                },
+                onChange: (newValue) => {
+                    if (!node.disabled) {
+                        handleCheckChange(newValue);
+                    }
+                },
+            }));
+        }
+        // Loading icon
+        // Vue:
+        //   <el-icon v-if="node.loading" :class="[ns.be('node', 'loading-icon'), ns.is('loading')]">
+        //     <loading />
+        //   </el-icon>
+        const loadingIconEl = new TdIcon({
+            vIf: loading,
+        });
+        loadingIconEl.addChild(new ElLoadingSvg());
+        addAttrClass(loadingIconEl, loadingIconKls);
+        contentChildren.push(loadingIconEl);
+        // Node content (label + custom render)
+        contentChildren.push(new TdTreeNodeContent({
+            node,
+            renderContent: props.renderContent,
+        }));
+        // 内容包装器：
+        //   Vue: <div :class="ns.be('node', 'content')" :style="{ paddingLeft: ... }">
+        this.addChild(new Div({
+            class: [ns.be('node', 'content')],
+            // TMPL-010: 响应式样式：styleObj 传入 signal/computed 对象本身，不要 .get()
+            styleObj: {
+                paddingLeft: computed(() => `${(node.level - 1) * (props.indent || 18)}px`),
+            },
+            slot: contentChildren,
+        }));
+        // children 用 TdCollapseTransition 包裹（折叠动画）
+        this.addChild(new TdCollapseTransition({
+            slot: childrenWrapper,
+        }));
+        // Initial children render（初始化时若节点已展开或者 renderAfterExpand=false，
+        // 先挂载 children DOM
+        if (node.childNodes.length > 0 && (!props.renderAfterExpand || childNodeRendered.get())) {
+            mountChildrenNodes();
+        }
+        // --- Watchers (mirrors Element Plus tree-node.vue watchers) ---
+        // childrenKey watch: call node.updateChildren() when children data changes
+        // (matches Vue: watch(() => props.node.data?.[childrenKey], () => node.updateChildren()))
+        const childrenKey = tree.props.props?.children || 'children';
+        watch(() => {
+            const children = node.data?.[childrenKey];
+            return children ? [...children] : null;
+        }, () => {
+            node.updateChildren();
+            isLeaf.set(node.isLeaf);
+            if (expanded.get()) {
+                mountChildrenNodes();
+            }
+        });
+        // Sync Node model → signals via nodeStateChanged bridge.
+        // Vue uses reactive watch(() => props.node.indeterminate, ...);
+        // TypeDOM uses nodeStateChanged signal since Node properties are non-reactive.
+        watch(() => {
+            nodeStateChanged.get();
+            return node.indeterminate;
+        }, (val) => {
+            indeterminate.set(val);
+            handleSelectChange(node.checked, val);
+        });
+        watch(() => {
+            nodeStateChanged.get();
+            return node.checked;
+        }, (val) => {
+            checked.set(val);
+            handleSelectChange(val, node.indeterminate);
+        });
+        watch(() => {
+            nodeStateChanged.get();
+            return node.expanded;
+        }, (val) => {
+            nextTick(() => expanded.set(val));
+            if (val) {
+                childNodeRendered.set(true);
+                mountChildrenNodes();
+            }
+        });
+        watch(() => {
+            nodeStateChanged.get();
+            return node.isLeaf;
+        }, (val) => {
+            isLeaf.set(!!val);
+        });
+        watch(() => {
+            nodeStateChanged.get();
+            return node.loading;
+        }, (val) => {
+            loading.set(!!val);
+        });
+        watch(() => {
+            nodeStateChanged.get();
+            return node.loaded;
+        }, (val) => {
+            loaded.set(!!val);
+        });
+        // Watch childNodes.length for reInitChecked (matches Vue)
+        watch(() => {
+            nodeStateChanged.get();
+            return node.childNodes.length;
+        }, () => {
+            node.reInitChecked();
+        });
+        // Trigger re-sync from Node model → signals on this node and all descendants.
+        // Replaces Vue's reactive propagation: when node.setChecked() modifies
+        // child nodes, each child's watch fires automatically. In TypeDOM we
+        // manually trigger nodeStateChanged via WeakMap bridge.
+        const triggerNodeStateChanged = () => {
+            nodeStateChanged.set(nodeStateChanged.get() + 1);
+            childTreeNodes.forEach((child) => childTriggerMap.get(child)?.());
+        };
+        childTriggerMap.set(this, triggerNodeStateChanged);
+        // 清理：组件卸载时清除 WeakMap 引用，避免内存泄漏
+        onBeforeUnmount(() => {
+            childTriggerMap.delete(this);
+        });
+    }
+}
+//# sourceMappingURL=td-tree-node.class.js.map