huibo-ui 0.5.0 → 0.6.0

package/dist/esm/hb-steps.entry.js.map

@@ -1 +1 @@
-{"file":"hb-steps.entry.js","mappings":"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","names":[],"sources":["src/components/Steps/steps.css?tag=hb-steps&encapsulation=shadow","src/components/Steps/Steps.tsx"],"sourcesContent":[":host { display: block; }\n.hb-steps { display: flex; }\n.hb-steps--vertical { flex-direction: column; }\n.hb-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }\n.hb-steps--vertical .hb-steps__item { flex-direction: row; align-items: flex-start; gap: var(--hb-spacing-sm); padding-bottom: var(--hb-spacing-md); }\n.hb-steps__head { display: flex; align-items: center; width: 100%; }\n.hb-steps__icon {\n  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  font-size: var(--hb-font-size-sm); font-weight: 600; flex-shrink: 0;\n  background: var(--hb-color-fill); color: var(--hb-color-text-secondary); transition: all 0.3s;\n}\n.hb-steps__item--process .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--finish .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--error .hb-steps__icon { background: var(--hb-color-danger); color: #fff; }\n.hb-steps__line { flex: 1; height: 2px; background: var(--hb-color-border-secondary); margin: 0 var(--hb-spacing-xs); }\n.hb-steps__item--finish .hb-steps__line { background: var(--hb-color-primary); }\n.hb-steps__main { text-align: center; margin-top: var(--hb-spacing-xs); }\n.hb-steps--vertical .hb-steps__main { text-align: left; }\n\n/* 对齐方式（alignCenter prop）：默认 false 时图标与文字左对齐，true 时居中 */\n.hb-steps:not(.hb-steps--align-center) .hb-steps__item { align-items: flex-start; }\n.hb-steps:not(.hb-steps--align-center) .hb-steps__main { text-align: left; }\n.hb-steps__title { font-size: var(--hb-font-size-sm); font-weight: 600; }\n.hb-steps__item--process .hb-steps__title { color: var(--hb-color-primary); }\n.hb-steps__description { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error';\n\ninterface StepMeta {\n  title: string;\n  description?: string;\n  /** 自定义图标名/标记（'hb-icon' name 或文本）。undefined 表示用默认序号/状态图标 */\n  icon?: string;\n  /** 子项显式状态覆盖（不指定则按 active 自动推导） */\n  status?: StepStatus;\n}\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: StepStatus = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: StepMeta[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map(item => {\n      const node = item as HTMLElement;\n      // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，\n      // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。\n      // 用户显式在 HTML 上写 status=\"xxx\" 时 getAttribute 才有值。\n      return {\n        title: node.getAttribute('title') || '',\n        description: node.getAttribute('description') || undefined,\n        icon: node.getAttribute('icon') || undefined,\n        status: (node.getAttribute('status') || undefined) as StepStatus | undefined,\n      };\n    });\n  }\n\n  private getStatus(index: number): StepStatus {\n    const meta = this.steps[index];\n    // 子项显式 status 优先（仅当用户在 HTML 上写了 status 属性）\n    if (meta && meta.status) return meta.status;\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  /** 渲染图标：子项自定义 icon 优先；否则按状态（finish=✓、error=✕、其余=序号） */\n  private renderIcon(index: number): any {\n    const meta = this.steps[index];\n    if (meta && meta.icon) {\n      // 自定义图标名：若与 hb-icon 内置图标同名则渲染 hb-icon，否则按文本渲染\n      return <hb-icon name={meta.icon} size={16} aria-hidden=\"true\" />;\n    }\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <ol class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }} role=\"list\">\n        {this.steps.map((step, i) => {\n          const status = this.getStatus(i);\n          return (\n            <li\n              class={{ 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }}\n              role=\"listitem\"\n              aria-current={status === 'process' ? 'step' : undefined}\n              aria-disabled={step.status === 'wait' && i > this.active ? 'true' : undefined}\n            >\n              <div class=\"hb-steps__head\">\n                <span class=\"hb-steps__icon\" aria-hidden=\"true\">\n                  {this.renderIcon(i)}\n                </span>\n                {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n              </div>\n              <div class=\"hb-steps__main\">\n                <div class=\"hb-steps__title\">{step.title}</div>\n                {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-steps.entry.js","mappings":"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","names":[],"sources":["src/components/Steps/steps.css?tag=hb-steps&encapsulation=shadow","src/components/Steps/Steps.tsx"],"sourcesContent":[":host { display: block; }\n.hb-steps { display: flex; }\n.hb-steps--vertical { flex-direction: column; }\n.hb-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }\n.hb-steps--vertical .hb-steps__item { flex-direction: row; align-items: flex-start; gap: var(--hb-spacing-sm); padding-bottom: var(--hb-spacing-md); }\n.hb-steps__head { display: flex; align-items: center; width: 100%; }\n.hb-steps__icon {\n  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  font-size: var(--hb-font-size-sm); font-weight: 600; flex-shrink: 0;\n  background: var(--hb-color-fill); color: var(--hb-color-text-secondary); transition: all 0.3s;\n}\n.hb-steps__item--process .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--finish .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--error .hb-steps__icon { background: var(--hb-color-danger); color: #fff; }\n.hb-steps__line { flex: 1; height: 2px; background: var(--hb-color-border-secondary); margin: 0 var(--hb-spacing-xs); }\n.hb-steps__item--finish .hb-steps__line { background: var(--hb-color-primary); }\n.hb-steps__main { text-align: center; margin-top: var(--hb-spacing-xs); }\n.hb-steps--vertical .hb-steps__main { text-align: left; }\n\n/* 对齐方式（alignCenter prop）：默认 false 时图标与文字左对齐，true 时居中 */\n.hb-steps:not(.hb-steps--align-center) .hb-steps__item { align-items: flex-start; }\n.hb-steps:not(.hb-steps--align-center) .hb-steps__main { text-align: left; }\n.hb-steps__title { font-size: var(--hb-font-size-sm); font-weight: 600; }\n.hb-steps__item--process .hb-steps__title { color: var(--hb-color-primary); }\n.hb-steps__description { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error';\n\ninterface StepMeta {\n  title: string;\n  description?: string;\n  /** 自定义图标名/标记（'hb-icon' name 或文本）。undefined 表示用默认序号/状态图标 */\n  icon?: string;\n  /** 子项显式状态覆盖（不指定则按 active 自动推导） */\n  status?: StepStatus;\n}\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: StepStatus = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: StepMeta[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map(item => {\n      const node = item as HTMLElement;\n      // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，\n      // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。\n      // 用户显式在 HTML 上写 status=\"xxx\" 时 getAttribute 才有值。\n      return {\n        title: node.getAttribute('title') || '',\n        description: node.getAttribute('description') || undefined,\n        icon: node.getAttribute('icon') || undefined,\n        status: (node.getAttribute('status') || undefined) as StepStatus | undefined,\n      };\n    });\n  }\n\n  private getStatus(index: number): StepStatus {\n    const meta = this.steps[index];\n    // 子项显式 status 优先（仅当用户在 HTML 上写了 status 属性）\n    if (meta && meta.status) return meta.status;\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  /** 渲染图标：子项自定义 icon 优先；否则按状态（finish=✓、error=✕、其余=序号） */\n  private renderIcon(index: number): any {\n    const meta = this.steps[index];\n    if (meta && meta.icon) {\n      // 自定义图标名：若与 hb-icon 内置图标同名则渲染 hb-icon，否则按文本渲染\n      return <hb-icon name={meta.icon} size={16} aria-hidden=\"true\" />;\n    }\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <ol class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }} role=\"list\">\n        {this.steps.map((step, i) => {\n          const status = this.getStatus(i);\n          return (\n            <li\n              class={{ 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }}\n              role=\"listitem\"\n              aria-current={status === 'process' ? 'step' : undefined}\n              aria-disabled={step.status === 'wait' && i > this.active ? 'true' : undefined}\n            >\n              <div class=\"hb-steps__head\">\n                <span class=\"hb-steps__icon\" aria-hidden=\"true\">\n                  {this.renderIcon(i)}\n                </span>\n                {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n              </div>\n              <div class=\"hb-steps__main\">\n                <div class=\"hb-steps__title\">{step.title}</div>\n                {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-table.entry.js

@@ -12,6 +12,8 @@ const Table = class {
         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 = [];
@@ -51,6 +53,13 @@ const Table = class {
     treeProps;
     /** 是否开启行内编辑模式（默认关闭）。需列配置 column.editable=true 才对该列生效 */
     editable = false;
+    /**
+     * 内置分页配置（T1）。传入后 Table 自动对 data 切片并在底部渲染 <hb-pagination>。
+     * 不传则不分页（向后兼容）。
+     */
+    pagination;
+    /** 行 className（函数，按行返回附加 class，T8） */
+    rowClassName;
     sortProp = '';
     sortDirection = null;
     currentRow = -1;
@@ -61,6 +70,12 @@ const Table = class {
     expandedRowKeys = [];
     /** 行内编辑：当前正在编辑的单元格 { key, prop }，null 表示无 */
     editingCell = null;
+    /** T1 分页：内部当前页（非受控时用） */
+    internalPage = 1;
+    /** T1 分页：内部每页条数（非受控时用） */
+    internalPageSize = 10;
+    /** T3 筛选：内部筛选状态 { prop: 选中的 value 列表 }（非受控时用） */
+    internalFilters = {};
     /** 排序变化事件 */
     hbSortChange;
     /** 行点击事件 */
@@ -73,10 +88,21 @@ const Table = class {
     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;
@@ -87,9 +113,6 @@ const Table = class {
     }
     /**
      * 把树拍平成可见行列表：仅保留「祖先链路全部已展开」的后代。
-     * @param list  当前层级的数组
-     * @param level 当前层级（根 = 0）
-     * @param parentKeyPath 父级 key 路径，用于构造深层稳定 key（避免不同分支同 index 撞 key）
      */
     flattenTree(list, level = 0, parentKeyPath = '') {
         const field = this.childrenField;
@@ -100,7 +123,6 @@ const Table = class {
             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));
             }
@@ -125,7 +147,6 @@ const Table = class {
     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 });
@@ -143,7 +164,6 @@ const Table = class {
     };
     allCheckboxRef;
     componentDidRender() {
-        // indeterminate 不是可反射的 HTML 属性，必须通过 DOM 属性设置
         if (this.allCheckboxRef) {
             this.allCheckboxRef.indeterminate = this.isIndeterminate;
         }
@@ -174,7 +194,24 @@ const Table = class {
     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';
         }
@@ -184,13 +221,38 @@ const Table = class {
         }
         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)
@@ -198,6 +260,72 @@ const Table = class {
             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;
     }
@@ -242,10 +370,14 @@ const Table = class {
     get hasActions() {
         return !!this.actions && this.actions.length > 0;
     }
+    /** T3：某列是否有激活筛选 */
+    isColumnFiltered(col) {
+        const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+        return !!values && values.length > 0;
+    }
     /**
      * 计算固定列的 sticky 偏移（左侧/右侧累计宽度）。
      * P1 优化：缓存结果，仅当 columns 引用变化时重算。
-     * 修复前是 getter，被每个 <td>/<th> 反复调用，复杂度 O(rows×cols²)。
      */
     _fixedOffsetsCache = null;
     _fixedOffsetsColumnsRef = null;
@@ -289,11 +421,18 @@ const Table = class {
         }
         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;
@@ -301,15 +440,17 @@ const Table = class {
         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,
+                [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;
@@ -320,52 +461,79 @@ const Table = class {
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
                     'hb-table__cell--editable': editableActive,
+                    '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] ?? '')))));
+                } }, 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 => {
                 this.allCheckboxRef = el;
             }, 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"]
     }; }
 };
 Table.style = HbTableStyle0;