huibo-ui 0.3.0 → 0.5.0

package/dist/collection/components/Dropdown/Dropdown.js

@@ -1,9 +1,18 @@
 import { h } from "@stencil/core";
 import { createClickOutsideHandler } from "../../utils/click-outside";
 import { getNextZIndex } from "../../utils/popup-manager";
+import { handleListKeyboard, isActivationKey } from "../../utils/a11y";
+import { createLeaveScheduler } from "../../utils/transition";
 /**
  * Dropdown 下拉菜单组件
- * 将动作或菜单折叠到下拉菜单中
+ * 将动作或菜单折叠到下拉菜单中。
+ *
+ * 无障碍（对齐 WAI-ARIA menu / antd）：
+ * - 触发器 role=button + aria-haspopup=menu + aria-expanded
+ * - 菜单 role=menu，菜单项 role=menuitem + aria-disabled
+ * - 键盘：trigger 上 Enter/Space/↓ 打开；菜单内 ↑↓ 导航、Enter/Space 选中、Esc 关闭
+ *
+ * 进出场动画：用 leaving state 延迟卸载，让 fade-out 有机会播放。
  */
 export class Dropdown {
     el;
@@ -14,18 +23,27 @@ export class Dropdown {
     /** 是否禁用 */
     disabled = false;
     isOpen = false;
+    /** 离场动画期（保留 DOM 让 fade-out 播完） */
+    leaving = false;
+    /** 键盘高亮项索引（-1 表示无） */
+    activeIndex = -1;
     /** 命令事件 */
     hbCommand;
+    leave = createLeaveScheduler(() => this.leaving, v => (this.leaving = v), 150);
     clickOutside = createClickOutsideHandler({
         host: null,
         isOpen: () => this.isOpen,
-        onClose: () => { this.isOpen = false; },
+        onClose: () => {
+            this.close();
+        },
     });
     componentDidLoad() {
         this.clickOutside = createClickOutsideHandler({
             host: this.el,
             isOpen: () => this.isOpen,
-            onClose: () => { this.isOpen = false; },
+            onClose: () => {
+                this.close();
+            },
         });
         if (this.trigger === 'click') {
             this.clickOutside.connect();
@@ -33,35 +51,106 @@ export class Dropdown {
     }
     disconnectedCallback() {
         this.clickOutside.disconnect();
+        this.leave.dispose();
     }
-    show = () => {
+    open = () => {
         if (this.disabled)
             return;
+        this.leave.cancel(); // 中途又打开：取消挂起的离场
         this.isOpen = true;
+        this.activeIndex = this.items.findIndex(i => !i.disabled);
     };
-    hide = () => {
+    close = () => {
+        if (!this.isOpen && !this.leaving)
+            return;
         this.isOpen = false;
+        this.activeIndex = -1;
+        this.leave.start();
+    };
+    show = () => {
+        if (this.disabled)
+            return;
+        this.open();
+    };
+    hide = () => {
+        this.close();
     };
     toggle = () => {
         if (this.disabled)
             return;
-        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.close();
+        else
+            this.open();
     };
     handleSelect = (item) => {
         if (item.disabled)
             return;
-        this.isOpen = false;
+        this.close();
         this.hbCommand.emit(item.key);
     };
+    handleTriggerKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (this.trigger === 'hover')
+            return;
+        if (isActivationKey(e.key) || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.open();
+        }
+    };
+    handleMenuKeydown = (e) => {
+        const enabledCount = this.items.length;
+        const action = handleListKeyboard(e, {
+            activeIndex: this.activeIndex,
+            itemCount: enabledCount,
+            loop: true,
+        });
+        switch (action.type) {
+            case 'navigate':
+                e.preventDefault();
+                {
+                    let idx = action.index;
+                    for (let i = 0; i < enabledCount; i++) {
+                        if (!this.items[idx]?.disabled)
+                            break;
+                        idx = (idx + 1) % enabledCount;
+                    }
+                    this.activeIndex = idx;
+                }
+                break;
+            case 'select': {
+                e.preventDefault();
+                const item = this.items[action.index];
+                if (item && !item.disabled)
+                    this.handleSelect(item);
+                break;
+            }
+            case 'close':
+                e.preventDefault();
+                this.close();
+                break;
+            default:
+                break;
+        }
+    };
+    get shouldRender() {
+        return this.isOpen || this.leaving;
+    }
     render() {
-        const triggerEvents = this.trigger === 'hover'
-            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
-            : { onClick: this.toggle };
-        return (h("div", { key: '65db176398a94c702f6c3fcdc4128ed0e6afc376', class: "hb-dropdown", ...triggerEvents }, h("div", { key: '2c96f9af4f69d1a1c52195546b5b777e5a2d54b8', class: "hb-dropdown__trigger" }, h("slot", { key: 'cd007dcd7d357cc1d041472a72faa0a3a025bda2' })), this.isOpen && (h("div", { key: 'a3bdebbc0a701e01df36b701bc13de130c4e8d24', class: "hb-dropdown__menu", style: { zIndex: String(getNextZIndex()) } }, this.items.map(item => (h("div", { class: {
+        const triggerEvents = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };
+        return (h("div", { key: '8855aa67978f0180ee22fa57d47d8a8530fcff59', class: "hb-dropdown", ...triggerEvents, onKeyDown: this.handleTriggerKeydown }, h("div", { key: 'f07514869b6c2fed33be57a882afbe3aad221f79', class: "hb-dropdown__trigger", role: "button", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '077a8fdd63295eaeadda3124764dd51090a7019d' })), this.shouldRender && (h("div", { key: 'f17eba6ead1c841fdc97db4fc88c62937e6b7344', class: {
+                'hb-dropdown__menu': true,
+                'hb-dropdown__menu--leaving': this.leaving,
+            }, style: { zIndex: String(getNextZIndex()) }, role: "menu", onKeyDown: this.handleMenuKeydown }, this.items.map((item, index) => (h("div", { class: {
                 'hb-dropdown__item': true,
                 'hb-dropdown__item--disabled': item.disabled,
                 'hb-dropdown__item--divided': item.divided,
                 'hb-dropdown__item--danger': item.danger,
+                'hb-dropdown__item--active': index === this.activeIndex,
+            }, role: "menuitem", tabindex: -1, "aria-disabled": item.disabled ? 'true' : undefined, onMouseEnter: () => {
+                if (!item.disabled)
+                    this.activeIndex = index;
             }, onClick: () => this.handleSelect(item) }, item.label)))))));
     }
     static get is() { return "hb-dropdown"; }
@@ -146,7 +235,9 @@ export class Dropdown {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "leaving": {},
+            "activeIndex": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getNextZIndex } from '../../utils/popup-manager';\n\nexport interface DropdownItem {\n  key: string;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n  danger?: boolean;\n}\n\n/**\n * Dropdown 下拉菜单组件\n * 将动作或菜单折叠到下拉菜单中\n */\n@Component({\n  tag: 'hb-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() el: HTMLElement;\n\n  /** 菜单项 */\n  @Prop() items: DropdownItem[] = [];\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() isOpen: boolean = false;\n\n  /** 命令事件 */\n  @Event() hbCommand: EventEmitter<string>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; },\n    });\n    if (this.trigger === 'click') {\n      this.clickOutside.connect();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  private show = () => {\n    if (this.disabled) return;\n    this.isOpen = true;\n  };\n\n  private hide = () => {\n    this.isOpen = false;\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleSelect = (item: DropdownItem) => {\n    if (item.disabled) return;\n    this.isOpen = false;\n    this.hbCommand.emit(item.key);\n  };\n\n  render() {\n    const triggerEvents = this.trigger === 'hover'\n      ? { onMouseEnter: this.show, onMouseLeave: this.hide }\n      : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-dropdown\" {...triggerEvents}>\n        <div class=\"hb-dropdown__trigger\">\n          <slot />\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-dropdown__menu\" style={{ zIndex: String(getNextZIndex()) }}>\n            {this.items.map(item => (\n              <div\n                class={{\n                  'hb-dropdown__item': true,\n                  'hb-dropdown__item--disabled': item.disabled,\n                  'hb-dropdown__item--divided': item.divided,\n                  'hb-dropdown__item--danger': item.danger,\n                }}\n                onClick={() => this.handleSelect(item)}\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getNextZIndex } from '../../utils/popup-manager';\nimport { handleListKeyboard, isActivationKey } from '../../utils/a11y';\nimport { createLeaveScheduler } from '../../utils/transition';\n\nexport interface DropdownItem {\n  key: string;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n  danger?: boolean;\n}\n\n/**\n * Dropdown 下拉菜单组件\n * 将动作或菜单折叠到下拉菜单中。\n *\n * 无障碍（对齐 WAI-ARIA menu / antd）：\n * - 触发器 role=button + aria-haspopup=menu + aria-expanded\n * - 菜单 role=menu，菜单项 role=menuitem + aria-disabled\n * - 键盘：trigger 上 Enter/Space/↓ 打开；菜单内 ↑↓ 导航、Enter/Space 选中、Esc 关闭\n *\n * 进出场动画：用 leaving state 延迟卸载，让 fade-out 有机会播放。\n */\n@Component({\n  tag: 'hb-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() el: HTMLElement;\n\n  /** 菜单项 */\n  @Prop() items: DropdownItem[] = [];\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() isOpen: boolean = false;\n  /** 离场动画期（保留 DOM 让 fade-out 播完） */\n  @State() leaving: boolean = false;\n  /** 键盘高亮项索引（-1 表示无） */\n  @State() activeIndex: number = -1;\n\n  /** 命令事件 */\n  @Event() hbCommand: EventEmitter<string>;\n\n  private leave = createLeaveScheduler(\n    () => this.leaving,\n    v => (this.leaving = v),\n    150,\n  );\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => {\n      this.close();\n    },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => {\n        this.close();\n      },\n    });\n    if (this.trigger === 'click') {\n      this.clickOutside.connect();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n    this.leave.dispose();\n  }\n\n  private open = () => {\n    if (this.disabled) return;\n    this.leave.cancel(); // 中途又打开：取消挂起的离场\n    this.isOpen = true;\n    this.activeIndex = this.items.findIndex(i => !i.disabled);\n  };\n\n  private close = () => {\n    if (!this.isOpen && !this.leaving) return;\n    this.isOpen = false;\n    this.activeIndex = -1;\n    this.leave.start();\n  };\n\n  private show = () => {\n    if (this.disabled) return;\n    this.open();\n  };\n\n  private hide = () => {\n    this.close();\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    if (this.isOpen) this.close();\n    else this.open();\n  };\n\n  private handleSelect = (item: DropdownItem) => {\n    if (item.disabled) return;\n    this.close();\n    this.hbCommand.emit(item.key);\n  };\n\n  private handleTriggerKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (this.trigger === 'hover') return;\n    if (isActivationKey(e.key) || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.open();\n    }\n  };\n\n  private handleMenuKeydown = (e: KeyboardEvent) => {\n    const enabledCount = this.items.length;\n    const action = handleListKeyboard(e, {\n      activeIndex: this.activeIndex,\n      itemCount: enabledCount,\n      loop: true,\n    });\n    switch (action.type) {\n      case 'navigate':\n        e.preventDefault();\n        {\n          let idx = action.index;\n          for (let i = 0; i < enabledCount; i++) {\n            if (!this.items[idx]?.disabled) break;\n            idx = (idx + 1) % enabledCount;\n          }\n          this.activeIndex = idx;\n        }\n        break;\n      case 'select': {\n        e.preventDefault();\n        const item = this.items[action.index];\n        if (item && !item.disabled) this.handleSelect(item);\n        break;\n      }\n      case 'close':\n        e.preventDefault();\n        this.close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private get shouldRender(): boolean {\n    return this.isOpen || this.leaving;\n  }\n\n  render() {\n    const triggerEvents = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-dropdown\" {...triggerEvents} onKeyDown={this.handleTriggerKeydown}>\n        <div\n          class=\"hb-dropdown__trigger\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n        >\n          <slot />\n        </div>\n        {this.shouldRender && (\n          <div\n            class={{\n              'hb-dropdown__menu': true,\n              'hb-dropdown__menu--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(getNextZIndex()) }}\n            role=\"menu\"\n            onKeyDown={this.handleMenuKeydown}\n          >\n            {this.items.map((item, index) => (\n              <div\n                class={{\n                  'hb-dropdown__item': true,\n                  'hb-dropdown__item--disabled': item.disabled,\n                  'hb-dropdown__item--divided': item.divided,\n                  'hb-dropdown__item--danger': item.danger,\n                  'hb-dropdown__item--active': index === this.activeIndex,\n                }}\n                role=\"menuitem\"\n                tabindex={-1}\n                aria-disabled={item.disabled ? 'true' : undefined}\n                onMouseEnter={() => {\n                  if (!item.disabled) this.activeIndex = index;\n                }}\n                onClick={() => this.handleSelect(item)}\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Dropdown/dropdown.css

@@ -32,7 +32,8 @@
   transition: background-color var(--hb-transition-duration);
 }
 
-.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled) {
+.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled),
+.hb-dropdown__item--active:not(.hb-dropdown__item--disabled) {
   background-color: var(--hb-color-fill-tertiary);
   color: var(--hb-color-primary);
 }
@@ -57,6 +58,28 @@
 }
 
 @keyframes hb-dropdown-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);
+  }
+}
+
+/* 离场动画 */
+.hb-dropdown__menu--leaving {
+  animation: hb-dropdown-fade-out 0.15s ease-in forwards;
+}
+
+@keyframes hb-dropdown-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }

package/dist/collection/components/Empty/Empty.js

@@ -3,7 +3,7 @@ export class Empty {
     description = '暂无数据';
     image;
     render() {
-        return (h("div", { key: '18b44f37a4a8cfb67405864fdc398c6fc91164c2', class: "hb-empty" }, h("div", { key: 'e30f3e869f5d0ed3b07fa470891dd3cdc3c4d24a', class: "hb-empty__image" }, this.image ? h("img", { src: this.image, alt: this.description }) : h("span", { class: "hb-empty__icon" }, "\uD83D\uDCED")), h("div", { key: '5d9df75bcb35f9df02d920e1350aeb733740f82d', class: "hb-empty__description" }, this.description), h("div", { key: 'cfd7273f7ecbf29504b66ee549de3d915a2dd98e', class: "hb-empty__footer" }, h("slot", { key: '1164418b74afa280c35c63ce807229201aceccdf' }))));
+        return (h("div", { key: '716385f61e4692d30d9ef0dab2671b4ee4a8381a', class: "hb-empty" }, h("div", { key: '39162ccfefa991ae63a59f585e7a91179b64523a', class: "hb-empty__image" }, this.image ? h("img", { src: this.image, alt: this.description }) : h("span", { class: "hb-empty__icon" }, "\uD83D\uDCED")), h("div", { key: '2ada1cc904ba094aaaf863d82ead88b81576590e', class: "hb-empty__description" }, this.description), h("div", { key: 'cb573d62ea4d81a66815a27be96617e0a3c3e470', class: "hb-empty__footer" }, h("slot", { key: '424ec328528ea66240ae4216e178bfc7f5ba2acd' }))));
     }
     static get is() { return "hb-empty"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/FloatButton/FloatButton.js

@@ -35,11 +35,11 @@ export class FloatButton {
             right: `${this.right}px`,
             bottom: `${this.bottom}px`,
         };
-        return (h("button", { key: '6457ed8d2174a9ad9e23be02a95d4cbb3952e4e0', type: "button", class: {
+        return (h("button", { key: '1c3836a10620e871fd54fdcacab8ed447329203f', type: "button", class: {
                 'hb-float-button': true,
                 [`hb-float-button--${this.type}`]: true,
                 [`hb-float-button--${this.shape}`]: true,
-            }, style: style, onClick: this.handleClick }, this.icon && h("span", { key: '21d687c58c84fdcdb74a4130cce591de92489ffc', class: "hb-float-button__icon" }, this.icon), this.description && h("span", { key: 'f8580e6a836a0004244c2d158917420a0c2e1a55', class: "hb-float-button__description" }, this.description), this.renderBadge()));
+            }, style: style, onClick: this.handleClick }, this.icon && h("span", { key: 'f0eaa8a4e40805f1442a55ec6830e2ed7aa54299', class: "hb-float-button__icon" }, this.icon), this.description && h("span", { key: '8f276ce89d0ace7f26ad65bb0d41dc0a4e262a45', class: "hb-float-button__description" }, this.description), this.renderBadge()));
     }
     static get is() { return "hb-float-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,11 +25,16 @@ export class Form {
     // 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 });
+    });
     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);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);
     }
     /**
      * 验证整个表单
@@ -46,14 +51,14 @@ export class Form {
      * 重置表单
      */
     resetFields = () => {
-        this.fieldRegistry.forEach((field) => field.resetValue());
+        this.fieldRegistry.forEach(field => field.resetValue());
     };
     render() {
-        return (h("form", { key: '233f774fd2e6a7331ce01d7b729c3a77dd5793a9', class: {
+        return (h("form", { key: '4e5a8f5d54c6760936fa8735e9a41d7956d631b1', 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' })));
+            }, onSubmit: e => e.preventDefault(), novalidate: true }, h("slot", { key: 'd2e9a364e36387770dc8deb4c42c0e66542cd6a0' })));
     }
     static get is() { return "hb-form"; }
     static get encapsulation() { return "shadow"; }
@@ -239,7 +244,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 +262,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;IAEzB,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,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5E,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/E,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,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,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,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  // 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  componentWillLoad() {\n    this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);\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

@@ -19,6 +19,9 @@ export class FormItem {
     size = 'default';
     errors = [];
     isvalidating = false;
+    /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，
+     *  但 componentWillLoad 早于子组件的 componentDidLoad，因此注册一定先到。
+     *  这里还监听 hbFieldReset，便于 Form.resetFields 主动广播。 */
     componentDidLoad() {
         // 向父级 hb-form 注册
         this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {
@@ -29,14 +32,37 @@ export class FormItem {
                 getValue: this.getValue,
             },
             bubbles: true,
+            composed: true, // 穿越 Shadow DOM 边界（FormItem 自身 shadow -> Form host）
         }));
+        // 子控件值变化时清错（对齐 antd：合法输入即移除错误提示）
+        this.el.addEventListener('hbChange', this.handleChildChange);
     }
+    disconnectedCallback() {
+        this.el.removeEventListener('hbChange', this.handleChildChange);
+    }
+    /** 子控件 hbChange 时，若当前有错误则重新校验以尽早清除错误提示 */
+    handleChildChange = () => {
+        if (this.errors.length > 0) {
+            void this.validate();
+        }
+    };
     get formRules() {
         // 合并 prop 对应的 form rules 和自身 rules
         const form = this.el.closest('hb-form');
         const formLevelRules = form ? form.rules?.[this.prop] || [] : [];
         return [...formLevelRules, ...this.rules];
     }
+    /** 是否渲染必填星号：显式 required 或任一规则带 required（对齐 antd 自动推断） */
+    get isRequired() {
+        if (this.required)
+            return true;
+        return this.formRules.some(r => r && r.required);
+    }
+    /** 继承父 hb-form 的 labelPosition（FormItem 自身无此 prop，避免与 Form 冲突时以 Form 为准） */
+    get resolvedLabelPosition() {
+        const form = this.el.closest('hb-form');
+        return (form && form.labelPosition) || 'right';
+    }
     /**
      * 验证此字段
      */
@@ -50,13 +76,27 @@ export class FormItem {
         this.isvalidating = true;
         const errors = [];
         for (const rule of rules) {
-            if (rule.required && (!value && value !== 0)) {
+            // 必填校验：空字符串 / null / undefined / 空数组均视为"未填"
+            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}不能为空`);
                 continue;
             }
-            if (rule.pattern && !rule.pattern.test(value)) {
-                errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+            // 非必填且为空时，跳过后续格式校验（与 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));
+                if (!ok) {
+                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    continue;
+                }
+            }
+            if (rule.type === 'email') {
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(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}个字符`);
@@ -83,19 +123,31 @@ export class FormItem {
         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');
+        // 覆盖所有表单控件：input/select/cascader/date 系列/数字/checkbox/radio/switch/slider/color-picker/rate/upload
+        const input = this.el.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 (input) {
             return input.modelValue;
         }
         return undefined;
     };
     render() {
-        return (h("div", { key: '9ea6c55b9159936a572eef459adea96234fbe2fa', class: {
+        const labelTop = this.resolvedLabelPosition === 'top';
+        const hasError = this.errors.length > 0;
+        // 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;
+        return (h("div", { key: 'ad51782227c637557a1cc0a4be2397b20f63b2e2', class: {
                 'hb-form-item': true,
-                'hb-form-item--error': this.errors.length > 0,
+                'hb-form-item--error': hasError,
                 '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])))));
+                '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: '22b4830775644a315a797c91ca77045015632cf5', id: labelId, class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined, title: this.label }, this.isRequired && (h("span", { key: '43c4db5f65f68f8a9db2362c8cdf724069895238', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '0fe8dda2a5b0363c55ca6e19d1c2b0e3a44e503f', class: "hb-form-item__content", role: "group", "aria-labelledby": labelId, "aria-required": this.isRequired ? 'true' : undefined, "aria-invalid": hasError ? 'true' : undefined }, h("slot", { key: '6b714ffde9c6a0f9112aef9a28519ba42df0fa96' }), hasError && (h("div", { key: '41a97ac3f7f0dccd9938d9dbf844852c085d0b72', class: "hb-form-item__error", role: "alert" }, this.errors[0])))));
     }
     static get is() { return "hb-form-item"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +301,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      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  }"
+                "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(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' ? new RegExp(rule.pattern).test(String(value)) : 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  }"
             },
             "resetValue": {
                 "type": "unknown",
@@ -285,7 +337,7 @@ export class FormItem {
                 },
                 "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  }"
+                "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  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"]}
+{"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(\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   * 验证此字段\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(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' ? new RegExp(rule.pattern).test(String(value)) : 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    const hasError = this.errors.length > 0;\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    return (\n      <div\n        class={{\n          'hb-form-item': true,\n          'hb-form-item--error': hasError,\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 id={labelId} class=\"hb-form-item__label\" style={this.labelWidth ? { width: this.labelWidth } : undefined} 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.errors[0]}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}