@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/form/switch.js

@@ -0,0 +1,146 @@
+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';
+/**
+ * Toggle switch with size and color variants.
+ * 开关切换组件，支持尺寸和颜色变体。
+ *
+ * @slot - Default slot (unused; switch is self-contained). 默认插槽（未使用，开关为自包含组件）。
+ * @fires aithe-change - Emitted when checked state changes, with `{ checked }`. 选中状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-switch checked size="md" variant="primary"></aithe-switch>
+ * ```
+ */
+let AitheSwitch = class AitheSwitch extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the switch is checked (on). 是否选中（开启）。 */
+        this.checked = false;
+        /** Whether the switch is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Switch size preset. 开关尺寸预设。 */
+        this.size = 'md';
+        /** Toggles the checked state and emits change event. 切换选中状态并触发变更事件。 */
+        this.toggleSwitch = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.emit('aithe-change', { checked: this.checked });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        border: none;
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-neutral-4);
+        cursor: pointer;
+        transition: background var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      button.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      .sm {
+        width: 36px;
+        height: 20px;
+      }
+
+      .md {
+        width: 44px;
+        height: 24px;
+      }
+
+      .lg {
+        width: 54px;
+        height: 30px;
+      }
+
+      .thumb {
+        position: absolute;
+        left: 3px;
+        width: calc(50% - 3px);
+        height: calc(100% - 6px);
+        border-radius: var(--aithe-radius-full);
+        background: white;
+        box-shadow: var(--aithe-shadow-1);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .checked .thumb {
+        transform: translateX(100%);
+      }
+
+      .checked.primary {
+        background: var(--aithe-primary-6);
+      }
+
+      .checked.success {
+        background: var(--aithe-success-6);
+      }
+
+      .checked.warning {
+        background: var(--aithe-warning-5);
+      }
+
+      .checked.danger {
+        background: var(--aithe-danger-6);
+      }
+
+      .checked.default {
+        background: var(--aithe-neutral-7);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <button
+        class=${classMap({
+            [this.size]: true,
+            [this.variant]: true,
+            checked: this.checked,
+            disabled: this.disabled,
+        })}
+        aria-checked=${String(this.checked)}
+        role="switch"
+        type="button"
+        @click=${this.toggleSwitch}
+      >
+        <span class="thumb"></span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheSwitch.prototype, "size", void 0);
+AitheSwitch = __decorate([
+    customElement('aithe-switch')
+], AitheSwitch);
+export { AitheSwitch };

package/dist/components/form/time-picker.js

@@ -0,0 +1,92 @@
+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';
+/**
+ * Time picker wrapper around native input.
+ * 基于原生输入的时间选择器。
+ *
+ * @slot - Default slot (unused; picker is self-contained). 默认插槽（未使用，选择器为自包含组件）。
+ * @fires aithe-change - Emitted when the time value changes, with `{ value, format, step }`. 时间值变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-time-picker value="09:30" format="HH:mm" step="300"></aithe-time-picker>
+ * ```
+ */
+let AitheTimePicker = class AitheTimePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current time value. 当前时间值。 */
+        this.value = '';
+        /** Display format pattern. 显示格式模式。 */
+        this.format = 'HH:mm';
+        /** Step interval in seconds for the time input. 时间输入的步进间隔（秒）。 */
+        this.step = 300;
+        /** Whether the time picker is disabled. 是否禁用时间选择器。 */
+        this.disabled = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .wrap {
+        display: inline-flex;
+        align-items: center;
+        min-height: var(--aithe-control-height-md);
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      input {
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--aithe-color-text);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="wrap">
+        <input
+          type="time"
+          .value=${this.value}
+          .step=${String(this.step)}
+          ?disabled=${this.disabled}
+          @change=${(event) => {
+            this.value = event.currentTarget.value;
+            this.emit('aithe-change', { value: this.value, format: this.format, step: this.step });
+        }}
+        />
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTimePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheTimePicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Number })
+], AitheTimePicker.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTimePicker.prototype, "disabled", void 0);
+AitheTimePicker = __decorate([
+    customElement('aithe-time-picker')
+], AitheTimePicker);
+export { AitheTimePicker };

package/dist/components/form/transfer.js

@@ -0,0 +1,273 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Dual-list transfer component for moving items between source and target panels.
+ * 双列表穿梭框组件，用于在源面板和目标面板之间移动项目。
+ *
+ * @slot - Default slot (unused; transfer is self-contained). 默认插槽（未使用，穿梭框为自包含组件）。
+ * @fires aithe-change - Emitted when items are transferred, with `{ value: string[] }`. 项目转移时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-transfer
+ *   data='[{"label":"Item A","id":"a"},{"label":"Item B","id":"b"}]'
+ *   value='["b"]'
+ *   titles='["Source","Target"]'
+ *   searchable
+ * ></aithe-transfer>
+ * ```
+ */
+let AitheTransfer = class AitheTransfer extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of transfer item data. 穿梭框项目数据的 JSON 字符串。 */
+        this.data = '[]';
+        /** JSON string of currently transferred values. 当前已转移值的 JSON 字符串。 */
+        this.value = '[]';
+        /** JSON string of panel titles `[sourceTitle, targetTitle]`. 面板标题的 JSON 字符串 `[源标题, 目标标题]`。 */
+        this.titles = '';
+        /** Whether panels support search/filter. 是否支持面板搜索过滤。 */
+        this.searchable = false;
+        this.leftSelected = new Set();
+        this.rightSelected = new Set();
+        this.leftQuery = '';
+        this.rightQuery = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+        gap: var(--aithe-space-4);
+        align-items: start;
+      }
+
+      .panel {
+        display: grid;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .title {
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .search {
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+      }
+
+      .list {
+        display: grid;
+        gap: var(--aithe-space-2);
+        max-height: 240px;
+        overflow: auto;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+      }
+
+      .actions {
+        display: grid;
+        gap: var(--aithe-space-2);
+        align-self: center;
+      }
+
+      button {
+        min-width: 42px;
+        min-height: 36px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    get parsedData() {
+        try {
+            return JSON.parse(this.data);
+        }
+        catch {
+            return [];
+        }
+    }
+    get parsedValue() {
+        try {
+            return JSON.parse(this.value);
+        }
+        catch {
+            return this.value
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean);
+        }
+    }
+    get parsedTitles() {
+        try {
+            const parsed = JSON.parse(this.titles);
+            return [
+                parsed[0] || t('form.transfer.sourceTitle'),
+                parsed[1] || t('form.transfer.targetTitle'),
+            ];
+        }
+        catch {
+            return [t('form.transfer.sourceTitle'), t('form.transfer.targetTitle')];
+        }
+    }
+    get lists() {
+        const selected = new Set(this.parsedValue);
+        const left = this.parsedData.filter((item) => !selected.has(item.id));
+        const right = this.parsedData.filter((item) => selected.has(item.id));
+        return { left, right };
+    }
+    filtered(items, query) {
+        if (!this.searchable || !query) {
+            return items;
+        }
+        const keyword = query.toLowerCase();
+        return items.filter((item) => item.label.toLowerCase().includes(keyword));
+    }
+    move(direction) {
+        const current = new Set(this.parsedValue);
+        const source = direction === 'right' ? this.leftSelected : this.rightSelected;
+        for (const value of source) {
+            if (direction === 'right') {
+                current.add(value);
+            }
+            else {
+                current.delete(value);
+            }
+        }
+        this.value = JSON.stringify(Array.from(current));
+        this.leftSelected = new Set();
+        this.rightSelected = new Set();
+        this.emit('aithe-change', { value: JSON.parse(this.value) });
+    }
+    toggle(setter, value, checked) {
+        const current = new Set(this[setter]);
+        if (checked) {
+            current.add(value);
+        }
+        else {
+            current.delete(value);
+        }
+        this[setter] = current;
+    }
+    render() {
+        const { left, right } = this.lists;
+        const [leftTitle, rightTitle] = this.parsedTitles;
+        const leftItems = this.filtered(left, this.leftQuery);
+        const rightItems = this.filtered(right, this.rightQuery);
+        return html `
+      <div class="panel">
+        <div class="title">${leftTitle}</div>
+        ${this.searchable
+            ? html `
+              <input
+                class="search"
+                .value=${this.leftQuery}
+                @input=${(event) => {
+                this.leftQuery = event.currentTarget.value;
+            }}
+              />
+            `
+            : null}
+        <div class="list">
+          ${leftItems.map((item) => html `
+              <label class="row">
+                <input
+                  type="checkbox"
+                  ?disabled=${item.disabled}
+                  ?checked=${this.leftSelected.has(item.id)}
+                  @change=${(event) => this.toggle('leftSelected', item.id, event.currentTarget.checked)}
+                />
+                <span>${item.label}</span>
+              </label>
+            `)}
+        </div>
+      </div>
+      <div class="actions">
+        <button type="button" @click=${() => this.move('right')}>→</button>
+        <button type="button" @click=${() => this.move('left')}>←</button>
+      </div>
+      <div class="panel">
+        <div class="title">${rightTitle}</div>
+        ${this.searchable
+            ? html `
+              <input
+                class="search"
+                .value=${this.rightQuery}
+                @input=${(event) => {
+                this.rightQuery = event.currentTarget.value;
+            }}
+              />
+            `
+            : null}
+        <div class="list">
+          ${rightItems.map((item) => html `
+              <label class="row">
+                <input
+                  type="checkbox"
+                  ?disabled=${item.disabled}
+                  ?checked=${this.rightSelected.has(item.id)}
+                  @change=${(event) => this.toggle('rightSelected', item.id, event.currentTarget.checked)}
+                />
+                <span>${item.label}</span>
+              </label>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTransfer.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], AitheTransfer.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheTransfer.prototype, "titles", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTransfer.prototype, "searchable", void 0);
+__decorate([
+    state()
+], AitheTransfer.prototype, "leftSelected", void 0);
+__decorate([
+    state()
+], AitheTransfer.prototype, "rightSelected", void 0);
+__decorate([
+    state()
+], AitheTransfer.prototype, "leftQuery", void 0);
+__decorate([
+    state()
+], AitheTransfer.prototype, "rightQuery", void 0);
+AitheTransfer = __decorate([
+    customElement('aithe-transfer')
+], AitheTransfer);
+export { AitheTransfer };

package/dist/components/form/upload.js

@@ -0,0 +1,138 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Local file picker with upload-like progress events.
+ * 本地文件选择器，支持类上传进度事件。
+ *
+ * @slot - Default slot for the upload trigger button label. 上传触发按钮标签内容。
+ * @fires aithe-change - Emitted when files are selected, with `{ files }`. 文件选择时触发。
+ * @fires aithe-progress - Emitted with upload progress, with `{ percent, files }`. 上传进度时触发。
+ * @fires aithe-success - Emitted when upload completes, with `{ files, url }`. 上传完成时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-upload url="/api/upload" accept=".png,.jpg" multiple limit="3">
+ *   Choose files
+ * </aithe-upload>
+ * ```
+ */
+let AitheUpload = class AitheUpload extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Upload target URL. 上传目标 URL。 */
+        this.url = '';
+        /** Whether multiple files can be selected. 是否允许选择多个文件。 */
+        this.multiple = false;
+        /** Accepted file types (MIME or extension). 接受的文件类型（MIME 或扩展名）。 */
+        this.accept = '';
+        /** Maximum number of files allowed (0 = unlimited). 允许的最大文件数（0 = 不限）。 */
+        this.limit = 0;
+        /** Whether the upload is disabled. 是否禁用上传。 */
+        this.disabled = false;
+        this.files = [];
+        this.handleFiles = (event) => {
+            const fileList = event.currentTarget.files;
+            const next = fileList ? Array.from(fileList) : [];
+            this.files = this.limit > 0 ? next.slice(0, this.limit) : next;
+            this.emit('aithe-change', { files: this.files });
+            this.emit('aithe-progress', { percent: 100, files: this.files });
+            this.emit('aithe-success', { files: this.files, url: this.url });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: var(--aithe-control-height-md);
+        padding: 0 var(--aithe-space-4);
+        border: 1px dashed var(--aithe-color-border-strong);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      .list {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .file {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <label class="trigger">
+        <input
+          hidden
+          type="file"
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this.handleFiles}
+        />
+        <slot>${t('form.upload.chooseFiles')}</slot>
+      </label>
+      ${this.files.length
+            ? html `
+            <div class="list">
+              ${this.files.map((file) => html `
+                  <div class="file">
+                    <span>${file.name}</span>
+                    <span>${Math.ceil(file.size / 1024)} ${t('form.upload.kb')}</span>
+                  </div>
+                `)}
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheUpload.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheUpload.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], AitheUpload.prototype, "accept", void 0);
+__decorate([
+    property({ type: Number })
+], AitheUpload.prototype, "limit", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheUpload.prototype, "disabled", void 0);
+__decorate([
+    state()
+], AitheUpload.prototype, "files", void 0);
+AitheUpload = __decorate([
+    customElement('aithe-upload')
+], AitheUpload);
+export { AitheUpload };