huibo-ui 0.4.0 → 0.6.0

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

@@ -19,17 +19,104 @@ export class Form {
     size = 'default';
     /** 是否禁用 */
     disabled = false;
+    /**
+     * F1：初始值（非受控）。挂载后把这些值写到对应字段的子控件 modelValue。
+     * key = FormItem 的 prop。
+     */
+    initialValues;
+    /**
+     * F4：校验提示模板。覆盖默认的「{label}不能为空」「{label}格式不正确」等文案。
+     * 支持 {label} 占位符。仅对未在 rule.message 显式指定消息的规则生效。
+     */
+    validateMessages;
+    /**
+     * F2：提交且校验通过后的回调。参数为各字段当前值组成的对象。
+     * 由表单 submit（form onSubmit）触发——表单内放 type="submit" 的按钮即可。
+     */
+    onFinish;
+    /**
+     * F2：提交且校验失败后的回调。
+     */
+    onFinishFailed;
+    /**
+     * F3：任意字段值变化时的回调。参数为 { prop, value, values }。
+     * 由子控件冒泡的 hbChange 触发。
+     */
+    onValuesChange;
     fields = [];
     fieldRegistry = new Map();
     // 用 componentWillLoad 而非 componentDidLoad 注册监听器：
     // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发，
     // 若在 componentDidLoad 才挂监听，会错过子项派发的 hbFormFieldRegister，
     // 导致 fieldRegistry 为空、validate() 永远返回 true（真实浏览器里复现，mock-doc 被 waitForChanges 掩盖）。
+    // L1：抽命名 handler 以便 disconnectedCallback 正确 remove（修复前匿名箭头无法 remove）。
+    handleFieldRegister = ((e) => {
+        const { prop, validate, resetValue, getValue } = e.detail;
+        this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });
+    });
+    /**
+     * F3：监听子控件冒泡的 hbChange，识别来源 FormItem 并触发 onValuesChange。
+     * 注：hbChange 由 hb-input/hb-select 等控件发出（composed 冒泡穿过 shadow），
+     * 这里在 host 上捕获，通过 closest('hb-form-item') 定位字段 prop。
+     */
+    handleFieldChange = ((e) => {
+        if (!this.onValuesChange)
+            return;
+        const target = e.target;
+        const item = target.closest?.('hb-form-item');
+        if (!item)
+            return;
+        const prop = item.prop;
+        if (!prop)
+            return;
+        // 取该字段最新值
+        const reg = this.fieldRegistry.get(prop);
+        const value = reg ? reg.getValue() : undefined;
+        this.onValuesChange({ prop, value, values: this.getFieldsValue() });
+    });
     componentWillLoad() {
-        this.el.addEventListener('hbFormFieldRegister', ((e) => {
-            const { prop, validate, resetValue, getValue } = e.detail;
-            this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });
-        }));
+        this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);
+        // F3：捕获子控件值变化
+        this.el.addEventListener('hbChange', this.handleFieldChange);
+    }
+    componentDidLoad() {
+        // F1：把 initialValues 写到对应字段的子控件
+        if (this.initialValues) {
+            this.fieldRegistry.forEach((_reg, prop) => {
+                if (this.initialValues && prop in this.initialValues) {
+                    this.setFieldValue(prop, this.initialValues[prop]);
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);
+        this.el.removeEventListener('hbChange', this.handleFieldChange);
+    }
+    /**
+     * 收集所有字段的当前值（getFieldsValue）。
+     */
+    getFieldsValue() {
+        const values = {};
+        this.fieldRegistry.forEach((reg, prop) => {
+            values[prop] = reg.getValue();
+        });
+        return values;
+    }
+    /**
+     * 设置某字段子控件的值（setFieldValue）。
+     * 子控件统一用 modelValue 受控。
+     */
+    setFieldValue(prop, value) {
+        const formItem = this.el.querySelector(`hb-form-item[prop="${prop}"]`);
+        if (!formItem)
+            return;
+        const control = formItem.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +
+            'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +
+            'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select');
+        if (control) {
+            control.modelValue = value;
+        }
     }
     /**
      * 验证整个表单
@@ -42,18 +129,39 @@ export class Form {
         }));
         return results.every(Boolean);
     };
+    /**
+     * F2：提交表单——校验全部字段，通过则 onFinish(values)，失败则 onFinishFailed(errors)。
+     */
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        const errorList = [];
+        let allOk = true;
+        for (const field of this.fieldRegistry.values()) {
+            const errors = await field.validate();
+            if (errors.length > 0) {
+                allOk = false;
+                errorList.push({ prop: field.prop, errors });
+            }
+        }
+        if (allOk) {
+            this.onFinish?.(this.getFieldsValue());
+        }
+        else {
+            this.onFinishFailed?.(errorList);
+        }
+    };
     /**
      * 重置表单
      */
     resetFields = () => {
-        this.fieldRegistry.forEach((field) => field.resetValue());
+        this.fieldRegistry.forEach(field => field.resetValue());
     };
     render() {
-        return (h("form", { key: 'c76a79544096dc06761b506ccc8afdef06fcf68b', class: {
+        return (h("form", { key: '876ec07f044efed1a9aa92dbb76642b95013e9a5', class: {
                 'hb-form': true,
                 [`hb-form--label-${this.labelPosition}`]: true,
                 'hb-form--inline': this.inline,
-            }, onSubmit: (e) => e.preventDefault(), novalidate: true }, h("slot", { key: 'be1f2a559248080153cf56607d91fbad2dd44963' })));
+            }, onSubmit: this.handleSubmit, novalidate: true }, h("slot", { key: '16efaff38a6f97ff1f339eef37f55b7e4aff0f4c' })));
     }
     static get is() { return "hb-form"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +323,106 @@ export class Form {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "initialValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F1\uFF1A\u521D\u59CB\u503C\uFF08\u975E\u53D7\u63A7\uFF09\u3002\u6302\u8F7D\u540E\u628A\u8FD9\u4E9B\u503C\u5199\u5230\u5BF9\u5E94\u5B57\u6BB5\u7684\u5B50\u63A7\u4EF6 modelValue\u3002\nkey = FormItem \u7684 prop\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "validateMessages": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ required?: string; pattern?: string; email?: string; min?: string; max?: string }",
+                    "resolved": "{ required?: string; pattern?: string; email?: string; min?: string; max?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F4\uFF1A\u6821\u9A8C\u63D0\u793A\u6A21\u677F\u3002\u8986\u76D6\u9ED8\u8BA4\u7684\u300C{label}\u4E0D\u80FD\u4E3A\u7A7A\u300D\u300C{label}\u683C\u5F0F\u4E0D\u6B63\u786E\u300D\u7B49\u6587\u6848\u3002\n\u652F\u6301 {label} \u5360\u4F4D\u7B26\u3002\u4EC5\u5BF9\u672A\u5728 rule.message \u663E\u5F0F\u6307\u5B9A\u6D88\u606F\u7684\u89C4\u5219\u751F\u6548\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onFinish": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(values: Record<string, any>) => void",
+                    "resolved": "(values: Record<string, any>) => void",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F2\uFF1A\u63D0\u4EA4\u4E14\u6821\u9A8C\u901A\u8FC7\u540E\u7684\u56DE\u8C03\u3002\u53C2\u6570\u4E3A\u5404\u5B57\u6BB5\u5F53\u524D\u503C\u7EC4\u6210\u7684\u5BF9\u8C61\u3002\n\u7531\u8868\u5355 submit\uFF08form onSubmit\uFF09\u89E6\u53D1\u2014\u2014\u8868\u5355\u5185\u653E type=\"submit\" \u7684\u6309\u94AE\u5373\u53EF\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onFinishFailed": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(errors: { prop: string; errors: string[] }[]) => void",
+                    "resolved": "(errors: { prop: string; errors: string[]; }[]) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F2\uFF1A\u63D0\u4EA4\u4E14\u6821\u9A8C\u5931\u8D25\u540E\u7684\u56DE\u8C03\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onValuesChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(info: { prop: string; value: any; values: Record<string, any> }) => void",
+                    "resolved": "(info: { prop: string; value: any; values: Record<string, any>; }) => void",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F3\uFF1A\u4EFB\u610F\u5B57\u6BB5\u503C\u53D8\u5316\u65F6\u7684\u56DE\u8C03\u3002\u53C2\u6570\u4E3A { prop, value, values }\u3002\n\u7531\u5B50\u63A7\u4EF6\u5192\u6CE1\u7684 hbChange \u89E6\u53D1\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
             "validate": {
                 "type": "unknown",
                 "mutable": false,
@@ -239,7 +447,7 @@ export class Form {
                 },
                 "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  }"
+                "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",
@@ -257,7 +465,7 @@ export class Form {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "(): void => {\n    this.fieldRegistry.forEach((field) => field.resetValue());\n  }"
+                "defaultValue": "(): void => {\n    this.fieldRegistry.forEach(field => field.resetValue());\n  }"
             }
         };
     }

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

@@ -1 +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"]}
+{"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;IAElC;;;OAGG;IACK,aAAa,CAAuB;IAE5C;;;OAGG;IACK,gBAAgB,CAAuF;IAE/G;;;OAGG;IACK,QAAQ,CAAyC;IAEzD;;OAEG;IACK,cAAc,CAA0D;IAEhF;;;OAGG;IACK,cAAc,CAA6E;IAE1F,MAAM,GAA4B,EAAE,CAAC;IAEtC,aAAa,GAAG,IAAI,GAAG,EAAiC,CAAC;IAEjE,iDAAiD;IACjD,8DAA8D;IAC9D,yDAAyD;IACzD,mFAAmF;IACnF,sEAAsE;IAC9D,mBAAmB,GAAG,CAAC,CAAC,CAAc,EAAE,EAAE;QAChD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACzE,CAAC,CAAkB,CAAC;IAEpB;;;;OAIG;IACK,iBAAiB,GAAG,CAAC,CAAC,CAAQ,EAAE,EAAE;QACxC,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;QACvC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,cAAc,CAAQ,CAAC;QACrD,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,UAAU;QACV,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;IACtE,CAAC,CAAkB,CAAC;IAEpB,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC1E,cAAc;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACd,gCAAgC;QAChC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;gBACxC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;gBACrD,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7E,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,MAAM,MAAM,GAAwB,EAAE,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACvC,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC;IAED;;;OAGG;IACK,aAAa,CAAC,IAAY,EAAE,KAAU;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,IAAI,IAAI,CAAuB,CAAC;QAC7F,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CACpC,+FAA+F;YAC7F,2FAA2F;YAC3F,qEAAqE,CACjE,CAAC;QACT,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;QAC7B,CAAC;IACH,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,EAAC,KAAK,EAAC,EAAE;YACxD,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,YAAY,GAAG,KAAK,EAAE,CAAQ,EAAE,EAAE;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,SAAS,GAAyC,EAAE,CAAC;QAC3D,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC;YAChD,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtB,KAAK,GAAG,KAAK,CAAC;gBACd,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;QACD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF;;OAEG;IACK,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1D,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,IAAI,CAAC,YAAY,EAC3B,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  /**\n   * F1：初始值（非受控）。挂载后把这些值写到对应字段的子控件 modelValue。\n   * key = FormItem 的 prop。\n   */\n  @Prop() initialValues?: Record<string, any>;\n\n  /**\n   * F4：校验提示模板。覆盖默认的「{label}不能为空」「{label}格式不正确」等文案。\n   * 支持 {label} 占位符。仅对未在 rule.message 显式指定消息的规则生效。\n   */\n  @Prop() validateMessages?: { required?: string; pattern?: string; email?: string; min?: string; max?: string };\n\n  /**\n   * F2：提交且校验通过后的回调。参数为各字段当前值组成的对象。\n   * 由表单 submit（form onSubmit）触发——表单内放 type=\"submit\" 的按钮即可。\n   */\n  @Prop() onFinish?: (values: Record<string, any>) => void;\n\n  /**\n   * F2：提交且校验失败后的回调。\n   */\n  @Prop() onFinishFailed?: (errors: { prop: string; errors: string[] }[]) => void;\n\n  /**\n   * F3：任意字段值变化时的回调。参数为 { prop, value, values }。\n   * 由子控件冒泡的 hbChange 触发。\n   */\n  @Prop() onValuesChange?: (info: { prop: string; value: any; values: Record<string, any> }) => void;\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  // L1：抽命名 handler 以便 disconnectedCallback 正确 remove（修复前匿名箭头无法 remove）。\n  private handleFieldRegister = ((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   * F3：监听子控件冒泡的 hbChange，识别来源 FormItem 并触发 onValuesChange。\n   * 注：hbChange 由 hb-input/hb-select 等控件发出（composed 冒泡穿过 shadow），\n   * 这里在 host 上捕获，通过 closest('hb-form-item') 定位字段 prop。\n   */\n  private handleFieldChange = ((e: Event) => {\n    if (!this.onValuesChange) return;\n    const target = e.target as HTMLElement;\n    const item = target.closest?.('hb-form-item') as any;\n    if (!item) return;\n    const prop = item.prop;\n    if (!prop) return;\n    // 取该字段最新值\n    const reg = this.fieldRegistry.get(prop);\n    const value = reg ? reg.getValue() : undefined;\n    this.onValuesChange({ prop, value, values: this.getFieldsValue() });\n  }) as EventListener;\n\n  componentWillLoad() {\n    this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);\n    // F3：捕获子控件值变化\n    this.el.addEventListener('hbChange', this.handleFieldChange);\n  }\n\n  componentDidLoad() {\n    // F1：把 initialValues 写到对应字段的子控件\n    if (this.initialValues) {\n      this.fieldRegistry.forEach((_reg, prop) => {\n        if (this.initialValues && prop in this.initialValues) {\n          this.setFieldValue(prop, this.initialValues[prop]);\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);\n    this.el.removeEventListener('hbChange', this.handleFieldChange);\n  }\n\n  /**\n   * 收集所有字段的当前值（getFieldsValue）。\n   */\n  private getFieldsValue(): Record<string, any> {\n    const values: Record<string, any> = {};\n    this.fieldRegistry.forEach((reg, prop) => {\n      values[prop] = reg.getValue();\n    });\n    return values;\n  }\n\n  /**\n   * 设置某字段子控件的值（setFieldValue）。\n   * 子控件统一用 modelValue 受控。\n   */\n  private setFieldValue(prop: string, value: any) {\n    const formItem = this.el.querySelector(`hb-form-item[prop=\"${prop}\"]`) as HTMLElement | null;\n    if (!formItem) return;\n    const control = formItem.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n        'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n        'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    ) as any;\n    if (control) {\n      control.modelValue = value;\n    }\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   * F2：提交表单——校验全部字段，通过则 onFinish(values)，失败则 onFinishFailed(errors)。\n   */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const errorList: { prop: string; errors: string[] }[] = [];\n    let allOk = true;\n    for (const field of this.fieldRegistry.values()) {\n      const errors = await field.validate();\n      if (errors.length > 0) {\n        allOk = false;\n        errorList.push({ prop: field.prop, errors });\n      }\n    }\n    if (allOk) {\n      this.onFinish?.(this.getFieldsValue());\n    } else {\n      this.onFinishFailed?.(errorList);\n    }\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={this.handleSubmit}\n        novalidate\n      >\n        <slot />\n      </form>\n    );\n  }\n}\n"]}

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

@@ -17,6 +17,18 @@ export class FormItem {
     rules = [];
     /** 表单尺寸 */
     size = 'default';
+    /**
+     * F6：手动校验态（'success' | 'warning' | 'error' | 'validating' | ''）。
+     * 设置后覆盖内部校验结果驱动的错误显示（对齐 antd validateStatus）。
+     */
+    validateStatus;
+    /** F6：手动错误/帮助文案（配合 validateStatus='error' 显示自定义提示） */
+    help;
+    /**
+     * F7：标签栅格占比（1-24）。未设置时用 labelWidth。
+     * 对齐 antd labelCol（简化为纯数字栅格，labelCol.span）。
+     */
+    labelCol;
     errors = [];
     isvalidating = false;
     /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，
@@ -63,6 +75,24 @@ export class FormItem {
         const form = this.el.closest('hb-form');
         return (form && form.labelPosition) || 'right';
     }
+    /**
+     * F4：继承父 hb-form 的 validateMessages（校验提示模板）。
+     * 支持占位符 {label}。仅对 rule 未显式指定 message 的规则生效。
+     */
+    get resolvedValidateMessages() {
+        const form = this.el.closest('hb-form');
+        return form && form.validateMessages;
+    }
+    /** 用模板生成错误文案（{label} 替换为字段标签），优先级：rule.message > 模板 > 内置默认 */
+    msg(rule, key, fallback) {
+        if (rule.message)
+            return rule.message;
+        const tmpl = this.resolvedValidateMessages;
+        const label = this.label || this.prop;
+        if (tmpl && tmpl[key])
+            return tmpl[key].replace('{label}', label);
+        return fallback.replace('{label}', label);
+    }
     /**
      * 验证此字段
      */
@@ -77,38 +107,33 @@ export class FormItem {
         const errors = [];
         for (const rule of rules) {
             // 必填校验：空字符串 / null / undefined / 空数组均视为"未填"
-            const isEmpty = value === undefined ||
-                value === null ||
-                value === '' ||
-                (Array.isArray(value) && value.length === 0);
+            const isEmpty = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
             if (rule.required && isEmpty) {
-                errors.push(rule.message || `${this.label || this.prop}不能为空`);
+                errors.push(this.msg(rule, 'required', `${this.label || this.prop}不能为空`));
                 continue;
             }
             // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）
             if (isEmpty)
                 continue;
             if (rule.pattern) {
-                const ok = typeof rule.pattern === 'string'
-                    ? new RegExp(rule.pattern).test(String(value))
-                    : rule.pattern.test(String(value));
+                const ok = typeof rule.pattern === 'string' ? new RegExp(rule.pattern).test(String(value)) : rule.pattern.test(String(value));
                 if (!ok) {
-                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    errors.push(this.msg(rule, 'pattern', `${this.label || this.prop}格式不正确`));
                     continue;
                 }
             }
             if (rule.type === 'email') {
                 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))) {
-                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    errors.push(this.msg(rule, 'email', `${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}个字符`);
+                errors.push(this.msg(rule, 'min', `${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}个字符`);
+                errors.push(this.msg(rule, 'max', `${this.label || this.prop}最多${rule.max}个字符`));
                 continue;
             }
             if (rule.validator) {
@@ -137,16 +162,42 @@ export class FormItem {
         }
         return undefined;
     };
+    /** F6：实际显示的错误文案。手动 help 优先；否则取内部 errors[0] */
+    get displayError() {
+        if (this.help !== undefined)
+            return this.help;
+        return this.errors[0] || '';
+    }
+    /** F6：实际是否显示错误（手动 validateStatus='error' 或内部有错） */
+    get showError() {
+        if (this.validateStatus === 'error')
+            return true;
+        if (this.validateStatus === 'success' || this.validateStatus === 'validating')
+            return false;
+        return this.errors.length > 0;
+    }
     render() {
         const labelTop = this.resolvedLabelPosition === 'top';
-        return (h("div", { key: '5819f09264a5823f5130f1ce3ff34915da8c7e41', class: {
+        const hasError = this.showError;
+        // A4：label 与内容关联。子控件是 slot（id 未知），无法用 label.for；
+        // 改用 content 容器 role=group + aria-labelledby 指向 label id，
+        // 把 label 语义绑到整组；并用 aria-required / aria-invalid 暴露必填与校验态（读屏可感知，
+        // 不再仅靠红色 + 隐藏星号）。
+        const labelId = this.label ? `hb-form-item__label-${this.prop || 'x'}` : undefined;
+        // F7：labelCol 栅格占比（1-24），未设置时回退 labelWidth
+        const labelStyle = this.labelCol
+            ? { width: `${(this.labelCol / 24) * 100}%` }
+            : this.labelWidth
+                ? { width: this.labelWidth }
+                : undefined;
+        return (h("div", { key: '8c6bd451a2c673a66d3a98b08fdf30ac74f2fb2e', class: {
                 'hb-form-item': true,
-                'hb-form-item--error': this.errors.length > 0,
-                'hb-form-item--validating': this.isvalidating,
+                'hb-form-item--error': hasError,
+                'hb-form-item--validating': this.isvalidating || this.validateStatus === 'validating',
                 'hb-form-item--required': this.isRequired,
                 'hb-form-item--label-top': labelTop,
                 'hb-form-item--label-left': this.resolvedLabelPosition === 'left',
-            } }, this.label && (h("label", { key: '0a1881ea32b5a7a403e9fdfbcc886bdbc682abfa', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined, title: this.label }, this.isRequired && (h("span", { key: '46543df749b05021d867904d968dc60bf062ee41', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '5ce3712dc8ebcb70cb3688a4546f0dd1ee3e5cd4', class: "hb-form-item__content" }, h("slot", { key: '26e5c4a39560aca1796545b2f3679b042ef7d771' }), this.errors.length > 0 && (h("div", { key: '79e79d4bc52fe02c0735333cfbbb9b912a206c77', class: "hb-form-item__error", role: "alert" }, this.errors[0])))));
+            } }, this.label && (h("label", { key: '98db5eae626555e4ae442b116bff048189209b5d', id: labelId, class: "hb-form-item__label", style: labelStyle, title: this.label }, this.isRequired && (h("span", { key: '05f771e79623e3eeac28fb8b3d100501c5c94f6b', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '3dc24c2eb1f33ed16f14cca93a644ece209d6c13', class: "hb-form-item__content", role: "group", "aria-labelledby": labelId, "aria-required": this.isRequired ? 'true' : undefined, "aria-invalid": hasError ? 'true' : undefined }, h("slot", { key: '3a143de305f27a70c5e775a0c24c16da77f7fe3a' }), hasError && (h("div", { key: '9d5708648cb0ec43b9c8a274145221ec0edec86e', class: "hb-form-item__error", role: "alert" }, this.displayError)))));
     }
     static get is() { return "hb-form-item"; }
     static get encapsulation() { return "shadow"; }
@@ -279,6 +330,63 @@ export class FormItem {
                 "reflect": false,
                 "defaultValue": "'default'"
             },
+            "validateStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'success' | 'warning' | 'error' | 'validating'",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"validating\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F6\uFF1A\u624B\u52A8\u6821\u9A8C\u6001\uFF08'success' | 'warning' | 'error' | 'validating' | ''\uFF09\u3002\n\u8BBE\u7F6E\u540E\u8986\u76D6\u5185\u90E8\u6821\u9A8C\u7ED3\u679C\u9A71\u52A8\u7684\u9519\u8BEF\u663E\u793A\uFF08\u5BF9\u9F50 antd validateStatus\uFF09\u3002"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "validate-status",
+                "reflect": false
+            },
+            "help": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F6\uFF1A\u624B\u52A8\u9519\u8BEF/\u5E2E\u52A9\u6587\u6848\uFF08\u914D\u5408 validateStatus='error' \u663E\u793A\u81EA\u5B9A\u4E49\u63D0\u793A\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "help",
+                "reflect": false
+            },
+            "labelCol": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "F7\uFF1A\u6807\u7B7E\u6805\u683C\u5360\u6BD4\uFF081-24\uFF09\u3002\u672A\u8BBE\u7F6E\u65F6\u7528 labelWidth\u3002\n\u5BF9\u9F50 antd labelCol\uFF08\u7B80\u5316\u4E3A\u7EAF\u6570\u5B57\u6805\u683C\uFF0ClabelCol.span\uFF09\u3002"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-col",
+                "reflect": false
+            },
             "validate": {
                 "type": "unknown",
                 "mutable": false,
@@ -300,7 +408,7 @@ export class FormItem {
                 },
                 "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      // \u5FC5\u586B\u6821\u9A8C\uFF1A\u7A7A\u5B57\u7B26\u4E32 / null / undefined / \u7A7A\u6570\u7EC4\u5747\u89C6\u4E3A\"\u672A\u586B\"\n      const isEmpty =\n        value === undefined ||\n        value === null ||\n        value === '' ||\n        (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(rule.message || `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`);\n        continue;\n      }\n      // \u975E\u5FC5\u586B\u4E14\u4E3A\u7A7A\u65F6\uFF0C\u8DF3\u8FC7\u540E\u7EED\u683C\u5F0F\u6821\u9A8C\uFF08\u4E0E antd \u884C\u4E3A\u4E00\u81F4\uFF09\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string'\n          ? new RegExp(rule.pattern).test(String(value))\n          : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n          continue;\n        }\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  }"
+                "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      // \u5FC5\u586B\u6821\u9A8C\uFF1A\u7A7A\u5B57\u7B26\u4E32 / null / undefined / \u7A7A\u6570\u7EC4\u5747\u89C6\u4E3A\"\u672A\u586B\"\n      const isEmpty = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(this.msg(rule, 'required', `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`));\n        continue;\n      }\n      // \u975E\u5FC5\u586B\u4E14\u4E3A\u7A7A\u65F6\uFF0C\u8DF3\u8FC7\u540E\u7EED\u683C\u5F0F\u6821\u9A8C\uFF08\u4E0E antd \u884C\u4E3A\u4E00\u81F4\uFF09\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string' ? new RegExp(rule.pattern).test(String(value)) : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(this.msg(rule, 'pattern', `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`));\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(this.msg(rule, 'email', `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`));\n          continue;\n        }\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(this.msg(rule, 'min', `${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(this.msg(rule, 'max', `${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",
@@ -336,7 +444,7 @@ export class FormItem {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "(): any => {\n    // \u8986\u76D6\u6240\u6709\u8868\u5355\u63A7\u4EF6\uFF1Ainput/select/cascader/date \u7CFB\u5217/\u6570\u5B57/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n      'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n      'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
+                "defaultValue": "(): any => {\n    // \u8986\u76D6\u6240\u6709\u8868\u5355\u63A7\u4EF6\uFF1Ainput/select/cascader/date \u7CFB\u5217/\u6570\u5B57/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n        'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n        'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
             }
         };
     }

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

@@ -1 +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  /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，\n   *  但 componentWillLoad 早于子组件的 componentDidLoad，因此注册一定先到。\n   *  这里还监听 hbFieldReset，便于 Form.resetFields 主动广播。 */\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      composed: true, // 穿越 Shadow DOM 边界（FormItem 自身 shadow -> Form host）\n    }));\n\n    // 子控件值变化时清错（对齐 antd：合法输入即移除错误提示）\n    this.el.addEventListener('hbChange', this.handleChildChange);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('hbChange', this.handleChildChange);\n  }\n\n  /** 子控件 hbChange 时，若当前有错误则重新校验以尽早清除错误提示 */\n  private handleChildChange = () => {\n    if (this.errors.length > 0) {\n      void this.validate();\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  /** 是否渲染必填星号：显式 required 或任一规则带 required（对齐 antd 自动推断） */\n  private get isRequired(): boolean {\n    if (this.required) return true;\n    return this.formRules.some(r => r && r.required);\n  }\n\n  /** 继承父 hb-form 的 labelPosition（FormItem 自身无此 prop，避免与 Form 冲突时以 Form 为准） */\n  private get resolvedLabelPosition(): 'left' | 'right' | 'top' {\n    const form = this.el.closest('hb-form') as any;\n    return (form && form.labelPosition) || 'right';\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      // 必填校验：空字符串 / null / undefined / 空数组均视为\"未填\"\n      const isEmpty =\n        value === undefined ||\n        value === null ||\n        value === '' ||\n        (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(rule.message || `${this.label || this.prop}不能为空`);\n        continue;\n      }\n      // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string'\n          ? new RegExp(rule.pattern).test(String(value))\n          : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n          continue;\n        }\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    // 覆盖所有表单控件：input/select/cascader/date 系列/数字/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n      'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n      'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  };\n\n  render() {\n    const labelTop = this.resolvedLabelPosition === 'top';\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          'hb-form-item--required': this.isRequired,\n          'hb-form-item--label-top': labelTop,\n          'hb-form-item--label-left': this.resolvedLabelPosition === 'left',\n        }}\n      >\n        {this.label && (\n          <label\n            class=\"hb-form-item__label\"\n            style={this.labelWidth ? { width: this.labelWidth } : undefined}\n            title={this.label}\n          >\n            {this.isRequired && (\n              <span class=\"hb-form-item__required\" aria-hidden=\"true\">*</span>\n            )}\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\" role=\"alert\">{this.errors[0]}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"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  /**\n   * F6：手动校验态（'success' | 'warning' | 'error' | 'validating' | ''）。\n   * 设置后覆盖内部校验结果驱动的错误显示（对齐 antd validateStatus）。\n   */\n  @Prop() validateStatus?: '' | 'success' | 'warning' | 'error' | 'validating';\n\n  /** F6：手动错误/帮助文案（配合 validateStatus='error' 显示自定义提示） */\n  @Prop() help?: string;\n\n  /**\n   * F7：标签栅格占比（1-24）。未设置时用 labelWidth。\n   * 对齐 antd labelCol（简化为纯数字栅格，labelCol.span）。\n   */\n  @Prop() labelCol?: number;\n\n  @State() errors: string[] = [];\n  @State() isvalidating: boolean = false;\n\n  /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，\n   *  但 componentWillLoad 早于子组件的 componentDidLoad，因此注册一定先到。\n   *  这里还监听 hbFieldReset，便于 Form.resetFields 主动广播。 */\n\n  componentDidLoad() {\n    // 向父级 hb-form 注册\n    this.el.dispatchEvent(\n      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        composed: true, // 穿越 Shadow DOM 边界（FormItem 自身 shadow -> Form host）\n      }),\n    );\n\n    // 子控件值变化时清错（对齐 antd：合法输入即移除错误提示）\n    this.el.addEventListener('hbChange', this.handleChildChange);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('hbChange', this.handleChildChange);\n  }\n\n  /** 子控件 hbChange 时，若当前有错误则重新校验以尽早清除错误提示 */\n  private handleChildChange = () => {\n    if (this.errors.length > 0) {\n      void this.validate();\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  /** 是否渲染必填星号：显式 required 或任一规则带 required（对齐 antd 自动推断） */\n  private get isRequired(): boolean {\n    if (this.required) return true;\n    return this.formRules.some(r => r && r.required);\n  }\n\n  /** 继承父 hb-form 的 labelPosition（FormItem 自身无此 prop，避免与 Form 冲突时以 Form 为准） */\n  private get resolvedLabelPosition(): 'left' | 'right' | 'top' {\n    const form = this.el.closest('hb-form') as any;\n    return (form && form.labelPosition) || 'right';\n  }\n\n  /**\n   * F4：继承父 hb-form 的 validateMessages（校验提示模板）。\n   * 支持占位符 {label}。仅对 rule 未显式指定 message 的规则生效。\n   */\n  private get resolvedValidateMessages(): Record<string, string> | undefined {\n    const form = this.el.closest('hb-form') as any;\n    return form && form.validateMessages;\n  }\n\n  /** 用模板生成错误文案（{label} 替换为字段标签），优先级：rule.message > 模板 > 内置默认 */\n  private msg(rule: any, key: string, fallback: string): string {\n    if (rule.message) return rule.message;\n    const tmpl = this.resolvedValidateMessages;\n    const label = this.label || this.prop;\n    if (tmpl && tmpl[key]) return tmpl[key].replace('{label}', label);\n    return fallback.replace('{label}', label);\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      // 必填校验：空字符串 / null / undefined / 空数组均视为\"未填\"\n      const isEmpty = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(this.msg(rule, 'required', `${this.label || this.prop}不能为空`));\n        continue;\n      }\n      // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string' ? new RegExp(rule.pattern).test(String(value)) : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(this.msg(rule, 'pattern', `${this.label || this.prop}格式不正确`));\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(this.msg(rule, 'email', `${this.label || this.prop}格式不正确`));\n          continue;\n        }\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(this.msg(rule, 'min', `${this.label || this.prop}最少${rule.min}个字符`));\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(this.msg(rule, 'max', `${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    // 覆盖所有表单控件：input/select/cascader/date 系列/数字/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n        'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n        'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  };\n\n  /** F6：实际显示的错误文案。手动 help 优先；否则取内部 errors[0] */\n  private get displayError(): string {\n    if (this.help !== undefined) return this.help;\n    return this.errors[0] || '';\n  }\n\n  /** F6：实际是否显示错误（手动 validateStatus='error' 或内部有错） */\n  private get showError(): boolean {\n    if (this.validateStatus === 'error') return true;\n    if (this.validateStatus === 'success' || this.validateStatus === 'validating') return false;\n    return this.errors.length > 0;\n  }\n\n  render() {\n    const labelTop = this.resolvedLabelPosition === 'top';\n    const hasError = this.showError;\n    // A4：label 与内容关联。子控件是 slot（id 未知），无法用 label.for；\n    // 改用 content 容器 role=group + aria-labelledby 指向 label id，\n    // 把 label 语义绑到整组；并用 aria-required / aria-invalid 暴露必填与校验态（读屏可感知，\n    // 不再仅靠红色 + 隐藏星号）。\n    const labelId = this.label ? `hb-form-item__label-${this.prop || 'x'}` : undefined;\n    // F7：labelCol 栅格占比（1-24），未设置时回退 labelWidth\n    const labelStyle = this.labelCol\n      ? { width: `${(this.labelCol / 24) * 100}%` }\n      : this.labelWidth\n        ? { width: this.labelWidth }\n        : undefined;\n    return (\n      <div\n        class={{\n          'hb-form-item': true,\n          'hb-form-item--error': hasError,\n          'hb-form-item--validating': this.isvalidating || this.validateStatus === 'validating',\n          'hb-form-item--required': this.isRequired,\n          'hb-form-item--label-top': labelTop,\n          'hb-form-item--label-left': this.resolvedLabelPosition === 'left',\n        }}\n      >\n        {this.label && (\n          <label id={labelId} class=\"hb-form-item__label\" style={labelStyle} title={this.label}>\n            {this.isRequired && (\n              <span class=\"hb-form-item__required\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n            {this.label}\n          </label>\n        )}\n        <div class=\"hb-form-item__content\" role=\"group\" aria-labelledby={labelId} aria-required={this.isRequired ? 'true' : undefined} aria-invalid={hasError ? 'true' : undefined}>\n          <slot />\n          {hasError && (\n            <div class=\"hb-form-item__error\" role=\"alert\">\n              {this.displayError}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -65,8 +65,14 @@
 }
 
 @keyframes hb-form-error-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ============================================================