huibo-ui 0.3.0

package/dist/collection/components/Tree/tree.css

@@ -0,0 +1,132 @@
+:host {
+  display: block;
+}
+
+.hb-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--hb-font-size-base);
+  color: var(--hb-color-text);
+  background-color: var(--hb-color-bg-container);
+  box-sizing: border-box;
+}
+
+.hb-tree__children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.hb-tree__node {
+  list-style: none;
+  white-space: nowrap;
+}
+
+.hb-tree__node-content {
+  display: flex;
+  align-items: center;
+  gap: var(--hb-spacing-xxs);
+  height: 28px;
+  padding-right: var(--hb-spacing-xs);
+  border-radius: var(--hb-border-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--hb-transition-duration, 0.2s) var(--hb-transition-function, ease);
+  box-sizing: border-box;
+}
+
+.hb-tree__node-content:hover {
+  background-color: var(--hb-color-fill-tertiary);
+}
+
+.hb-tree__node-content--selected {
+  background-color: var(--hb-color-primary-bg);
+}
+
+.hb-tree__node--disabled > .hb-tree__node-content {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.hb-tree__node--disabled > .hb-tree__node-content:hover {
+  background-color: transparent;
+}
+
+.hb-tree__switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--hb-color-text-tertiary);
+}
+
+.hb-tree__arrow {
+  font-size: 10px;
+  display: inline-block;
+  transition: transform var(--hb-transition-duration, 0.2s);
+}
+
+.hb-tree__arrow--expanded {
+  transform: rotate(90deg);
+}
+
+.hb-tree--show-line .hb-tree__switcher {
+  color: var(--hb-color-border);
+}
+
+.hb-tree__line-dot {
+  width: 6px;
+  height: 6px;
+  border-left: 1px solid var(--hb-color-border);
+  border-bottom: 1px solid var(--hb-color-border);
+  border-bottom-left-radius: var(--hb-border-radius-sm);
+}
+
+.hb-tree__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--hb-color-border);
+  border-radius: var(--hb-border-radius-xs, 2px);
+  background-color: var(--hb-color-bg-container);
+  color: #fff;
+  font-size: 11px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: all var(--hb-transition-duration, 0.2s);
+}
+
+.hb-tree__checkbox:hover:not(.hb-tree__checkbox--disabled) {
+  border-color: var(--hb-color-primary);
+}
+
+.hb-tree__checkbox--checked {
+  background-color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+}
+
+.hb-tree__checkbox--indeterminate {
+  background-color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+}
+
+.hb-tree__checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.hb-tree__title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.hb-tree__node-content--selected .hb-tree__title {
+  color: var(--hb-color-primary);
+  font-weight: 500;
+}

package/dist/collection/components/TreeSelect/TreeSelect.js

@@ -0,0 +1,440 @@
+import { h } from "@stencil/core";
+import { createClickOutsideHandler } from "../../utils/click-outside";
+/**
+ * TreeSelect 树形选择器
+ * 类似 Select，但下拉选项以树形结构展示，支持单选与多选
+ */
+export class TreeSelect {
+    el;
+    /**
+     * 可选项数据源（与 Tree 相同的递归树结构）
+     */
+    data = [];
+    /**
+     * （受控）绑定值，单选为 string，多选为 string[]
+     */
+    modelValue = '';
+    /**
+     * 是否多选
+     * @default false
+     */
+    multiple = false;
+    /**
+     * 占位文本
+     * @default '请选择'
+     */
+    placeholder = '请选择';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否显示 checkbox（多选模式下推荐开启）
+     * @default false
+     */
+    checkable = false;
+    /**
+     * 是否默认展开全部节点
+     * @default false
+     */
+    defaultExpandAll = false;
+    isOpen = false;
+    internalExpanded = [];
+    internalSelected = [];
+    internalChecked = [];
+    /**
+     * 值变化事件（单选为 string，多选为 string[]）
+     */
+    hbChange;
+    /**
+     * 下拉浮层显隐变化事件
+     */
+    hbVisibleChange;
+    clickOutside = createClickOutsideHandler({
+        host: null,
+        isOpen: () => this.isOpen,
+        onClose: () => this.closeDropdown(),
+    });
+    componentWillLoad() {
+        this.syncFromModelValue();
+        if (this.defaultExpandAll) {
+            const all = [];
+            this.collectExpandableKeys(this.data, all);
+            this.internalExpanded = all;
+        }
+    }
+    componentDidLoad() {
+        this.clickOutside = createClickOutsideHandler({
+            host: this.el,
+            isOpen: () => this.isOpen,
+            onClose: () => this.closeDropdown(),
+        });
+        this.clickOutside.connect();
+    }
+    disconnectedCallback() {
+        this.clickOutside.disconnect();
+    }
+    syncFromModelValue() {
+        if (this.multiple) {
+            const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
+            this.internalSelected = [...arr];
+            this.internalChecked = [...arr];
+        }
+        else {
+            const single = typeof this.modelValue === 'string' ? this.modelValue : '';
+            this.internalSelected = single ? [single] : [];
+            this.internalChecked = single ? [single] : [];
+        }
+    }
+    collectExpandableKeys(nodes, out) {
+        for (const node of nodes) {
+            if (node.children && node.children.length > 0) {
+                out.push(node.key);
+                this.collectExpandableKeys(node.children, out);
+            }
+        }
+    }
+    findTitle(nodes, key) {
+        for (const node of nodes) {
+            if (node.key === key)
+                return node.title;
+            if (node.children) {
+                const found = this.findTitle(node.children, key);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    getDisplayText() {
+        if (this.multiple) {
+            const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
+            if (arr.length === 0)
+                return '';
+            const titles = arr.map((k) => this.findTitle(this.data, k) || k);
+            return titles.join(' / ');
+        }
+        const single = typeof this.modelValue === 'string' ? this.modelValue : '';
+        return single ? this.findTitle(this.data, single) || single : '';
+    }
+    openDropdown = () => {
+        if (this.disabled || this.isOpen)
+            return;
+        this.isOpen = true;
+        this.hbVisibleChange.emit(true);
+    };
+    closeDropdown = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.hbVisibleChange.emit(false);
+    };
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen)
+            this.closeDropdown();
+        else
+            this.openDropdown();
+    };
+    handleNodeSelect = (key) => {
+        if (this.multiple) {
+            const current = [...this.internalSelected];
+            const idx = current.indexOf(key);
+            if (idx >= 0)
+                current.splice(idx, 1);
+            else
+                current.push(key);
+            this.internalSelected = current;
+            this.modelValue = current;
+            this.hbChange.emit(current);
+        }
+        else {
+            this.internalSelected = [key];
+            this.modelValue = key;
+            this.hbChange.emit(key);
+            this.closeDropdown();
+        }
+    };
+    handleNodeCheck = (key) => {
+        // TODO: 父子联动 —— 当前仅管理单个节点勾选状态。
+        const current = [...this.internalChecked];
+        const idx = current.indexOf(key);
+        if (idx >= 0)
+            current.splice(idx, 1);
+        else
+            current.push(key);
+        this.internalChecked = current;
+        this.modelValue = current;
+        this.hbChange.emit(current);
+    };
+    handleToggleExpand = (node, e) => {
+        e.stopPropagation();
+        const current = [...this.internalExpanded];
+        const idx = current.indexOf(node.key);
+        if (idx >= 0)
+            current.splice(idx, 1);
+        else
+            current.push(node.key);
+        this.internalExpanded = current;
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.internalSelected = [];
+        this.internalChecked = [];
+        this.modelValue = this.multiple ? [] : '';
+        this.hbChange.emit(this.modelValue);
+    };
+    renderNode = (node, level) => {
+        const hasChildren = !!(node.children && node.children.length > 0);
+        const expanded = this.internalExpanded.includes(node.key);
+        const selected = this.internalSelected.includes(node.key);
+        const checked = this.internalChecked.includes(node.key);
+        const disabled = !!node.disabled;
+        return (h("li", { class: { 'hb-tree-select__node': true, 'hb-tree-select__node--disabled': disabled }, role: "treeitem" }, h("div", { class: {
+                'hb-tree-select__node-content': true,
+                'hb-tree-select__node-content--selected': selected,
+                'hb-tree-select__node-content--checked': checked,
+            }, style: { paddingLeft: `${level * 18 + 8}px` } }, h("span", { class: "hb-tree-select__switcher", onClick: (e) => hasChildren && this.handleToggleExpand(node, e) }, hasChildren ? (h("span", { class: { 'hb-tree-select__arrow': true, 'hb-tree-select__arrow--expanded': expanded } }, "\u25B6")) : null), this.checkable && (h("span", { class: {
+                'hb-tree-select__checkbox': true,
+                'hb-tree-select__checkbox--checked': checked,
+                'hb-tree-select__checkbox--disabled': disabled,
+            }, onClick: () => !disabled && this.handleNodeCheck(node.key) }, checked ? '✓' : '')), h("span", { class: "hb-tree-select__title", onClick: () => !disabled && this.handleNodeSelect(node.key) }, node.title)), hasChildren && expanded && (h("ul", { class: "hb-tree-select__children", role: "group" }, node.children.map((child) => this.renderNode(child, level + 1))))));
+    };
+    render() {
+        const displayText = this.getDisplayText();
+        const hasValue = this.multiple
+            ? Array.isArray(this.modelValue) && this.modelValue.length > 0
+            : typeof this.modelValue === 'string' && this.modelValue !== '';
+        return (h("div", { key: '38d8a150ce1436bbea77250dd0bb3a44b9722cbc', class: {
+                'hb-tree-select': true,
+                'hb-tree-select--open': this.isOpen,
+                'hb-tree-select--disabled': this.disabled,
+                'hb-tree-select--multiple': this.multiple,
+            } }, h("div", { key: '5928b61ce45dabece866b8de93a4353804ed05e4', class: "hb-tree-select__input-wrapper", onClick: this.toggleDropdown }, h("span", { key: 'af7b313ec51033487044aa3b9ef1620fbe292490', class: {
+                'hb-tree-select__display': true,
+                'hb-tree-select__display--placeholder': !hasValue,
+            } }, hasValue ? displayText : this.placeholder), h("span", { key: 'ab26baf601b42f2e5d28768d70927a38afbf612f', class: "hb-tree-select__suffix" }, hasValue && (h("span", { key: '0095371d8cdb31f569e53117a36d93de1f09b304', class: "hb-tree-select__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'b824565183607eb6341223fcfc0110b224d9d156', class: { 'hb-tree-select__arrow-icon': true, 'hb-tree-select__arrow-icon--open': this.isOpen } }, "\u25BC"))), this.isOpen && (h("div", { key: 'e03726804631a7e69c86319f9f5ec81fecb60bf0', class: "hb-tree-select__dropdown" }, this.data.length === 0 ? (h("div", { class: "hb-tree-select__empty" }, "\u6682\u65E0\u6570\u636E")) : (h("ul", { class: "hb-tree-select__tree", role: "tree" }, this.data.map((node) => this.renderNode(node, 0))))))));
+    }
+    static get is() { return "hb-tree-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeNode[]",
+                    "resolved": "TreeNode[]",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "../Tree/Tree",
+                            "id": "src/components/Tree/Tree.tsx::TreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u53EF\u9009\u9879\u6570\u636E\u6E90\uFF08\u4E0E Tree \u76F8\u540C\u7684\u9012\u5F52\u6811\u7ED3\u6784\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uFF08\u53D7\u63A7\uFF09\u7ED1\u5B9A\u503C\uFF0C\u5355\u9009\u4E3A string\uFF0C\u591A\u9009\u4E3A string[]"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u591A\u9009"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'\u8BF7\u9009\u62E9'"
+                        }],
+                    "text": "\u5360\u4F4D\u6587\u672C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'\u8BF7\u9009\u62E9'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A checkbox\uFF08\u591A\u9009\u6A21\u5F0F\u4E0B\u63A8\u8350\u5F00\u542F\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checkable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "defaultExpandAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00\u5168\u90E8\u8282\u70B9"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-expand-all",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "internalExpanded": {},
+            "internalSelected": {},
+            "internalChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u53D8\u5316\u4E8B\u4EF6\uFF08\u5355\u9009\u4E3A string\uFF0C\u591A\u9009\u4E3A string[]\uFF09"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "hbVisibleChange",
+                "name": "hbVisibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0B\u62C9\u6D6E\u5C42\u663E\u9690\u53D8\u5316\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=TreeSelect.js.map

package/dist/collection/components/TreeSelect/TreeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelect.js","sourceRoot":"","sources":["../../../src/components/TreeSelect/TreeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport type { TreeNode } from '../Tree/Tree';\n\n/**\n * TreeSelect 树形选择器\n * 类似 Select，但下拉选项以树形结构展示，支持单选与多选\n */\n@Component({\n  tag: 'hb-tree-select',\n  styleUrl: 'tree-select.css',\n  shadow: true,\n})\nexport class TreeSelect {\n  @Element() el: HTMLElement;\n\n  /**\n   * 可选项数据源（与 Tree 相同的递归树结构）\n   */\n  @Prop() data: TreeNode[] = [];\n\n  /**\n   * （受控）绑定值，单选为 string，多选为 string[]\n   */\n  @Prop({ mutable: true }) modelValue: string | string[] = '';\n\n  /**\n   * 是否多选\n   * @default false\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * 占位文本\n   * @default '请选择'\n   */\n  @Prop() placeholder: string = '请选择';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示 checkbox（多选模式下推荐开启）\n   * @default false\n   */\n  @Prop() checkable: boolean = false;\n\n  /**\n   * 是否默认展开全部节点\n   * @default false\n   */\n  @Prop() defaultExpandAll: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() internalExpanded: string[] = [];\n  @State() internalSelected: string[] = [];\n  @State() internalChecked: string[] = [];\n\n  /**\n   * 值变化事件（单选为 string，多选为 string[]）\n   */\n  @Event() hbChange: EventEmitter<string | string[]>;\n\n  /**\n   * 下拉浮层显隐变化事件\n   */\n  @Event() hbVisibleChange: EventEmitter<boolean>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => this.closeDropdown(),\n  });\n\n  componentWillLoad() {\n    this.syncFromModelValue();\n    if (this.defaultExpandAll) {\n      const all: string[] = [];\n      this.collectExpandableKeys(this.data, all);\n      this.internalExpanded = all;\n    }\n  }\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => this.closeDropdown(),\n    });\n    this.clickOutside.connect();\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  private syncFromModelValue() {\n    if (this.multiple) {\n      const arr = Array.isArray(this.modelValue) ? this.modelValue : [];\n      this.internalSelected = [...arr];\n      this.internalChecked = [...arr];\n    } else {\n      const single = typeof this.modelValue === 'string' ? this.modelValue : '';\n      this.internalSelected = single ? [single] : [];\n      this.internalChecked = single ? [single] : [];\n    }\n  }\n\n  private collectExpandableKeys(nodes: TreeNode[], out: string[]) {\n    for (const node of nodes) {\n      if (node.children && node.children.length > 0) {\n        out.push(node.key);\n        this.collectExpandableKeys(node.children, out);\n      }\n    }\n  }\n\n  private findTitle(nodes: TreeNode[], key: string): string | null {\n    for (const node of nodes) {\n      if (node.key === key) return node.title;\n      if (node.children) {\n        const found = this.findTitle(node.children, key);\n        if (found) return found;\n      }\n    }\n    return null;\n  }\n\n  private getDisplayText(): string {\n    if (this.multiple) {\n      const arr = Array.isArray(this.modelValue) ? this.modelValue : [];\n      if (arr.length === 0) return '';\n      const titles = arr.map((k) => this.findTitle(this.data, k) || k);\n      return titles.join(' / ');\n    }\n    const single = typeof this.modelValue === 'string' ? this.modelValue : '';\n    return single ? this.findTitle(this.data, single) || single : '';\n  }\n\n  private openDropdown = () => {\n    if (this.disabled || this.isOpen) return;\n    this.isOpen = true;\n    this.hbVisibleChange.emit(true);\n  };\n\n  private closeDropdown = () => {\n    if (!this.isOpen) return;\n    this.isOpen = false;\n    this.hbVisibleChange.emit(false);\n  };\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    if (this.isOpen) this.closeDropdown();\n    else this.openDropdown();\n  };\n\n  private handleNodeSelect = (key: string) => {\n    if (this.multiple) {\n      const current = [...this.internalSelected];\n      const idx = current.indexOf(key);\n      if (idx >= 0) current.splice(idx, 1);\n      else current.push(key);\n      this.internalSelected = current;\n      this.modelValue = current;\n      this.hbChange.emit(current);\n    } else {\n      this.internalSelected = [key];\n      this.modelValue = key;\n      this.hbChange.emit(key);\n      this.closeDropdown();\n    }\n  };\n\n  private handleNodeCheck = (key: string) => {\n    // TODO: 父子联动 —— 当前仅管理单个节点勾选状态。\n    const current = [...this.internalChecked];\n    const idx = current.indexOf(key);\n    if (idx >= 0) current.splice(idx, 1);\n    else current.push(key);\n    this.internalChecked = current;\n    this.modelValue = current;\n    this.hbChange.emit(current);\n  };\n\n  private handleToggleExpand = (node: TreeNode, e: Event) => {\n    e.stopPropagation();\n    const current = [...this.internalExpanded];\n    const idx = current.indexOf(node.key);\n    if (idx >= 0) current.splice(idx, 1);\n    else current.push(node.key);\n    this.internalExpanded = current;\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.internalSelected = [];\n    this.internalChecked = [];\n    this.modelValue = this.multiple ? [] : '';\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private renderNode = (node: TreeNode, level: number): any => {\n    const hasChildren = !!(node.children && node.children.length > 0);\n    const expanded = this.internalExpanded.includes(node.key);\n    const selected = this.internalSelected.includes(node.key);\n    const checked = this.internalChecked.includes(node.key);\n    const disabled = !!node.disabled;\n\n    return (\n      <li class={{ 'hb-tree-select__node': true, 'hb-tree-select__node--disabled': disabled }} role=\"treeitem\">\n        <div\n          class={{\n            'hb-tree-select__node-content': true,\n            'hb-tree-select__node-content--selected': selected,\n            'hb-tree-select__node-content--checked': checked,\n          }}\n          style={{ paddingLeft: `${level * 18 + 8}px` }}\n        >\n          <span class=\"hb-tree-select__switcher\" onClick={(e) => hasChildren && this.handleToggleExpand(node, e)}>\n            {hasChildren ? (\n              <span class={{ 'hb-tree-select__arrow': true, 'hb-tree-select__arrow--expanded': expanded }}>▶</span>\n            ) : null}\n          </span>\n\n          {this.checkable && (\n            <span\n              class={{\n                'hb-tree-select__checkbox': true,\n                'hb-tree-select__checkbox--checked': checked,\n                'hb-tree-select__checkbox--disabled': disabled,\n              }}\n              onClick={() => !disabled && this.handleNodeCheck(node.key)}\n            >\n              {checked ? '✓' : ''}\n            </span>\n          )}\n\n          <span class=\"hb-tree-select__title\" onClick={() => !disabled && this.handleNodeSelect(node.key)}>\n            {node.title}\n          </span>\n        </div>\n\n        {hasChildren && expanded && (\n          <ul class=\"hb-tree-select__children\" role=\"group\">\n            {node.children!.map((child) => this.renderNode(child, level + 1))}\n          </ul>\n        )}\n      </li>\n    );\n  };\n\n  render() {\n    const displayText = this.getDisplayText();\n    const hasValue = this.multiple\n      ? Array.isArray(this.modelValue) && this.modelValue.length > 0\n      : typeof this.modelValue === 'string' && this.modelValue !== '';\n\n    return (\n      <div\n        class={{\n          'hb-tree-select': true,\n          'hb-tree-select--open': this.isOpen,\n          'hb-tree-select--disabled': this.disabled,\n          'hb-tree-select--multiple': this.multiple,\n        }}\n      >\n        <div class=\"hb-tree-select__input-wrapper\" onClick={this.toggleDropdown}>\n          <span\n            class={{\n              'hb-tree-select__display': true,\n              'hb-tree-select__display--placeholder': !hasValue,\n            }}\n          >\n            {hasValue ? displayText : this.placeholder}\n          </span>\n          <span class=\"hb-tree-select__suffix\">\n            {hasValue && (\n              <span class=\"hb-tree-select__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class={{ 'hb-tree-select__arrow-icon': true, 'hb-tree-select__arrow-icon--open': this.isOpen }}>▼</span>\n          </span>\n        </div>\n\n        {this.isOpen && (\n          <div class=\"hb-tree-select__dropdown\">\n            {this.data.length === 0 ? (\n              <div class=\"hb-tree-select__empty\">暂无数据</div>\n            ) : (\n              <ul class=\"hb-tree-select__tree\" role=\"tree\">\n                {this.data.map((node) => this.renderNode(node, 0))}\n              </ul>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}