huibo-ui 0.4.0 → 0.6.0

package/dist/components/hb-switch.js.map

@@ -1 +1 @@
-{"file":"hb-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qnPAAqnP,CAAC;AACxoP,uBAAe,SAAS;;MCUX,MAAM;;;;;;;;;;IAIQ,UAAU,GAAY,KAAK,CAAC;;;;;IAM7C,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,UAAU,CAAU;;;;IAKpB,YAAY,CAAU;;;;IAKtB,WAAW,CAAU;;;;IAKrB,aAAa,CAAU;;;;;IAMvB,WAAW,GAA8B,IAAI,CAAC;;;;;IAM9C,aAAa,GAA8B,KAAK,CAAC;;;;IAKjD,KAAK,CAAU;;;;;IAMf,YAAY,GAAY,KAAK,CAAC;;;;IAK7B,QAAQ,CAA0C;IAEnD,YAAY,GAAG,CAAC,CAAQ;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,MAAM,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC;QAE9D,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;IAEF,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,CAAC;;QAEvD,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,QACE,8DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,SAAS;gBAC/B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,0BAA0B,EAAE,IAAI,CAAC,YAAY,IAAI,OAAO;aACzD,EACD,KAAK,EAAE;gBACL,mBAAmB,EAAE,GAAG,KAAK,IAAI;gBACjC,0BAA0B,EAAE,IAAI,CAAC,WAAW,IAAI,yBAAyB;gBACzE,4BAA4B,EAAE,IAAI,CAAC,aAAa,IAAI,2CAA2C;aAChG,IAED,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,kBACC,SAAS,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,SAAS,GAC7D,EACF,6DAAM,KAAK,EAAC,iBAAiB,IAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,KAC5B,6DAAM,KAAK,EAAC,kBAAkB,IAC3B,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAC3C,CACR,EACA,OAAO,IAAI,IAAI,CAAC,YAAY;;QAE3B,6DAAM,KAAK,EAAC,2CAA2C,IACrD,6DAAM,KAAK,EAAC,qDAAqD,IAAE,IAAI,CAAC,UAAU,CAAQ,EAC1F,6DAAM,KAAK,EAAC,uDAAuD,IAAE,IAAI,CAAC,YAAY,CAAQ,CACzF,CACR,CACI,CACD,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Switch/switch.css?tag=hb-switch&encapsulation=shadow","src/components/Switch/Switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --hb-switch-width: 40px;\n  --hb-switch-active-color: var(--hb-color-primary);\n  --hb-switch-inactive-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-switch {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: 20px;\n  height: 20px;\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.hb-switch__original {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  position: absolute;\n}\n\n.hb-switch__core {\n  margin: 0;\n  display: inline-block;\n  position: relative;\n  width: var(--hb-switch-width);\n  height: 20px;\n  border: 1px solid var(--hb-switch-inactive-color);\n  outline: none;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--hb-switch-inactive-color);\n  cursor: pointer;\n  transition: border-color 0.3s, background-color 0.3s;\n  vertical-align: middle;\n}\n\n.hb-switch__core::after {\n  content: '';\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  background-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-switch--checked .hb-switch__core {\n  border-color: var(--hb-switch-active-color);\n  background-color: var(--hb-switch-active-color);\n}\n\n.hb-switch--checked .hb-switch__core::after {\n  left: 100%;\n  margin-left: -17px;\n}\n\n.hb-switch__inner {\n  position: absolute;\n  left: 23px;\n  font-size: 12px;\n  color: var(--hb-color-white, #ffffff);\n  transition: all 0.3s;\n}\n\n.hb-switch--checked .hb-switch__inner {\n  left: 5px;\n}\n\n.hb-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.hb-switch--disabled .hb-switch__core {\n  cursor: not-allowed;\n}\n\n\n/* ---- inlinePrompt：文字塞进圆点两侧 ---- */\n.hb-switch--inline-prompt .hb-switch__inner--inline {\n  left: 0;\n  right: 0;\n  display: flex;\n  height: 100%;\n  align-items: center;\n  font-size: 12px;\n  color: #fff;\n  pointer-events: none;\n}\n\n.hb-switch__inner-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n/* 关闭态：左侧（inactive）显示，圆点在右 */\n.hb-switch:not(.hb-switch--checked) .hb-switch__inner-text--inactive {\n  opacity: 1;\n  padding-left: 6px;\n  padding-right: 22px;\n  justify-content: flex-start;\n}\n\n.hb-switch:not(.hb-switch--checked) .hb-switch__inner-text--active {\n  display: none;\n}\n\n/* 打开态：右侧（active）显示，圆点在左 */\n.hb-switch--checked .hb-switch__inner-text--active {\n  opacity: 1;\n  padding-left: 22px;\n  padding-right: 6px;\n  justify-content: flex-end;\n}\n\n.hb-switch--checked .hb-switch__inner-text--inactive {\n  display: none;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n    \n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    // 宽度：inlinePrompt 与 text 模式都加宽；inlinePrompt 文字塞进圆点两侧，仍需更宽一些\n    const hasText = !!(this.activeText || this.inactiveText);\n    const width = this.width || (hasText ? (this.inlinePrompt ? 50 : 60) : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n          'hb-switch--inline-prompt': this.inlinePrompt && hasText,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {hasText && !this.inlinePrompt && (\n            <span class=\"hb-switch__inner\">\n              {isChecked ? this.activeText : this.inactiveText}\n            </span>\n          )}\n          {hasText && this.inlinePrompt && (\n            // 内联提示：开/关文字塞进圆点两侧，随切换显隐\n            <span class=\"hb-switch__inner hb-switch__inner--inline\">\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--active\">{this.activeText}</span>\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--inactive\">{this.inactiveText}</span>\n            </span>\n          )}\n        </span>\n      </label>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"hb-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qnPAAqnP,CAAC;AACxoP,uBAAe,SAAS;;MCUX,MAAM;;;;;;;;;;IAIQ,UAAU,GAAY,KAAK,CAAC;;;;;IAM7C,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,UAAU,CAAU;;;;IAKpB,YAAY,CAAU;;;;IAKtB,WAAW,CAAU;;;;IAKrB,aAAa,CAAU;;;;;IAMvB,WAAW,GAA8B,IAAI,CAAC;;;;;IAM9C,aAAa,GAA8B,KAAK,CAAC;;;;IAKjD,KAAK,CAAU;;;;;IAMf,YAAY,GAAY,KAAK,CAAC;;;;IAK7B,QAAQ,CAA0C;IAEnD,YAAY,GAAG,CAAC,CAAQ;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,MAAM,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC;QAE9D,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;IAEF,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,CAAC;;QAEvD,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,QACE,8DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,SAAS;gBAC/B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,0BAA0B,EAAE,IAAI,CAAC,YAAY,IAAI,OAAO;aACzD,EACD,KAAK,EAAE;gBACL,mBAAmB,EAAE,GAAG,KAAK,IAAI;gBACjC,0BAA0B,EAAE,IAAI,CAAC,WAAW,IAAI,yBAAyB;gBACzE,4BAA4B,EAAE,IAAI,CAAC,aAAa,IAAI,2CAA2C;aAChG,IAED,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,kBACC,SAAS,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,SAAS,GAC7D,EACF,6DAAM,KAAK,EAAC,iBAAiB,IAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,6DAAM,KAAK,EAAC,kBAAkB,IAAE,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAQ,EACxH,OAAO,IAAI,IAAI,CAAC,YAAY;;QAE3B,6DAAM,KAAK,EAAC,2CAA2C,IACrD,6DAAM,KAAK,EAAC,qDAAqD,IAAE,IAAI,CAAC,UAAU,CAAQ,EAC1F,6DAAM,KAAK,EAAC,uDAAuD,IAAE,IAAI,CAAC,YAAY,CAAQ,CACzF,CACR,CACI,CACD,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Switch/switch.css?tag=hb-switch&encapsulation=shadow","src/components/Switch/Switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --hb-switch-width: 40px;\n  --hb-switch-active-color: var(--hb-color-primary);\n  --hb-switch-inactive-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-switch {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: 20px;\n  height: 20px;\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.hb-switch__original {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  position: absolute;\n}\n\n.hb-switch__core {\n  margin: 0;\n  display: inline-block;\n  position: relative;\n  width: var(--hb-switch-width);\n  height: 20px;\n  border: 1px solid var(--hb-switch-inactive-color);\n  outline: none;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--hb-switch-inactive-color);\n  cursor: pointer;\n  transition:\n    border-color 0.3s,\n    background-color 0.3s;\n  vertical-align: middle;\n}\n\n.hb-switch__core::after {\n  content: '';\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  background-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-switch--checked .hb-switch__core {\n  border-color: var(--hb-switch-active-color);\n  background-color: var(--hb-switch-active-color);\n}\n\n.hb-switch--checked .hb-switch__core::after {\n  left: 100%;\n  margin-left: -17px;\n}\n\n.hb-switch__inner {\n  position: absolute;\n  left: 23px;\n  font-size: 12px;\n  color: var(--hb-color-white, #ffffff);\n  transition: all 0.3s;\n}\n\n.hb-switch--checked .hb-switch__inner {\n  left: 5px;\n}\n\n.hb-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.hb-switch--disabled .hb-switch__core {\n  cursor: not-allowed;\n}\n\n/* ---- inlinePrompt：文字塞进圆点两侧 ---- */\n.hb-switch--inline-prompt .hb-switch__inner--inline {\n  left: 0;\n  right: 0;\n  display: flex;\n  height: 100%;\n  align-items: center;\n  font-size: 12px;\n  color: #fff;\n  pointer-events: none;\n}\n\n.hb-switch__inner-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n/* 关闭态：左侧（inactive）显示，圆点在右 */\n.hb-switch:not(.hb-switch--checked) .hb-switch__inner-text--inactive {\n  opacity: 1;\n  padding-left: 6px;\n  padding-right: 22px;\n  justify-content: flex-start;\n}\n\n.hb-switch:not(.hb-switch--checked) .hb-switch__inner-text--active {\n  display: none;\n}\n\n/* 打开态：右侧（active）显示，圆点在左 */\n.hb-switch--checked .hb-switch__inner-text--active {\n  opacity: 1;\n  padding-left: 22px;\n  padding-right: 6px;\n  justify-content: flex-end;\n}\n\n.hb-switch--checked .hb-switch__inner-text--inactive {\n  display: none;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n\n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    // 宽度：inlinePrompt 与 text 模式都加宽；inlinePrompt 文字塞进圆点两侧，仍需更宽一些\n    const hasText = !!(this.activeText || this.inactiveText);\n    const width = this.width || (hasText ? (this.inlinePrompt ? 50 : 60) : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n          'hb-switch--inline-prompt': this.inlinePrompt && hasText,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {hasText && !this.inlinePrompt && <span class=\"hb-switch__inner\">{isChecked ? this.activeText : this.inactiveText}</span>}\n          {hasText && this.inlinePrompt && (\n            // 内联提示：开/关文字塞进圆点两侧，随切换显隐\n            <span class=\"hb-switch__inner hb-switch__inner--inline\">\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--active\">{this.activeText}</span>\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--inactive\">{this.inactiveText}</span>\n            </span>\n          )}\n        </span>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-tab-pane.js

@@ -13,7 +13,7 @@ const TabPane = /*@__PURE__*/ proxyCustomElement(class TabPane extends H {
     /** 是否激活 */
     active = false;
     render() {
-        return (h("div", { key: '48f2502eb6adf6a5ac6f48cbab68583d1129a94c', class: { 'hb-tab-pane': true, 'hb-tab-pane--hidden': !this.active }, role: "tabpanel", id: `hb-tabs__panel-${this.key}`, "aria-labelledby": this.key ? `hb-tabs__tab-${this.key}` : undefined, tabindex: this.active ? 0 : undefined }, h("slot", { key: '8b8187579258806eda61194ac51225346f2da6de' })));
+        return (h("div", { key: '5d830209274e2c780f4e0dfd233427feb96458ff', class: { 'hb-tab-pane': true, 'hb-tab-pane--hidden': !this.active }, role: "tabpanel", id: `hb-tabs__panel-${this.key}`, "aria-labelledby": this.key ? `hb-tabs__tab-${this.key}` : undefined, tabindex: this.active ? 0 : undefined }, h("slot", { key: 'b330d024cc02d1011b41f1b586bba9f91be91d90' })));
     }
 }, [1, "hb-tab-pane", {
         "key": [1],

package/dist/components/hb-table.js

@@ -14,6 +14,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         this.hbAction = createEvent(this, "hbAction", 7);
         this.hbExpandChange = createEvent(this, "hbExpandChange", 7);
         this.hbCellChange = createEvent(this, "hbCellChange", 7);
+        this.hbPageChange = createEvent(this, "hbPageChange", 7);
+        this.hbFilterChange = createEvent(this, "hbFilterChange", 7);
     }
     /** 数据源 */
     data = [];
@@ -53,6 +55,13 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     treeProps;
     /** 是否开启行内编辑模式（默认关闭）。需列配置 column.editable=true 才对该列生效 */
     editable = false;
+    /**
+     * 内置分页配置（T1）。传入后 Table 自动对 data 切片并在底部渲染 <hb-pagination>。
+     * 不传则不分页（向后兼容）。
+     */
+    pagination;
+    /** 行 className（函数，按行返回附加 class，T8） */
+    rowClassName;
     sortProp = '';
     sortDirection = null;
     currentRow = -1;
@@ -63,6 +72,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     expandedRowKeys = [];
     /** 行内编辑：当前正在编辑的单元格 { key, prop }，null 表示无 */
     editingCell = null;
+    /** T1 分页：内部当前页（非受控时用） */
+    internalPage = 1;
+    /** T1 分页：内部每页条数（非受控时用） */
+    internalPageSize = 10;
+    /** T3 筛选：内部筛选状态 { prop: 选中的 value 列表 }（非受控时用） */
+    internalFilters = {};
     /** 排序变化事件 */
     hbSortChange;
     /** 行点击事件 */
@@ -75,10 +90,21 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     hbExpandChange;
     /** 行内编辑提交事件 */
     hbCellChange;
+    /** T1 分页变化事件 { current, pageSize } */
+    hbPageChange;
+    /** T3 筛选变化事件 { prop, values } */
+    hbFilterChange;
     handleDataChange() {
         this.selectedRows = new Set();
         this.emitSelection();
     }
+    handlePaginationChange() {
+        // 受控分页：从 pagination.current/pageSize 初始化内部状态
+        if (this.pagination) {
+            this.internalPage = this.pagination.current ?? this.pagination.defaultCurrent ?? 1;
+            this.internalPageSize = this.pagination.pageSize ?? this.pagination.defaultPageSize ?? 10;
+        }
+    }
     /** 树形模式是否启用（显式传入 treeProps 即启用） */
     get isTreeMode() {
         return !!this.treeProps;
@@ -89,9 +115,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     }
     /**
      * 把树拍平成可见行列表：仅保留「祖先链路全部已展开」的后代。
-     * @param list  当前层级的数组
-     * @param level 当前层级（根 = 0）
-     * @param parentKeyPath 父级 key 路径，用于构造深层稳定 key（避免不同分支同 index 撞 key）
      */
     flattenTree(list, level = 0, parentKeyPath = '') {
         const field = this.childrenField;
@@ -102,7 +125,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             const kids = row[field];
             const hasKids = Array.isArray(kids) && kids.length > 0;
             result.push({ row, level, key, hasChildren: hasKids, index: i });
-            // 仅当该行已展开时，递归拍入其 children
             if (hasKids && this.expandedRowKeys.indexOf(key) !== -1) {
                 result.push(...this.flattenTree(kids, level + 1, keyPath));
             }
@@ -113,7 +135,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     toggleExpand = (row, key) => {
         const idx = this.expandedRowKeys.indexOf(key);
         const expanded = idx === -1;
-        this.expandedRowKeys = expanded ? [...this.expandedRowKeys, key] : this.expandedRowKeys.filter((k) => k !== key);
+        this.expandedRowKeys = expanded ? [...this.expandedRowKeys, key] : this.expandedRowKeys.filter(k => k !== key);
         this.hbExpandChange.emit({ expanded, row });
     };
     /** 行内编辑：进入编辑态 */
@@ -127,7 +149,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     commitEdit = (e, row, prop) => {
         const input = e.target;
         const value = input.value;
-        // 就地更新（简单可用版）：修改 row[prop] 后强制重渲染
         row[prop] = value;
         this.editingCell = null;
         this.hbCellChange.emit({ row, prop, value });
@@ -145,7 +166,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     };
     allCheckboxRef;
     componentDidRender() {
-        // indeterminate 不是可反射的 HTML 属性，必须通过 DOM 属性设置
         if (this.allCheckboxRef) {
             this.allCheckboxRef.indeterminate = this.isIndeterminate;
         }
@@ -176,10 +196,26 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     get virtualTotalHeight() {
         return this.data.length * (this.itemHeight > 0 ? this.itemHeight : 1);
     }
-    handleSort = (prop) => {
+    /**
+     * T2：解析某列的有效排序方向。
+     * 受控（col.sortOrder 设置）→ 用该值；否则用内部 state（sortProp/sortDirection）。
+     */
+    effectiveSortOrder(col) {
+        if (col.sortOrder !== undefined)
+            return col.sortOrder;
+        if (this.sortProp === col.prop)
+            return this.sortDirection;
+        return null;
+    }
+    handleSort = (col) => {
+        const prop = col.prop;
+        // T2：受控排序（col.sortOrder 已定义）→ 不内部切换，仅 emit 交外部决策
+        if (col.sortOrder !== undefined) {
+            this.hbSortChange.emit({ prop, order: col.sortOrder });
+            return;
+        }
         if (this.sortProp === prop) {
-            this.sortDirection =
-                this.sortDirection === 'ascending' ? 'descending' : this.sortDirection === 'descending' ? null : 'ascending';
+            this.sortDirection = this.sortDirection === 'ascending' ? 'descending' : this.sortDirection === 'descending' ? null : 'ascending';
         }
         else {
             this.sortProp = prop;
@@ -187,13 +223,38 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         }
         this.hbSortChange.emit({ prop, order: this.sortDirection });
     };
+    /**
+     * T2 增强的排序数据：支持 col.sorter 自定义排序函数 + 受控 sortOrder。
+     * 多列排序不支持（与 antd 行为一致，取首个有效排序列）。
+     */
     get sortedData() {
-        if (!this.sortProp || !this.sortDirection)
+        // 找到当前生效的排序列
+        let activeCol;
+        let activeOrder = null;
+        for (const col of this.columns) {
+            if (col.sortable || col.sorter) {
+                const order = this.effectiveSortOrder(col);
+                if (order) {
+                    activeCol = col;
+                    activeOrder = order;
+                    break;
+                }
+            }
+        }
+        // 兼容旧逻辑：若没有列级 sortOrder，回退到内部 sortProp/sortDirection
+        if (!activeCol && this.sortProp && this.sortDirection) {
+            activeOrder = this.sortDirection;
+        }
+        if (!activeOrder)
             return this.data;
-        const direction = this.sortDirection === 'ascending' ? 1 : -1;
+        const direction = activeOrder === 'ascending' ? 1 : -1;
+        const sortProp = activeCol ? activeCol.prop : this.sortProp;
+        const sorterFn = activeCol && activeCol.sorter;
         return [...this.data].sort((a, b) => {
-            const va = a[this.sortProp];
-            const vb = b[this.sortProp];
+            if (sorterFn)
+                return sorterFn(a, b) * direction;
+            const va = a[sortProp];
+            const vb = b[sortProp];
             if (va < vb)
                 return -1 * direction;
             if (va > vb)
@@ -201,7 +262,72 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             return 0;
         });
     }
-    ;
+    /**
+     * T3 筛选：应用所有列的 onFilter。
+     * 受控（col.filteredValue 已定义）→ 用该值；否则用内部 internalFilters[prop]。
+     */
+    get filteredData() {
+        let result = this.sortedData;
+        for (const col of this.columns) {
+            if (!col.onFilter || !col.filters)
+                continue;
+            const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+            if (!values || values.length === 0)
+                continue;
+            result = result.filter(row => values.some(v => col.onFilter(row, v)));
+        }
+        return result;
+    }
+    /**
+     * T1 分页：取当前页数据切片（仅当 pagination 配置时）。
+     * 在 sorted+filtered 之后切片。
+     */
+    get pagedData() {
+        const filtered = this.filteredData;
+        if (!this.pagination)
+            return filtered;
+        const page = this.currentPage;
+        const size = this.currentPageSize;
+        const start = (page - 1) * size;
+        return filtered.slice(start, start + size);
+    }
+    /** T1：当前页（受控优先） */
+    get currentPage() {
+        return this.pagination?.current ?? this.internalPage;
+    }
+    /** T1：当前每页条数（受控优先） */
+    get currentPageSize() {
+        return this.pagination?.pageSize ?? this.internalPageSize;
+    }
+    /** T1：分页切换 */
+    handlePageChange = (page) => {
+        this.internalPage = page;
+        this.hbPageChange.emit({ current: page, pageSize: this.currentPageSize });
+    };
+    /** T1：每页条数切换 */
+    handlePageSizeChange = (size) => {
+        this.internalPageSize = size;
+        // 切条数后回到第一页避免越界
+        this.internalPage = 1;
+        this.hbPageChange.emit({ current: 1, pageSize: size });
+    };
+    /** T3：筛选下拉切换某项 */
+    handleFilterToggle = (col, value) => {
+        const current = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop] || [];
+        const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];
+        // 仅内部状态时更新；受控（filteredValue 已定义）则只 emit 交外部
+        if (col.filteredValue === undefined) {
+            this.internalFilters = { ...this.internalFilters, [col.prop]: next };
+        }
+        this.hbFilterChange.emit({ prop: col.prop, values: next });
+    };
+    /** T3：清空某列筛选 */
+    handleFilterReset = (col) => {
+        if (col.filteredValue === undefined) {
+            this.internalFilters = { ...this.internalFilters, [col.prop]: [] };
+        }
+        this.hbFilterChange.emit({ prop: col.prop, values: [] });
+    };
     get isAllSelected() {
         return this.data.length > 0 && this.selectedRows.size === this.data.length;
     }
@@ -232,7 +358,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     emitSelection() {
         const selected = Array.from(this.selectedRows)
             .sort((a, b) => a - b)
-            .map((i) => this.data[i])
+            .map(i => this.data[i])
             .filter(Boolean);
         this.hbSelectionChange.emit(selected);
     }
@@ -246,8 +372,21 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     get hasActions() {
         return !!this.actions && this.actions.length > 0;
     }
-    /** 计算固定列的 sticky 偏移（左侧/右侧累计宽度） */
-    get fixedOffsets() {
+    /** T3：某列是否有激活筛选 */
+    isColumnFiltered(col) {
+        const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+        return !!values && values.length > 0;
+    }
+    /**
+     * 计算固定列的 sticky 偏移（左侧/右侧累计宽度）。
+     * P1 优化：缓存结果，仅当 columns 引用变化时重算。
+     */
+    _fixedOffsetsCache = null;
+    _fixedOffsetsColumnsRef = null;
+    getFixedOffsets() {
+        if (this._fixedOffsetsCache && this._fixedOffsetsColumnsRef === this.columns) {
+            return this._fixedOffsetsCache;
+        }
         const result = {};
         let leftAcc = '0px';
         for (const c of this.columns) {
@@ -265,10 +404,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
                 rightAcc = `calc(${rightAcc} + ${c.width || '0px'})`;
             }
         }
+        this._fixedOffsetsCache = result;
+        this._fixedOffsetsColumnsRef = this.columns;
         return result;
     }
     cellStyle(prop, base) {
-        const off = this.fixedOffsets[prop];
+        const off = this.getFixedOffsets()[prop];
         const style = { ...(base || {}) };
         if (off?.side === 'left') {
             style.position = 'sticky';
@@ -282,11 +423,18 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         }
         return style;
     }
+    /**
+     * 渲染单元格内容（T7：优先 col.render，其次 formatter，最后原值）。
+     */
+    renderCell(col, row, rowIndex) {
+        if (col.render)
+            return col.render(row, rowIndex);
+        if (col.formatter)
+            return col.formatter(row, rowIndex);
+        return row[col.prop] ?? '';
+    }
     /**
      * 渲染单行（普通 + 虚拟滚动 + 树形 共用）。
-     * - 普通模式：rowIndex 为在 sortedData 中的全局索引。
-     * - 树形模式：fr.level 决定缩进，第一列渲染展开箭头，key 取 fr.key。
-     * fr 为可选；未传时按普通模式渲染。
      */
     renderRow(row, rowIndex, fr) {
         const tree = !!fr;
@@ -294,15 +442,17 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         const rowKeyVal = fr ? fr.key : this.rowKey ? row[this.rowKey] : rowIndex;
         const indent = level * 16;
         const isEditing = (prop) => !!this.editingCell && this.editingCell.rowKey === rowKeyVal && this.editingCell.prop === prop;
+        // T8：行 className
+        const extraRowClass = this.rowClassName ? this.rowClassName(row, rowIndex) : '';
         return (h("tr", { key: rowKeyVal, class: {
                 'hb-table__row': true,
                 'hb-table__row--striped': this.stripe && rowIndex % 2 === 1,
                 'hb-table__row--current': this.highlightCurrentRow && rowIndex === this.currentRow,
                 'hb-table__row--selected': this.selectedRows.has(rowIndex),
                 'hb-table__row--tree': tree,
-            }, onClick: () => this.handleRowClick(row, rowIndex) }, this.selectable && (h("td", { class: "hb-table__selection", onClick: (e) => e.stopPropagation() }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.selectedRows.has(rowIndex), onChange: (e) => this.toggleRow(rowIndex, e) }))), this.columns.map((col, colIdx) => {
-            const off = this.fixedOffsets[col.prop];
-            // 树形模式：第一列加缩进 + 展开箭头
+                [extraRowClass]: !!extraRowClass,
+            }, onClick: () => this.handleRowClick(row, rowIndex) }, this.selectable && (h("td", { class: "hb-table__selection", onClick: e => e.stopPropagation() }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.selectedRows.has(rowIndex), onChange: e => this.toggleRow(rowIndex, e) }))), this.columns.map((col, colIdx) => {
+            const off = this.getFixedOffsets()[col.prop];
             const isFirstCol = colIdx === 0;
             const showExpand = tree && isFirstCol && fr.hasChildren;
             const expanded = showExpand && this.expandedRowKeys.indexOf(rowKeyVal) !== -1;
@@ -313,52 +463,79 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
                     'hb-table__cell--editable': editableActive,
-                }, onClick: editableActive ? (e) => this.startEdit(e, rowKeyVal, col.prop) : undefined }, tree && isFirstCol && (h("span", { class: "hb-table__indent", style: { display: 'inline-block', width: `${indent}px` }, "aria-hidden": "true" })), showExpand && (h("button", { type: "button", class: { 'hb-table__expand': true, 'hb-table__expand--expanded': expanded }, "aria-label": expanded ? '收起' : '展开', onClick: (e) => {
+                    'hb-table__cell--ellipsis': !!col.ellipsis,
+                }, onClick: editableActive ? e => this.startEdit(e, rowKeyVal, col.prop) : undefined }, tree && isFirstCol && h("span", { class: "hb-table__indent", style: { display: 'inline-block', width: `${indent}px` }, "aria-hidden": "true" }), showExpand && (h("button", { type: "button", class: { 'hb-table__expand': true, 'hb-table__expand--expanded': expanded }, "aria-label": expanded ? '收起' : '展开', onClick: e => {
                     e.stopPropagation();
                     this.toggleExpand(row, rowKeyVal);
-                } }, expanded ? '▼' : '▶')), showExpand === false && tree && isFirstCol && (h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" })), editing ? (h("input", { class: "hb-table__edit-input", type: "text", value: row[col.prop] ?? '', onBlur: (e) => this.commitEdit(e, row, col.prop), onKeyDown: (e) => this.onEditKeydown(e, row, col.prop) })) : (h("slot", { name: `cell-${col.prop}` }, col.formatter ? col.formatter(row, rowIndex) : row[col.prop] ?? ''))));
-        }), this.hasActions && (h("td", { class: "hb-table__td--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' }, onClick: (e) => e.stopPropagation() }, this.actions.map((act) => (h("button", { type: "button", class: {
+                } }, expanded ? '▼' : '▶')), showExpand === false && tree && isFirstCol && h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" }), editing ? (h("input", { class: "hb-table__edit-input", type: "text", value: row[col.prop] ?? '', onBlur: e => this.commitEdit(e, row, col.prop), onKeyDown: e => this.onEditKeydown(e, row, col.prop) })) : (
+            // T7：col.render 优先（支持返回 JSX）；否则 formatter；否则原值
+            h("slot", { name: `cell-${col.prop}` }, this.renderCell(col, row, rowIndex)))));
+        }), this.hasActions && (h("td", { class: "hb-table__td--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' }, onClick: e => e.stopPropagation() }, this.actions.map(act => (h("button", { type: "button", class: {
                 'hb-table__action': true,
                 'hb-table__action--primary': act.type === 'primary',
                 'hb-table__action--danger': act.type === 'danger',
             }, disabled: act.disabled ? act.disabled(row, rowIndex) : false, onClick: () => this.handleAction(row, rowIndex, act.key) }, act.label)))))));
     }
+    /**
+     * T3：渲染表头某列的筛选下拉。
+     */
+    renderColumnFilter = (col) => {
+        if (!col.filters || col.filters.length === 0 || !col.onFilter)
+            return null;
+        const activeValues = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop] || [];
+        const filtered = this.isColumnFiltered(col);
+        return (h("span", { class: "hb-table__filter", onClick: e => e.stopPropagation() }, h("details", { class: "hb-table__filter-dropdown" }, h("summary", { class: { 'hb-table__filter-trigger': true, 'hb-table__filter-trigger--active': filtered }, "aria-label": "\u7B5B\u9009" }, h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }))), h("div", { class: "hb-table__filter-menu", role: "menu" }, h("ul", { class: "hb-table__filter-list" }, col.filters.map(f => {
+            const checked = activeValues.includes(f.value);
+            return (h("li", { class: "hb-table__filter-item", role: "menuitemcheckbox", "aria-checked": checked ? 'true' : 'false' }, h("label", { class: "hb-table__filter-label" }, h("input", { type: "checkbox", class: "hb-table__filter-checkbox", checked: checked, onChange: () => this.handleFilterToggle(col, f.value) }), h("span", null, f.label))));
+        })), h("div", { class: "hb-table__filter-actions" }, h("button", { type: "button", class: "hb-table__filter-reset", onClick: () => this.handleFilterReset(col) }, "\u91CD\u7F6E"))))));
+    };
     /** 渲染表头（普通 + 虚拟滚动共用，表头始终固定不随滚） */
     renderHeader() {
-        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: "hb-table__selection" }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.isAllSelected, ref: (el) => {
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: "hb-table__selection" }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.isAllSelected, ref: el => {
                 this.allCheckboxRef = el;
-            }, onChange: this.toggleAll }))), this.columns.map((col) => {
-            const off = this.fixedOffsets[col.prop];
+            }, onChange: this.toggleAll }))), this.columns.map(col => {
+            const off = this.getFixedOffsets()[col.prop];
+            // T2：列可排序的条件（sortable 或 sorter）
+            const canSort = !!col.sortable || !!col.sorter;
+            const order = this.effectiveSortOrder(col);
             return (h("th", { key: col.prop, style: this.cellStyle(col.prop, {
                     width: col.width,
                     minWidth: col.minWidth,
                     textAlign: col.align || 'left',
                 }), class: {
-                    'hb-table__th--sortable': col.sortable,
+                    'hb-table__th--sortable': canSort,
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
-                }, onClick: col.sortable ? () => this.handleSort(col.prop) : undefined }, h("div", { class: "hb-table__th-content" }, h("span", null, col.label), col.sortable && (h("span", { class: "hb-table__sort" }, h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': this.sortProp === col.prop && this.sortDirection === 'ascending' } }, "\u25B2"), h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': this.sortProp === col.prop && this.sortDirection === 'descending' } }, "\u25BC"))))));
+                }, onClick: canSort ? () => this.handleSort(col) : undefined }, h("div", { class: "hb-table__th-content" }, h("span", null, col.label), canSort && (h("span", { class: "hb-table__sort" }, h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'ascending' } }, "\u25B2"), h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'descending' } }, "\u25BC"))), this.renderColumnFilter(col))));
         }), this.hasActions && (h("th", { class: "hb-table__th--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' } }, "\u64CD\u4F5C")))));
     }
+    /** T1：渲染内置分页底部栏 */
+    renderPagination() {
+        if (!this.pagination)
+            return null;
+        const total = this.filteredData.length;
+        const page = this.currentPage;
+        const size = this.currentPageSize;
+        const totalPages = Math.max(1, Math.ceil(total / size));
+        const showTotal = this.pagination.showTotal;
+        return (h("div", { class: "hb-table__pagination" }, showTotal && h("span", { class: "hb-table__pagination-total" }, "\u5171 ", total, " \u6761"), h("span", { class: "hb-table__pagination-pages" }, h("button", { type: "button", class: "hb-table__pagination-btn", disabled: page <= 1, onClick: () => this.handlePageChange(page - 1), "aria-label": "\u4E0A\u4E00\u9875" }, "\u2039"), h("span", { class: "hb-table__pagination-current" }, page, " / ", totalPages), h("button", { type: "button", class: "hb-table__pagination-btn", disabled: page >= totalPages, onClick: () => this.handlePageChange(page + 1), "aria-label": "\u4E0B\u4E00\u9875" }, "\u203A")), this.pagination.pageSizes && (h("select", { class: "hb-table__pagination-size", onChange: e => this.handlePageSizeChange(parseInt(e.target.value, 10)) }, this.pagination.pageSizes.map(s => (h("option", { value: String(s), selected: s === size }, s, " \u6761/\u9875")))))));
+    }
     render() {
-        const displayData = this.sortedData;
+        // T1+T2+T3：排序 → 筛选 → 分页 依次应用
+        const displayData = this.pagedData;
         const isEmpty = displayData.length === 0;
-        // 树形模式：把可见树拍平成带 level 的行列表（仅含已展开链路上的后代）
         const flatRows = this.isTreeMode ? this.flattenTree(displayData) : [];
-        // 虚拟滚动：固定高度滚动视口 + 撑高容器 + 仅渲染可见窗口行（绝对定位 offset）
-        // 注意：树形 + 虚拟滚动组合较复杂，此处虚拟滚动沿用普通行渲染（不展开树），
-        // 保留树形仅在普通模式下生效以降低风险。
         const renderVirtualBody = () => {
             const { startIndex, endIndex } = this.visibleRange;
             const offsetTop = startIndex * (this.itemHeight > 0 ? this.itemHeight : 1);
             return (h("div", { class: "hb-table__virtual-viewport", style: { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' }, onScroll: this.handleVirtualScroll }, h("div", { class: "hb-table__virtual-spacer", style: { height: `${this.virtualTotalHeight}px`, position: 'relative' } }, h("table", { class: "hb-table__table hb-table__table--virtual" }, h("tbody", null, isEmpty ? (h("tr", null, h("td", { colSpan: this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0), class: "hb-table__empty" }, this.emptyText))) : (h("tr", { style: { height: `${offsetTop}px` }, "aria-hidden": "true" })), displayData.slice(startIndex, endIndex).map((row, i) => this.renderRow(row, startIndex + i)))))));
         };
-        // 普通模式：树形启用时按拍平列表渲染（带 level 缩进 + 展开箭头），否则原样按行渲染
         const renderNormalBody = () => (h("tbody", null, isEmpty ? (h("tr", null, h("td", { colSpan: this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0), class: "hb-table__empty" }, this.emptyText))) : this.isTreeMode ? (flatRows.map((fr, i) => this.renderRow(fr.row, i, fr))) : (displayData.map((row, rowIndex) => this.renderRow(row, rowIndex)))));
-        return (h("div", { class: { 'hb-table': true, [`hb-table--${this.size}`]: true, 'hb-table--border': this.border, 'hb-table--virtual': this.virtualScroll } }, this.loading && (h("div", { class: "hb-table__loading" }, h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (h("div", { class: "hb-table__virtual-wrapper" }, h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody())))));
+        return (h("div", { class: { 'hb-table': true, [`hb-table--${this.size}`]: true, 'hb-table--border': this.border, 'hb-table--virtual': this.virtualScroll, 'hb-table--has-pagination': !!this.pagination } }, this.loading && (h("div", { class: "hb-table__loading" }, h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (h("div", { class: "hb-table__virtual-wrapper" }, h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody()))), this.renderPagination()));
     }
     static get watchers() { return {
-        "data": ["handleDataChange"]
+        "data": ["handleDataChange"],
+        "pagination": ["handlePaginationChange"]
     }; }
     static get style() { return HbTableStyle0; }
 }, [1, "hb-table", {
@@ -379,15 +556,21 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         "virtualScrollHeight": [2, "virtual-scroll-height"],
         "treeProps": [16],
         "editable": [4],
+        "pagination": [16],
+        "rowClassName": [16],
         "sortProp": [32],
         "sortDirection": [32],
         "currentRow": [32],
         "selectedRows": [32],
         "scrollTop": [32],
         "expandedRowKeys": [32],
-        "editingCell": [32]
+        "editingCell": [32],
+        "internalPage": [32],
+        "internalPageSize": [32],
+        "internalFilters": [32]
     }, undefined, {
-        "data": ["handleDataChange"]
+        "data": ["handleDataChange"],
+        "pagination": ["handlePaginationChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {