@visactor/vtable-plugins 1.19.9-alpha.2 → 1.20.0-alpha.0

package/cjs/filter/filter-toolbar.d.ts

@@ -0,0 +1,31 @@
+import type * as VTable from '@visactor/vtable';
+import type { FilterStateManager } from './filter-state-manager';
+import { ValueFilter } from './value-filter';
+import { ConditionFilter } from './condition-filter';
+import { FilterMode } from './types';
+export declare class FilterToolbar {
+    table: VTable.ListTable | VTable.PivotTable;
+    filterStateManager: FilterStateManager;
+    valueFilter: ValueFilter | null;
+    conditionFilter: ConditionFilter | null;
+    activeTab: 'byValue' | 'byCondition';
+    isVisible: boolean;
+    selectedField: string | number | null;
+    filterModes: FilterMode[];
+    private filterMenu;
+    private filterMenuWidth;
+    private filterTabByValue;
+    private filterTabByCondition;
+    private clearFilterOptionLink;
+    private cancelFilterButton;
+    private applyFilterButton;
+    constructor(table: VTable.ListTable | VTable.PivotTable, filterStateManager: FilterStateManager);
+    private onTabSwitch;
+    private updateSelectedField;
+    private applyFilter;
+    private clearFilter;
+    render(container: HTMLElement): void;
+    attachEventListeners(): void;
+    show(col: number, row: number, filterModes: FilterMode[]): void;
+    hide(): void;
+}

package/cjs/filter/filter-toolbar.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.FilterToolbar = void 0;
+
+const value_filter_1 = require("./value-filter"), condition_filter_1 = require("./condition-filter"), styles_1 = require("./styles");
+
+class FilterToolbar {
+    constructor(table, filterStateManager) {
+        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", 
+        this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, 
+        this.filterStateManager = filterStateManager, this.valueFilter = new value_filter_1.ValueFilter(this.table, this.filterStateManager), 
+        this.conditionFilter = new condition_filter_1.ConditionFilter(this.table, this.filterStateManager), 
+        this.filterMenuWidth = 300;
+    }
+    onTabSwitch(tab) {
+        this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(), 
+        this.valueFilter.hide());
+        const isValueTab = "byValue" === tab;
+        (0, styles_1.applyStyles)(this.filterTabByValue, styles_1.filterStyles.tabStyle(isValueTab)), 
+        (0, styles_1.applyStyles)(this.filterTabByCondition, styles_1.filterStyles.tabStyle(!isValueTab));
+    }
+    updateSelectedField(field) {
+        this.selectedField = field, this.valueFilter && this.valueFilter.setSelectedField(field), 
+        this.conditionFilter && this.conditionFilter.setSelectedField(field);
+    }
+    applyFilter(field) {
+        "byValue" === this.activeTab ? this.valueFilter.applyFilter(field) : "byCondition" === this.activeTab && this.conditionFilter.applyFilter(field), 
+        this.hide();
+    }
+    clearFilter(field) {
+        this.valueFilter && this.valueFilter.clearFilter(field), this.conditionFilter && this.conditionFilter.clearFilter(field), 
+        this.hide();
+    }
+    render(container) {
+        this.filterMenu = document.createElement("div"), (0, styles_1.applyStyles)(this.filterMenu, styles_1.filterStyles.filterMenu), 
+        this.filterMenu.style.width = `${this.filterMenuWidth}px`;
+        const filterTabsContainer = document.createElement("div");
+        (0, styles_1.applyStyles)(filterTabsContainer, styles_1.filterStyles.tabsContainer), 
+        this.filterTabByValue = document.createElement("button"), this.filterTabByValue.innerText = "按值筛选", 
+        (0, styles_1.applyStyles)(this.filterTabByValue, styles_1.filterStyles.tabStyle(!0)), 
+        this.filterTabByCondition = document.createElement("button"), this.filterTabByCondition.innerText = "按条件筛选", 
+        (0, styles_1.applyStyles)(this.filterTabByCondition, styles_1.filterStyles.tabStyle(!1)), 
+        filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
+        const footerContainer = document.createElement("div");
+        (0, styles_1.applyStyles)(footerContainer, styles_1.filterStyles.footerContainer), 
+        this.clearFilterOptionLink = document.createElement("a"), this.clearFilterOptionLink.href = "#", 
+        this.clearFilterOptionLink.innerText = "清除筛选", (0, styles_1.applyStyles)(this.clearFilterOptionLink, styles_1.filterStyles.clearLink);
+        const footerButtons = document.createElement("div");
+        this.cancelFilterButton = document.createElement("button"), this.cancelFilterButton.innerText = "取消", 
+        (0, styles_1.applyStyles)(this.cancelFilterButton, styles_1.filterStyles.footerButton(!1)), 
+        this.applyFilterButton = document.createElement("button"), this.applyFilterButton.innerText = "确认", 
+        (0, styles_1.applyStyles)(this.applyFilterButton, styles_1.filterStyles.footerButton(!0)), 
+        footerButtons.append(this.cancelFilterButton, this.applyFilterButton), footerContainer.append(this.clearFilterOptionLink, footerButtons), 
+        this.filterMenu.append(filterTabsContainer), this.valueFilter.render(this.filterMenu), 
+        this.conditionFilter.render(this.filterMenu), this.filterMenu.append(footerContainer), 
+        container.appendChild(this.filterMenu), this.attachEventListeners();
+    }
+    attachEventListeners() {
+        this.filterTabByValue.addEventListener("click", (() => {
+            this.onTabSwitch("byValue");
+        })), this.filterTabByCondition.addEventListener("click", (() => {
+            this.onTabSwitch("byCondition");
+        })), this.cancelFilterButton.addEventListener("click", (() => this.hide())), this.clearFilterOptionLink.addEventListener("click", (e => {
+            e.preventDefault(), this.clearFilter(this.selectedField);
+        })), this.applyFilterButton.addEventListener("click", (() => {
+            this.applyFilter(this.selectedField);
+        })), document.addEventListener("click", (() => {
+            this.isVisible && this.hide();
+        })), this.filterMenu.addEventListener("click", (e => {
+            e.stopPropagation();
+        }));
+    }
+    show(col, row, filterModes) {
+        this.filterModes = filterModes, this.filterModes.includes("byValue") ? this.filterModes.includes("byCondition") || (this.filterTabByCondition.style.display = "none", 
+        setTimeout((() => this.onTabSwitch("byValue")), 0)) : (this.filterTabByValue.style.display = "none", 
+        setTimeout((() => this.onTabSwitch("byCondition")), 0));
+        let left = 0, top = 0;
+        const canvasBounds = this.table.canvas.getBoundingClientRect(), cell = this.table.getMergeCellRect(col, row);
+        cell.right < this.filterMenuWidth ? (left = cell.left + canvasBounds.left, top = cell.bottom + canvasBounds.top) : (left = cell.right + canvasBounds.left - this.filterMenuWidth, 
+        top = cell.bottom + canvasBounds.top), this.filterMenu.style.display = "block", 
+        this.filterMenu.style.left = `${left}px`, this.filterMenu.style.top = `${top}px`;
+        const field = this.table.internalProps.layoutMap.getHeaderField(col, row);
+        this.updateSelectedField(field);
+        const currentFilter = this.filterStateManager.getFilterState(field);
+        currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue"), 
+        setTimeout((() => {
+            this.isVisible = !0;
+        }), 0);
+    }
+    hide() {
+        this.filterMenu.style.display = "none", this.isVisible = !1;
+    }
+}
+
+exports.FilterToolbar = FilterToolbar;
+//# sourceMappingURL=filter-toolbar.js.map

package/cjs/filter/filter-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/filter/filter-toolbar.ts"],"names":[],"mappings":"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","file":"filter-toolbar.js","sourcesContent":["import type * as VTable from '@visactor/vtable';\nimport type { FilterStateManager } from './filter-state-manager';\nimport { ValueFilter } from './value-filter';\nimport { ConditionFilter } from './condition-filter';\nimport { applyStyles, filterStyles } from './styles';\nimport { FilterMode } from './types';\n\n/**\n * 筛选工具栏，管理按值和按条件筛选组件\n */\nexport class FilterToolbar {\n  table: VTable.ListTable | VTable.PivotTable;\n  filterStateManager: FilterStateManager;\n  valueFilter: ValueFilter | null = null;\n  conditionFilter: ConditionFilter | null = null;\n  activeTab: 'byValue' | 'byCondition' = 'byValue';\n  isVisible: boolean = false;\n  selectedField: string | number | null = null;\n  filterModes: FilterMode[] = [];\n\n  private filterMenu: HTMLElement;\n  private filterMenuWidth: number;\n  private filterTabByValue: HTMLButtonElement;\n  private filterTabByCondition: HTMLButtonElement;\n  private clearFilterOptionLink: HTMLAnchorElement;\n  private cancelFilterButton: HTMLButtonElement;\n  private applyFilterButton: HTMLButtonElement;\n\n  constructor(table: VTable.ListTable | VTable.PivotTable, filterStateManager: FilterStateManager) {\n    this.table = table;\n    this.filterStateManager = filterStateManager;\n    this.valueFilter = new ValueFilter(this.table, this.filterStateManager);\n    this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager);\n\n    this.filterMenuWidth = 300; // 待优化，可能需要自适应内容的宽度\n  }\n\n  private onTabSwitch(tab: 'byValue' | 'byCondition'): void {\n    this.activeTab = tab;\n    if (tab === 'byValue') {\n      this.valueFilter.show();\n      this.conditionFilter.hide();\n    } else {\n      this.conditionFilter.show();\n      this.valueFilter.hide();\n    }\n\n    const isValueTab = tab === 'byValue';\n    applyStyles(this.filterTabByValue, filterStyles.tabStyle(isValueTab));\n    applyStyles(this.filterTabByCondition, filterStyles.tabStyle(!isValueTab));\n  }\n\n  private updateSelectedField(field: string | number): void {\n    this.selectedField = field;\n    // 通知筛选组件更新选中字段\n    if (this.valueFilter) {\n      this.valueFilter.setSelectedField(field);\n    }\n    if (this.conditionFilter) {\n      this.conditionFilter.setSelectedField(field);\n    }\n  }\n\n  private applyFilter(field: string | number): void {\n    if (this.activeTab === 'byValue') {\n      this.valueFilter.applyFilter(field);\n    } else if (this.activeTab === 'byCondition') {\n      this.conditionFilter.applyFilter(field);\n    }\n    this.hide();\n  }\n\n  private clearFilter(field: string | number): void {\n    if (this.valueFilter) {\n      this.valueFilter.clearFilter(field);\n    }\n    if (this.conditionFilter) {\n      this.conditionFilter.clearFilter(field);\n    }\n    this.hide();\n  }\n\n  render(container: HTMLElement): void {\n    // === 主容器 ===\n    this.filterMenu = document.createElement('div');\n    applyStyles(this.filterMenu, filterStyles.filterMenu);\n    this.filterMenu.style.width = `${this.filterMenuWidth}px`;\n\n    // === 筛选 Tab ===\n    const filterTabsContainer = document.createElement('div');\n    applyStyles(filterTabsContainer, filterStyles.tabsContainer);\n\n    this.filterTabByValue = document.createElement('button');\n    this.filterTabByValue.innerText = '按值筛选';\n    applyStyles(this.filterTabByValue, filterStyles.tabStyle(true));\n\n    this.filterTabByCondition = document.createElement('button');\n    this.filterTabByCondition.innerText = '按条件筛选';\n    applyStyles(this.filterTabByCondition, filterStyles.tabStyle(false));\n\n    filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);\n\n    // === 页脚（清除、取消、确定 筛选按钮） ===\n    const footerContainer = document.createElement('div');\n    applyStyles(footerContainer, filterStyles.footerContainer);\n\n    this.clearFilterOptionLink = document.createElement('a');\n    this.clearFilterOptionLink.href = '#';\n    this.clearFilterOptionLink.innerText = '清除筛选';\n    applyStyles(this.clearFilterOptionLink, filterStyles.clearLink);\n\n    const footerButtons = document.createElement('div');\n    this.cancelFilterButton = document.createElement('button');\n    this.cancelFilterButton.innerText = '取消';\n    applyStyles(this.cancelFilterButton, filterStyles.footerButton(false));\n\n    this.applyFilterButton = document.createElement('button');\n    this.applyFilterButton.innerText = '确认';\n    applyStyles(this.applyFilterButton, filterStyles.footerButton(true));\n\n    footerButtons.append(this.cancelFilterButton, this.applyFilterButton);\n    footerContainer.append(this.clearFilterOptionLink, footerButtons);\n\n    // --- 筛选器头部 Tab ---\n    this.filterMenu.append(filterTabsContainer);\n\n    // --- 筛选器内容 ---\n    this.valueFilter.render(this.filterMenu);\n    this.conditionFilter.render(this.filterMenu);\n\n    // --- 筛选器页脚 ---\n    this.filterMenu.append(footerContainer);\n\n    container.appendChild(this.filterMenu); // 将筛选器添加到 DOM 中\n    this.attachEventListeners();\n  }\n\n  attachEventListeners() {\n    // 按值筛选/按条件筛选的事件监听\n    this.filterTabByValue.addEventListener('click', () => {\n      this.onTabSwitch('byValue');\n    });\n\n    this.filterTabByCondition.addEventListener('click', () => {\n      this.onTabSwitch('byCondition');\n    });\n\n    this.cancelFilterButton.addEventListener('click', () => this.hide());\n\n    this.clearFilterOptionLink.addEventListener('click', e => {\n      e.preventDefault();\n      this.clearFilter(this.selectedField);\n    });\n\n    this.applyFilterButton.addEventListener('click', () => {\n      this.applyFilter(this.selectedField);\n    });\n\n    // 点击空白处整个筛选菜单可消失\n    document.addEventListener('click', () => {\n      if (this.isVisible) {\n        this.hide();\n      }\n    });\n\n    this.filterMenu.addEventListener('click', e => {\n      e.stopPropagation();\n    });\n  }\n\n  show(col: number, row: number, filterModes: FilterMode[]): void {\n    this.filterModes = filterModes;\n    if (!this.filterModes.includes('byValue')) {\n      this.filterTabByValue.style.display = 'none';\n      setTimeout(() => this.onTabSwitch('byCondition'), 0);\n    } else if (!this.filterModes.includes('byCondition')) {\n      this.filterTabByCondition.style.display = 'none';\n      setTimeout(() => this.onTabSwitch('byValue'), 0);\n    }\n\n    let left: number = 0;\n    let top: number = 0;\n    const canvasBounds = this.table.canvas.getBoundingClientRect();\n    const cell = this.table.getMergeCellRect(col, row);\n    if (cell.right < this.filterMenuWidth) {\n      // 无法把筛选菜单完整地显示在左侧，那么显示在右侧\n      left = cell.left + canvasBounds.left;\n      top = cell.bottom + canvasBounds.top;\n    } else {\n      // 筛选菜单默认显示在左侧\n      left = cell.right + canvasBounds.left - this.filterMenuWidth;\n      top = cell.bottom + canvasBounds.top;\n    }\n\n    this.filterMenu.style.display = 'block';\n    this.filterMenu.style.left = `${left}px`;\n    this.filterMenu.style.top = `${top}px`;\n\n    const field = this.table.internalProps.layoutMap.getHeaderField(col, row) as string | number;\n    this.updateSelectedField(field);\n\n    // 根据当前筛选配置自动选择正确的筛选标签页\n    const currentFilter = this.filterStateManager.getFilterState(field);\n    if (currentFilter && currentFilter.type === 'byCondition') {\n      this.onTabSwitch('byCondition');\n    } else {\n      this.onTabSwitch('byValue');\n    }\n\n    // 确保在事件冒泡完成后才设置 isVisible 为 true\n    setTimeout(() => {\n      this.isVisible = true;\n    }, 0);\n  }\n\n  hide(): void {\n    this.filterMenu.style.display = 'none';\n    this.isVisible = false;\n  }\n}\n"]}

package/cjs/filter/filter.d.ts

@@ -0,0 +1,26 @@
+import * as VTable from '@visactor/vtable';
+import { FilterEngine } from './filter-engine';
+import { FilterStateManager } from './filter-state-manager';
+import { FilterToolbar } from './filter-toolbar';
+import type { FilterOptions, FilterState } from './types';
+export declare class FilterPlugin implements VTable.plugins.IVTablePlugin {
+    id: string;
+    name: string;
+    runTime: ("icon_click" | "before_init" | "before_update_option")[];
+    pluginOptions: FilterOptions;
+    table: VTable.ListTable | VTable.PivotTable;
+    filterEngine: FilterEngine;
+    filterStateManager: FilterStateManager;
+    filterToolbar: FilterToolbar;
+    constructor(pluginOptions: FilterOptions);
+    run(...args: any[]): void;
+    update(): void;
+    private handleOptionUpdate;
+    private reapplyActiveFilters;
+    private validateFilterStatesAfterUpdate;
+    private updateFilterIcons;
+    shouldEnableFilterForColumn(field: number | string, column: VTable.ColumnDefine): boolean;
+    getFilterState(): any;
+    setFilterState(filterState: FilterState): void;
+    release(): void;
+}

package/cjs/filter/filter.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.FilterPlugin = void 0;
+
+const VTable = __importStar(require("@visactor/vtable")), filter_engine_1 = require("./filter-engine"), filter_state_manager_1 = require("./filter-state-manager"), filter_toolbar_1 = require("./filter-toolbar"), types_1 = require("./types");
+
+class FilterPlugin {
+    constructor(pluginOptions) {
+        var _a, _b, _c;
+        this.id = "filter", this.name = "Filter", this.runTime = [ VTable.TABLE_EVENT_TYPE.BEFORE_INIT, VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION, VTable.TABLE_EVENT_TYPE.ICON_CLICK ], 
+        this.id = null !== (_a = null == pluginOptions ? void 0 : pluginOptions.id) && void 0 !== _a ? _a : this.id, 
+        this.pluginOptions = pluginOptions, this.pluginOptions.filterIcon = null !== (_b = pluginOptions.filterIcon) && void 0 !== _b ? _b : {
+            name: "filter-icon",
+            type: "svg",
+            width: 20,
+            height: 20,
+            marginRight: 6,
+            positionType: VTable.TYPES.IconPosition.right,
+            cursor: "pointer",
+            svg: '<svg t="1752821809070" class="icon" viewBox="0 0 1664 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12092" width="200" height="200"><path d="M89.6 179.2A89.6 89.6 0 0 1 89.6 0h1408a89.6 89.6 0 0 1 0 179.2H89.6z m256 384a89.6 89.6 0 0 1 0-179.2h896a89.6 89.6 0 0 1 0 179.2h-896z m256 384a89.6 89.6 0 0 1 0-179.2h384a89.6 89.6 0 0 1 0 179.2h-384z" fill="#333333" p-id="12093"></path></svg>'
+        }, this.pluginOptions.filteringIcon = null !== (_c = pluginOptions.filteringIcon) && void 0 !== _c ? _c : {
+            name: "filtering-icon",
+            type: "svg",
+            width: 20,
+            height: 20,
+            marginRight: 6,
+            positionType: VTable.TYPES.IconPosition.right,
+            cursor: "pointer",
+            svg: '<svg t="1752821771292" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11926" width="200" height="200"><path d="M971.614323 53.05548L655.77935 412.054233C635.196622 435.434613 623.906096 465.509377 623.906096 496.583302v495.384307c0 28.975686-35.570152 43.063864-55.353551 21.781723l-159.865852-171.256294c-5.495389-5.895053-8.59279-13.688514-8.592789-21.781722V496.583302c0-31.073925-11.290526-61.148688-31.873254-84.429153L52.385677 53.05548C34.200936 32.472751 48.888611 0 76.365554 0h871.268892c27.476943 0 42.164618 32.472751 23.979877 53.05548z" p-id="11927"></path></svg>'
+        }, this.pluginOptions.filterModes && this.pluginOptions.filterModes.length || (this.pluginOptions.filterModes = [ "byValue", "byCondition" ]);
+    }
+    run(...args) {
+        var _a, _b, _c;
+        const eventArgs = args[0], runtime = args[1], table = args[2];
+        if (this.table = table, runtime === VTable.TABLE_EVENT_TYPE.BEFORE_INIT) this.filterEngine = new filter_engine_1.FilterEngine, 
+        this.filterStateManager = new filter_state_manager_1.FilterStateManager(this.table, this.filterEngine), 
+        this.filterToolbar = new filter_toolbar_1.FilterToolbar(this.table, this.filterStateManager), 
+        this.filterToolbar.render(document.body), this.updateFilterIcons(eventArgs.options); else if (runtime === VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) this.pluginOptions = Object.assign(Object.assign({}, this.pluginOptions), eventArgs.options.plugins.find((plugin => plugin.id === this.id)).pluginOptions), 
+        this.handleOptionUpdate(eventArgs.options); else if (runtime === VTable.TABLE_EVENT_TYPE.ICON_CLICK && "filter-icon" === eventArgs.name || "filtering-icon" === eventArgs.name) {
+            if (3 === (null === (_a = eventArgs.event) || void 0 === _a ? void 0 : _a.which) || 2 === (null === (_b = eventArgs.event) || void 0 === _b ? void 0 : _b.button) || 2 == (2 & (null === (_c = eventArgs.event) || void 0 === _c ? void 0 : _c.buttons))) return;
+            const col = eventArgs.col, row = eventArgs.row;
+            this.filterToolbar.isVisible ? this.filterToolbar.hide() : this.filterToolbar.show(col, row, this.pluginOptions.filterModes);
+        }
+    }
+    update() {
+        this.filterStateManager && this.reapplyActiveFilters();
+    }
+    handleOptionUpdate(options) {
+        const currentActiveFields = this.filterStateManager ? this.filterStateManager.getActiveFilterFields() : [];
+        this.filterStateManager && currentActiveFields.length > 0 && this.validateFilterStatesAfterUpdate(options, currentActiveFields), 
+        this.updateFilterIcons(options);
+    }
+    reapplyActiveFilters() {
+        this.filterStateManager.reapplyCurrentFilters();
+    }
+    validateFilterStatesAfterUpdate(options, activeFields) {
+        const columns = options.columns, fieldsToRemove = [];
+        activeFields.forEach((field => {
+            const column = columns.find((col => col.field === field));
+            column && this.shouldEnableFilterForColumn(field, column) || fieldsToRemove.push(field);
+        })), fieldsToRemove.forEach((field => {
+            this.filterStateManager.dispatch({
+                type: types_1.FilterActionType.REMOVE_FILTER,
+                payload: {
+                    field: field
+                }
+            });
+        }));
+    }
+    updateFilterIcons(options) {
+        options.columns.forEach((col => {
+            this.shouldEnableFilterForColumn(col.field, col) ? col.headerIcon = this.pluginOptions.filterIcon : delete col.headerIcon;
+        }));
+    }
+    shouldEnableFilterForColumn(field, column) {
+        if (!column.title) return !1;
+        const columnWithFilter = column;
+        return void 0 !== columnWithFilter.filter ? !!columnWithFilter.filter : this.pluginOptions.enableFilter ? this.pluginOptions.enableFilter(field, column) : void 0 === this.pluginOptions.defaultEnabled || this.pluginOptions.defaultEnabled;
+    }
+    getFilterState() {
+        if (!this.filterStateManager) return null;
+        const state = this.filterStateManager.getAllFilterStates(), serializedState = {};
+        return state.filters.forEach(((config, field) => {
+            serializedState[field] = {
+                enable: config.enable,
+                field: config.field,
+                type: config.type,
+                values: config.values,
+                operator: config.operator,
+                condition: config.condition
+            };
+        })), {
+            filters: serializedState
+        };
+    }
+    setFilterState(filterState) {
+        if (!this.filterStateManager || !filterState || !filterState.filters) return;
+        this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.CLEAR_ALL_FILTERS,
+            payload: {}
+        });
+        this.table.columns;
+        Object.entries(filterState.filters).forEach((([, config]) => {
+            config.enable && this.filterStateManager.dispatch({
+                type: types_1.FilterActionType.ADD_FILTER,
+                payload: {
+                    field: config.field,
+                    type: config.type,
+                    values: config.values,
+                    operator: config.operator,
+                    condition: config.condition,
+                    enable: !0
+                }
+            });
+        }));
+    }
+    release() {
+        this.table = null, this.filterEngine = null, this.filterStateManager = null, this.filterToolbar = null;
+    }
+}
+
+exports.FilterPlugin = FilterPlugin;
+//# sourceMappingURL=filter.js.map

package/cjs/filter/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/filter/filter.ts"],"names":[],"mappings":"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","file":"filter.js","sourcesContent":["import * as VTable from '@visactor/vtable';\nimport { FilterEngine } from './filter-engine';\nimport { FilterStateManager } from './filter-state-manager';\nimport { FilterToolbar } from './filter-toolbar';\nimport type { FilterOptions, FilterConfig, FilterState } from './types';\nimport { FilterActionType } from './types';\nimport type { ListTableConstructorOptions } from '@visactor/vtable';\n\n/**\n * 筛选插件，负责初始化筛选引擎、状态管理器和工具栏\n */\nexport class FilterPlugin implements VTable.plugins.IVTablePlugin {\n  id = `filter`;\n  name = 'Filter';\n  runTime = [\n    VTable.TABLE_EVENT_TYPE.BEFORE_INIT,\n    VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION,\n    VTable.TABLE_EVENT_TYPE.ICON_CLICK\n  ];\n\n  pluginOptions: FilterOptions;\n\n  table: VTable.ListTable | VTable.PivotTable;\n\n  filterEngine: FilterEngine;\n  filterStateManager: FilterStateManager;\n  filterToolbar: FilterToolbar;\n\n  constructor(pluginOptions: FilterOptions) {\n    this.id = pluginOptions?.id ?? this.id;\n    this.pluginOptions = pluginOptions;\n    this.pluginOptions.filterIcon = pluginOptions.filterIcon ?? {\n      name: 'filter-icon',\n      type: 'svg',\n      width: 20,\n      height: 20,\n      marginRight: 6,\n      positionType: VTable.TYPES.IconPosition.right,\n      cursor: 'pointer',\n      svg: '<svg t=\"1752821809070\" class=\"icon\" viewBox=\"0 0 1664 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12092\" width=\"200\" height=\"200\"><path d=\"M89.6 179.2A89.6 89.6 0 0 1 89.6 0h1408a89.6 89.6 0 0 1 0 179.2H89.6z m256 384a89.6 89.6 0 0 1 0-179.2h896a89.6 89.6 0 0 1 0 179.2h-896z m256 384a89.6 89.6 0 0 1 0-179.2h384a89.6 89.6 0 0 1 0 179.2h-384z\" fill=\"#333333\" p-id=\"12093\"></path></svg>'\n    };\n    this.pluginOptions.filteringIcon = pluginOptions.filteringIcon ?? {\n      name: 'filtering-icon',\n      type: 'svg',\n      width: 20,\n      height: 20,\n      marginRight: 6,\n      positionType: VTable.TYPES.IconPosition.right,\n      cursor: 'pointer',\n      svg: '<svg t=\"1752821771292\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"11926\" width=\"200\" height=\"200\"><path d=\"M971.614323 53.05548L655.77935 412.054233C635.196622 435.434613 623.906096 465.509377 623.906096 496.583302v495.384307c0 28.975686-35.570152 43.063864-55.353551 21.781723l-159.865852-171.256294c-5.495389-5.895053-8.59279-13.688514-8.592789-21.781722V496.583302c0-31.073925-11.290526-61.148688-31.873254-84.429153L52.385677 53.05548C34.200936 32.472751 48.888611 0 76.365554 0h871.268892c27.476943 0 42.164618 32.472751 23.979877 53.05548z\" p-id=\"11927\"></path></svg>'\n    };\n    if (!this.pluginOptions.filterModes || !this.pluginOptions.filterModes.length) {\n      this.pluginOptions.filterModes = ['byValue', 'byCondition'];\n    }\n  }\n\n  run(...args: any[]) {\n    const eventArgs = args[0];\n    const runtime = args[1];\n    const table: VTable.BaseTableAPI = args[2];\n    this.table = table as VTable.ListTable | VTable.PivotTable;\n\n    if (runtime === VTable.TABLE_EVENT_TYPE.BEFORE_INIT) {\n      this.filterEngine = new FilterEngine();\n      this.filterStateManager = new FilterStateManager(this.table, this.filterEngine);\n      this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager);\n\n      this.filterToolbar.render(document.body);\n      this.updateFilterIcons(eventArgs.options);\n    } else if (runtime === VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) {\n      this.pluginOptions = {\n        ...this.pluginOptions,\n        ...(eventArgs.options.plugins as FilterPlugin[]).find(plugin => plugin.id === this.id).pluginOptions\n      };\n      this.handleOptionUpdate(eventArgs.options);\n    } else if (\n      (runtime === VTable.TABLE_EVENT_TYPE.ICON_CLICK && eventArgs.name === 'filter-icon') ||\n      eventArgs.name === 'filtering-icon'\n    ) {\n      const isRightClick =\n        eventArgs.event?.which === 3 || eventArgs.event?.button === 2 || (eventArgs.event?.buttons & 2) === 2;\n      // 如果是右键点击，直接返回不处理\n      if (isRightClick) {\n        return;\n      }\n\n      const col = eventArgs.col;\n      const row = eventArgs.row;\n      if (this.filterToolbar.isVisible) {\n        this.filterToolbar.hide();\n      } else {\n        this.filterToolbar.show(col, row, this.pluginOptions.filterModes);\n      }\n    }\n  }\n\n  update() {\n    if (this.filterStateManager) {\n      this.reapplyActiveFilters();\n    }\n  }\n\n  /**\n   * 处理选项更新事件\n   */\n  private handleOptionUpdate(options: ListTableConstructorOptions): void {\n    const currentActiveFields = this.filterStateManager ? this.filterStateManager.getActiveFilterFields() : [];\n\n    // 验证筛选状态一致性\n    if (this.filterStateManager && currentActiveFields.length > 0) {\n      this.validateFilterStatesAfterUpdate(options, currentActiveFields);\n    }\n\n    // 更新筛选图标\n    this.updateFilterIcons(options);\n  }\n\n  /**\n   * 重新应用所有激活的筛选状态\n   * 在 updateOption 后调用，因为 updateOption 会全量更新表格\n   */\n  private reapplyActiveFilters(): void {\n    this.filterStateManager.reapplyCurrentFilters();\n  }\n\n  /**\n   * 验证更新后的筛选状态一致性\n   */\n  private validateFilterStatesAfterUpdate(\n    options: ListTableConstructorOptions,\n    activeFields: (string | number)[]\n  ): void {\n    const columns = options.columns;\n    const fieldsToRemove: (string | number)[] = [];\n\n    activeFields.forEach(field => {\n      const column = columns.find(col => col.field === field);\n\n      // 检查该列是否仍然应该启用筛选\n      if (!column || !this.shouldEnableFilterForColumn(field, column)) {\n        fieldsToRemove.push(field);\n      }\n    });\n\n    // 清除不再有效的筛选状态\n    fieldsToRemove.forEach(field => {\n      this.filterStateManager.dispatch({\n        type: FilterActionType.REMOVE_FILTER,\n        payload: { field }\n      });\n    });\n  }\n\n  /**\n   * 更新所有列的筛选图标状态\n   * 根据列的筛选启用状态，添加或移除筛选图标\n   */\n  private updateFilterIcons(options: ListTableConstructorOptions): void {\n    const columns = options.columns; // TODO: 待处理多行的情况，待扩展透视表类型\n    columns.forEach((col: VTable.ColumnDefine) => {\n      // 检查是否应该为这一列启用筛选功能\n      if (this.shouldEnableFilterForColumn(col.field as string | number, col)) {\n        col.headerIcon = this.pluginOptions.filterIcon;\n      } else {\n        // 如果不应该启用筛选，则移除 headerIcon\n        delete col.headerIcon;\n      }\n    });\n    // (this.table as VTable.ListTable).updateColumns(columns);\n  }\n\n  /**\n   * 判断指定列是否应该启用筛选功能\n   */\n  shouldEnableFilterForColumn(field: number | string, column: VTable.ColumnDefine): boolean {\n    // 如果是空白列，不适用筛选\n    if (!column.title) {\n      return false;\n    }\n\n    // 首先检查列级别的 filter 属性（最高优先级）\n    const columnWithFilter = column as any;\n    if (columnWithFilter.filter !== undefined) {\n      return !!columnWithFilter.filter;\n    }\n\n    // 如果有自定义的启用钩子函数，使用钩子函数的结果\n    if (this.pluginOptions.enableFilter) {\n      return this.pluginOptions.enableFilter(field, column);\n    }\n\n    // 如果没有钩子函数，使用默认启用配置\n    if (this.pluginOptions.defaultEnabled !== undefined) {\n      return this.pluginOptions.defaultEnabled;\n    }\n\n    // 默认情况，所有列都启用筛选\n    return true;\n  }\n\n  /**\n   * 获取当前的筛选状态\n   * 用于保存配置时获取筛选状态\n   */\n  getFilterState(): any {\n    if (!this.filterStateManager) {\n      return null;\n    }\n\n    const state = this.filterStateManager.getAllFilterStates();\n    const serializedState: Record<string | number, any> = {};\n\n    // 将 Map 转换为普通对象以便序列化\n    state.filters.forEach((config: FilterConfig, field: string | number) => {\n      serializedState[field] = {\n        enable: config.enable,\n        field: config.field,\n        type: config.type,\n        values: config.values,\n        operator: config.operator,\n        condition: config.condition\n      };\n    });\n\n    return {\n      filters: serializedState\n    };\n  }\n\n  /**\n   * 设置筛选状态\n   * 用于从保存的配置中恢复筛选状态\n   */\n  setFilterState(filterState: FilterState): void {\n    if (!this.filterStateManager || !filterState || !filterState.filters) {\n      console.warn('setFilterState: 无效的筛选状态或状态管理器未初始化');\n      return;\n    }\n\n    // 清除当前所有筛选\n    this.filterStateManager.dispatch({\n      type: FilterActionType.CLEAR_ALL_FILTERS,\n      payload: {}\n    });\n\n    const columns = (this.table as VTable.ListTable).columns;\n\n    // 恢复每个筛选配置\n    Object.entries(filterState.filters).forEach(([, config]: [string, any]) => {\n      if (config.enable) {\n        this.filterStateManager.dispatch({\n          type: FilterActionType.ADD_FILTER,\n          payload: {\n            field: config.field,\n            type: config.type,\n            values: config.values,\n            operator: config.operator,\n            condition: config.condition,\n            enable: true\n          }\n        });\n      }\n    });\n  }\n\n  release() {\n    this.table = null;\n    this.filterEngine = null;\n    this.filterStateManager = null;\n    this.filterToolbar = null;\n  }\n}\n"]}

package/cjs/filter/index.d.ts

@@ -0,0 +1,7 @@
+export { FilterEngine } from './filter-engine';
+export { FilterStateManager } from './filter-state-manager';
+export { ValueFilter } from './value-filter';
+export { ConditionFilter } from './condition-filter';
+export { FilterToolbar } from './filter-toolbar';
+export * from './types';
+export * from './filter';

package/cjs/filter/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.FilterToolbar = exports.ConditionFilter = exports.ValueFilter = exports.FilterStateManager = exports.FilterEngine = void 0;
+
+var filter_engine_1 = require("./filter-engine");
+
+Object.defineProperty(exports, "FilterEngine", {
+    enumerable: !0,
+    get: function() {
+        return filter_engine_1.FilterEngine;
+    }
+});
+
+var filter_state_manager_1 = require("./filter-state-manager");
+
+Object.defineProperty(exports, "FilterStateManager", {
+    enumerable: !0,
+    get: function() {
+        return filter_state_manager_1.FilterStateManager;
+    }
+});
+
+var value_filter_1 = require("./value-filter");
+
+Object.defineProperty(exports, "ValueFilter", {
+    enumerable: !0,
+    get: function() {
+        return value_filter_1.ValueFilter;
+    }
+});
+
+var condition_filter_1 = require("./condition-filter");
+
+Object.defineProperty(exports, "ConditionFilter", {
+    enumerable: !0,
+    get: function() {
+        return condition_filter_1.ConditionFilter;
+    }
+});
+
+var filter_toolbar_1 = require("./filter-toolbar");
+
+Object.defineProperty(exports, "FilterToolbar", {
+    enumerable: !0,
+    get: function() {
+        return filter_toolbar_1.FilterToolbar;
+    }
+}), __exportStar(require("./types"), exports), __exportStar(require("./filter"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/filter/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AAItB,0CAAwB;AACxB,2CAAyB","file":"index.js","sourcesContent":["export { FilterEngine } from './filter-engine';\nexport { FilterStateManager } from './filter-state-manager';\nexport { ValueFilter } from './value-filter';\nexport { ConditionFilter } from './condition-filter';\nexport { FilterToolbar } from './filter-toolbar';\n\n// export { createElement, applyStyles } from './styles';\n\nexport * from './types';\nexport * from './filter';\n"]}

package/cjs/filter/styles.d.ts

@@ -0,0 +1,126 @@
+export declare const filterStyles: {
+    filterMenu: {
+        display: string;
+        position: string;
+        backgroundColor: string;
+        border: string;
+        boxShadow: string;
+        zIndex: string;
+    };
+    filterPanel: {
+        padding: string;
+        display: string;
+    };
+    searchContainer: {
+        padding: string;
+    };
+    searchInput: {
+        width: string;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        fontSize: string;
+        boxSizing: string;
+    };
+    optionsContainer: {
+        maxHeight: string;
+        overflowY: string;
+        marginTop: string;
+    };
+    optionItem: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        padding: string;
+    };
+    optionLabel: {
+        display: string;
+        alignItems: string;
+        cursor: string;
+        flexGrow: string;
+        fontWeight: string;
+    };
+    checkbox: {
+        marginRight: string;
+    };
+    countSpan: {
+        color: string;
+        fontSize: string;
+    };
+    tabsContainer: {
+        display: string;
+        justifyContent: string;
+        borderBottom: string;
+    };
+    tabStyle: (isActive: boolean) => {
+        backgroundColor: string;
+        border: string;
+        flex: string;
+        padding: string;
+        cursor: string;
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        borderBottom: string;
+    };
+    footerContainer: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        padding: string;
+        borderTop: string;
+        backgroundColor: string;
+    };
+    footerButton: (isPrimary: boolean) => {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        marginLeft: string;
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+    };
+    clearLink: {
+        color: string;
+        textDecoration: string;
+    };
+    buttonStyle: (isPrimary?: boolean) => {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        marginLeft: string;
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+    };
+    conditionContainer: {
+        marginBottom: string;
+        padding: string;
+    };
+    formLabel: {
+        display: string;
+        marginBottom: string;
+        fontWeight: string;
+    };
+    operatorSelect: {
+        width: string;
+        padding: string;
+        marginBottom: string;
+        border: string;
+        borderRadius: string;
+        boxSizing: string;
+    };
+    rangeInputContainer: {
+        display: string;
+        alignItems: string;
+        gap: string;
+    };
+    addLabel: {
+        display: string;
+        padding: string;
+    };
+};
+export declare function applyStyles(element: HTMLElement, styles: Record<string, string>): void;
+export declare function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, attributes?: Record<string, string>, children?: (HTMLElement | string)[]): HTMLElementTagNameMap[K];