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

package/es/filter/filter-toolbar.js

@@ -0,0 +1,90 @@
+import { ValueFilter } from "./value-filter";
+
+import { ConditionFilter } from "./condition-filter";
+
+import { applyStyles, filterStyles } from "./styles";
+
+export 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 ValueFilter(this.table, this.filterStateManager), 
+        this.conditionFilter = new 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;
+        applyStyles(this.filterTabByValue, filterStyles.tabStyle(isValueTab)), applyStyles(this.filterTabByCondition, 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"), applyStyles(this.filterMenu, filterStyles.filterMenu), 
+        this.filterMenu.style.width = `${this.filterMenuWidth}px`;
+        const filterTabsContainer = document.createElement("div");
+        applyStyles(filterTabsContainer, filterStyles.tabsContainer), this.filterTabByValue = document.createElement("button"), 
+        this.filterTabByValue.innerText = "按值筛选", applyStyles(this.filterTabByValue, filterStyles.tabStyle(!0)), 
+        this.filterTabByCondition = document.createElement("button"), this.filterTabByCondition.innerText = "按条件筛选", 
+        applyStyles(this.filterTabByCondition, filterStyles.tabStyle(!1)), filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
+        const footerContainer = document.createElement("div");
+        applyStyles(footerContainer, filterStyles.footerContainer), this.clearFilterOptionLink = document.createElement("a"), 
+        this.clearFilterOptionLink.href = "#", this.clearFilterOptionLink.innerText = "清除筛选", 
+        applyStyles(this.clearFilterOptionLink, filterStyles.clearLink);
+        const footerButtons = document.createElement("div");
+        this.cancelFilterButton = document.createElement("button"), this.cancelFilterButton.innerText = "取消", 
+        applyStyles(this.cancelFilterButton, filterStyles.footerButton(!1)), this.applyFilterButton = document.createElement("button"), 
+        this.applyFilterButton.innerText = "确认", applyStyles(this.applyFilterButton, 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;
+    }
+}
+//# sourceMappingURL=filter-toolbar.js.map

package/es/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/es/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/es/filter/filter.js

@@ -0,0 +1,125 @@
+import * as VTable from "@visactor/vtable";
+
+import { FilterEngine } from "./filter-engine";
+
+import { FilterStateManager } from "./filter-state-manager";
+
+import { FilterToolbar } from "./filter-toolbar";
+
+import { FilterActionType } from "./types";
+
+export 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 FilterEngine, 
+        this.filterStateManager = new FilterStateManager(this.table, this.filterEngine), 
+        this.filterToolbar = new 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: 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: FilterActionType.CLEAR_ALL_FILTERS,
+            payload: {}
+        });
+        this.table.columns;
+        Object.entries(filterState.filters).forEach((([, config]) => {
+            config.enable && this.filterStateManager.dispatch({
+                type: 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;
+    }
+}
+//# sourceMappingURL=filter.js.map

package/es/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/es/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/es/filter/index.js

@@ -0,0 +1,14 @@
+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";
+//# sourceMappingURL=index.js.map

package/es/filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC","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/es/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];

package/es/filter/styles.js

@@ -0,0 +1,140 @@
+export const filterStyles = {
+    filterMenu: {
+        display: "none",
+        position: "absolute",
+        backgroundColor: "white",
+        border: "1px solid #ccc",
+        boxShadow: "0 4px 8px rgba(0,0,0,0.15)",
+        zIndex: "100"
+    },
+    filterPanel: {
+        padding: "10px",
+        display: "block"
+    },
+    searchContainer: {
+        padding: "5px"
+    },
+    searchInput: {
+        width: "100%",
+        padding: "8px 10px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        fontSize: "14px",
+        boxSizing: "border-box"
+    },
+    optionsContainer: {
+        maxHeight: "200px",
+        overflowY: "auto",
+        marginTop: "10px"
+    },
+    optionItem: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "8px 5px"
+    },
+    optionLabel: {
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+        flexGrow: "1",
+        fontWeight: "normal"
+    },
+    checkbox: {
+        marginRight: "10px"
+    },
+    countSpan: {
+        color: "#888",
+        fontSize: "12px"
+    },
+    tabsContainer: {
+        display: "flex",
+        justifyContent: "space-around",
+        borderBottom: "1px solid #e0e0e0"
+    },
+    tabStyle: isActive => ({
+        backgroundColor: "transparent",
+        border: "none",
+        flex: "1",
+        padding: "10px 15px",
+        cursor: "pointer",
+        fontSize: "14px",
+        fontWeight: isActive ? "bold" : "normal",
+        color: isActive ? "#007bff" : "#666",
+        borderBottom: isActive ? "3px solid #007bff" : "2px solid transparent"
+    }),
+    footerContainer: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "10px 15px",
+        borderTop: "1px solid #e0e0e0",
+        backgroundColor: "#f8f9fa"
+    },
+    footerButton: isPrimary => ({
+        padding: "6px 12px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        cursor: "pointer",
+        marginLeft: "5px",
+        backgroundColor: isPrimary ? "#007bff" : "white",
+        color: isPrimary ? "white" : "#333",
+        borderColor: isPrimary ? "#007bff" : "#ccc"
+    }),
+    clearLink: {
+        color: "#007bff",
+        textDecoration: "none"
+    },
+    buttonStyle: (isPrimary = !1) => ({
+        padding: "6px 12px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        cursor: "pointer",
+        marginLeft: "5px",
+        backgroundColor: isPrimary ? "#007bff" : "white",
+        color: isPrimary ? "white" : "#333",
+        borderColor: isPrimary ? "#007bff" : "#ccc"
+    }),
+    conditionContainer: {
+        marginBottom: "15px",
+        padding: "10px"
+    },
+    formLabel: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: "bold"
+    },
+    operatorSelect: {
+        width: "100%",
+        padding: "8px",
+        marginBottom: "15px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        boxSizing: "border-box"
+    },
+    rangeInputContainer: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+    },
+    addLabel: {
+        display: "none",
+        padding: "0 5px"
+    }
+};
+
+export function applyStyles(element, styles) {
+    Object.entries(styles).forEach((([prop, value]) => {
+        element.style[prop] = value;
+    }));
+}
+
+export function createElement(tag, attributes = {}, children = []) {
+    const element = document.createElement(tag);
+    return Object.entries(attributes).forEach((([key, value]) => {
+        element.setAttribute(key, value);
+    })), children.forEach((child => {
+        "string" == typeof child ? element.appendChild(document.createTextNode(child)) : element.appendChild(child);
+    })), element;
+}
+//# sourceMappingURL=styles.js.map

package/es/filter/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/filter/styles.ts"],"names":[],"mappings":"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","file":"styles.js","sourcesContent":["/**\n * 筛选组件样式定义\n */\nexport const filterStyles = {\n  // 筛选菜单\n  filterMenu: {\n    display: 'none',\n    position: 'absolute',\n    backgroundColor: 'white',\n    border: '1px solid #ccc',\n    boxShadow: '0 4px 8px rgba(0,0,0,0.15)',\n    zIndex: '100'\n  },\n\n  // 筛选面板\n  filterPanel: {\n    padding: '10px',\n    display: 'block'\n  },\n\n  // 搜索容器\n  searchContainer: {\n    padding: '5px'\n  },\n\n  // 搜索输入框\n  searchInput: {\n    width: '100%',\n    padding: '8px 10px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    fontSize: '14px',\n    boxSizing: 'border-box'\n  },\n\n  // 选项容器\n  optionsContainer: {\n    maxHeight: '200px',\n    overflowY: 'auto',\n    marginTop: '10px'\n  },\n\n  // 筛选选项项\n  optionItem: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: '8px 5px'\n  },\n\n  // 筛选选项标签\n  optionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    cursor: 'pointer',\n    flexGrow: '1',\n    fontWeight: 'normal'\n  },\n\n  // 复选框\n  checkbox: {\n    marginRight: '10px'\n  },\n\n  // 计数标签\n  countSpan: {\n    color: '#888',\n    fontSize: '12px'\n  },\n\n  // 标签容器\n  tabsContainer: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    borderBottom: '1px solid #e0e0e0'\n  },\n\n  // 标签样式\n  tabStyle: (isActive: boolean) => ({\n    backgroundColor: 'transparent',\n    border: 'none',\n    flex: '1',\n    padding: '10px 15px',\n    cursor: 'pointer',\n    fontSize: '14px',\n    fontWeight: isActive ? 'bold' : 'normal',\n    color: isActive ? '#007bff' : '#666',\n    borderBottom: isActive ? '3px solid #007bff' : '2px solid transparent'\n  }),\n\n  // 页脚容器\n  footerContainer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: '10px 15px',\n    borderTop: '1px solid #e0e0e0',\n    backgroundColor: '#f8f9fa'\n  },\n\n  footerButton: (isPrimary: boolean) => ({\n    padding: '6px 12px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    marginLeft: '5px',\n    backgroundColor: isPrimary ? '#007bff' : 'white',\n    color: isPrimary ? 'white' : '#333',\n    borderColor: isPrimary ? '#007bff' : '#ccc'\n  }),\n\n  // 清除链接\n  clearLink: {\n    color: '#007bff',\n    textDecoration: 'none'\n  },\n\n  // 按钮样式\n  buttonStyle: (isPrimary: boolean = false) => ({\n    padding: '6px 12px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    marginLeft: '5px',\n    backgroundColor: isPrimary ? '#007bff' : 'white',\n    color: isPrimary ? 'white' : '#333',\n    borderColor: isPrimary ? '#007bff' : '#ccc'\n  }),\n\n  // === 条件筛选相关样式 ===\n\n  // 条件筛选容器\n  conditionContainer: {\n    marginBottom: '15px',\n    padding: '10px'\n  },\n\n  // 表单标签样式\n  formLabel: {\n    display: 'block',\n    marginBottom: '8px',\n    fontWeight: 'bold'\n  },\n\n  // 操作符选择框样式\n  operatorSelect: {\n    width: '100%',\n    padding: '8px',\n    marginBottom: '15px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    boxSizing: 'border-box'\n  },\n\n  rangeInputContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px'\n  },\n\n  addLabel: {\n    display: 'none',\n    padding: '0 5px'\n  }\n};\n\n/**\n * 应用样式到DOM元素\n */\nexport function applyStyles(element: HTMLElement, styles: Record<string, string>) {\n  Object.entries(styles).forEach(([prop, value]) => {\n    element.style[prop as any] = value;\n  });\n}\n\n/**\n * 创建DOM元素的辅助函数\n */\nexport function createElement<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  attributes: Record<string, string> = {},\n  children: (HTMLElement | string)[] = []\n): HTMLElementTagNameMap[K] {\n  const element = document.createElement(tag);\n\n  Object.entries(attributes).forEach(([key, value]) => {\n    element.setAttribute(key, value);\n  });\n\n  children.forEach(child => {\n    if (typeof child === 'string') {\n      element.appendChild(document.createTextNode(child));\n    } else {\n      element.appendChild(child);\n    }\n  });\n\n  return element;\n}\n"]}