@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/navigation/menu-item.js

@@ -0,0 +1,181 @@
+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 } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Leaf navigation item for `aithe-menu`.
+ * aithe-menu 的叶子导航项。
+ *
+ * Supports collapsed mode: when `collapsed` is true, the item hides its label
+ * and displays only the icon, suitable for sidebar collapse scenarios.
+ * 支持折叠模式：当 collapsed 为 true 时，隐藏文字标签仅显示图标，适用于侧边栏折叠场景。
+ *
+ * @slot - Default slot for menu item label content. 菜单项标签内容。
+ * @fires aithe-menu-select - Emitted when the item is clicked. 菜单项点击时触发。
+ * @example
+ * ```html
+ * <aithe-menu-item name="dashboard" title="Dashboard" icon="home" disabled>Dashboard</aithe-menu-item>
+ * ```
+ */
+let AitheMenuItem = class AitheMenuItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Unique key identifying this menu item. 菜单项唯一标识键。 */
+        this.name = '';
+        /** Display title for the menu item (shown as tooltip). 菜单项的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the label. 在标签前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the menu item is disabled. 是否禁用菜单项。 */
+        this.disabled = false;
+        /** Whether the menu item is currently active (selected). 是否当前选中。 */
+        this.active = false;
+        /** Inherited menu mode from parent `aithe-menu`. 从父级 aithe-menu 继承的菜单模式。 */
+        this.menuMode = 'vertical';
+        /** Inherited collapsed state from parent `aithe-menu`. When true, hides the label and displays only the icon. 从父级 aithe-menu 继承的折叠状态。为 true 时隐藏文字标签仅显示图标。 */
+        this.collapsed = false;
+        this.select = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.emit('aithe-menu-select', { name: this.name });
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            this.select();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      button {
+        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);
+      }
+
+      button.horizontal {
+        min-height: 40px;
+      }
+
+      button.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);
+      }
+
+      button.active .item-icon {
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      button:hover:not(:disabled):not(.active) {
+        background: var(--aithe-color-surface-muted);
+        color: var(--aithe-color-text);
+      }
+
+      button:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      :host([data-collapsed]) button,
+      button.collapsed {
+        justify-content: center;
+        padding: 0;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.collapsed) {
+            this.dataset.collapsed = '';
+        }
+    }
+    updated(changed) {
+        if (changed.has('collapsed')) {
+            if (this.collapsed) {
+                this.dataset.collapsed = '';
+            }
+            else {
+                delete this.dataset.collapsed;
+            }
+        }
+    }
+    render() {
+        return html `
+      <button
+        class=${classMap({
+            horizontal: this.menuMode === 'horizontal',
+            active: this.active,
+            collapsed: this.collapsed,
+        })}
+        type="button"
+        role="menuitem"
+        title=${this.title}
+        ?disabled=${this.disabled}
+        @click=${this.select}
+        @keydown=${this.handleKeydown}
+      >
+        ${this.icon
+            ? html `
+              <aithe-icon class="item-icon" name=${this.icon} size="16"></aithe-icon>
+            `
+            : nothing}
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMenuItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheMenuItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheMenuItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheMenuItem.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheMenuItem.prototype, "menuMode", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheMenuItem.prototype, "collapsed", void 0);
+AitheMenuItem = __decorate([
+    customElement('aithe-menu-item')
+], AitheMenuItem);
+export { AitheMenuItem };

package/dist/components/navigation/menu.js

@@ -0,0 +1,126 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Cross-framework navigation menu with vertical and horizontal modes.
+ * 跨框架导航菜单，支持垂直和水平模式。
+ *
+ * @slot - Default slot for `aithe-menu-item` and `aithe-sub-menu` elements. aithe-menu-item 和 aithe-sub-menu 元素。
+ * @fires aithe-select - Emitted when a menu item is selected. 菜单项选中时触发。
+ * @example
+ * ```html
+ * <aithe-menu mode="vertical" active="home">
+ *   <aithe-menu-item name="home">Home</aithe-menu-item>
+ *   <aithe-sub-menu title="Settings">
+ *     <aithe-menu-item name="profile">Profile</aithe-menu-item>
+ *   </aithe-sub-menu>
+ * </aithe-menu>
+ * ```
+ */
+let AitheMenu = class AitheMenu extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Menu layout mode. 菜单布局模式。 */
+        this.mode = 'vertical';
+        /** Active (selected) menu item key. 当前选中的菜单项键。 */
+        this.active = '';
+        /** Whether the menu is in collapsed state. 菜单是否处于折叠状态。 */
+        this.collapsed = false;
+        /** Whether menu items can be selected. 菜单项是否可选中。 */
+        this.selectable = true;
+        this.syncChildren = () => {
+            const items = Array.from(this.querySelectorAll('aithe-menu-item'));
+            const subMenus = Array.from(this.querySelectorAll('aithe-sub-menu'));
+            for (const item of items) {
+                item.active = item.name === this.active;
+                item.menuMode = this.mode;
+                item.collapsed = this.collapsed;
+            }
+            for (const submenu of subMenus) {
+                submenu.menuMode = this.mode;
+                submenu.collapsed = this.collapsed;
+                submenu.active = Array.from(submenu.querySelectorAll('aithe-menu-item')).some((item) => {
+                    const typedItem = item;
+                    return typedItem.name === this.active;
+                });
+                if (this.mode === 'horizontal' && submenu.active) {
+                    submenu.open = true;
+                }
+            }
+        };
+        this.handleSelect = (event) => {
+            event.stopPropagation();
+            if (!this.selectable) {
+                this.emit('aithe-select', event.detail);
+                return;
+            }
+            this.active = event.detail.name;
+            this.syncChildren();
+            this.emit('aithe-select', { active: this.active });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+      }
+
+      .menu {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .menu.horizontal {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-menu-select', this.handleSelect);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-menu-select', this.handleSelect);
+    }
+    updated(changed) {
+        if (changed.has('active') || changed.has('mode') || changed.has('collapsed')) {
+            this.syncChildren();
+        }
+    }
+    render() {
+        return html `
+      <div class=${classMap({ menu: true, [this.mode]: true })}>
+        <slot @slotchange=${this.syncChildren}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMenu.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], AitheMenu.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheMenu.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheMenu.prototype, "selectable", void 0);
+AitheMenu = __decorate([
+    customElement('aithe-menu')
+], AitheMenu);
+export { AitheMenu };

package/dist/components/navigation/steps.js

@@ -0,0 +1,183 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Stepper component with JSON-driven items for process flow visualization.
+ * 步骤条组件，支持 JSON 驱动的步骤项，用于流程可视化。
+ *
+ * @example
+ * ```html
+ * <aithe-steps current="1" direction="horizontal" items='["Step 1","Step 2","Step 3"]'></aithe-steps>
+ * <aithe-steps current="2" items='[{"title":"Account","description":"Create account"},{"title":"Profile","description":"Fill info"}]'></aithe-steps>
+ * ```
+ */
+let AitheSteps = class AitheSteps extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current active step index (0-based). 当前活动步骤索引（从 0 开始）。 */
+        this.current = 0;
+        /** Step size preset. 步骤尺寸预设。 */
+        this.size = 'md';
+        /** Steps layout direction. 步骤布局方向。 */
+        this.direction = 'horizontal';
+        /** JSON string or comma-separated list of step items. 步骤项的 JSON 字符串或逗号分隔列表。 */
+        this.items = '[]';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .steps {
+        display: flex;
+        gap: var(--aithe-space-4);
+      }
+
+      .steps.vertical {
+        flex-direction: column;
+      }
+
+      .item {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: var(--aithe-space-3);
+        align-items: start;
+        flex: 1;
+      }
+
+      .steps.vertical .item {
+        flex: none;
+      }
+
+      .item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        top: 15px;
+        left: 36px;
+        right: calc(var(--aithe-space-4) * -1);
+        height: 2px;
+        background: var(--aithe-color-border);
+      }
+
+      .steps.vertical .item:not(:last-child)::after {
+        top: 36px;
+        left: 15px;
+        right: auto;
+        width: 2px;
+        height: calc(100% + var(--aithe-space-4));
+      }
+
+      .dot {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 2px solid var(--aithe-color-border);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text-muted);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .dot.done,
+      .dot.active {
+        border-color: var(--aithe-primary-6);
+        background: var(--aithe-primary-6);
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .title {
+        font-weight: var(--aithe-font-weight-semibold);
+        margin-bottom: var(--aithe-space-1);
+        margin-top: 0;
+      }
+
+      .description {
+        color: var(--aithe-color-text-muted);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    get parsedItems() {
+        try {
+            const parsed = JSON.parse(this.items);
+            return parsed.map((item) => (typeof item === 'string' ? { title: item } : item));
+        }
+        catch {
+            return this.items
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean)
+                .map((title) => ({ title }));
+        }
+    }
+    /**
+     * Get the state of a step item based on its index.
+     * @param index - The index of the step item
+     * @returns The state of the step: 'done', 'active', or 'pending'
+     */
+    getStepState(index) {
+        if (index < this.current) {
+            return 'done';
+        }
+        else if (index === this.current) {
+            return 'active';
+        }
+        else {
+            return 'pending';
+        }
+    }
+    render() {
+        const items = this.parsedItems;
+        return html `
+      <div class=${classMap({ steps: true, [this.direction]: true })}>
+        ${items.map((item, index) => {
+            const state = this.getStepState(index);
+            return html `
+            <div class="item">
+              <span class=${classMap({ dot: true, [state]: true })}>${index + 1}</span>
+              <div>
+                <div class="title">${item.title}</div>
+                ${item.description
+                ? html `
+                      <div class="description">${item.description}</div>
+                    `
+                : null}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheSteps.prototype, "current", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "items", void 0);
+AitheSteps = __decorate([
+    customElement('aithe-steps')
+], AitheSteps);
+export { AitheSteps };

package/dist/components/navigation/sub-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sub-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,sDAAsD;IAC1B,IAAI,SAAM;IACtC,2DAA2D;IAC/B,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,iDAAiD;IACL,QAAQ,UAAS;IAC7D,0DAA0D;IACd,IAAI,UAAS;IACzD,6DAA6D;IAC7B,MAAM,UAAS;IAC/C,4EAA4E;IAC5C,QAAQ,EAAE,YAAY,GAAG,UAAU,CAAc;IACjF,wMAAwM;IACxK,SAAS,UAAS;IAElD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4FpB;IAEF,iBAAiB,IAAI,IAAI;IAIzB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuBtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAMrB;IAEF,MAAM;CAqDP"}
+{"version":3,"file":"sub-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sub-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,sDAAsD;IAC1B,IAAI,SAAM;IACtC,2DAA2D;IAC/B,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,iDAAiD;IACL,QAAQ,UAAS;IAC7D,0DAA0D;IACd,IAAI,UAAS;IACzD,6DAA6D;IAC7B,MAAM,UAAS;IAC/C,4EAA4E;IAC5C,QAAQ,EAAE,YAAY,GAAG,UAAU,CAAc;IACjF,wMAAwM;IACxK,SAAS,UAAS;IAElD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA2FpB;IAEF,iBAAiB,IAAI,IAAI;IAIzB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuBtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAMrB;IAEF,MAAM;CAqDP"}