@aithe/aithe-ui 26.3.1 → 26.3.2

package/dist/components/display/autoview.js

@@ -0,0 +1,460 @@
+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;
+};
+/**
+ * @file JSON-driven read-only auto view / JSON 驱动的只读自动视图
+ * @description Renders a read-only detail view from a FormFieldConfig JSON array and a data object.
+ *              Built as a thin adapter on top of <aithe-desc>: parses the field config, resolves
+ *              dependency-based visibility, transforms values per control type, and injects
+ *              type-aware read-only content into <aithe-desc-item> slots.
+ *              基于 <aithe-desc> 的轻量适配器：解析字段配置，解析依赖联动显隐，
+ *              按控件类型转换值，将类型感知的只读内容注入 <aithe-desc-item> 的 slot。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+import { filterFactory } from '../../core/filter';
+import { FormRuleEngine, ViewRegistry } from '../../core/autoform';
+import { safeStringify } from '../../utils/utils';
+import './desc.js';
+import './label.js';
+import '../basic/tag.js';
+/**
+ * JSON-driven read-only detail view, the display-only counterpart of <aithe-autoform>.
+ * JSON 驱动的只读详情视图，<aithe-autoform> 的只读镜像。
+ *
+ * @description Shares the same FormFieldConfig model as autoform, rendering field values
+ *             as a structured description list. Supports dependency-based show/hide rules,
+ *             per-type read-only renderers (switch→badge, select→label lookup, etc.),
+ *             and custom renderers via ViewRegistry.
+ *             与 autoform 共用 FormFieldConfig 模型，将字段值渲染为结构化描述列表。
+ *             支持依赖联动显隐、按类型的只读渲染器（switch→徽章、select→label 反查等），
+ *             以及通过 ViewRegistry 注册的自定义渲染器。
+ *
+ * @slot title - Custom title content (passed through to desc). 自定义标题内容（透传给 desc）。
+ * @slot extra - Extra action content in the header (passed through to desc). 头部额外操作内容（透传给 desc）。
+ *
+ * @fires aithe-view-ready - Emitted after initial render with current visible values. 初始渲染完成后触发，携带当前可见字段值。
+ *
+ * @example
+ * ```html
+ * <aithe-autoview
+ *   fields='[
+ *     {"name":"username","type":"input","label":"用户名"},
+ *     {"name":"role","type":"select","label":"角色",
+ *      "options":[{"label":"管理员","id":"admin"}]},
+ *     {"name":"active","type":"switch","label":"状态"}
+ *   ]'
+ *   .data=${{username:"张三",role:"admin",active:true}}
+ *   column="2"
+ *   border
+ * ></aithe-autoview>
+ * ```
+ */
+let AitheAutoView = class AitheAutoView extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * JSON string of field configuration array. Same model as autoform's `fields`.
+         * 字段配置数组的 JSON 字符串，与 autoform 的 `fields` 模型一致。
+         */
+        this.fields = '[]';
+        /**
+         * Display data object. Values are keyed by field name.
+         * Supports passing an object directly or a JSON string.
+         * 展示数据对象，按字段名取值。支持直接传对象或 JSON 字符串。
+         */
+        this.data = {};
+        /** Number of columns in the grid layout. Passed to desc. 网格列数，透传给 desc。 */
+        this.column = 1;
+        /** Whether to show borders. Passed to desc. 是否显示边框，透传给 desc。 */
+        this.border = true;
+        /** Border style: 'none' / 'full' / 'row'. Passed to desc. 边框样式，透传给 desc。 */
+        this.borderStyle = 'none';
+        /** Label background style: 'filled' / 'none'. Passed to desc. 标签背景样式，透传给 desc。 */
+        this.labelBackground = 'filled';
+        /** Layout direction. Passed to desc. 布局方向，透传给 desc。 */
+        this.direction = 'horizontal';
+        /** Label cell width. Passed to desc. 标签单元格宽度，透传给 desc。 */
+        this.labelWidth = '150px';
+        /** Size preset. Passed to desc. 尺寸规格，透传给 desc。 */
+        this.size = 'md';
+        /** Title text in the header. Passed to desc. 头部标题文本，透传给 desc。 */
+        this.title = '';
+        /** Whether to show the title header. When false, the header row is hidden even if title or extra slot is set. Passed to desc. 是否显示标题头。为 false 时隐藏标题行，即使设置了 title 或 extra slot 也不显示，透传给 desc。 */
+        this.showTitle = true;
+        /** Max visible rows. 0 means no limit. Passed to desc. 最大可见行数，0 表示不限制，透传给 desc。 */
+        this.maxRows = 0;
+        /** Global empty value placeholder. Falls back to i18n. 全局空值占位文本，回退到 i18n。 */
+        this.emptyText = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .autoview-text {
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        line-height: 1.5;
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .autoview-empty {
+        color: var(--aithe-color-text-muted, var(--aithe-color-text-secondary));
+        font-size: var(--aithe-font-size-sm);
+        line-height: 1.5;
+      }
+
+      .autoview-tags {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      .autoview-color {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .autoview-color-chip {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: var(--aithe-radius-sm, 3px);
+        border: 1px solid var(--aithe-color-border, #e5e6eb);
+        flex-shrink: 0;
+      }
+    `,
+    ]; }
+    get _data() {
+        if (typeof this.data === 'string') {
+            if (!this.data)
+                return {};
+            try {
+                const parsed = JSON.parse(this.data);
+                return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+            }
+            catch {
+                return {};
+            }
+        }
+        return this.data ?? {};
+    }
+    get _emptyText() {
+        return this.emptyText || t('form.autoView.empty', '--');
+    }
+    /**
+     * Returns the values of all visible fields.
+     * 返回所有可见字段的值。
+     */
+    getValues() {
+        const configs = this.parseFields();
+        const data = this._data;
+        const values = {};
+        for (const field of configs) {
+            if (!this.isVisible(field, data))
+                continue;
+            const name = field.name ?? '';
+            if (!name)
+                continue;
+            values[name] = data[name] ?? field.dft ?? '';
+        }
+        return values;
+    }
+    /** Parses the fields JSON string into a typed array with fallback sanitization. 解析 fields JSON 字符串为类型化数组，含容错。 */
+    parseFields() {
+        const raw = this.fields || '[]';
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            try {
+                const sanitized = raw.replaceAll(/\\(?!["\\/bfnrtu])/g, '\\\\');
+                return JSON.parse(sanitized);
+            }
+            catch {
+                return [];
+            }
+        }
+    }
+    /** Normalizes options from JSON string or array. 将 options 从 JSON 字符串或数组统一为数组。 */
+    normalizeOptions(raw) {
+        if (Array.isArray(raw))
+            return raw;
+        if (typeof raw === 'string') {
+            try {
+                const parsed = JSON.parse(raw || '[]');
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    /** Normalizes dependency rules, parsing options for 'update' type rules. 规范化依赖规则。 */
+    normalizeRules(rules) {
+        if (!rules)
+            return [];
+        return rules.map((rule) => ({
+            ...rule,
+            options: rule.type === 'update' && rule.options != null
+                ? this.normalizeOptions(rule.options)
+                : rule.options,
+        }));
+    }
+    /**
+     * Evaluates show/hide rules to determine field visibility.
+     * Only 'show' and 'hide' rule types are honored in read-only mode;
+     * disable/enable/clear/update are ignored.
+     * 评估 show/hide 规则决定字段可见性。
+     * 只读模式下仅生效 show/hide，忽略 disable/enable/clear/update。
+     */
+    isVisible(field, data) {
+        const rules = this.normalizeRules(field.rules);
+        const visibleRules = rules.filter((r) => r.type === 'show' || r.type === 'hide');
+        if (visibleRules.length === 0)
+            return true;
+        const depValues = {};
+        for (const dep of field.dependencies ?? []) {
+            depValues[dep] = data[dep] ?? '';
+        }
+        const result = FormRuleEngine.evaluate(visibleRules, depValues, {
+            visible: true,
+            disabled: false,
+            options: this.normalizeOptions(field.options),
+            value: safeStringify(data[field.name ?? ''] ?? field.dft ?? ''),
+        });
+        return result.visible;
+    }
+    /** Resolves the raw string value for a field from data or default. 从 data 或缺省值解析字段的原始字符串值。 */
+    resolveRawValue(field, data) {
+        const name = field.name ?? '';
+        const val = name in data ? data[name] : (field.dft ?? '');
+        if (val == null)
+            return '';
+        if (typeof val === 'boolean')
+            return val ? 'true' : 'false';
+        if (typeof val === 'number')
+            return String(val);
+        if (Array.isArray(val))
+            return JSON.stringify(val);
+        if (typeof val === 'object')
+            return safeStringify(val);
+        return safeStringify(val);
+    }
+    /** Transforms the raw string value into its typed display value. 将原始字符串值转换为类型化的展示值。 */
+    transformValue(field, rawValue) {
+        const type = field.type ?? 'input';
+        switch (type) {
+            case 'switch':
+                return rawValue === 'true' || rawValue === '';
+            case 'number': {
+                const num = Number(rawValue);
+                return Number.isNaN(num) ? '' : num;
+            }
+            case 'checkbox': {
+                try {
+                    const parsed = JSON.parse(rawValue || '[]');
+                    return Array.isArray(parsed) ? parsed : [];
+                }
+                catch {
+                    return [];
+                }
+            }
+            default:
+                return rawValue;
+        }
+    }
+    /** Renders the type-aware read-only content for a field. 渲染字段的类型感知只读内容。 */
+    renderContent(field, data) {
+        const rawValue = this.resolveRawValue(field, data);
+        const value = this.transformValue(field, rawValue);
+        const options = this.normalizeOptions(field.options);
+        const emptyText = field.emptyText || this._emptyText;
+        const ctx = { value, rawValue, options, field, emptyText };
+        // Custom registered renderer takes precedence.
+        const custom = ViewRegistry.get(field.type ?? 'input');
+        if (custom) {
+            return custom.render(ctx);
+        }
+        return this.renderBuiltin(field, ctx);
+    }
+    /** Renders one of the built-in read-only views by control type. 按控件类型渲染内置只读视图。 */
+    renderBuiltin(field, ctx) {
+        const type = field.type ?? 'input';
+        // Apply filter expression if provided (for input/textarea/number/date types).
+        if (field.filter) {
+            return this.renderFiltered(ctx.rawValue, ctx.emptyText, field.filter);
+        }
+        switch (type) {
+            case 'select':
+            case 'radio':
+                return this.renderOptionLabel(ctx.options, ctx.rawValue, ctx.emptyText);
+            case 'checkbox':
+                return this.renderCheckboxTags(ctx.value, ctx.options, ctx.emptyText);
+            case 'switch':
+                return this.renderSwitch(ctx.value);
+            case 'date-picker':
+            case 'time-picker':
+                return this.renderDate(ctx.rawValue, ctx.emptyText);
+            case 'color-picker':
+                return this.renderColor(ctx.rawValue, ctx.emptyText);
+            case 'rate':
+            case 'slider':
+                return this.renderPlain(ctx.rawValue, ctx.emptyText);
+            default:
+                return this.renderPlain(ctx.rawValue, ctx.emptyText);
+        }
+    }
+    /** Renders a filter-formatted text value. 渲染过滤器格式化后的文本值。 */
+    renderFiltered(rawValue, emptyText, filterExpr) {
+        const filtered = filterFactory.format(rawValue, filterExpr);
+        const text = filtered == null || filtered === '' ? emptyText : safeStringify(filtered);
+        return html `<span class="autoview-text">${text}</span>`;
+    }
+    /** Renders the label of a matched option for select/radio. 渲染 select/radio 匹配选项的 label。 */
+    renderOptionLabel(options, rawValue, emptyText) {
+        const matched = options.find((o) => o.id === rawValue);
+        return html `<span class="autoview-text">${matched?.label ?? emptyText}</span>`;
+    }
+    /** Renders multiple tags for checkbox values. 渲染 checkbox 多值的标签组。 */
+    renderCheckboxTags(value, options, emptyText) {
+        const arr = Array.isArray(value) ? value : [];
+        if (arr.length === 0)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        return html `<span class="autoview-tags">
+      ${arr.map((id) => {
+            const matched = options.find((o) => o.id === id);
+            return html `<aithe-tag variant="default" size="sm">${matched?.label ?? id}</aithe-tag>`;
+        })}
+    </span>`;
+    }
+    /** Renders a yes/no tag for switch. 渲染 switch 的 是/否 标签。 */
+    renderSwitch(value) {
+        const on = value === true;
+        return html `<aithe-tag variant=${on ? 'success' : 'default'} size="sm">
+      ${on ? t('form.autoView.yes', 'Yes') : t('form.autoView.no', 'No')}
+    </aithe-tag>`;
+    }
+    /** Renders a formatted date value. 渲染格式化日期值。 */
+    renderDate(rawValue, emptyText) {
+        if (!rawValue)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        const filtered = filterFactory.format(rawValue, 'date yyyy-MM-dd');
+        return html `<span class="autoview-text">${filtered || emptyText}</span>`;
+    }
+    /** Renders a color chip plus hex text. 渲染色块及色值文本。 */
+    renderColor(rawValue, emptyText) {
+        if (!rawValue)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        return html `<span class="autoview-color">
+      <span class="autoview-color-chip" style="background:${rawValue}"></span>
+      <span class="autoview-text">${rawValue}</span>
+    </span>`;
+    }
+    /** Renders a plain text value with empty fallback. 渲染纯文本值，空值回退。 */
+    renderPlain(rawValue, emptyText) {
+        const text = rawValue || emptyText;
+        const isEmpty = !rawValue;
+        return html `<span class=${isEmpty ? 'autoview-empty' : 'autoview-text'}>${text}</span>`;
+    }
+    render() {
+        const configs = this.parseFields();
+        const data = this._data;
+        return html `
+      <aithe-desc
+        column=${this.column}
+        ?border=${this.border}
+        border-style=${this.borderStyle}
+        label-background=${this.labelBackground}
+        direction=${this.direction}
+        label-width=${this.labelWidth}
+        size=${this.size}
+        title=${this.title || nothing}
+        .showTitle=${this.showTitle}
+        max-rows=${this.maxRows}
+      >
+        <slot name="title" slot="title"></slot>
+        <slot name="extra" slot="extra"></slot>
+        ${configs.map((field) => this.renderItem(field, data))}
+      </aithe-desc>
+    `;
+    }
+    /** Renders a single desc-item with type-aware content. 渲染单个 desc-item 及其类型感知内容。 */
+    renderItem(field, data) {
+        if (!this.isVisible(field, data))
+            return html ``;
+        const label = field.hideLabel ? '' : (field.label ?? '');
+        const content = this.renderContent(field, data);
+        return html `
+      <aithe-desc-item
+        label=${label || nothing}
+        .span=${field.span ?? 1}
+        .rowspan=${field.rowspan ?? 1}
+        .align=${field.align ?? 'left'}
+      >${content}</aithe-desc-item>
+    `;
+    }
+    /**
+     * Emits `aithe-view-ready` after the first render with the values of all visible fields.
+     * 初始渲染完成后发射 `aithe-view-ready`，携带所有可见字段的值。
+     */
+    firstUpdated() {
+        this.emit('view-ready', { values: this.getValues() });
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "fields", void 0);
+__decorate([
+    property({ type: Object })
+], AitheAutoView.prototype, "data", void 0);
+__decorate([
+    property({ type: Number })
+], AitheAutoView.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAutoView.prototype, "border", void 0);
+__decorate([
+    property({ attribute: 'border-style', type: String })
+], AitheAutoView.prototype, "borderStyle", void 0);
+__decorate([
+    property({ attribute: 'label-background', type: String })
+], AitheAutoView.prototype, "labelBackground", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-width' })
+], AitheAutoView.prototype, "labelWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "title", void 0);
+__decorate([
+    property({ attribute: 'show-title', type: Boolean })
+], AitheAutoView.prototype, "showTitle", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-rows' })
+], AitheAutoView.prototype, "maxRows", void 0);
+__decorate([
+    property({ type: String, attribute: 'empty-text' })
+], AitheAutoView.prototype, "emptyText", void 0);
+AitheAutoView = __decorate([
+    customElement('aithe-autoview')
+], AitheAutoView);
+export { AitheAutoView };

package/dist/components/display/desc.d.ts

@@ -32,6 +32,10 @@ export declare class AitheDesc extends AitheElement {
     column: number;
     /** Whether to show border. 是否显示边框。 */
     border: boolean;
+    /** Border style: 'none' (no borders), 'full' (outer + all cell separators), 'row' (row separators only, no outer frame or column separators). 边框样式：'none'（无边框）、'full'（外框+所有单元格分隔线）、'row'（仅行分隔线，无外框和列分隔线）。 */
+    borderStyle: 'none' | 'full' | 'row';
+    /** Label background style: 'filled' (default gray), 'none' (transparent). 标签背景样式：'filled'（默认灰底）或 'none'（无背景）。 */
+    labelBackground: 'filled' | 'none';
     /** Layout direction: horizontal (label left of content) or vertical (label above content). 布局方向：horizontal（标签在内容左侧）或 vertical（标签在内容上方）。 */
     direction: 'horizontal' | 'vertical';
     /** Size of the description list. 描述列表的尺寸。 */

package/dist/components/display/desc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"desc.d.ts","sourceRoot":"","sources":["../../../src/components/display/desc.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,qBACa,SAAU,SAAQ,YAAY;IACzC,kDAAkD;IACtB,KAAK,SAAM;IAEvC,6DAA6D;IACjC,MAAM,SAAK;IAEvC,sCAAsC;IACT,MAAM,UAAS;IAE5C,2IAA2I;IAC/G,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEhF,6CAA6C;IACR,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAErE,gDAAgD;IACM,UAAU,SAAW;IAE3E,yIAAyI;IACnF,SAAS,UAAQ;IAEvE,mHAAmH;IAChE,OAAO,SAAK;IAE/D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiHpB;IAEF,OAAO,CAAC,SAAS;IAMjB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IAad,MAAM,IAAI,cAAc;CAoGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"desc.d.ts","sourceRoot":"","sources":["../../../src/components/display/desc.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,qBACa,SAAU,SAAQ,YAAY;IACzC,kDAAkD;IACtB,KAAK,SAAM;IAEvC,6DAA6D;IACjC,MAAM,SAAK;IAEvC,sCAAsC;IACT,MAAM,UAAS;IAE5C,6MAA6M;IACtJ,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAU;IAErG,iHAAiH;IACtD,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEzG,2IAA2I;IAC/G,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEhF,6CAA6C;IACR,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAErE,gDAAgD;IACM,UAAU,SAAW;IAE3E,yIAAyI;IACnF,SAAS,UAAQ;IAEvE,mHAAmH;IAChE,OAAO,SAAK;IAE/D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiJpB;IAEF,OAAO,CAAC,SAAS;IAMjB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IAad,MAAM,IAAI,cAAc;CAoGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/display/desc.js

@@ -45,6 +45,10 @@ let AitheDesc = class AitheDesc extends AitheElement {
         this.column = 1;
         /** Whether to show border. 是否显示边框。 */
         this.border = false;
+        /** Border style: 'none' (no borders), 'full' (outer + all cell separators), 'row' (row separators only, no outer frame or column separators). 边框样式：'none'（无边框）、'full'（外框+所有单元格分隔线）、'row'（仅行分隔线，无外框和列分隔线）。 */
+        this.borderStyle = 'none';
+        /** Label background style: 'filled' (default gray), 'none' (transparent). 标签背景样式：'filled'（默认灰底）或 'none'（无背景）。 */
+        this.labelBackground = 'filled';
         /** Layout direction: horizontal (label left of content) or vertical (label above content). 布局方向：horizontal（标签在内容左侧）或 vertical（标签在内容上方）。 */
         this.direction = 'horizontal';
         /** Size of the description list. 描述列表的尺寸。 */
@@ -63,7 +67,7 @@ let AitheDesc = class AitheDesc extends AitheElement {
         display: block;
         font-family: var(--aithe-font-family);
         color: var(--aithe-color-text);
-        border-radius: var(--aithe-radius-md, 6px);
+        border-radius: var(--aithe-container-radius-md, 6px);
         overflow: hidden;
       }
 
@@ -89,7 +93,7 @@ let AitheDesc = class AitheDesc extends AitheElement {
       .desc-body {
         display: grid;
         border: 1px solid var(--aithe-color-border, #e5e6eb);
-        border-radius: var(--aithe-radius-md, 6px);
+        border-radius: var(--aithe-container-radius-md, 6px);
         overflow: hidden;
       }
 
@@ -116,6 +120,7 @@ let AitheDesc = class AitheDesc extends AitheElement {
         background: var(--aithe-fill-2, #f0f1f3);
         font-weight: 500;
         min-width: 80px;
+        padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
         border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
         border-right: 1px solid var(--aithe-color-border, #e5e6eb);
         word-break: break-word;
@@ -130,7 +135,14 @@ let AitheDesc = class AitheDesc extends AitheElement {
         background: var(--aithe-fill-2, #f0f1f3);
       }
 
+      :host([label-background='none']) .desc-cell-label,
+      :host([label-background='none']) .desc-cell-label.is-bordered {
+        background: transparent;
+      }
+
       .desc-cell-content {
+        display: flex;
+        align-items: center;
         font-size: var(--aithe-font-size-sm);
         color: var(--aithe-color-text);
         padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
@@ -151,6 +163,30 @@ let AitheDesc = class AitheDesc extends AitheElement {
         border: none;
       }
 
+      /* Row border style: row separators only, no outer frame or column separators. */
+      :host([border-style='row']) .desc-body {
+        border: none;
+        border-radius: 0;
+      }
+
+      :host([border-style='row']) .desc-cell-label {
+        border-right: none;
+        border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
+      }
+
+      :host([border-style='row']) .desc-cell-label.no-border {
+        border-bottom: none;
+      }
+
+      :host([border-style='row']) .desc-cell-content {
+        border-right: none;
+        border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
+      }
+
+      :host([border-style='row']) .desc-cell-content.no-border {
+        border-bottom: none;
+      }
+
       /* Vertical direction */
       .desc-cell.vertical .desc-cell-label {
         border-right: none;
@@ -242,7 +278,7 @@ let AitheDesc = class AitheDesc extends AitheElement {
     }
     render() {
         const column = Math.max(1, this.column);
-        const isBordered = this.border;
+        const isBordered = this.border || this.borderStyle !== 'none';
         const isVertical = this.direction === 'vertical';
         const items = this._getItems();
         const cells = this._layoutCells(items);
@@ -342,6 +378,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], AitheDesc.prototype, "border", void 0);
+__decorate([
+    property({ attribute: 'border-style', type: String })
+], AitheDesc.prototype, "borderStyle", void 0);
+__decorate([
+    property({ attribute: 'label-background', type: String })
+], AitheDesc.prototype, "labelBackground", void 0);
 __decorate([
     property({ type: String })
 ], AitheDesc.prototype, "direction", void 0);

package/dist/components/form/autoform-item.d.ts

@@ -85,6 +85,8 @@ export declare class AitheAutoformItem extends AitheElement {
     private _ruleDisabled;
     /** Options computed by dependency rules. 依赖规则计算的选项。 */
     private _ruleOptions;
+    /** Whether the password is visible (only for inputType="password"). 密码是否明文显示（仅 inputType="password" 时生效）。 */
+    private _passwordVisible;
     /** Whether the field is visible (controlled by dependency rules). 字段是否可见（由依赖规则控制）。 */
     get visible(): boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
@@ -105,6 +107,10 @@ export declare class AitheAutoformItem extends AitheElement {
     getFieldValue(): unknown;
     /** Handles input/textarea/number change events. 处理 input/textarea/number 的变更事件。 */
     private readonly handleInputChange;
+    /** Toggles password visibility (only for inputType="password"). 切换密码明文显示（仅 inputType="password" 时生效）。 */
+    private readonly togglePasswordVisible;
+    /** Resolves the effective input type for password fields based on visibility state. 根据可见状态解析密码字段的有效输入类型。 */
+    private resolvePasswordType;
     /** Handles switch toggle change. 处理开关组件的切换事件。 */
     private readonly handleSwitchChange;
     /** Handles select dropdown change. 处理下拉选择器的变更事件。 */

package/dist/components/form/autoform-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autoform-item.d.ts","sourceRoot":"","sources":["../../../src/components/form/autoform-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,uCAAuC;IACX,IAAI,SAAM;IAEtC,qJAAqJ;IACzH,IAAI,EAAE,gBAAgB,CAAW;IAE7D,wBAAwB;IACI,KAAK,SAAM;IAEvC,wDAAwD;IAC5B,IAAI,SAAM;IAEtC,2CAA2C;IACf,OAAO,SAAM;IAEzC,qDAAqD;IACzB,WAAW,SAAM;IAE7C,0BAA0B;IACE,GAAG,SAAM;IAErC,gCAAgC;IACJ,WAAW,SAAM;IAE7C,2CAA2C;IACC,QAAQ,UAAS;IAE7D,2CAA2C;IACd,QAAQ,UAAS;IAE9C,mDAAmD;IACvB,OAAO,SAAM;IAEzC,2CAA2C;IACf,OAAO,SAAM;IAEzC,mDAAmD;IACnB,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/D,kCAAkC;IACN,KAAK,SAAM;IAEvC,gEAAgE;IACpC,SAAS,SAAU;IAE/C,iDAAiD;IACrB,GAAG,SAAM;IAErC,iDAAiD;IACrB,GAAG,SAAM;IAErC,qDAAqD;IACzB,IAAI,SAAM;IAEtC,0CAA0C;IACd,IAAI,SAAO;IAEvC,yDAAyD;IACK,gBAAgB,UAAQ;IAEtF,mDAAmD;IAC1C,OAAO,CAAC,QAAQ,CAAM;IAE/B,wCAAwC;IACR,YAAY,EAAE,MAAM,EAAE,CAAM;IAE5D,gCAAgC;IACA,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvD,qDAAqD;IACrB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAE/E,sFAAsF;IAC7E,OAAO,CAAC,QAAQ,CAAQ;IAEjC,oEAAoE;IAC3D,OAAO,CAAC,aAAa,CAAS;IAEvC,uDAAuD;IAC9C,OAAO,CAAC,YAAY,CAAiC;IAE9D,sFAAsF;IACtF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoHpB;IAEF,+DAA+D;IACtD,iBAAiB,IAAI,IAAI;IAOlC,OAAO,CAAC,YAAY,CAAS;IAE7B,uKAAuK;cACpJ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D,uIAAuI;IACvI,OAAO,CAAC,UAAU;IAyBlB,iGAAiG;IACjG,QAAQ,IAAI,OAAO;IA4BnB,2CAA2C;IAC3C,UAAU,IAAI,IAAI;IAIlB,gEAAgE;IAChE,QAAQ,IAAI,MAAM;IAIlB,gDAAgD;IAChD,aAAa,IAAI,OAAO;IAuBxB,mFAAmF;IACnF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAOhC;IAEF,iDAAiD;IACjD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,yDAAyD;IACzD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAOhC;IAEF,+GAA+G;IAC/G,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAMnC;IAEF,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,wDAAwD;IACxD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAO/B;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAOtC;IAEF,sDAAsD;IACtD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAOrC;IAEF,sDAAsD;IACtD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAOrC;IAEF,iDAAiD;IACjD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAMnC;IAEF,gIAAgI;IAChI,OAAO,CAAC,aAAa;IAoMrB,+DAA+D;IAC/D,OAAO,CAAC,kBAAkB;IAU1B,8DAA8D;IAC9D,OAAO,CAAC,qBAAqB;IAU7B,qGAAqG;IACrG,OAAO,CAAC,kBAAkB;IAY1B,MAAM;CAuDP;AAED,4GAA4G;AAC5G,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,cAAc,GACd,aAAa,GACb,aAAa,GACb,UAAU,GACV,MAAM,CAAC;AAEX,+DAA+D;AAC/D,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"autoform-item.d.ts","sourceRoot":"","sources":["../../../src/components/form/autoform-item.ts"],"names":[],"mappings":"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"}