@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/data/tree-menu.js

@@ -0,0 +1,482 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { translateNodeLabel, onAitheLocaleChange } from '../../styles/i18n';
+/**
+ * Data-driven tree menu with menu-style active highlighting and expand/collapse.
+ * 数据驱动的树形菜单，支持菜单样式高亮和展开/折叠。
+ *
+ * @fires aithe-select - Emitted when a menu item is selected with `{ value }`. 菜单项选中时发出 `{ value }`。
+ *
+ * @example
+ * ```html
+ * <aithe-tree-menu
+ *   items='[{"label":"Dashboard","id":"dashboard","icon":"home"},{"label":"Settings","id":"settings","icon":"settings","children":[{"label":"Profile","id":"profile"},{"label":"Security","id":"security"}]}]'
+ *   active="dashboard"
+ * ></aithe-tree-menu>
+ * ```
+ */
+let AitheTreeMenu = class AitheTreeMenu extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of tree menu items (parsed into `items`). 树菜单项的 JSON 字符串（解析为 `items`）。 */
+        this.itemsJson = '';
+        /** Array of tree menu items (prefer this over `itemsJson` in JS). 树菜单项数组（在 JS 中优先使用此属性而非 `itemsJson`）。 */
+        this.items = [];
+        /** Active (selected) menu item value. 当前选中的菜单项值。 */
+        this.active = '';
+        /** Whether all nodes are expanded by default. 是否默认展开所有节点。 */
+        this.expandAll = false;
+        /** Layout direction: vertical (stacked) or horizontal (inline). 布局方向：垂直（堆叠）或水平（行内）。 */
+        this.direction = 'vertical';
+        /** Whether the tree menu supports collapse/expand toggle. 树菜单是否支持伸缩切换。 */
+        this.collapsible = false;
+        /** Whether the tree menu is currently collapsed. 树菜单当前是否收起。 */
+        this.collapsed = false;
+        /** Width when collapsed (CSS value). 收起时的宽度。 */
+        this.collapsedWidth = '64px';
+        /** Width when expanded (CSS value). 展开时的宽度。 */
+        this.expandedWidth = '260px';
+        /**
+         * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
+         * Useful for permission-based access control.
+         * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
+         */
+        this.itemFilter = null;
+        /**
+         * Custom item renderer. When provided, this function is called for each leaf item
+         * and its return value is rendered inside the `<button>` element, replacing the
+         * default icon/label rendering. Useful for rendering custom previews like color dots,
+         * shape previews, etc.
+         * 自定义 item 渲染器。当提供时，每个叶子项都会调用此函数，返回值渲染在 `<button>` 内部，
+         * 替换默认的图标/标签渲染。适用于渲染自定义预览，如颜色圆点、形状预览等。
+         *
+         * The function receives the item metadata and should return a `TemplateResult` or `nothing`.
+         * 函数接收 item 元数据，应返回 `TemplateResult` 或 `nothing`。
+         */
+        this.itemRenderer = null;
+        this.expanded = new Set();
+        this.handleDocumentPointer = (event) => {
+            if (this.direction === 'horizontal' && !event.composedPath().includes(this)) {
+                this.expanded = new Set();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleDocumentPointer);
+        this.unsubscribeLocale = onAitheLocaleChange(() => this.requestUpdate());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleDocumentPointer);
+        this.unsubscribeLocale?.();
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        transition: width var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease);
+      }
+
+      :host([collapsed]) {
+        width: var(--aithe-tree-menu-collapsed-width, 64px);
+      }
+
+      .menu {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .menu.horizontal {
+        grid-auto-flow: column;
+        align-items: center;
+      }
+
+      :host([collapsed]) .item-label,
+      :host([collapsed]) .group-toggle-text,
+      :host([collapsed]) .arrow {
+        display: none;
+      }
+
+      :host([collapsed]) .item {
+        justify-content: center;
+        padding: 0;
+      }
+
+      :host([collapsed]) .group-toggle {
+        justify-content: center;
+        padding: 0;
+      }
+
+      :host([collapsed]) .group-toggle-label {
+        justify-content: center;
+      }
+
+      :host([collapsed]) .children {
+        padding-left: 0;
+        position: relative;
+        z-index: var(--aithe-z-dropdown, 1000);
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        width: 100%;
+        min-height: 42px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .item-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .fallback-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        font-size: 14px;
+        font-weight: var(--aithe-font-weight-bold);
+        line-height: 1;
+        border-radius: var(--aithe-radius-sm, 3px);
+        background: var(--aithe-color-surface-muted);
+        color: var(--aithe-color-text-muted);
+      }
+
+      .item.active .fallback-icon {
+        background: transparent;
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .group-toggle.active .fallback-icon {
+        background: var(--aithe-primary-6);
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .item.active {
+        background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        box-shadow: var(--aithe-shadow-2);
+        padding: var(--aithe-space-1) var(--aithe-space-3);
+        margin: 0;
+      }
+
+      .item.active .item-icon {
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .item:hover:not(:disabled):not(.active) {
+        background: var(--aithe-color-surface-muted);
+        color: var(--aithe-color-text);
+      }
+
+      .item:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .divider {
+        height: 1px;
+        margin: var(--aithe-space-2) 0;
+        background: var(--aithe-color-border);
+      }
+
+      .item.primary {
+        color: var(--aithe-primary-7);
+      }
+      .item.success {
+        color: var(--aithe-success-7);
+      }
+      .item.warning {
+        color: var(--aithe-warning-7);
+      }
+      .item.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      .item.active.primary,
+      .item.active.success,
+      .item.active.warning,
+      .item.active.danger {
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .group-toggle {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        width: 100%;
+        min-height: 42px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .group-toggle-label {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .group-toggle-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .group-toggle.active {
+        color: var(--aithe-color-text);
+      }
+
+      .group-toggle:hover:not(:disabled) {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .group-toggle:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .group-toggle.primary {
+        color: var(--aithe-primary-7);
+      }
+      .group-toggle.success {
+        color: var(--aithe-success-7);
+      }
+      .group-toggle.warning {
+        color: var(--aithe-warning-7);
+      }
+      .group-toggle.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      .arrow {
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .children {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-left: var(--aithe-space-4);
+        padding-top: var(--aithe-space-2);
+      }
+
+      .horizontal .children {
+        position: absolute;
+        top: calc(100% + var(--aithe-space-2));
+        left: 0;
+        z-index: var(--aithe-z-dropdown);
+        padding: var(--aithe-space-2);
+        min-width: 180px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      .horizontal .group-wrapper {
+        position: relative;
+      }
+    `,
+    ]; }
+    willUpdate(changed) {
+        if (changed.has('itemsJson') && this.itemsJson) {
+            try {
+                this.items = JSON.parse(this.itemsJson);
+            }
+            catch {
+                this.items = [];
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('expandAll') && this.expandAll) {
+            this.expanded = new Set(this.collectKeys(this.items));
+        }
+        if (changed.has('collapsed') || changed.has('expandedWidth') || changed.has('collapsedWidth')) {
+            this.applyWidth();
+        }
+    }
+    applyWidth() {
+        if (this.collapsed) {
+            this.style.setProperty('--aithe-tree-menu-collapsed-width', this.collapsedWidth);
+        }
+    }
+    collectKeys(items) {
+        return items.flatMap((item) => item.children?.length ? [item.id, ...this.collectKeys(item.children)] : []);
+    }
+    isGroupActive(item) {
+        if (item.id === this.active)
+            return true;
+        return item.children?.some((child) => this.isGroupActive(child)) ?? false;
+    }
+    toggleExpand(key) {
+        const next = new Set(this.expanded);
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        this.expanded = next;
+    }
+    selectItem(item) {
+        this.active = item.id;
+        this.emit('aithe-select', { value: item.id, item });
+    }
+    renderIcon(item, cls) {
+        if (item.icon) {
+            return html `
+        <aithe-icon class=${cls} name=${item.icon} size="16"></aithe-icon>
+      `;
+        }
+        if (this.collapsed) {
+            const ch = translateNodeLabel(item).charAt(0).toUpperCase();
+            return html `
+        <span class="${cls} fallback-icon">${ch}</span>
+      `;
+        }
+        return nothing;
+    }
+    renderItems(items, isHorizontal = false, depth = 0) {
+        const filter = this.itemFilter ?? ((item) => item.hasPermission !== false);
+        const visible = items.filter((item) => filter(item, depth));
+        return visible.flatMap((item) => {
+            const hasChildren = Boolean(item.children?.length);
+            const isActive = item.id === this.active;
+            const isExpanded = this.expanded.has(item.id);
+            const intentClass = item.variant && item.variant !== 'default' ? item.variant : '';
+            const nodeType = item.type || 'item';
+            const result = [];
+            if (nodeType === 'divider') {
+                result.push(html `<div class="divider" role="separator"></div>`);
+                return result;
+            }
+            if (hasChildren) {
+                result.push(html `
+          <div class=${isHorizontal ? 'group-wrapper' : nothing}>
+            <button
+              class=${classMap({
+                    'group-toggle': true,
+                    active: this.isGroupActive(item),
+                    [intentClass]: !!intentClass,
+                })}
+              type="button"
+              ?disabled=${item.disabled}
+              title=${this.collapsed ? translateNodeLabel(item) : ''}
+              aria-expanded=${String(isExpanded)}
+              @click=${() => this.toggleExpand(item.id)}
+            >
+              <span class="group-toggle-label">
+                ${this.renderIcon(item, 'group-toggle-icon')}
+                <span class="group-toggle-text">${translateNodeLabel(item)}</span>
+              </span>
+              <span class=${classMap({ arrow: true, open: isExpanded })}>⌄</span>
+            </button>
+            <div class="children" ?hidden=${!isExpanded}>
+              ${this.renderItems(item.children, false, depth + 1)}
+            </div>
+          </div>
+        `);
+                return result;
+            }
+            let iconContent;
+            if (this.itemRenderer) {
+                iconContent = this.itemRenderer(item);
+            }
+            else {
+                iconContent = this.renderIcon(item, 'item-icon');
+            }
+            result.push(html `
+        <button
+          class=${classMap({ item: true, active: isActive, [intentClass]: !!intentClass })}
+          type="button"
+          role="menuitem"
+          ?disabled=${item.disabled}
+          title=${this.collapsed ? translateNodeLabel(item) : ''}
+          @click=${() => this.selectItem(item)}
+        >
+          ${iconContent}
+          <span class="item-label">${translateNodeLabel(item)}</span>
+        </button>
+      `);
+            return result;
+        });
+    }
+    render() {
+        const isHorizontal = this.direction === 'horizontal';
+        return html `
+      <div class=${classMap({ menu: true, horizontal: isHorizontal })}>
+        ${this.renderItems(this.items, isHorizontal)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'items' })
+], AitheTreeMenu.prototype, "itemsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTreeMenu.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], AitheTreeMenu.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'expand-all' })
+], AitheTreeMenu.prototype, "expandAll", void 0);
+__decorate([
+    property({ type: String })
+], AitheTreeMenu.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTreeMenu.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTreeMenu.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapsed-width' })
+], AitheTreeMenu.prototype, "collapsedWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'expanded-width' })
+], AitheTreeMenu.prototype, "expandedWidth", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTreeMenu.prototype, "itemFilter", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTreeMenu.prototype, "itemRenderer", void 0);
+__decorate([
+    state()
+], AitheTreeMenu.prototype, "expanded", void 0);
+AitheTreeMenu = __decorate([
+    customElement('aithe-tree-menu')
+], AitheTreeMenu);
+export { AitheTreeMenu };