@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/form/select.js

@@ -0,0 +1,539 @@
+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, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
+import { aitheBaseStyles, aithePanelStyles, aitheScrollbarStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Dropdown select component with search, clear, and keyboard navigation.
+ * 下拉选择组件，支持搜索、清除和键盘导航。
+ *
+ * @slot - Default slot (unused; content driven by options). 默认插槽（未使用，内容由 options 控制）。
+ * @fires aithe-change - Emitted when a value is selected, with `{ option, value }`. 选中值变更时触发。
+ * @fires aithe-clear - Emitted when the value is cleared. 值被清除时触发。
+ * @fires aithe-dropdown-change - Emitted when the dropdown opens or closes. 下拉框开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-select
+ *   options='[{"id":"a","label":"Option A"},{"id":"b","label":"Option B"}]'
+ *   searchable
+ *   clearable
+ * ></aithe-select>
+ * ```
+ */
+let AitheSelect = class AitheSelect extends AitheAnchoredOverlayElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of select options. 选项的 JSON 字符串。 */
+        this.optionsJson = '';
+        /** Array of select option objects. 选项对象数组。 */
+        this.options = [];
+        /** Currently selected value. 当前选中的值。 */
+        this.value = '';
+        /** Display title for the select (shown as tooltip). 下拉选择的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the selected value. 在选中值前显示的图标名称。 */
+        this.icon = '';
+        /** Placeholder text shown when no value is selected. 无选中值时的占位文本。 */
+        this.placeholder = '';
+        /** Whether the select supports search/filter. 是否支持搜索过滤。 */
+        this.searchable = false;
+        /** Whether the selected value can be cleared. 是否允许清除选中值。 */
+        this.clearable = false;
+        /** Whether the select is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Dropdown panel placement. 下拉面板位置。 */
+        this.placement = 'bottom-start';
+        this.query = '';
+        this.activeIndex = -1;
+        /** Closes dropdown on outside pointer events. 点击外部时关闭下拉框。 */
+        this.handleOutsidePointer = (event) => {
+            if (this.open && !event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        /** Closes dropdown on Escape key. 按 Escape 键关闭下拉框。 */
+        this.handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this.open) {
+                this.open = false;
+            }
+        };
+        /** Toggles the dropdown open state. 切换下拉框开关状态。 */
+        this.toggleOpen = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
+        /** Clears the current value and emits clear + change events. 清除当前值并触发清除和变更事件。 */
+        this.clearValue = (event) => {
+            event.stopPropagation();
+            if (this.disabled) {
+                return;
+            }
+            this.value = '';
+            this.query = '';
+            this.emit('aithe-clear');
+            this.emit('aithe-change', { option: undefined, value: this.value });
+        };
+        /** Handles keyboard navigation for the trigger element. 处理触发元素的键盘导航。 */
+        this.handleTriggerKeydown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (!this.open) {
+                    this.open = true;
+                    return;
+                }
+                this.activeIndex = Math.min(this.activeIndex + 1, this.filteredOptions.length - 1);
+            }
+            if (event.key === 'ArrowUp' && this.open) {
+                event.preventDefault();
+                this.activeIndex = Math.max(this.activeIndex - 1, 0);
+            }
+            if ((event.key === 'Enter' || event.key === ' ') && !this.open) {
+                event.preventDefault();
+                this.open = true;
+                return;
+            }
+            if (event.key === 'Enter' && this.open) {
+                event.preventDefault();
+                const option = this.filteredOptions[this.activeIndex];
+                if (option) {
+                    this.selectOption(option);
+                }
+            }
+        };
+    }
+    /** Parses optionsJson into the options array on property change. 属性变更时将 optionsJson 解析为 options 数组。 */
+    willUpdate(changed) {
+        if (changed.has('optionsJson') && this.optionsJson) {
+            try {
+                this.options = JSON.parse(this.optionsJson);
+            }
+            catch {
+                this.options = [];
+            }
+        }
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+
+      .trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        min-width: 0;
+        width: 100%;
+        min-height: var(--aithe-control-height-md);
+        padding: 0 var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        cursor: pointer;
+        transition:
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          box-shadow var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .trigger.open {
+        border-color: var(--aithe-primary-5);
+        box-shadow: 0 0 0 4px var(--aithe-color-focus-ring);
+      }
+
+      .trigger.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .value-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .value {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .value > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .placeholder {
+        color: var(--aithe-color-text-subtle);
+      }
+
+      .search-input {
+        width: 100%;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: inherit;
+      }
+
+      .actions {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: var(--aithe-space-2);
+        color: var(--aithe-color-text-subtle);
+      }
+
+      .action {
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .panel {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        max-height: min(320px, 60vh);
+        overflow: auto;
+        padding: var(--aithe-space-2);
+      }
+
+      .option {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        width: 100%;
+        padding: var(--aithe-space-3);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .option:hover:not(:disabled),
+      .option.active {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .option:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .option.primary {
+        color: var(--aithe-primary-7);
+      }
+      .option.success {
+        color: var(--aithe-success-7);
+      }
+      .option.warning {
+        color: var(--aithe-warning-7);
+      }
+      .option.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      .option-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+        margin-top: 2px;
+      }
+
+      .desc {
+        color: var(--aithe-color-text-subtle);
+        font-size: var(--aithe-font-size-xs);
+      }
+
+      .empty {
+        padding: var(--aithe-space-4);
+        color: var(--aithe-color-text-muted);
+        text-align: center;
+      }
+
+      .group-header {
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        font-size: var(--aithe-font-size-xs);
+        font-weight: var(--aithe-font-weight-medium);
+        color: var(--aithe-color-text-muted);
+        user-select: none;
+      }
+
+      .group .option {
+        padding-left: var(--aithe-space-6);
+      }
+    `,
+    ]; }
+    get panelElement() {
+        return this.panel ?? null;
+    }
+    get anchorElement() {
+        return this.triggerElement ?? this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsidePointer);
+        document.addEventListener('keydown', this.handleDocumentKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsidePointer);
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            this.emit('aithe-dropdown-change', { open: this.open });
+            if (this.open) {
+                this.activeIndex = this.filteredOptions.findIndex((option) => option.id === this.value);
+                queueMicrotask(() => {
+                    this.updateFloatingPosition();
+                    this.panel?.style.setProperty('min-width', `${this.triggerElement?.getBoundingClientRect().width ?? 220}px`);
+                    if (this.searchable) {
+                        this.searchInput?.focus();
+                    }
+                });
+            }
+            else {
+                this.query = '';
+            }
+        }
+    }
+    /** Returns the option object matching the current value. 返回与当前值匹配的选项对象。 */
+    get selectedOption() {
+        return this.options.find((option) => option.id === this.value);
+    }
+    /** Filters options by search query keyword. 根据搜索关键词过滤选项。 */
+    get filteredOptions() {
+        const keyword = this.query.trim().toLowerCase();
+        if (!keyword) {
+            return this.options;
+        }
+        return this.options.filter((option) => option.label.toLowerCase().includes(keyword) ||
+            option.description?.toLowerCase().includes(keyword));
+    }
+    /** Selects an option, closes dropdown, and emits change event. 选中选项、关闭下拉框并触发变更事件。 */
+    selectOption(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.value = option.id;
+        this.open = false;
+        this.query = '';
+        this.emit('aithe-change', { option, value: this.value });
+    }
+    render() {
+        const selected = this.selectedOption;
+        const selectedLabel = selected
+            ? html `
+          <span>${selected.label}</span>
+        `
+            : html `
+          <span class="placeholder">${this.placeholder || t('form.select.placeholder')}</span>
+        `;
+        const valueContent = this.searchable && this.open
+            ? html `
+            <input
+              class="search-input"
+              .value=${this.query}
+              aria-label=${t('form.select.searchAriaLabel')}
+              placeholder=${t('form.select.searchPlaceholder')}
+              type="text"
+              @click=${(event) => event.stopPropagation()}
+              @input=${(event) => {
+                this.query = event.currentTarget.value;
+                this.activeIndex = 0;
+            }}
+            />
+          `
+            : selectedLabel;
+        return html `
+      <div
+        class=${classMap({
+            trigger: true,
+            open: this.open,
+            disabled: this.disabled,
+        })}
+        aria-expanded=${String(this.open)}
+        role="combobox"
+        title=${this.title}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this.toggleOpen}
+        @keydown=${this.handleTriggerKeydown}
+      >
+        <div class="value">
+          ${this.icon
+            ? html `
+                  <aithe-icon class="value-icon" name=${this.icon} size="16"></aithe-icon>
+                `
+            : nothing}
+          ${valueContent}
+        </div>
+        <span class="actions">
+          ${this.clearable && this.value
+            ? html `
+                  <button
+                    class="action"
+                    type="button"
+                    aria-label=${t('form.select.clearAriaLabel')}
+                    @click=${this.clearValue}
+                  >
+                    ×
+                  </button>
+                `
+            : null}
+          <span aria-hidden="true">${this.open ? '▴' : '▾'}</span>
+        </span>
+      </div>
+      ${this.open
+            ? html `
+              <div class="panel" role="listbox">${this.renderOptionList()}</div>
+            `
+            : null}
+    `;
+    }
+    renderOptionList() {
+        if (!this.filteredOptions.length) {
+            return [
+                html `
+          <div class="empty">${t('form.select.emptyText')}</div>
+        `,
+            ];
+        }
+        const hasGroup = this.filteredOptions.some((o) => o.group);
+        if (!hasGroup) {
+            return this.filteredOptions.map((option, index) => this.renderOption(option, index));
+        }
+        let flatIndex = 0;
+        return this.groupedOptions.map((group) => {
+            const header = group.label
+                ? html `
+            <div class="group-header" role="presentation">${group.label}</div>
+          `
+                : nothing;
+            const items = group.options.map((option) => this.renderOption(option, flatIndex++));
+            return html `
+        <div class="group">${header}${items}</div>
+      `;
+        });
+    }
+    /** Renders a single option button. 渲染单个选项按钮。 */
+    renderOption(option, index) {
+        const intentClass = option.variant && option.variant !== 'default' ? option.variant : '';
+        const optionIcon = option.icon
+            ? html `
+          <aithe-icon class="option-icon" name=${option.icon} size="20"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <button
+        class=${classMap({
+            option: true,
+            active: index === this.activeIndex,
+            [intentClass]: Boolean(intentClass),
+        })}
+        ?disabled=${option.disabled}
+        type="button"
+        @click=${() => this.selectOption(option)}
+        @mouseenter=${() => (this.activeIndex = index)}
+      >
+        ${optionIcon}
+        <span style="display:grid;gap:2px;flex:1;min-width:0;">
+          <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+            ${option.label}
+          </span>
+          ${option.description
+            ? html `
+                  <span class="desc">${option.description}</span>
+                `
+            : null}
+        </span>
+      </button>
+    `;
+    }
+    /** Groups filtered options by their `group` field. 按 group 字段对过滤后的选项聚合。 */
+    get groupedOptions() {
+        const map = new Map();
+        for (const opt of this.filteredOptions) {
+            const g = opt.group ?? '';
+            if (!map.has(g))
+                map.set(g, []);
+            map.get(g).push(opt);
+        }
+        const groups = [];
+        for (const [label, opts] of map) {
+            groups.push({ label: label || undefined, options: opts });
+        }
+        return groups;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'options' })
+], AitheSelect.prototype, "optionsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], AitheSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheSelect.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheSelect.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSelect.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSelect.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheSelect.prototype, "placement", void 0);
+__decorate([
+    query('.trigger')
+], AitheSelect.prototype, "triggerElement", void 0);
+__decorate([
+    query('.panel')
+], AitheSelect.prototype, "panel", void 0);
+__decorate([
+    query('.search-input')
+], AitheSelect.prototype, "searchInput", void 0);
+__decorate([
+    state()
+], AitheSelect.prototype, "query", void 0);
+__decorate([
+    state()
+], AitheSelect.prototype, "activeIndex", void 0);
+AitheSelect = __decorate([
+    customElement('aithe-select')
+], AitheSelect);
+export { AitheSelect };

package/dist/components/form/slider.js

@@ -0,0 +1,134 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Numeric slider with single and range modes.
+ * 数值滑块，支持单值和范围模式。
+ *
+ * @slot - Default slot (unused; slider is self-contained). 默认插槽（未使用，滑块为自包含组件）。
+ * @fires aithe-change - Emitted when the slider value changes, with `{ value }`. 滑块值变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-slider value="50" min="0" max="100" step="1"></aithe-slider>
+ * <aithe-slider range value="20,80"></aithe-slider>
+ * ```
+ */
+let AitheSlider = class AitheSlider extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Minimum value of the slider. 滑块的最小值。 */
+        this.min = 0;
+        /** Maximum value of the slider. 滑块的最大值。 */
+        this.max = 100;
+        /** Step increment for the slider. 滑块的步进增量。 */
+        this.step = 1;
+        /** Whether to enable range (dual-thumb) mode. 是否启用范围（双滑块）模式。 */
+        this.range = false;
+        /** Current value (comma-separated for range mode). 当前值（范围模式用逗号分隔）。 */
+        this.value = '50';
+        /** Whether the slider is disabled. 是否禁用滑块。 */
+        this.disabled = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: min(100%, 320px);
+      }
+
+      .wrap {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+
+      .track {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .value {
+        color: var(--aithe-color-text-muted);
+        font-family: var(--aithe-font-family-mono);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    get values() {
+        const parts = this.value.split(',').map((item) => Number(item.trim()));
+        return [parts[0] ?? this.min, parts[1] ?? parts[0] ?? this.min];
+    }
+    updateValue(index, next) {
+        if (!this.range) {
+            this.value = String(next);
+            this.emit('aithe-change', { value: next });
+            return;
+        }
+        const [start, end] = this.values;
+        const pair = index === 0 ? [Math.min(next, end), end] : [start, Math.max(start, next)];
+        this.value = `${pair[0]},${pair[1]}`;
+        this.emit('aithe-change', { value: pair });
+    }
+    render() {
+        const [start, end] = this.values;
+        return html `
+      <div class="wrap">
+        <div class="track">
+          <input
+            type="range"
+            .value=${String(start)}
+            .min=${String(this.min)}
+            .max=${String(this.max)}
+            .step=${String(this.step)}
+            ?disabled=${this.disabled}
+            @input=${(event) => this.updateValue(0, Number(event.currentTarget.value))}
+          />
+          ${this.range
+            ? html `
+                <input
+                  type="range"
+                  .value=${String(end)}
+                  .min=${String(this.min)}
+                  .max=${String(this.max)}
+                  .step=${String(this.step)}
+                  ?disabled=${this.disabled}
+                  @input=${(event) => this.updateValue(1, Number(event.currentTarget.value))}
+                />
+              `
+            : null}
+        </div>
+        <span class="value">${this.range ? `${start} - ${end}` : start}</span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], AitheSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], AitheSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSlider.prototype, "range", void 0);
+__decorate([
+    property({ type: String })
+], AitheSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSlider.prototype, "disabled", void 0);
+AitheSlider = __decorate([
+    customElement('aithe-slider')
+], AitheSlider);
+export { AitheSlider };