huibo-ui 0.3.0

package/dist/collection/components/Form/Form.js

@@ -0,0 +1,271 @@
+import { h } from "@stencil/core";
+/**
+ * Form 表单组件
+ * 由输入框、选择器、单选框、多选框等控件组成，配合表单校验
+ */
+export class Form {
+    el;
+    /** 表单数据对象 */
+    model = {};
+    /** 表单验证规则 */
+    rules = {};
+    /** 标签位置 */
+    labelPosition = 'right';
+    /** 标签宽度 */
+    labelWidth = '80px';
+    /** 是否行内表单 */
+    inline = false;
+    /** 表单尺寸 */
+    size = 'default';
+    /** 是否禁用 */
+    disabled = false;
+    fields = [];
+    fieldRegistry = new Map();
+    // 用 componentWillLoad 而非 componentDidLoad 注册监听器：
+    // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发，
+    // 若在 componentDidLoad 才挂监听，会错过子项派发的 hbFormFieldRegister，
+    // 导致 fieldRegistry 为空、validate() 永远返回 true（真实浏览器里复现，mock-doc 被 waitForChanges 掩盖）。
+    componentWillLoad() {
+        this.el.addEventListener('hbFormFieldRegister', ((e) => {
+            const { prop, validate, resetValue, getValue } = e.detail;
+            this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });
+        }));
+    }
+    /**
+     * 验证整个表单
+     * @returns 是否验证通过
+     */
+    validate = async () => {
+        const results = await Promise.all(Array.from(this.fieldRegistry.values()).map(async (field) => {
+            const errors = await field.validate();
+            return errors.length === 0;
+        }));
+        return results.every(Boolean);
+    };
+    /**
+     * 重置表单
+     */
+    resetFields = () => {
+        this.fieldRegistry.forEach((field) => field.resetValue());
+    };
+    render() {
+        return (h("form", { key: '233f774fd2e6a7331ce01d7b729c3a77dd5793a9', class: {
+                'hb-form': true,
+                [`hb-form--label-${this.labelPosition}`]: true,
+                'hb-form--inline': this.inline,
+            }, onSubmit: (e) => e.preventDefault(), novalidate: true }, h("slot", { key: '99055d1a239483acc153523aeb218ad420bd9610' })));
+    }
+    static get is() { return "hb-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "model": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8868\u5355\u6570\u636E\u5BF9\u8C61"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any[]>",
+                    "resolved": "{ [x: string]: any[]; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8868\u5355\u9A8C\u8BC1\u89C4\u5219"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'top'",
+                    "resolved": "\"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u4F4D\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "labelWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-width",
+                "reflect": false,
+                "defaultValue": "'80px'"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u884C\u5185\u8868\u5355"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8868\u5355\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "validate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<boolean>",
+                    "resolved": "() => Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "returns",
+                            "text": "\u662F\u5426\u9A8C\u8BC1\u901A\u8FC7"
+                        }],
+                    "text": "\u9A8C\u8BC1\u6574\u4E2A\u8868\u5355"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "async (): Promise<boolean> => {\n    const results = await Promise.all(\n      Array.from(this.fieldRegistry.values()).map(async (field) => {\n        const errors = await field.validate();\n        return errors.length === 0;\n      })\n    );\n    return results.every(Boolean);\n  }"
+            },
+            "resetFields": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u91CD\u7F6E\u8868\u5355"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(): void => {\n    this.fieldRegistry.forEach((field) => field.resetValue());\n  }"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "fields": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Form.js.map

package/dist/collection/components/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASnE;;;GAGG;AAMH,MAAM,OAAO,IAAI;IACJ,EAAE,CAAc;IAE3B,aAAa;IACL,KAAK,GAAwB,EAAE,CAAC;IAExC,aAAa;IACL,KAAK,GAA0B,EAAE,CAAC;IAE1C,WAAW;IACH,aAAa,GAA6B,OAAO,CAAC;IAE1D,WAAW;IACH,UAAU,GAAW,MAAM,CAAC;IAEpC,aAAa;IACL,MAAM,GAAY,KAAK,CAAC;IAEhC,WAAW;IACH,IAAI,GAAkC,SAAS,CAAC;IAExD,WAAW;IACH,QAAQ,GAAY,KAAK,CAAC;IAEzB,MAAM,GAA4B,EAAE,CAAC;IAEtC,aAAa,GAAG,IAAI,GAAG,EAAiC,CAAC;IAEjE,iDAAiD;IACjD,8DAA8D;IAC9D,yDAAyD;IACzD,mFAAmF;IACnF,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAc,EAAE,EAAE;YAClE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC1D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;QACzE,CAAC,CAAkB,CAAC,CAAC;IACvB,CAAC;IAED;;;OAGG;IACK,QAAQ,GAAG,KAAK,IAAsB,EAAE;QAC9C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC1D,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CACH,CAAC;QACF,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF;;OAEG;IACK,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,kBAAkB,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;gBAC9C,iBAAiB,EAAE,IAAI,CAAC,MAAM;aAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACnC,UAAU;YAEV,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\ninterface FormFieldRegistration {\n  prop: string;\n  validate: () => Promise<string[]>;\n  resetValue: () => void;\n  getValue: () => any;\n}\n\n/**\n * Form 表单组件\n * 由输入框、选择器、单选框、多选框等控件组成，配合表单校验\n */\n@Component({\n  tag: 'hb-form',\n  styleUrl: 'form.css',\n  shadow: true,\n})\nexport class Form {\n  @Element() el: HTMLElement;\n\n  /** 表单数据对象 */\n  @Prop() model: Record<string, any> = {};\n\n  /** 表单验证规则 */\n  @Prop() rules: Record<string, any[]> = {};\n\n  /** 标签位置 */\n  @Prop() labelPosition: 'left' | 'right' | 'top' = 'right';\n\n  /** 标签宽度 */\n  @Prop() labelWidth: string = '80px';\n\n  /** 是否行内表单 */\n  @Prop() inline: boolean = false;\n\n  /** 表单尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() fields: FormFieldRegistration[] = [];\n\n  private fieldRegistry = new Map<string, FormFieldRegistration>();\n\n  // 用 componentWillLoad 而非 componentDidLoad 注册监听器：\n  // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发，\n  // 若在 componentDidLoad 才挂监听，会错过子项派发的 hbFormFieldRegister，\n  // 导致 fieldRegistry 为空、validate() 永远返回 true（真实浏览器里复现，mock-doc 被 waitForChanges 掩盖）。\n  componentWillLoad() {\n    this.el.addEventListener('hbFormFieldRegister', ((e: CustomEvent) => {\n      const { prop, validate, resetValue, getValue } = e.detail;\n      this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });\n    }) as EventListener);\n  }\n\n  /**\n   * 验证整个表单\n   * @returns 是否验证通过\n   */\n  @Prop() validate = async (): Promise<boolean> => {\n    const results = await Promise.all(\n      Array.from(this.fieldRegistry.values()).map(async (field) => {\n        const errors = await field.validate();\n        return errors.length === 0;\n      })\n    );\n    return results.every(Boolean);\n  };\n\n  /**\n   * 重置表单\n   */\n  @Prop() resetFields = (): void => {\n    this.fieldRegistry.forEach((field) => field.resetValue());\n  };\n\n  render() {\n    return (\n      <form\n        class={{\n          'hb-form': true,\n          [`hb-form--label-${this.labelPosition}`]: true,\n          'hb-form--inline': this.inline,\n        }}\n        onSubmit={(e) => e.preventDefault()}\n        novalidate\n      >\n        <slot />\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/Form/FormItem.js

@@ -0,0 +1,300 @@
+import { h } from "@stencil/core";
+/**
+ * FormItem 表单项组件
+ * 表单中的每一项
+ */
+export class FormItem {
+    el;
+    /** 字段名 */
+    prop = '';
+    /** 标签文本 */
+    label = '';
+    /** 标签宽度 */
+    labelWidth;
+    /** 是否必填 */
+    required = false;
+    /** 该表单项的验证规则 */
+    rules = [];
+    /** 表单尺寸 */
+    size = 'default';
+    errors = [];
+    isvalidating = false;
+    componentDidLoad() {
+        // 向父级 hb-form 注册
+        this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {
+            detail: {
+                prop: this.prop,
+                validate: this.validate,
+                resetValue: this.resetValue,
+                getValue: this.getValue,
+            },
+            bubbles: true,
+        }));
+    }
+    get formRules() {
+        // 合并 prop 对应的 form rules 和自身 rules
+        const form = this.el.closest('hb-form');
+        const formLevelRules = form ? form.rules?.[this.prop] || [] : [];
+        return [...formLevelRules, ...this.rules];
+    }
+    /**
+     * 验证此字段
+     */
+    validate = async () => {
+        const value = this.getValue();
+        const rules = this.formRules;
+        if (rules.length === 0) {
+            this.errors = [];
+            return [];
+        }
+        this.isvalidating = true;
+        const errors = [];
+        for (const rule of rules) {
+            if (rule.required && (!value && value !== 0)) {
+                errors.push(rule.message || `${this.label || this.prop}不能为空`);
+                continue;
+            }
+            if (rule.pattern && !rule.pattern.test(value)) {
+                errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                continue;
+            }
+            if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
+                errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);
+                continue;
+            }
+            if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {
+                errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);
+                continue;
+            }
+            if (rule.validator) {
+                try {
+                    await rule.validator(value, this.formRules);
+                }
+                catch (err) {
+                    errors.push(err.message || rule.message || `${this.label || this.prop}验证失败`);
+                }
+            }
+        }
+        this.errors = errors;
+        this.isvalidating = false;
+        return errors;
+    };
+    resetValue = () => {
+        this.errors = [];
+    };
+    getValue = () => {
+        // 尝试从子元素中获取值
+        const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');
+        if (input) {
+            return input.modelValue;
+        }
+        return undefined;
+    };
+    render() {
+        return (h("div", { key: '9ea6c55b9159936a572eef459adea96234fbe2fa', class: {
+                'hb-form-item': true,
+                'hb-form-item--error': this.errors.length > 0,
+                'hb-form-item--validating': this.isvalidating,
+            } }, this.label && (h("label", { key: '3f21b8777f7cddba09e797a706edfb9539fd2aa6', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined }, this.required && h("span", { key: 'fd89829e1469ff625d30e3b38624e9fc2a9566b4', class: "hb-form-item__required" }, "*"), this.label)), h("div", { key: '83ac6765623cf8c0c897ab945abdb0f1f0c3cde2', class: "hb-form-item__content" }, h("slot", { key: '83f01e59dc6f984141ff26dc58ebf72ff77a4fe1' }), this.errors.length > 0 && (h("div", { key: '17d938b71257dedb8154b4f019127f03b43f1910', class: "hb-form-item__error" }, this.errors[0])))));
+    }
+    static get is() { return "hb-form-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "prop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5B57\u6BB5\u540D"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prop",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u6587\u672C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-width",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5FC5\u586B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8BE5\u8868\u5355\u9879\u7684\u9A8C\u8BC1\u89C4\u5219"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8868\u5355\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "validate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<string[]>",
+                    "resolved": "() => Promise<string[]>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9A8C\u8BC1\u6B64\u5B57\u6BB5"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      if (rule.required && (!value && value !== 0)) {\n        errors.push(rule.message || `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`);\n        continue;\n      }\n      if (rule.pattern && !rule.pattern.test(value)) {\n        errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n        continue;\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u5C11${rule.min}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u591A${rule.max}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}\u9A8C\u8BC1\u5931\u8D25`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  }"
+            },
+            "resetValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => {\n    this.errors = [];\n  }"
+            },
+            "getValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => any",
+                    "resolved": "() => any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(): any => {\n    // \u5C1D\u8BD5\u4ECE\u5B50\u5143\u7D20\u4E2D\u83B7\u53D6\u503C\n    const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errors": {},
+            "isvalidating": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=FormItem.js.map

package/dist/collection/components/Form/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sourceRoot":"","sources":["../../../src/components/Form/FormItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\n/**\n * FormItem 表单项组件\n * 表单中的每一项\n */\n@Component({\n  tag: 'hb-form-item',\n  styleUrl: 'form-item.css',\n  shadow: true,\n})\nexport class FormItem {\n  @Element() el: HTMLElement;\n\n  /** 字段名 */\n  @Prop() prop: string = '';\n\n  /** 标签文本 */\n  @Prop() label: string = '';\n\n  /** 标签宽度 */\n  @Prop() labelWidth?: string;\n\n  /** 是否必填 */\n  @Prop() required: boolean = false;\n\n  /** 该表单项的验证规则 */\n  @Prop() rules: any[] = [];\n\n  /** 表单尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  @State() errors: string[] = [];\n  @State() isvalidating: boolean = false;\n\n  componentDidLoad() {\n    // 向父级 hb-form 注册\n    this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {\n      detail: {\n        prop: this.prop,\n        validate: this.validate,\n        resetValue: this.resetValue,\n        getValue: this.getValue,\n      },\n      bubbles: true,\n    }));\n  }\n\n  private get formRules(): any[] {\n    // 合并 prop 对应的 form rules 和自身 rules\n    const form = this.el.closest('hb-form');\n    const formLevelRules = form ? (form as any).rules?.[this.prop] || [] : [];\n    return [...formLevelRules, ...this.rules];\n  }\n\n  /**\n   * 验证此字段\n   */\n  @Prop() validate = async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      if (rule.required && (!value && value !== 0)) {\n        errors.push(rule.message || `${this.label || this.prop}不能为空`);\n        continue;\n      }\n      if (rule.pattern && !rule.pattern.test(value)) {\n        errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n        continue;\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}验证失败`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  };\n\n  @Prop() resetValue = () => {\n    this.errors = [];\n  };\n\n  @Prop() getValue = (): any => {\n    // 尝试从子元素中获取值\n    const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-form-item': true,\n          'hb-form-item--error': this.errors.length > 0,\n          'hb-form-item--validating': this.isvalidating,\n        }}\n      >\n        {this.label && (\n          <label\n            class=\"hb-form-item__label\"\n            style={this.labelWidth ? { width: this.labelWidth } : undefined}\n          >\n            {this.required && <span class=\"hb-form-item__required\">*</span>}\n            {this.label}\n          </label>\n        )}\n        <div class=\"hb-form-item__content\">\n          <slot />\n          {this.errors.length > 0 && (\n            <div class=\"hb-form-item__error\">{this.errors[0]}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Form/form-item.css

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.hb-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hb-spacing-sm);
+}
+
+.hb-form-item__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--hb-size-default);
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.hb-form-item__required {
+  color: var(--hb-color-danger);
+  margin-right: 4px;
+}
+
+.hb-form-item__content {
+  flex: 1;
+  position: relative;
+}
+
+.hb-form-item__error {
+  font-size: var(--hb-font-size-xs);
+  color: var(--hb-color-danger);
+  margin-top: 4px;
+  line-height: 1;
+  animation: hb-form-error-fade-in 0.2s ease-out;
+}
+
+@keyframes hb-form-error-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

package/dist/collection/components/Form/form.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+.hb-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hb-spacing-md);
+}
+
+.hb-form--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--hb-spacing-sm) var(--hb-spacing-lg);
+}