huibo-ui 0.3.0 → 0.5.0

package/dist/collection/components/Popconfirm/popconfirm.css

@@ -1,20 +1,84 @@
-:host { display: inline-block; }
-.hb-popconfirm__trigger { display: inline-block; cursor: pointer; }
+:host {
+  display: inline-block;
+}
+.hb-popconfirm__trigger {
+  display: inline-block;
+  cursor: pointer;
+}
 .hb-popconfirm__popup {
-  position: fixed; background: var(--hb-color-bg-elevated);
-  border-radius: var(--hb-border-radius-base); box-shadow: var(--hb-box-shadow);
-  padding: var(--hb-spacing-md); min-width: 200px; animation: hb-popconfirm-fade 0.15s ease-out; pointer-events: auto;
-}
-.hb-popconfirm__main { display: flex; align-items: flex-start; gap: var(--hb-spacing-xs); margin-bottom: var(--hb-spacing-sm); }
-.hb-popconfirm__icon { color: var(--hb-color-warning); font-size: 16px; flex-shrink: 0; }
-.hb-popconfirm__title { font-size: var(--hb-font-size-sm); color: var(--hb-color-text); line-height: 1.5; }
-.hb-popconfirm__action { display: flex; justify-content: flex-end; gap: var(--hb-spacing-xs); }
+  position: fixed;
+  background: var(--hb-color-bg-elevated);
+  border-radius: var(--hb-border-radius-base);
+  box-shadow: var(--hb-box-shadow);
+  padding: var(--hb-spacing-md);
+  min-width: 200px;
+  animation: hb-popconfirm-fade 0.15s ease-out;
+  pointer-events: auto;
+}
+.hb-popconfirm__main {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hb-spacing-xs);
+  margin-bottom: var(--hb-spacing-sm);
+}
+.hb-popconfirm__icon {
+  color: var(--hb-color-warning);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.hb-popconfirm__title {
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+  line-height: 1.5;
+}
+.hb-popconfirm__action {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--hb-spacing-xs);
+}
 .hb-popconfirm__btn {
-  padding: 4px 12px; font-size: var(--hb-font-size-xs); border-radius: var(--hb-border-radius-sm);
-  cursor: pointer; border: 1px solid var(--hb-color-border); background: var(--hb-color-bg);
+  padding: 4px 12px;
+  font-size: var(--hb-font-size-xs);
+  border-radius: var(--hb-border-radius-sm);
+  cursor: pointer;
+  border: 1px solid var(--hb-color-border);
+  background: var(--hb-color-bg);
   transition: all var(--hb-transition-duration);
 }
-.hb-popconfirm__btn--cancel:hover { color: var(--hb-color-primary); border-color: var(--hb-color-primary); }
-.hb-popconfirm__btn--confirm { background: var(--hb-color-primary); color: #fff; border-color: var(--hb-color-primary); }
-.hb-popconfirm__btn--confirm:hover { background: var(--hb-color-primary-hover); }
-@keyframes hb-popconfirm-fade { from { opacity: 0; } to { opacity: 1; } }
+.hb-popconfirm__btn--cancel:hover {
+  color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+}
+.hb-popconfirm__btn--confirm {
+  background: var(--hb-color-primary);
+  color: #fff;
+  border-color: var(--hb-color-primary);
+}
+.hb-popconfirm__btn--confirm:hover {
+  background: var(--hb-color-primary-hover);
+}
+@keyframes hb-popconfirm-fade {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 离场动画 */
+.hb-popconfirm__popup--leaving {
+  animation: hb-popconfirm-fade-out 0.2s ease-in forwards;
+}
+@keyframes hb-popconfirm-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}

package/dist/collection/components/Popover/Popover.js

@@ -1,25 +1,40 @@
 import { h } from "@stencil/core";
 import { computePosition, getNextZIndex } from "../../utils/popup-manager";
+import { isActivationKey } from "../../utils/a11y";
+import { createLeaveScheduler } from "../../utils/transition";
+/**
+ * Popover 气泡卡片
+ * 无障碍（对齐 antd / WAI-ARIA）：
+ * - 触发器 role=button + aria-haspopup=dialog + aria-expanded
+ * - 浮层 role=dialog + aria-labelledby（title）
+ * - 键盘：trigger 上 Enter/Space 打开/关闭；Esc 关闭
+ *
+ * 进出场动画：用 leaving state 延迟卸载，让 fade-out 有机会播放。
+ */
 export class Popover {
     el;
-    // 注意：使用默认值使其成为 required string，避免与 HTMLElement.title（string）
-    // 的可选类型冲突；同时保留 Ant Design 兼容的 `title` API。
     title = '';
     width = '240px';
     placement = 'bottom';
     trigger = 'hover';
     disabled = false;
     visible = false;
+    leaving = false;
     popupStyle = {};
     triggerRef;
     popupRef;
+    leave = createLeaveScheduler(() => this.leaving, v => (this.leaving = v), 150);
     show = () => {
         if (!this.disabled) {
+            this.leave.cancel();
             this.visible = true;
             requestAnimationFrame(() => this.updatePosition());
         }
     };
-    hide = () => { this.visible = false; };
+    hide = () => {
+        this.visible = false;
+        this.leave.start();
+    };
     toggle = () => {
         if (this.visible) {
             this.hide();
@@ -28,6 +43,22 @@ export class Popover {
             this.show();
         }
     };
+    disconnectedCallback() {
+        this.leave.dispose();
+    }
+    handleKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Escape' && (this.visible || this.leaving)) {
+            e.preventDefault();
+            this.hide();
+            return;
+        }
+        if (this.trigger === 'click' && isActivationKey(e.key)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
     updatePosition() {
         if (!this.triggerRef || !this.popupRef)
             return;
@@ -36,9 +67,19 @@ export class Popover {
         const pos = computePosition(rect, pw, ph, this.placement, 8);
         this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };
     }
+    get shouldRender() {
+        return this.visible || this.leaving;
+    }
     render() {
         const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };
-        return (h("div", { key: 'b094fdab875b54a1334489467d87cab19d5d495c', class: "hb-popover", ...events }, h("div", { key: '0d87497b9f31c97aab530a5298722b594388a036', ref: (el) => { this.triggerRef = el; }, class: "hb-popover__trigger" }, h("slot", { key: '93740d59a42e448997f44fe9a636e2858d15121a' })), this.visible && (h("div", { key: '54f77abc1aa942b45e69bf4c63ec6b8f4fd49bad', ref: (el) => { this.popupRef = el; }, class: "hb-popover__popup", style: { ...this.popupStyle, width: this.width }, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.title && h("div", { key: '44f71196d287712f9895546d03d1849ba2092241', class: "hb-popover__title" }, this.title), h("div", { key: '7f558d395de6937bb453f9a3453509654fb14514', class: "hb-popover__body" }, h("slot", { key: '19677384409687a3936393b2aaf6722c071de5eb', name: "content" }))))));
+        return (h("div", { key: 'e9007c4ef9ebb2286c0b6fa5673137b14be6db86', class: "hb-popover", ...events, onKeyDown: this.handleKeydown }, h("div", { key: '6b7eac4394ed810048ef73c3ab818f6129e5e6d0', ref: (el) => {
+                this.triggerRef = el;
+            }, class: "hb-popover__trigger", role: "button", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.visible ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onFocus: this.trigger === 'hover' ? this.show : undefined, onBlur: this.trigger === 'hover' ? this.hide : undefined }, h("slot", { key: '5c0786412affbc4fd67471503b5fdd034f1d90ea' })), this.shouldRender && (h("div", { key: 'f1c0edf1cdbc1af5b838c08717305dbf28e31b0e', ref: (el) => {
+                this.popupRef = el;
+            }, class: {
+                'hb-popover__popup': true,
+                'hb-popover__popup--leaving': this.leaving,
+            }, style: { ...this.popupStyle, width: this.width }, role: "dialog", "aria-labelledby": this.title ? 'hb-popover__title' : undefined, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.title && (h("div", { key: 'd23367facd21d47a512bc791193d44b35a8c7025', id: "hb-popover__title", class: "hb-popover__title" }, this.title)), h("div", { key: '491a6babd5fef0ac9013e999a8a449e1216e9f00', class: "hb-popover__body" }, h("slot", { key: '15a925de9bb5c0e4f3c66f466ef2e744d7563a50', name: "content" }))))));
     }
     static get is() { return "hb-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -165,6 +206,7 @@ export class Popover {
     static get states() {
         return {
             "visible": {},
+            "leaving": {},
             "popupStyle": {}
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { computePosition, getNextZIndex, Placement } from '../../utils/popup-manager';\n\n@Component({ tag: 'hb-popover', styleUrl: 'popover.css', shadow: true })\nexport class Popover {\n  @Element() el: HTMLElement;\n  // 注意：使用默认值使其成为 required string，避免与 HTMLElement.title（string）\n  // 的可选类型冲突；同时保留 Ant Design 兼容的 `title` API。\n  @Prop() title: string = '';\n  @Prop() width: string = '240px';\n  @Prop() placement: Placement = 'bottom';\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n  @Prop() disabled: boolean = false;\n  @State() visible: boolean = false;\n  @State() popupStyle: Record<string, string> = {};\n\n  private triggerRef?: HTMLElement;\n  private popupRef?: HTMLDivElement;\n\n  private show = () => { if (!this.disabled) { this.visible = true; requestAnimationFrame(() => this.updatePosition()); } };\n  private hide = () => { this.visible = false; };\n  private toggle = () => {\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  private updatePosition() {\n    if (!this.triggerRef || !this.popupRef) return;\n    const rect = this.triggerRef.getBoundingClientRect();\n    const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();\n    const pos = computePosition(rect, pw, ph, this.placement, 8);\n    this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };\n  }\n\n  render() {\n    const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };\n    return (\n      <div class=\"hb-popover\" {...events}>\n        <div ref={(el: any) => { this.triggerRef = el; }} class=\"hb-popover__trigger\"><slot /></div>\n        {this.visible && (\n          <div ref={(el: any) => { this.popupRef = el; }} class=\"hb-popover__popup\" style={{ ...this.popupStyle, width: this.width }}\n            onMouseEnter={() => this.trigger === 'hover' && this.show()} onMouseLeave={() => this.trigger === 'hover' && this.hide()}>\n            {this.title && <div class=\"hb-popover__title\">{this.title}</div>}\n            <div class=\"hb-popover__body\"><slot name=\"content\" /></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { computePosition, getNextZIndex, Placement } from '../../utils/popup-manager';\nimport { isActivationKey } from '../../utils/a11y';\nimport { createLeaveScheduler } from '../../utils/transition';\n\n/**\n * Popover 气泡卡片\n * 无障碍（对齐 antd / WAI-ARIA）：\n * - 触发器 role=button + aria-haspopup=dialog + aria-expanded\n * - 浮层 role=dialog + aria-labelledby（title）\n * - 键盘：trigger 上 Enter/Space 打开/关闭；Esc 关闭\n *\n * 进出场动画：用 leaving state 延迟卸载，让 fade-out 有机会播放。\n */\n@Component({ tag: 'hb-popover', styleUrl: 'popover.css', shadow: true })\nexport class Popover {\n  @Element() el: HTMLElement;\n  @Prop() title: string = '';\n  @Prop() width: string = '240px';\n  @Prop() placement: Placement = 'bottom';\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n  @Prop() disabled: boolean = false;\n  @State() visible: boolean = false;\n  @State() leaving: boolean = false;\n  @State() popupStyle: Record<string, string> = {};\n\n  private triggerRef?: HTMLElement;\n  private popupRef?: HTMLDivElement;\n  private leave = createLeaveScheduler(\n    () => this.leaving,\n    v => (this.leaving = v),\n    150,\n  );\n\n  private show = () => {\n    if (!this.disabled) {\n      this.leave.cancel();\n      this.visible = true;\n      requestAnimationFrame(() => this.updatePosition());\n    }\n  };\n  private hide = () => {\n    this.visible = false;\n    this.leave.start();\n  };\n  private toggle = () => {\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  disconnectedCallback() {\n    this.leave.dispose();\n  }\n\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (e.key === 'Escape' && (this.visible || this.leaving)) {\n      e.preventDefault();\n      this.hide();\n      return;\n    }\n    if (this.trigger === 'click' && isActivationKey(e.key)) {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private updatePosition() {\n    if (!this.triggerRef || !this.popupRef) return;\n    const rect = this.triggerRef.getBoundingClientRect();\n    const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();\n    const pos = computePosition(rect, pw, ph, this.placement, 8);\n    this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };\n  }\n\n  private get shouldRender(): boolean {\n    return this.visible || this.leaving;\n  }\n\n  render() {\n    const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-popover\" {...events} onKeyDown={this.handleKeydown}>\n        <div\n          ref={(el: any) => {\n            this.triggerRef = el;\n          }}\n          class=\"hb-popover__trigger\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-haspopup=\"dialog\"\n          aria-expanded={this.visible ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          onFocus={this.trigger === 'hover' ? this.show : undefined}\n          onBlur={this.trigger === 'hover' ? this.hide : undefined}\n        >\n          <slot />\n        </div>\n        {this.shouldRender && (\n          <div\n            ref={(el: any) => {\n              this.popupRef = el;\n            }}\n            class={{\n              'hb-popover__popup': true,\n              'hb-popover__popup--leaving': this.leaving,\n            }}\n            style={{ ...this.popupStyle, width: this.width }}\n            role=\"dialog\"\n            aria-labelledby={this.title ? 'hb-popover__title' : undefined}\n            onMouseEnter={() => this.trigger === 'hover' && this.show()}\n            onMouseLeave={() => this.trigger === 'hover' && this.hide()}\n          >\n            {this.title && (\n              <div id=\"hb-popover__title\" class=\"hb-popover__title\">\n                {this.title}\n              </div>\n            )}\n            <div class=\"hb-popover__body\">\n              <slot name=\"content\" />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Popover/popover.css

@@ -1,10 +1,51 @@
-:host { display: inline-block; }
-.hb-popover__trigger { display: inline-block; }
+:host {
+  display: inline-block;
+}
+.hb-popover__trigger {
+  display: inline-block;
+}
 .hb-popover__popup {
-  position: fixed; background: var(--hb-color-bg-elevated);
-  border-radius: var(--hb-border-radius-base); box-shadow: var(--hb-box-shadow);
-  padding: var(--hb-spacing-sm) 0; animation: hb-popover-fade 0.15s ease-out; pointer-events: auto;
+  position: fixed;
+  background: var(--hb-color-bg-elevated);
+  border-radius: var(--hb-border-radius-base);
+  box-shadow: var(--hb-box-shadow);
+  padding: var(--hb-spacing-sm) 0;
+  animation: hb-popover-fade 0.15s ease-out;
+  pointer-events: auto;
+}
+.hb-popover__title {
+  padding: var(--hb-spacing-xs) var(--hb-spacing-md);
+  font-weight: 600;
+  font-size: var(--hb-font-size-sm);
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+}
+.hb-popover__body {
+  padding: var(--hb-spacing-sm) var(--hb-spacing-md);
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+}
+@keyframes hb-popover-fade {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 离场动画：播完后由 shouldRender=false 卸载 */
+.hb-popover__popup--leaving {
+  animation: hb-popover-fade-out 0.15s ease-in forwards;
+}
+@keyframes hb-popover-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
 }
-.hb-popover__title { padding: var(--hb-spacing-xs) var(--hb-spacing-md); font-weight: 600; font-size: var(--hb-font-size-sm); border-bottom: 1px solid var(--hb-color-border-secondary); }
-.hb-popover__body { padding: var(--hb-spacing-sm) var(--hb-spacing-md); font-size: var(--hb-font-size-sm); color: var(--hb-color-text); }
-@keyframes hb-popover-fade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

package/dist/collection/components/Progress/Progress.js

@@ -18,7 +18,7 @@ export class Progress {
     }
     render() {
         const clampedPct = Math.max(0, Math.min(100, this.percentage));
-        return (h("div", { key: 'a3d0f5a70471f0114bbf8ddaf62bd18d274357cc', class: "hb-progress" }, h("div", { key: 'ba90d7643388c12d5188ca6b48b4e581f46f104b', class: "hb-progress__bar", style: { height: `${this.strokeWidth}px` } }, h("div", { key: '9dc3948579e45ff3f008f1b5078a247a32df8c91', class: "hb-progress__bar-inner", style: { width: `${clampedPct}%`, backgroundColor: this.barColor } })), this.showText && h("span", { key: '5cb06b3981e7d754e7dab7881341d75045284296', class: "hb-progress__text" }, clampedPct, "%")));
+        return (h("div", { key: '579e6c39f03cbc18f54cfc0024ed4d7ea4ed4939', class: "hb-progress" }, h("div", { key: '66da6e37c2d800a81930dc7fd6f262bcda03a5cf', class: "hb-progress__bar", style: { height: `${this.strokeWidth}px` } }, h("div", { key: '86b459334a9353120893300497185be957b59a38', class: "hb-progress__bar-inner", style: { width: `${clampedPct}%`, backgroundColor: this.barColor } })), this.showText && h("span", { key: '2c8bbf3174b230e3c23d90a50dbc088614943f34', class: "hb-progress__text" }, clampedPct, "%")));
     }
     static get is() { return "hb-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Radio/Radio.js

@@ -49,6 +49,11 @@ export class Radio {
      */
     hbChange;
     isChecked = false;
+    /**
+     * P7：实例级稳定 inputId，在类字段初始化一次。
+     * 修复前每次 render 用 Math.random() 生成新 id，破坏 SSR 水合与外部 getElementById 缓存。
+     */
+    stableInputId = `hb-radio-${Math.random().toString(36).slice(2, 11)}`;
     handleValueChange() {
         this.updateChecked();
     }
@@ -89,14 +94,14 @@ export class Radio {
         }
     };
     render() {
-        const inputId = this.radioId || `hb-radio-${Math.random().toString(36).substr(2, 9)}`;
-        return (h("label", { key: '3f069ee164a78574c94d973e06f435d172170d8c', class: {
+        const inputId = this.radioId || this.stableInputId;
+        return (h("label", { key: 'fce88ccf09122606b1a02d20b6c68303087853a1', class: {
                 'hb-radio': true,
                 'hb-radio--checked': this.isChecked,
                 'hb-radio--disabled': this.disabled,
                 'hb-radio--border': this.border,
                 [`hb-radio--${this.size}`]: true,
-            } }, h("span", { key: 'e8e0c6976efa57516d14bba9385f2424400c749c', class: "hb-radio__input" }, h("input", { key: '6a5cf424f748330a8b9214a2ee75f154f599a9ca', type: "radio", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, value: this.value, onChange: this.handleChange, class: "hb-radio__original" }), h("span", { key: '7c2d37231c2b7f28001bfb95014ffc638c324633', class: "hb-radio__inner" })), (this.label || this.value !== undefined) && (h("span", { key: '05980e96a3068f1dfd44719f688eb68c715fde85', class: "hb-radio__label" }, h("slot", { key: '96dfbd6157a555033a3f749032a44272c3a8588b' }, this.label || this.value)))));
+            } }, h("span", { key: '21ff8b3d4d2e3e4dda04f18b34c0b2264c4f5679', class: "hb-radio__input" }, h("input", { key: '398035c739f0b291a8daef77f535a26c0fbdf171', type: "radio", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, value: this.value, onChange: this.handleChange, class: "hb-radio__original" }), h("span", { key: '932ea7075b17621ad928fe8f72a5dacb10080d23', class: "hb-radio__inner" })), (this.label || this.value !== undefined) && (h("span", { key: '1859263be207025088188ccf7d012b6532fc0f94', class: "hb-radio__label" }, h("slot", { key: '7364a2f3a031c55caa445b0bca2748f2f74598b0' }, this.label || this.value)))));
     }
     static get is() { return "hb-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\n/**\n * Radio 单选框组件\n * 在一组备选项中进行单选\n */\n@Component({\n  tag: 'hb-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class Radio {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string | number;\n\n  /**\n   * 单选框的值\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否选中\n   * @default false\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() radioId?: string;\n\n  /**\n   * 文本标签\n   */\n  @Prop() label?: string;\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string | number | boolean>;\n\n  @State() isChecked: boolean = false;\n\n  @Watch('modelValue')\n  @Watch('checked')\n  @Watch('value')\n  handleValueChange() {\n    this.updateChecked();\n  }\n\n  componentDidLoad() {\n    this.updateChecked();\n  }\n\n  private updateChecked() {\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.isChecked = this.modelValue === this.value;\n    } else {\n      // 单个 radio\n      this.isChecked = this.checked;\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    \n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.modelValue = this.value;\n      this.isChecked = true;\n      this.hbChange.emit(this.value);\n    } else {\n      // 单个 radio\n      this.isChecked = target.checked;\n      if (target.checked && this.value !== undefined) {\n        this.hbChange.emit(this.value);\n      } else {\n        this.hbChange.emit(target.checked);\n      }\n    }\n  };\n\n  render() {\n    const inputId = this.radioId || `hb-radio-${Math.random().toString(36).substr(2, 9)}`;\n    \n    return (\n      <label\n        class={{\n          'hb-radio': true,\n          'hb-radio--checked': this.isChecked,\n          'hb-radio--disabled': this.disabled,\n          'hb-radio--border': this.border,\n          [`hb-radio--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-radio__input\">\n          <input\n            type=\"radio\"\n            id={inputId}\n            name={this.name}\n            checked={this.isChecked}\n            disabled={this.disabled}\n            value={this.value}\n            onChange={this.handleChange}\n            class=\"hb-radio__original\"\n          />\n          <span class=\"hb-radio__inner\"></span>\n        </span>\n        {(this.label || this.value !== undefined) && (\n          <span class=\"hb-radio__label\">\n            <slot>{this.label || this.value}</slot>\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\n/**\n * Radio 单选框组件\n * 在一组备选项中进行单选\n */\n@Component({\n  tag: 'hb-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class Radio {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string | number;\n\n  /**\n   * 单选框的值\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否选中\n   * @default false\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() radioId?: string;\n\n  /**\n   * 文本标签\n   */\n  @Prop() label?: string;\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string | number | boolean>;\n\n  @State() isChecked: boolean = false;\n\n  /**\n   * P7：实例级稳定 inputId，在类字段初始化一次。\n   * 修复前每次 render 用 Math.random() 生成新 id，破坏 SSR 水合与外部 getElementById 缓存。\n   */\n  private stableInputId = `hb-radio-${Math.random().toString(36).slice(2, 11)}`;\n\n  @Watch('modelValue')\n  @Watch('checked')\n  @Watch('value')\n  handleValueChange() {\n    this.updateChecked();\n  }\n\n  componentDidLoad() {\n    this.updateChecked();\n  }\n\n  private updateChecked() {\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.isChecked = this.modelValue === this.value;\n    } else {\n      // 单个 radio\n      this.isChecked = this.checked;\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.modelValue = this.value;\n      this.isChecked = true;\n      this.hbChange.emit(this.value);\n    } else {\n      // 单个 radio\n      this.isChecked = target.checked;\n      if (target.checked && this.value !== undefined) {\n        this.hbChange.emit(this.value);\n      } else {\n        this.hbChange.emit(target.checked);\n      }\n    }\n  };\n\n  render() {\n    const inputId = this.radioId || this.stableInputId;\n\n    return (\n      <label\n        class={{\n          'hb-radio': true,\n          'hb-radio--checked': this.isChecked,\n          'hb-radio--disabled': this.disabled,\n          'hb-radio--border': this.border,\n          [`hb-radio--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-radio__input\">\n          <input\n            type=\"radio\"\n            id={inputId}\n            name={this.name}\n            checked={this.isChecked}\n            disabled={this.disabled}\n            value={this.value}\n            onChange={this.handleChange}\n            class=\"hb-radio__original\"\n          />\n          <span class=\"hb-radio__inner\"></span>\n        </span>\n        {(this.label || this.value !== undefined) && (\n          <span class=\"hb-radio__label\">\n            <slot>{this.label || this.value}</slot>\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/Rate/Rate.js

@@ -67,6 +67,48 @@ export class Rate {
         this.hoverValue = 0;
         this.hbChange.emit(newValue);
     };
+    /**
+     * 键盘调节评分（对齐 WAI-ARIA slider / antd Rate）：
+     * - ArrowRight/ArrowUp：增加（allowHalf 时步进 0.5，否则 1）
+     * - ArrowLeft/ArrowDown：减少
+     * - Home：归 0；End：满分
+     */
+    handleKeydown = (e) => {
+        if (this.disabled || this.readonly)
+            return;
+        const step = this.allowHalf ? 0.5 : 1;
+        let next = null;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = this.currentValue + step;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = this.currentValue - step;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = this.max;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (next === null)
+            return;
+        // 夹取到 [0, max]，且按 step 对齐
+        const clamped = Math.max(0, Math.min(next, this.max));
+        // 修正浮点：allowHalf 时保留一位小数
+        const snapped = this.allowHalf ? Math.round(clamped * 2) / 2 : Math.round(clamped);
+        if (snapped === this.currentValue)
+            return;
+        this.currentValue = snapped;
+        this.modelValue = snapped;
+        this.hbChange.emit(snapped);
+    };
     handleMouseEnter = (value) => {
         if (this.disabled || this.readonly)
             return;
@@ -96,7 +138,7 @@ export class Rate {
     render() {
         const displayValue = this.getDisplayValue();
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: 'cf15cfe1af8d6f65b2a08a398214dd1f762fc7e7', class: "hb-rate" }, stars.map((value) => {
+        return (h("div", { key: '733a00e30b05ce6e5e8e5d798d558babc97fb477', class: "hb-rate", role: "slider", tabindex: this.disabled || this.readonly ? -1 : 0, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-valuetext": this.scoreTemplate ? this.getScoreText() : `${this.currentValue} 分`, "aria-orientation": "horizontal", "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.handleKeydown }, stars.map(value => {
             const isFull = displayValue >= value;
             const isHalf = this.allowHalf && displayValue >= value - 0.5 && displayValue < value;
             const isActive = isFull || isHalf;
@@ -107,11 +149,11 @@ export class Rate {
                 }, onMouseEnter: () => this.handleMouseEnter(value), onMouseLeave: this.handleMouseLeave, onClick: () => this.handleClick(value, false) }, this.allowHalf && (h("span", { class: {
                     'hb-rate__half': true,
                     'hb-rate__half--active': isHalf,
-                }, onClick: (e) => {
+                }, onClick: e => {
                     e.stopPropagation();
                     this.handleClick(value, true);
-                } }, "\u2605")), h("span", { class: "hb-rate__icon" }, "\u2605")));
-        }), this.showScore && (h("span", { key: '2f3d24aff4a4be719971e6162ae7bc21983cf62f', class: "hb-rate__text" }, this.getScoreText())), this.showText && this.getText() && (h("span", { key: '83107780b12701836a8badbc3139b791b2d9f07a', class: "hb-rate__text" }, this.getText()))));
+                } }, "\u2605")), h("span", { class: "hb-rate__icon", "aria-hidden": "true" }, "\u2605")));
+        }), this.showScore && h("span", { key: '481d7c8434c369991751e9573423a3ec4dd043e9', class: "hb-rate__text" }, this.getScoreText()), this.showText && this.getText() && h("span", { key: '0d63eec55abc38ef6a9819db65b22bbcd93613c9', class: "hb-rate__text" }, this.getText())));
     }
     static get is() { return "hb-rate"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"Rate.js","sourceRoot":"","sources":["../../../src/components/Rate/Rate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * Rate 评分组件\n * 评分组件\n */\n@Component({\n  tag: 'hb-rate',\n  styleUrl: 'rate.css',\n  shadow: true,\n})\nexport class Rate {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 最大分值\n   * @default 5\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否允许半选\n   * @default false\n   */\n  @Prop() allowHalf: boolean = false;\n\n  /**\n   * 只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 是否显示分数\n   * @default false\n   */\n  @Prop() showScore: boolean = false;\n\n  /**\n   * 是否显示文本\n   * @default false\n   */\n  @Prop() showText: boolean = false;\n\n  /**\n   * 辅助文字数组\n   */\n  @Prop() texts?: string[];\n\n  /**\n   * 分数显示模板\n   */\n  @Prop() scoreTemplate?: string;\n\n  @State() hoverValue: number = 0;\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private handleClick = (value: number, isHalf: boolean) => {\n    if (this.disabled || this.readonly) return;\n    \n    const newValue = isHalf && this.allowHalf ? value - 0.5 : value;\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hoverValue = 0;\n    this.hbChange.emit(newValue);\n  };\n\n  private handleMouseEnter = (value: number) => {\n    if (this.disabled || this.readonly) return;\n    this.hoverValue = value;\n  };\n\n  private handleMouseLeave = () => {\n    if (this.disabled || this.readonly) return;\n    this.hoverValue = 0;\n  };\n\n  private getDisplayValue(): number {\n    return this.hoverValue || this.currentValue;\n  }\n\n  private getText(): string {\n    const value = Math.ceil(this.currentValue);\n    if (this.texts && this.texts[value - 1]) {\n      return this.texts[value - 1];\n    }\n    return '';\n  }\n\n  private getScoreText(): string {\n    if (this.scoreTemplate) {\n      return this.scoreTemplate.replace('{value}', String(this.currentValue));\n    }\n    return `${this.currentValue} / ${this.max}`;\n  }\n\n  render() {\n    const displayValue = this.getDisplayValue();\n    const stars = Array.from({ length: this.max }, (_, i) => i + 1);\n\n    return (\n      <div class=\"hb-rate\">\n        {stars.map((value) => {\n          const isFull = displayValue >= value;\n          const isHalf = this.allowHalf && displayValue >= value - 0.5 && displayValue < value;\n          const isActive = isFull || isHalf;\n\n          return (\n            <span\n              class={{\n                'hb-rate__item': true,\n                'hb-rate__item--active': isActive,\n                'hb-rate__item--half': isHalf,\n              }}\n              onMouseEnter={() => this.handleMouseEnter(value)}\n              onMouseLeave={this.handleMouseLeave}\n              onClick={() => this.handleClick(value, false)}\n            >\n              {this.allowHalf && (\n                <span\n                  class={{\n                    'hb-rate__half': true,\n                    'hb-rate__half--active': isHalf,\n                  }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    this.handleClick(value, true);\n                  }}\n                >\n                  ★\n                </span>\n              )}\n              <span class=\"hb-rate__icon\">★</span>\n            </span>\n          );\n        })}\n        {this.showScore && (\n          <span class=\"hb-rate__text\">{this.getScoreText()}</span>\n        )}\n        {this.showText && this.getText() && (\n          <span class=\"hb-rate__text\">{this.getText()}</span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Rate.js","sourceRoot":"","sources":["../../../src/components/Rate/Rate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * Rate 评分组件\n * 评分组件\n */\n@Component({\n  tag: 'hb-rate',\n  styleUrl: 'rate.css',\n  shadow: true,\n})\nexport class Rate {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 最大分值\n   * @default 5\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否允许半选\n   * @default false\n   */\n  @Prop() allowHalf: boolean = false;\n\n  /**\n   * 只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 是否显示分数\n   * @default false\n   */\n  @Prop() showScore: boolean = false;\n\n  /**\n   * 是否显示文本\n   * @default false\n   */\n  @Prop() showText: boolean = false;\n\n  /**\n   * 辅助文字数组\n   */\n  @Prop() texts?: string[];\n\n  /**\n   * 分数显示模板\n   */\n  @Prop() scoreTemplate?: string;\n\n  @State() hoverValue: number = 0;\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private handleClick = (value: number, isHalf: boolean) => {\n    if (this.disabled || this.readonly) return;\n\n    const newValue = isHalf && this.allowHalf ? value - 0.5 : value;\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hoverValue = 0;\n    this.hbChange.emit(newValue);\n  };\n\n  /**\n   * 键盘调节评分（对齐 WAI-ARIA slider / antd Rate）：\n   * - ArrowRight/ArrowUp：增加（allowHalf 时步进 0.5，否则 1）\n   * - ArrowLeft/ArrowDown：减少\n   * - Home：归 0；End：满分\n   */\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n    const step = this.allowHalf ? 0.5 : 1;\n    let next: number | null = null;\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = this.currentValue + step;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = this.currentValue - step;\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = this.max;\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    if (next === null) return;\n    // 夹取到 [0, max]，且按 step 对齐\n    const clamped = Math.max(0, Math.min(next, this.max));\n    // 修正浮点：allowHalf 时保留一位小数\n    const snapped = this.allowHalf ? Math.round(clamped * 2) / 2 : Math.round(clamped);\n    if (snapped === this.currentValue) return;\n    this.currentValue = snapped;\n    this.modelValue = snapped;\n    this.hbChange.emit(snapped);\n  };\n\n  private handleMouseEnter = (value: number) => {\n    if (this.disabled || this.readonly) return;\n    this.hoverValue = value;\n  };\n\n  private handleMouseLeave = () => {\n    if (this.disabled || this.readonly) return;\n    this.hoverValue = 0;\n  };\n\n  private getDisplayValue(): number {\n    return this.hoverValue || this.currentValue;\n  }\n\n  private getText(): string {\n    const value = Math.ceil(this.currentValue);\n    if (this.texts && this.texts[value - 1]) {\n      return this.texts[value - 1];\n    }\n    return '';\n  }\n\n  private getScoreText(): string {\n    if (this.scoreTemplate) {\n      return this.scoreTemplate.replace('{value}', String(this.currentValue));\n    }\n    return `${this.currentValue} / ${this.max}`;\n  }\n\n  render() {\n    const displayValue = this.getDisplayValue();\n    const stars = Array.from({ length: this.max }, (_, i) => i + 1);\n\n    return (\n      <div\n        class=\"hb-rate\"\n        role=\"slider\"\n        tabindex={this.disabled || this.readonly ? -1 : 0}\n        aria-valuemin={0}\n        aria-valuemax={this.max}\n        aria-valuenow={this.currentValue}\n        aria-valuetext={this.scoreTemplate ? this.getScoreText() : `${this.currentValue} 分`}\n        aria-orientation=\"horizontal\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-readonly={this.readonly ? 'true' : 'false'}\n        onKeyDown={this.handleKeydown}\n      >\n        {stars.map(value => {\n          const isFull = displayValue >= value;\n          const isHalf = this.allowHalf && displayValue >= value - 0.5 && displayValue < value;\n          const isActive = isFull || isHalf;\n\n          return (\n            <span\n              class={{\n                'hb-rate__item': true,\n                'hb-rate__item--active': isActive,\n                'hb-rate__item--half': isHalf,\n              }}\n              onMouseEnter={() => this.handleMouseEnter(value)}\n              onMouseLeave={this.handleMouseLeave}\n              onClick={() => this.handleClick(value, false)}\n            >\n              {this.allowHalf && (\n                <span\n                  class={{\n                    'hb-rate__half': true,\n                    'hb-rate__half--active': isHalf,\n                  }}\n                  onClick={e => {\n                    e.stopPropagation();\n                    this.handleClick(value, true);\n                  }}\n                >\n                  ★\n                </span>\n              )}\n              <span class=\"hb-rate__icon\" aria-hidden=\"true\">\n                ★\n              </span>\n            </span>\n          );\n        })}\n        {this.showScore && <span class=\"hb-rate__text\">{this.getScoreText()}</span>}\n        {this.showText && this.getText() && <span class=\"hb-rate__text\">{this.getText()}</span>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Result/Result.js

@@ -40,7 +40,7 @@ export class Result {
     }
     render() {
         const color = this.getColor();
-        return (h("div", { key: '2c814e1b6953b94d65a6fbf1434263f622bb7286', class: { 'hb-result': true, [`hb-result--${this.status}`]: true } }, h("div", { key: '6065f1880a74904cced635430c1f3b484476cc63', class: "hb-result__icon", style: { color } }, h("span", { key: 'fd61023ad0cdf6436680f20bbcb735f4960ffbe5', class: "hb-result__icon-symbol" }, this.getIcon())), this.title && h("div", { key: '44a7cfc18a4886b1530e9dfbed4764f35f61d143', class: "hb-result__title" }, this.title), this.subTitle !== undefined && h("div", { key: '86c42321700d9a7f3055025dbfbc71b358611739', class: "hb-result__subtitle" }, this.subTitle), h("div", { key: '63fbc78625a878e196acd65aa361440cba746b19', class: "hb-result__extra" }, h("slot", { key: 'cefb1bfb4444bc1d47a37eb4887af9e21fa18a85' }))));
+        return (h("div", { key: '2e1cbc3672080bcab9211f186212c2bae44bc3af', class: { 'hb-result': true, [`hb-result--${this.status}`]: true } }, h("div", { key: 'a016fc8c7ca5684e8d52ee1305fe2e71b3ba502f', class: "hb-result__icon", style: { color } }, h("span", { key: '534b33fbd62e51b05c6a28660ce439c12fb3da2b', class: "hb-result__icon-symbol" }, this.getIcon())), this.title && h("div", { key: '51b722e6a0beef39adfbef3d3c1dadfad9c70dd1', class: "hb-result__title" }, this.title), this.subTitle !== undefined && h("div", { key: '3bc005594f74cc9c1806100001509441b9c357d4', class: "hb-result__subtitle" }, this.subTitle), h("div", { key: '41702ad25f27484659b4e7437a05cb4227f9e7a9', class: "hb-result__extra" }, h("slot", { key: 'd973cd7a63731803a460e9dfe61583a79aec483f' }))));
     }
     static get is() { return "hb-result"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Scrollbar/Scrollbar.js

@@ -99,9 +99,7 @@ export class Scrollbar {
         if (this.wrapRef) {
             this.wrapRef.addEventListener('scroll', this.handleScroll);
         }
-        if (this.thumbRef) {
-            this.thumbRef.addEventListener('mousedown', this.handleThumbMouseDown);
-        }
+        // thumb 的 mousedown 绑定放在 ref 回调里（thumb 是条件渲染，componentDidLoad 时可能尚未存在）。
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
     }
@@ -174,9 +172,11 @@ export class Scrollbar {
         if (this.native) {
             return (h("div", { class: "hb-scrollbar hb-scrollbar--native", style: style }, h("div", { class: "hb-scrollbar__wrap" }, h("div", { class: "hb-scrollbar__view" }, h("slot", null)))));
         }
-        return (h("div", { class: "hb-scrollbar", style: style }, h("div", { class: "hb-scrollbar__wrap", ref: (el) => (this.wrapRef = el), onScroll: this.handleScroll }, h("div", { class: "hb-scrollbar__view" }, h("slot", null))), this.scrollbarVisible && !this.native && (h("div", { class: "hb-scrollbar__bar hb-scrollbar__bar--vertical" }, h("div", { class: "hb-scrollbar__thumb", ref: (el) => {
+        return (h("div", { class: "hb-scrollbar", style: style }, h("div", { class: "hb-scrollbar__wrap", ref: el => (this.wrapRef = el), onScroll: this.handleScroll }, h("div", { class: "hb-scrollbar__view" }, h("slot", null))), this.scrollbarVisible && !this.native && (h("div", { class: "hb-scrollbar__bar hb-scrollbar__bar--vertical" }, h("div", { class: "hb-scrollbar__thumb", ref: el => {
+                // L5：thumb 是条件渲染（scrollbarVisible && !native），
+                // 在 ref 回调里绑定 mousedown，确保 thumb 出现时即绑定。
                 this.thumbRef = el;
-                if (el && !this.native) {
+                if (el) {
                     el.addEventListener('mousedown', this.handleThumbMouseDown);
                 }
             }, style: {

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

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n/**\n * Scrollbar 滚动条组件\n * 用于替换浏览器原生滚动条\n */\n@Component({\n  tag: 'hb-scrollbar',\n  styleUrl: 'scrollbar.css',\n  shadow: true,\n})\nexport class Scrollbar {\n  @Element() el: HTMLElement;\n\n  /**\n   * 滚动条高度\n   */\n  @Prop() height?: string;\n\n  /**\n   * 滚动条最大高度\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * 是否总是显示滚动条\n   * @default false\n   */\n  @Prop() always: boolean = false;\n\n  /**\n   * 是否显示原生滚动条\n   * @default false\n   */\n  @Prop() native: boolean = false;\n\n  /**\n   * 滚动条的最小尺寸\n   * @default 20\n   */\n  @Prop() minSize: number = 20;\n\n  /**\n   * 滚动事件\n   */\n  @Event() hbScroll: EventEmitter<{ scrollTop: number; scrollLeft: number }>;\n\n  @State() scrollbarVisible: boolean = false;\n  @State() thumbHeight: number = 0;\n  @State() thumbTop: number = 0;\n\n  private wrapRef?: HTMLDivElement;\n  private thumbRef?: HTMLDivElement;\n  private resizeObserver?: ResizeObserver;\n  private isDragging: boolean = false;\n  private startY: number = 0;\n  private startScrollTop: number = 0;\n\n  componentDidLoad() {\n    if (!this.native) {\n      this.initScrollbar();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    this.removeEventListeners();\n  }\n\n  @Watch('height')\n  @Watch('maxHeight')\n  handleSizeChange() {\n    this.updateScrollbar();\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollTop(top: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollTop = top;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollLeft(left: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollLeft = left;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollTop(): Promise<number> {\n    return this.wrapRef?.scrollTop || 0;\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollLeft(): Promise<number> {\n    return this.wrapRef?.scrollLeft || 0;\n  }\n\n  private initScrollbar() {\n    if (!this.wrapRef) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateScrollbar();\n    });\n\n    this.resizeObserver.observe(this.wrapRef);\n    this.addEventListeners();\n    this.updateScrollbar();\n  }\n\n  private addEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.addEventListener('scroll', this.handleScroll);\n    }\n    if (this.thumbRef) {\n      this.thumbRef.addEventListener('mousedown', this.handleThumbMouseDown);\n    }\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private removeEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.removeEventListener('scroll', this.handleScroll);\n    }\n    if (this.thumbRef) {\n      this.thumbRef.removeEventListener('mousedown', this.handleThumbMouseDown);\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private updateScrollbar() {\n    if (!this.wrapRef) return;\n\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const scrollTop = this.wrapRef.scrollTop;\n\n    const hasScroll = scrollHeight > wrapHeight;\n    this.scrollbarVisible = hasScroll || this.always;\n\n    if (hasScroll && this.thumbRef) {\n      const thumbHeight = Math.max(\n        this.minSize,\n        (wrapHeight / scrollHeight) * wrapHeight\n      );\n      const maxThumbTop = wrapHeight - thumbHeight;\n      const thumbTop = (scrollTop / (scrollHeight - wrapHeight)) * maxThumbTop;\n\n      this.thumbHeight = thumbHeight;\n      this.thumbTop = Math.max(0, Math.min(maxThumbTop, thumbTop));\n    }\n  }\n\n  private handleScroll = () => {\n    this.updateScrollbar();\n    if (this.wrapRef) {\n      this.hbScroll.emit({\n        scrollTop: this.wrapRef.scrollTop,\n        scrollLeft: this.wrapRef.scrollLeft,\n      });\n    }\n  };\n\n  private handleThumbMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.startY = e.clientY;\n    this.startScrollTop = this.wrapRef?.scrollTop || 0;\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging || !this.wrapRef) return;\n\n    const deltaY = e.clientY - this.startY;\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const maxScrollTop = scrollHeight - wrapHeight;\n    const thumbHeight = this.thumbHeight;\n    const maxThumbTop = wrapHeight - thumbHeight;\n\n    const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;\n    const newScrollTop = Math.max(0, Math.min(maxScrollTop, this.startScrollTop + scrollDelta));\n\n    this.wrapRef.scrollTop = newScrollTop;\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n  };\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n    if (this.maxHeight) {\n      style.maxHeight = this.maxHeight;\n    }\n\n    if (this.native) {\n      return (\n        <div\n          class=\"hb-scrollbar hb-scrollbar--native\"\n          style={style}\n        >\n          <div class=\"hb-scrollbar__wrap\">\n            <div class=\"hb-scrollbar__view\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"hb-scrollbar\" style={style}>\n        <div\n          class=\"hb-scrollbar__wrap\"\n          ref={(el) => (this.wrapRef = el)}\n          onScroll={this.handleScroll}\n        >\n          <div class=\"hb-scrollbar__view\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.scrollbarVisible && !this.native && (\n          <div class=\"hb-scrollbar__bar hb-scrollbar__bar--vertical\">\n            <div\n              class=\"hb-scrollbar__thumb\"\n              ref={(el) => {\n                this.thumbRef = el;\n                if (el && !this.native) {\n                  el.addEventListener('mousedown', this.handleThumbMouseDown);\n                }\n              }}\n              style={{\n                height: `${this.thumbHeight}px`,\n                transform: `translateY(${this.thumbTop}px)`,\n              }}\n            ></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n/**\n * Scrollbar 滚动条组件\n * 用于替换浏览器原生滚动条\n */\n@Component({\n  tag: 'hb-scrollbar',\n  styleUrl: 'scrollbar.css',\n  shadow: true,\n})\nexport class Scrollbar {\n  @Element() el: HTMLElement;\n\n  /**\n   * 滚动条高度\n   */\n  @Prop() height?: string;\n\n  /**\n   * 滚动条最大高度\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * 是否总是显示滚动条\n   * @default false\n   */\n  @Prop() always: boolean = false;\n\n  /**\n   * 是否显示原生滚动条\n   * @default false\n   */\n  @Prop() native: boolean = false;\n\n  /**\n   * 滚动条的最小尺寸\n   * @default 20\n   */\n  @Prop() minSize: number = 20;\n\n  /**\n   * 滚动事件\n   */\n  @Event() hbScroll: EventEmitter<{ scrollTop: number; scrollLeft: number }>;\n\n  @State() scrollbarVisible: boolean = false;\n  @State() thumbHeight: number = 0;\n  @State() thumbTop: number = 0;\n\n  private wrapRef?: HTMLDivElement;\n  private thumbRef?: HTMLDivElement;\n  private resizeObserver?: ResizeObserver;\n  private isDragging: boolean = false;\n  private startY: number = 0;\n  private startScrollTop: number = 0;\n\n  componentDidLoad() {\n    if (!this.native) {\n      this.initScrollbar();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    this.removeEventListeners();\n  }\n\n  @Watch('height')\n  @Watch('maxHeight')\n  handleSizeChange() {\n    this.updateScrollbar();\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollTop(top: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollTop = top;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollLeft(left: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollLeft = left;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollTop(): Promise<number> {\n    return this.wrapRef?.scrollTop || 0;\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollLeft(): Promise<number> {\n    return this.wrapRef?.scrollLeft || 0;\n  }\n\n  private initScrollbar() {\n    if (!this.wrapRef) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateScrollbar();\n    });\n\n    this.resizeObserver.observe(this.wrapRef);\n    this.addEventListeners();\n    this.updateScrollbar();\n  }\n\n  private addEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.addEventListener('scroll', this.handleScroll);\n    }\n    // thumb 的 mousedown 绑定放在 ref 回调里（thumb 是条件渲染，componentDidLoad 时可能尚未存在）。\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private removeEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.removeEventListener('scroll', this.handleScroll);\n    }\n    if (this.thumbRef) {\n      this.thumbRef.removeEventListener('mousedown', this.handleThumbMouseDown);\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private updateScrollbar() {\n    if (!this.wrapRef) return;\n\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const scrollTop = this.wrapRef.scrollTop;\n\n    const hasScroll = scrollHeight > wrapHeight;\n    this.scrollbarVisible = hasScroll || this.always;\n\n    if (hasScroll && this.thumbRef) {\n      const thumbHeight = Math.max(this.minSize, (wrapHeight / scrollHeight) * wrapHeight);\n      const maxThumbTop = wrapHeight - thumbHeight;\n      const thumbTop = (scrollTop / (scrollHeight - wrapHeight)) * maxThumbTop;\n\n      this.thumbHeight = thumbHeight;\n      this.thumbTop = Math.max(0, Math.min(maxThumbTop, thumbTop));\n    }\n  }\n\n  private handleScroll = () => {\n    this.updateScrollbar();\n    if (this.wrapRef) {\n      this.hbScroll.emit({\n        scrollTop: this.wrapRef.scrollTop,\n        scrollLeft: this.wrapRef.scrollLeft,\n      });\n    }\n  };\n\n  private handleThumbMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.startY = e.clientY;\n    this.startScrollTop = this.wrapRef?.scrollTop || 0;\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging || !this.wrapRef) return;\n\n    const deltaY = e.clientY - this.startY;\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const maxScrollTop = scrollHeight - wrapHeight;\n    const thumbHeight = this.thumbHeight;\n    const maxThumbTop = wrapHeight - thumbHeight;\n\n    const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;\n    const newScrollTop = Math.max(0, Math.min(maxScrollTop, this.startScrollTop + scrollDelta));\n\n    this.wrapRef.scrollTop = newScrollTop;\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n  };\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n    if (this.maxHeight) {\n      style.maxHeight = this.maxHeight;\n    }\n\n    if (this.native) {\n      return (\n        <div class=\"hb-scrollbar hb-scrollbar--native\" style={style}>\n          <div class=\"hb-scrollbar__wrap\">\n            <div class=\"hb-scrollbar__view\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"hb-scrollbar\" style={style}>\n        <div class=\"hb-scrollbar__wrap\" ref={el => (this.wrapRef = el)} onScroll={this.handleScroll}>\n          <div class=\"hb-scrollbar__view\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.scrollbarVisible && !this.native && (\n          <div class=\"hb-scrollbar__bar hb-scrollbar__bar--vertical\">\n            <div\n              class=\"hb-scrollbar__thumb\"\n              ref={el => {\n                // L5：thumb 是条件渲染（scrollbarVisible && !native），\n                // 在 ref 回调里绑定 mousedown，确保 thumb 出现时即绑定。\n                this.thumbRef = el as HTMLDivElement | undefined;\n                if (el) {\n                  el.addEventListener('mousedown', this.handleThumbMouseDown);\n                }\n              }}\n              style={{\n                height: `${this.thumbHeight}px`,\n                transform: `translateY(${this.thumbTop}px)`,\n              }}\n            ></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}