@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/form/radio.js

@@ -0,0 +1,110 @@
+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';
+/**
+ * Radio button input with label slot.
+ * 单选按钮输入组件，支持标签插槽。
+ *
+ * @slot - Default slot for radio label text. 单选按钮标签文本。
+ * @fires aithe-change - Emitted when checked state changes (standalone). 选中状态变更时触发（独立使用）。
+ * @fires aithe-radio-toggle - Emitted inside radio-group for group coordination. 在单选组内触发以协调状态。
+ * @example
+ * ```html
+ * <aithe-radio value="a" name="choice">Option A</aithe-radio>
+ * ```
+ */
+let AitheRadio = class AitheRadio extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the radio is checked. 是否选中。 */
+        this.checked = false;
+        /** Whether the radio is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Value submitted when selected (used in groups). 选中时提交的值（在组中使用）。 */
+        this.value = '';
+        /** Name attribute for form submission. 表单提交的 name 属性。 */
+        this.name = '';
+        /** Disabled state propagated from parent radio-group. 从父级单选组传递的禁用状态。 */
+        this.groupDisabled = false;
+        /** Handles native change event and emits appropriate custom event. 处理原生变更事件并触发自定义事件。 */
+        this.handleChange = (event) => {
+            const input = event.currentTarget;
+            const checked = input.checked;
+            if (this.closest('aithe-radio-group')) {
+                input.checked = checked;
+                this.emit('aithe-radio-toggle', { checked, value: this.value });
+                return;
+            }
+            this.checked = checked;
+            this.emit('aithe-change', { checked: this.checked, value: this.value });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        cursor: pointer;
+      }
+
+      label.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      input {
+        width: 16px;
+        height: 16px;
+        accent-color: var(--aithe-primary-6);
+      }
+    `,
+    ]; }
+    render() {
+        const disabled = this.disabled || this.groupDisabled;
+        return html `
+      <label class=${disabled ? 'disabled' : ''}>
+        <input
+          ?checked=${this.checked}
+          ?disabled=${disabled}
+          name=${this.name}
+          type="radio"
+          value=${this.value}
+          @change=${this.handleChange}
+        />
+        <slot></slot>
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheRadio.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheRadio.prototype, "name", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheRadio.prototype, "groupDisabled", void 0);
+AitheRadio = __decorate([
+    customElement('aithe-radio')
+], AitheRadio);
+export { AitheRadio };

package/dist/components/form/rate.d.ts

@@ -1,11 +1,24 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Star rating component with optional half steps.
+ * 星级评分组件，支持可选的半星步进。
+ *
+ * @slot - Default slot (unused; rate is self-contained). 默认插槽（未使用，评分组件为自包含组件）。
+ * @fires aithe-change - Emitted when the rating value changes, with `{ value }`. 评分值变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-rate value="3" max="5" allow-half color="var(--aithe-warning-5)"></aithe-rate>
+ * ```
  */
 export declare class AitheRate extends AitheElement {
+    /** Maximum number of stars. 最大星数。 */
     max: number;
+    /** Whether to allow half-star ratings. 是否允许半星评分。 */
     allowHalf: boolean;
+    /** Custom color for filled stars. 已填充星星的自定义颜色。 */
     color: string;
+    /** Current rating value. 当前评分值。 */
     value: number;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private setValue;

package/dist/components/form/rate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rate.d.ts","sourceRoot":"","sources":["../../../src/components/form/rate.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,SAAU,SAAQ,YAAY;IACb,GAAG,SAAK;IACkB,SAAS,UAAS;IAC5C,KAAK,SAA4B;IACjC,KAAK,SAAK;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoCpB;IAEF,OAAO,CAAC,QAAQ;IAQhB,MAAM;CAeP"}
+{"version":3,"file":"rate.d.ts","sourceRoot":"","sources":["../../../src/components/form/rate.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,qCAAqC;IACT,GAAG,SAAK;IACpC,oDAAoD;IACE,SAAS,UAAS;IACxE,kDAAkD;IACtB,KAAK,SAA4B;IAC7D,mCAAmC;IACP,KAAK,SAAK;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoCpB;IAEF,OAAO,CAAC,QAAQ;IAQhB,MAAM;CAmBP"}

package/dist/components/form/rate.js

@@ -0,0 +1,116 @@
+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 { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Star rating component with optional half steps.
+ * 星级评分组件，支持可选的半星步进。
+ *
+ * @slot - Default slot (unused; rate is self-contained). 默认插槽（未使用，评分组件为自包含组件）。
+ * @fires aithe-change - Emitted when the rating value changes, with `{ value }`. 评分值变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-rate value="3" max="5" allow-half color="var(--aithe-warning-5)"></aithe-rate>
+ * ```
+ */
+let AitheRate = class AitheRate extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Maximum number of stars. 最大星数。 */
+        this.max = 5;
+        /** Whether to allow half-star ratings. 是否允许半星评分。 */
+        this.allowHalf = false;
+        /** Custom color for filled stars. 已填充星星的自定义颜色。 */
+        this.color = 'var(--aithe-warning-5)';
+        /** Current rating value. 当前评分值。 */
+        this.value = 0;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .stars {
+        display: inline-flex;
+        gap: var(--aithe-space-2);
+      }
+
+      button {
+        position: relative;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-border-strong);
+        cursor: pointer;
+        font-size: 24px;
+        line-height: 1;
+      }
+
+      .star,
+      .fill {
+        position: absolute;
+        inset: 0;
+      }
+
+      .fill {
+        overflow: hidden;
+        color: var(--aithe-rate-color, var(--aithe-warning-5));
+      }
+    `,
+    ]; }
+    setValue(event, index) {
+        const width = event.currentTarget.getBoundingClientRect().width;
+        const offset = event.offsetX;
+        const next = this.allowHalf && offset < width / 2 ? index + 0.5 : index + 1;
+        this.value = next;
+        this.emit('aithe-change', { value: this.value });
+    }
+    render() {
+        return html `
+      <div class="stars" style=${styleMap({ '--aithe-rate-color': this.color })}>
+        ${Array.from({ length: this.max }, (_, index) => {
+            const fillPercent = Math.max(0, Math.min(1, this.value - index)) * 100;
+            return html `
+            <button
+              type="button"
+              aria-label=${t('form.rate.ariaLabel', 'Rate {index}', { index: index + 1 })}
+              @click=${(event) => this.setValue(event, index)}
+            >
+              <span class="star">★</span>
+              <span class="fill" style=${`width:${fillPercent}%;`}>★</span>
+            </button>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheRate.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-half' })
+], AitheRate.prototype, "allowHalf", void 0);
+__decorate([
+    property({ type: String })
+], AitheRate.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], AitheRate.prototype, "value", void 0);
+AitheRate = __decorate([
+    customElement('aithe-rate')
+], AitheRate);
+export { AitheRate };

package/dist/components/form/select.d.ts

@@ -1,20 +1,50 @@
 import type { PropertyValues } from 'lit';
 import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
 import type { AitheSelectOption } from '../../core/types';
+/**
+ * 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>
+ * ```
+ */
 export declare class AitheSelect extends AitheAnchoredOverlayElement {
+    /** JSON string of select options. 选项的 JSON 字符串。 */
     optionsJson: string;
+    /** Array of select option objects. 选项对象数组。 */
     options: AitheSelectOption[];
+    /** Currently selected value. 当前选中的值。 */
     value: string;
+    /** Display title for the select (shown as tooltip). 下拉选择的显示标题（作为工具提示）。 */
+    title: string;
+    /** Icon name to display before the selected value. 在选中值前显示的图标名称。 */
+    icon: string;
+    /** Placeholder text shown when no value is selected. 无选中值时的占位文本。 */
     placeholder: string;
+    /** Whether the select supports search/filter. 是否支持搜索过滤。 */
     searchable: boolean;
+    /** Whether the selected value can be cleared. 是否允许清除选中值。 */
     clearable: boolean;
+    /** Whether the select is disabled. 是否禁用。 */
     disabled: boolean;
+    /** Dropdown panel placement. 下拉面板位置。 */
     placement: 'bottom-start' | 'top-start';
-    private triggerElement?;
-    private panel?;
-    private searchInput?;
+    private readonly triggerElement?;
+    private readonly panel?;
+    private readonly searchInput?;
     private query;
     private activeIndex;
+    /** Parses optionsJson into the options array on property change. 属性变更时将 optionsJson 解析为 options 数组。 */
     protected willUpdate(changed: PropertyValues<this>): void;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     protected get panelElement(): HTMLElement | null;
@@ -22,14 +52,23 @@ export declare class AitheSelect extends AitheAnchoredOverlayElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues<this>): void;
+    /** Returns the option object matching the current value. 返回与当前值匹配的选项对象。 */
     private get selectedOption();
+    /** Filters options by search query keyword. 根据搜索关键词过滤选项。 */
     private get filteredOptions();
-    private handleOutsidePointer;
-    private handleDocumentKeydown;
-    private toggleOpen;
+    /** Closes dropdown on outside pointer events. 点击外部时关闭下拉框。 */
+    private readonly handleOutsidePointer;
+    /** Closes dropdown on Escape key. 按 Escape 键关闭下拉框。 */
+    private readonly handleDocumentKeydown;
+    /** Toggles the dropdown open state. 切换下拉框开关状态。 */
+    private readonly toggleOpen;
+    /** Selects an option, closes dropdown, and emits change event. 选中选项、关闭下拉框并触发变更事件。 */
     private selectOption;
-    private clearValue;
-    private handleTriggerKeydown;
+    /** Clears the current value and emits clear + change events. 清除当前值并触发清除和变更事件。 */
+    private readonly clearValue;
+    /** Handles keyboard navigation for the trigger element. 处理触发元素的键盘导航。 */
+    private readonly handleTriggerKeydown;
     render(): import("lit-html").TemplateResult<1>;
+    private renderOptionList;
 }
 //# sourceMappingURL=select.d.ts.map

package/dist/components/form/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,qBACa,WAAY,SAAQ,2BAA2B;IACR,WAAW,SAAM;IACnC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACtC,KAAK,SAAM;IACX,WAAW,SAAS;IACnB,UAAU,UAAS;IACnB,SAAS,UAAS;IACH,QAAQ,UAAS;IACjC,SAAS,EAAE,cAAc,GAAG,WAAW,CAAkB;IAElE,OAAO,CAAC,cAAc,CAAC,CAAc;IACvC,OAAO,CAAC,KAAK,CAAC,CAAc;IACrB,OAAO,CAAC,WAAW,CAAC,CAAmB;IAEtD,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAAM;IAElC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA2HpB;IAEF,SAAS,KAAK,YAAY,IAAI,WAAW,GAAG,IAAI,CAE/C;IAED,SAAS,KAAK,aAAa,IAAI,WAAW,CAEzC;IAED,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqBtD,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,oBAAoB,CAiC1B;IAEF,MAAM;CA0EP"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIrD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,2BAA2B;IAC1D,mDAAmD;IACD,WAAW,SAAM;IACnE,8CAA8C;IACd,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClE,wCAAwC;IACZ,KAAK,SAAM;IACvC,0EAA0E;IAC9C,KAAK,SAAM;IACvC,oEAAoE;IACxC,IAAI,SAAM;IACtC,oEAAoE;IACxC,WAAW,SAAM;IAC7C,2DAA2D;IAC9B,UAAU,UAAS;IAChD,4DAA4D;IAC/B,SAAS,UAAS;IAC/C,4CAA4C;IACA,QAAQ,UAAS;IAC7D,wCAAwC;IACZ,SAAS,EAAE,cAAc,GAAG,WAAW,CAAkB;IAElE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAc;IAChD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAmB;IAE/D,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAAM;IAElC,uGAAuG;IACvG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoJpB;IAEF,SAAS,KAAK,YAAY,IAAI,WAAW,GAAG,IAAI,CAE/C;IAED,SAAS,KAAK,aAAa,IAAI,WAAW,CAEzC;IAED,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwBtD,2EAA2E;IAC3E,OAAO,KAAK,cAAc,GAEzB;IAED,4DAA4D;IAC5D,OAAO,KAAK,eAAe,GAW1B;IAED,6DAA6D;IAC7D,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAInC;IAEF,sDAAsD;IACtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAMzB;IAEF,qFAAqF;IACrF,OAAO,CAAC,YAAY;IAWpB,iFAAiF;IACjF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAUzB;IAEF,wEAAwE;IACxE,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAiCnC;IAEF,MAAM;IAyEN,OAAO,CAAC,gBAAgB;CA0CzB"}