diff --git a/common/changes/@visactor/vtable/fix-issue-4816-functional-icon-theme_2026-07-27-15-36.json b/common/changes/@visactor/vtable/fix-issue-4816-functional-icon-theme_2026-07-27-15-36.json new file mode 100644 index 0000000000..7db46a9b5c --- /dev/null +++ b/common/changes/@visactor/vtable/fix-issue-4816-functional-icon-theme_2026-07-27-15-36.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: refresh functional icons after theme updates", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "biukam.w@gmail.com" +} diff --git a/packages/vtable/__tests__/functional-icons-theme.test.ts b/packages/vtable/__tests__/functional-icons-theme.test.ts new file mode 100644 index 0000000000..97dba2dc48 --- /dev/null +++ b/packages/vtable/__tests__/functional-icons-theme.test.ts @@ -0,0 +1,89 @@ +// @ts-nocheck +import * as VTable from '../src'; +import { createDiv, removeDom } from './dom'; + +global.__VERSION__ = 'none'; + +describe('functional icon theme updates', () => { + let container: HTMLElement; + let table: VTable.ListTable; + + const columns = [{ field: 'name', title: 'Name', sort: true, tree: true }]; + const records = [{ name: 'Parent', children: [{ name: 'Child' }] }]; + + const createTable = () => { + container = createDiv(); + container.style.width = '600px'; + container.style.height = '400px'; + table = new VTable.ListTable(container, { + columns, + records, + rowSeriesNumber: { dragOrder: true }, + theme: { + functionalIconsStyle: { + sort_color: '#111111', + collapse_color: '#222222', + dragReorder_color: '#333333' + } + } + }); + }; + + afterEach(() => { + table?.release(); + removeDom(container); + }); + + test('refreshes functional icons after updateOption', () => { + createTable(); + + table.updateOption({ + columns, + records, + rowSeriesNumber: { dragOrder: true }, + theme: { + functionalIconsStyle: { + sort_color: '#123456', + collapse_color: '#234567', + dragReorder_color: '#345678' + } + } + }); + + expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#123456'); + expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#234567'); + expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#345678'); + }); + + test('refreshes functional icons after updateTheme', () => { + createTable(); + + table.updateTheme({ + functionalIconsStyle: { + sort_color: '#456789', + collapse_color: '#56789a', + dragReorder_color: '#6789ab' + } + }); + + expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#456789'); + expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#56789a'); + expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#6789ab'); + }); + + test('refreshes functional icons after setting theme', () => { + createTable(); + + table.theme = { + functionalIconsStyle: { + sort_color: '#789abc', + collapse_color: '#89abcd', + dragReorder_color: '#9abcde' + } + }; + + expect(table.internalProps.headerHelper.normalIcon.svg).toContain('#789abc'); + expect(table.internalProps.bodyHelper.collapseIcon.svg).toContain('#89abcd'); + expect(table.internalProps.rowSeriesNumberHelper.dragReorderIconName.svg).toContain('#9abcde'); + }); +}); diff --git a/packages/vtable/src/body-helper/body-helper.ts b/packages/vtable/src/body-helper/body-helper.ts index 9047a93878..9a5ab4e6b9 100644 --- a/packages/vtable/src/body-helper/body-helper.ts +++ b/packages/vtable/src/body-helper/body-helper.ts @@ -19,6 +19,10 @@ export class BodyHelper { _table: BaseTableAPI; constructor(_table: BaseTableAPI) { this._table = _table; + this.updateIcons(); + } + + updateIcons() { const regedIcons = registerIcons.get(); //展开折叠按钮 this.expandIcon = regedIcons[InternalIconName.expandIconName] as SvgIcon; diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 7230e26571..587f126314 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -503,7 +503,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.focusedTable = false; internalProps.theme = themes.of(options.theme ?? themes.DEFAULT); //原来在listTable文件中 internalProps.theme.isPivot = this.isPivotTable(); - setIconColor(internalProps.theme.functionalIconsStyle); + this._updateFunctionalIcons(); if (container) { // 先清空 if (clearDOM) { @@ -2938,7 +2938,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.theme = themes.of(options.theme ?? themes.DEFAULT); internalProps.theme.isPivot = this.isPivotTable(); - setIconColor(internalProps.theme.functionalIconsStyle); + this._updateFunctionalIcons(); this.scenegraph.updateStageBackground(); // this._updateSize(); //设置是否自动撑开的配置 @@ -3783,6 +3783,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { /** * 获取当前使用的主题 */ + private _updateFunctionalIcons() { + setIconColor(this.internalProps.theme.functionalIconsStyle); + this.internalProps.headerHelper?.updateIcons(); + this.internalProps.bodyHelper?.updateIcons(); + this.internalProps.rowSeriesNumberHelper?.updateIcons(); + } get theme(): TableTheme { return this.internalProps.theme; } @@ -3790,7 +3796,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.internalProps.theme = themes.of(theme ?? themes.DEFAULT); this.internalProps.theme.isPivot = this.isPivotTable(); this.options.theme = theme; - setIconColor(this.internalProps.theme.functionalIconsStyle); + this._updateFunctionalIcons(); } /** * 设置主题 @@ -3799,7 +3805,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.internalProps.theme = themes.of(theme ?? themes.DEFAULT); this.internalProps.theme.isPivot = this.isPivotTable(); - setIconColor(this.internalProps.theme.functionalIconsStyle); + this._updateFunctionalIcons(); this.options.theme = theme; this.scenegraph.updateComponent(); this.scenegraph.updateStageBackground(); diff --git a/packages/vtable/src/core/row-series-number-helper.ts b/packages/vtable/src/core/row-series-number-helper.ts index da83ab292b..3975a5d3e6 100644 --- a/packages/vtable/src/core/row-series-number-helper.ts +++ b/packages/vtable/src/core/row-series-number-helper.ts @@ -17,6 +17,10 @@ export class RowSeriesNumberHelper { _table: BaseTableAPI; constructor(_table: BaseTableAPI) { this._table = _table; + this.updateIcons(); + } + + updateIcons() { const regedIcons = registerIcons.get(); this.dragReorderIconName = regedIcons[InternalIconName.dragReorderIconName] as SvgIcon; diff --git a/packages/vtable/src/header-helper/header-helper.ts b/packages/vtable/src/header-helper/header-helper.ts index a448fe0033..4c883780f4 100644 --- a/packages/vtable/src/header-helper/header-helper.ts +++ b/packages/vtable/src/header-helper/header-helper.ts @@ -38,6 +38,10 @@ export class HeaderHelper { _table: BaseTableAPI; constructor(_table: BaseTableAPI) { this._table = _table; + this.updateIcons(); + } + + updateIcons() { const regedIcons = registerIcons.get(); //pin默认值 this.freezeIcon = regedIcons[InternalIconName.freezeIconName] as SvgIcon;