@visactor/vtable-plugins 1.22.7-alpha.1 → 1.22.7-alpha.11

package/cjs/filter/types.d.ts

@@ -8,7 +8,13 @@ export interface FilterOptions {
     filterModes?: FilterMode[];
     styles?: FilterStyles;
     conditionCategories?: FilterOperatorCategoryOption[];
-    syncCheckboxCheckedState?: boolean;
+    checkboxItemFormat?: (rawValue: any, formatValue: any) => any;
+    syncFilterItemsState?: boolean;
+    onFilterRecordsEnd?: (records: any[]) => any[];
+}
+export interface FilterOperatorCategoryOption {
+    value: FilterOperatorCategory;
+    label: string;
 }
 export type FilterMode = 'byValue' | 'byCondition';
 export interface FilterState {
@@ -56,10 +62,7 @@ export declare enum FilterOperatorCategory {
     CHECKBOX = "checkbox",
     RADIO = "radio"
 }
-export interface FilterOperatorCategoryOption {
-    value: FilterOperatorCategory;
-    label: string;
-}
+export type FilterListener = (state: FilterState, action?: FilterAction) => void;
 interface StaticStyles {
     filterMenu?: Record<string, string>;
     filterPanel?: Record<string, string>;
@@ -85,5 +88,4 @@ interface FunctionStyles {
     buttonStyle?: (isPrimary?: boolean) => Record<string, string>;
 }
 export type FilterStyles = StaticStyles & FunctionStyles;
-export type FilterListener = (state: FilterState, action?: FilterAction) => void;
 export {};

package/cjs/filter/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/filter/types.ts"],"names":[],"mappings":";;;AA2CA,IAAY,gBAQX;AARD,WAAY,gBAAgB;IAC1B,mEAAU,CAAA;IACV,yEAAa,CAAA;IACb,yEAAa,CAAA;IACb,yEAAa,CAAA;IACb,2EAAc,CAAA;IACd,iFAAiB,CAAA;IACjB,yEAAa,CAAA;AACf,CAAC,EARW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAQ3B;AA2CD,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,uCAAa,CAAA;IACb,2CAAiB,CAAA;IACjB,yCAAe,CAAA;IACf,+CAAqB,CAAA;IACrB,yCAAe,CAAA;AACjB,CAAC,EAPW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAOjC","file":"types.js","sourcesContent":["import type { TYPES } from '@visactor/vtable';\n\nexport interface FilterOptions {\n  /** 筛选器 ID，用于唯一标识筛选器 */\n  id?: string;\n  /** 筛选器图标 */\n  filterIcon?: TYPES.ColumnIconOption;\n  /** 筛选器激活图标 */\n  filteringIcon?: TYPES.ColumnIconOption;\n  /** 筛选功能启用钩子函数，返回指定列是否启用筛选功能 */\n  enableFilter?: (field: number | string, column: TYPES.ColumnDefine) => boolean;\n  /** 默认是否启用筛选（当 enableFilter 未定义时使用） */\n  defaultEnabled?: boolean;\n  /** 是否展示按条件筛选，按值筛选 UI */\n  filterModes?: FilterMode[];\n  /** 筛选器样式 */\n  styles?: FilterStyles;\n  /** 筛选器操作符分类 */\n  conditionCategories?: FilterOperatorCategoryOption[];\n  // /** 参与筛选的数据 */\n  // customFilterData?: (dataSource: any[]) => boolean;\n  /** 多个筛选器之间是否联动\n   * @default true\n   */\n  syncCheckboxCheckedState?: boolean;\n}\n\nexport type FilterMode = 'byValue' | 'byCondition';\n\nexport interface FilterState {\n  filters: Map<string | number, FilterConfig>;\n  // activeFilters: string[];  // 激活的筛选器的 ID 列表\n}\n\nexport interface FilterConfig {\n  enable: boolean; // 是否启用筛选\n  field: string | number; // 对应表格列，同时作为筛选配置的唯一标识\n  type: 'byValue' | 'byCondition'; // 筛选类型\n  values?: any[]; // 按值筛选时的值列表\n  operator?: FilterOperator; // 按条件筛选时的操作符\n  condition?: any; // 按条件筛选时的具体条件\n}\n\nexport enum FilterActionType {\n  ADD_FILTER,\n  REMOVE_FILTER,\n  UPDATE_FILTER,\n  ENABLE_FILTER,\n  DISABLE_FILTER,\n  CLEAR_ALL_FILTERS,\n  APPLY_FILTERS\n}\n\nexport interface FilterAction {\n  type: FilterActionType;\n  payload: any;\n}\n\nexport interface ValueFilterOptionDom {\n  id: string;\n  originalValue: any[];\n  itemContainer: HTMLDivElement;\n  checkbox: HTMLInputElement;\n  countSpan: HTMLSpanElement;\n}\n\nexport type FilterOperator =\n  // 通用\n  | 'equals'\n  | 'notEquals'\n  // 数值\n  | 'greaterThan'\n  | 'lessThan'\n  | 'greaterThanOrEqual'\n  | 'lessThanOrEqual'\n  | 'between'\n  | 'notBetween'\n  // 文本\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'notStartsWith'\n  | 'endsWith'\n  | 'notEndsWith'\n  // 复选框 | 单选框\n  | 'isChecked'\n  | 'isUnchecked';\n\nexport interface OperatorOption {\n  value: FilterOperator;\n  label: string;\n  category: FilterOperatorCategory;\n}\n\nexport enum FilterOperatorCategory {\n  ALL = 'all',\n  TEXT = 'text',\n  NUMBER = 'number',\n  COLOR = 'color',\n  CHECKBOX = 'checkbox',\n  RADIO = 'radio'\n}\n\nexport interface FilterOperatorCategoryOption {\n  value: FilterOperatorCategory;\n  label: string;\n}\n\n/**\n * 筛选组件样式类型定义\n */\n\n// 静态样式类型\ninterface StaticStyles {\n  filterMenu?: Record<string, string>;\n  filterPanel?: Record<string, string>;\n  searchContainer?: Record<string, string>;\n  searchInput?: Record<string, string>;\n  optionsContainer?: Record<string, string>;\n  optionItem?: Record<string, string>;\n  optionLabel?: Record<string, string>;\n  checkbox?: Record<string, string>;\n  countSpan?: Record<string, string>;\n  tabsContainer?: Record<string, string>;\n  footerContainer?: Record<string, string>;\n  clearLink?: Record<string, string>;\n  conditionContainer?: Record<string, string>;\n  formLabel?: Record<string, string>;\n  operatorSelect?: Record<string, string>;\n  rangeInputContainer?: Record<string, string>;\n  addLabel?: Record<string, string>;\n}\n\n// 函数样式类型\ninterface FunctionStyles {\n  tabStyle?: (isActive: boolean) => Record<string, string>;\n  footerButton?: (isPrimary: boolean) => Record<string, string>;\n  buttonStyle?: (isPrimary?: boolean) => Record<string, string>;\n}\n\n// 完整的筛选样式类型\nexport type FilterStyles = StaticStyles & FunctionStyles;\n\n// 事件监听类型\nexport type FilterListener = (state: FilterState, action?: FilterAction) => void;\n"]}
+{"version":3,"sources":["../src/filter/types.ts"],"names":[],"mappings":";;;AAkDA,IAAY,gBAQX;AARD,WAAY,gBAAgB;IAC1B,mEAAU,CAAA;IACV,yEAAa,CAAA;IACb,yEAAa,CAAA;IACb,yEAAa,CAAA;IACb,2EAAc,CAAA;IACd,iFAAiB,CAAA;IACjB,yEAAa,CAAA;AACf,CAAC,EARW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAQ3B;AA2CD,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,uCAAa,CAAA;IACb,2CAAiB,CAAA;IACjB,yCAAe,CAAA;IACf,+CAAqB,CAAA;IACrB,yCAAe,CAAA;AACjB,CAAC,EAPW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAOjC","file":"types.js","sourcesContent":["import type { TYPES } from '@visactor/vtable';\n\nexport interface FilterOptions {\n  /** 筛选器 ID，用于唯一标识筛选器 */\n  id?: string;\n  /** 筛选器图标 */\n  filterIcon?: TYPES.ColumnIconOption;\n  /** 筛选器激活图标 */\n  filteringIcon?: TYPES.ColumnIconOption;\n  /** 筛选功能启用钩子函数，返回指定列是否启用筛选功能 */\n  enableFilter?: (field: number | string, column: TYPES.ColumnDefine) => boolean;\n  /** 默认是否启用筛选（当 enableFilter 未定义时使用） */\n  defaultEnabled?: boolean;\n  /** 是否展示按条件筛选，按值筛选 UI */\n  filterModes?: FilterMode[];\n  /** 筛选器样式 */\n  styles?: FilterStyles;\n  /** 自定义筛选分类 */\n  conditionCategories?: FilterOperatorCategoryOption[];\n  /** 筛选选项是否展示为原始值 */\n  checkboxItemFormat?: (rawValue: any, formatValue: any) => any;\n  /** 多个筛选器之间是否联动\n   * @default true\n   */\n  syncFilterItemsState?: boolean;\n  /** 筛选记录结束回调 */\n  onFilterRecordsEnd?: (records: any[]) => any[];\n}\n\nexport interface FilterOperatorCategoryOption {\n  value: FilterOperatorCategory;\n  label: string;\n}\n\nexport type FilterMode = 'byValue' | 'byCondition';\n\nexport interface FilterState {\n  filters: Map<string | number, FilterConfig>;\n  // activeFilters: string[];  // 激活的筛选器的 ID 列表\n}\n\nexport interface FilterConfig {\n  enable: boolean; // 是否启用筛选\n  field: string | number; // 对应表格列，同时作为筛选配置的唯一标识\n  type: 'byValue' | 'byCondition'; // 筛选类型\n  values?: any[]; // 按值筛选时的值列表\n  operator?: FilterOperator; // 按条件筛选时的操作符\n  condition?: any; // 按条件筛选时的具体条件\n}\n\nexport enum FilterActionType {\n  ADD_FILTER,\n  REMOVE_FILTER,\n  UPDATE_FILTER,\n  ENABLE_FILTER,\n  DISABLE_FILTER,\n  CLEAR_ALL_FILTERS,\n  APPLY_FILTERS\n}\n\nexport interface FilterAction {\n  type: FilterActionType;\n  payload: any;\n}\n\nexport interface ValueFilterOptionDom {\n  id: string;\n  originalValue: any[];\n  itemContainer: HTMLDivElement;\n  checkbox: HTMLInputElement;\n  countSpan: HTMLSpanElement;\n}\n\nexport type FilterOperator =\n  // 通用\n  | 'equals'\n  | 'notEquals'\n  // 数值\n  | 'greaterThan'\n  | 'lessThan'\n  | 'greaterThanOrEqual'\n  | 'lessThanOrEqual'\n  | 'between'\n  | 'notBetween'\n  // 文本\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'notStartsWith'\n  | 'endsWith'\n  | 'notEndsWith'\n  // 复选框 | 单选框\n  | 'isChecked'\n  | 'isUnchecked';\n\nexport interface OperatorOption {\n  value: FilterOperator;\n  label: string;\n  category: FilterOperatorCategory;\n}\n\nexport enum FilterOperatorCategory {\n  ALL = 'all',\n  TEXT = 'text',\n  NUMBER = 'number',\n  COLOR = 'color',\n  CHECKBOX = 'checkbox',\n  RADIO = 'radio'\n}\n\nexport type FilterListener = (state: FilterState, action?: FilterAction) => void;\n\n/**\n * 筛选组件样式类型定义\n */\n\n// 静态样式类型\ninterface StaticStyles {\n  filterMenu?: Record<string, string>;\n  filterPanel?: Record<string, string>;\n  searchContainer?: Record<string, string>;\n  searchInput?: Record<string, string>;\n  optionsContainer?: Record<string, string>;\n  optionItem?: Record<string, string>;\n  optionLabel?: Record<string, string>;\n  checkbox?: Record<string, string>;\n  countSpan?: Record<string, string>;\n  tabsContainer?: Record<string, string>;\n  footerContainer?: Record<string, string>;\n  clearLink?: Record<string, string>;\n  conditionContainer?: Record<string, string>;\n  formLabel?: Record<string, string>;\n  operatorSelect?: Record<string, string>;\n  rangeInputContainer?: Record<string, string>;\n  addLabel?: Record<string, string>;\n}\n\n// 函数样式类型\ninterface FunctionStyles {\n  tabStyle?: (isActive: boolean) => Record<string, string>;\n  footerButton?: (isPrimary: boolean) => Record<string, string>;\n  buttonStyle?: (isPrimary?: boolean) => Record<string, string>;\n}\n\n// 完整的筛选样式类型\nexport type FilterStyles = StaticStyles & FunctionStyles;\n"]}

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

@@ -1,14 +1,16 @@
 import type { ListTable, PivotTable } from '@visactor/vtable';
-import type { FilterConfig, FilterStyles, FilterOptions } from './types';
+import type { FilterOptions, FilterStyles } from './types';
 import type { FilterStateManager } from './filter-state-manager';
 export declare class ValueFilter {
     private table;
     private filterStateManager;
     private pluginOptions;
     private styles;
-    private uniqueKeys;
-    private displayToRawValueMap;
     private selectedField;
+    private selectedKeys;
+    private candidateKeys;
+    private formatFnCache;
+    private toUnformattedCache;
     private valueFilterOptionList;
     private filterByValuePanel;
     private searchContainer;
@@ -17,29 +19,27 @@ export declare class ValueFilter {
     private selectAllLabel;
     private filterByValueSearchInput;
     private selectAllCheckbox;
+    private totalCountSpan;
     private filterItemsContainer;
+    private _onInputKeyUpHandler;
+    private _onCheckboxChangeHandler;
     constructor(table: ListTable | PivotTable, filterStateManager: FilterStateManager, pluginOptions: FilterOptions);
-    updateUI(filterState: FilterConfig): void;
     setSelectedField(fieldId: string | number): void;
-    collectUniqueColumnValues(fieldId: string | number, forceCollect?: boolean): void;
-    private updateCandidateCounts;
-    private onValueSelect;
-    private isValueVisible;
+    private getFormatFnCache;
+    private collectCandidateKeysForUnfilteredColumn;
+    private collectCandidateKeysForFilteredColumn;
     private toggleSelectAll;
+    private syncSelectAllCheckbox;
     private onSearch;
     private initFilterStateFromTableData;
-    private syncCheckboxesWithFilterState;
-    private syncSelectAllWithFilterState;
     applyFilter(fieldId?: string | number): void;
     clearFilter(fieldId: string | number): void;
     render(container: HTMLElement): void;
-    updatePluginOptions(pluginOptions: FilterOptions): void;
     updateStyles(styles: FilterStyles): void;
     private renderFilterOptions;
-    bindEventForFilterByValue(): void;
-    updateCheckboxUI(field: string | number): void;
-    updateCheckboxState(field: string | number): void;
+    private bindEventForFilterByValue;
     show(): void;
     hide(): void;
     clearSearchInputValue(): void;
+    destroy(): void;
 }

package/cjs/filter/value-filter.js

@@ -8,131 +8,65 @@ const vutils_1 = require("@visactor/vutils"), types_1 = require("./types"), styl
 
 class ValueFilter {
     constructor(table, filterStateManager, pluginOptions) {
-        this.uniqueKeys = new Map, this.displayToRawValueMap = new Map, this.valueFilterOptionList = new Map, 
-        this.table = table, this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
-        this.styles = pluginOptions.styles, this.filterStateManager.subscribe((state => {
-            const filterState = state.filters.get(this.selectedField);
-            filterState && "byValue" === filterState.type && this.updateUI(filterState);
-        }));
-    }
-    updateUI(filterState) {
-        this.syncCheckboxesWithFilterState(filterState), this.syncSelectAllWithFilterState(filterState);
+        this.selectedKeys = new Map, this.candidateKeys = new Map, this.formatFnCache = new Map, 
+        this.toUnformattedCache = new Map, this.valueFilterOptionList = new Map, this.table = table, 
+        this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
+        this.styles = pluginOptions.styles || {};
     }
     setSelectedField(fieldId) {
-        this.selectedField = fieldId, this.collectUniqueColumnValues(fieldId);
+        this.selectedField = fieldId;
     }
-    collectUniqueColumnValues(fieldId, forceCollect = !1) {
-        var _a, _b, _c;
-        if (this.uniqueKeys.has(fieldId) && !forceCollect) return;
-        const displayToRawMap = new Map;
-        let targetCol = -1;
-        for (let col = 0; col < this.table.colCount; col++) {
-            for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
-                const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
-                if (bodyInfo && bodyInfo.field === fieldId) {
-                    targetCol = col;
-                    break;
+    getFormatFnCache(fieldId) {
+        let formatFn = this.formatFnCache.get(fieldId);
+        if (null != formatFn) return formatFn;
+        const headerAddress = this.table.internalProps.layoutMap.getHeaderCellAddressByField(String(fieldId)), bodyInfo = this.table.internalProps.layoutMap.getBody(null == headerAddress ? void 0 : headerAddress.col, null == headerAddress ? void 0 : headerAddress.row);
+        return formatFn = bodyInfo && "fieldFormat" in bodyInfo && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat : bodyInfo && "format" in bodyInfo && "function" == typeof bodyInfo.format ? bodyInfo.format : record => record[fieldId], 
+        this.formatFnCache.set(fieldId, formatFn), formatFn;
+    }
+    collectCandidateKeysForUnfilteredColumn(fieldId) {
+        var _a, _b;
+        const syncFilterItemsState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncFilterItemsState) || void 0 === _b || _b, countMap = new Map;
+        let records = [];
+        records = syncFilterItemsState ? this.table.internalProps.dataSource.records : this.table.internalProps.records;
+        const formatFn = this.getFormatFnCache(fieldId), toUnformatted = new Map;
+        records.forEach((record => {
+            if ((0, vutils_1.isValid)(record)) {
+                const originalValue = record[fieldId], formattedValue = formatFn(record);
+                if (null != formattedValue) {
+                    countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1);
+                    const unformattedSet = toUnformatted.get(formattedValue);
+                    null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
                 }
             }
-            if (-1 !== targetCol) break;
-        }
-        const records = this.table.internalProps.records, recordsLength = records.length;
-        for (let i = 0; i < recordsLength; i++) {
-            let rawValue, displayValue;
-            if (-1 !== targetCol) {
-                const row = this.table.columnHeaderLevelCount + i, currentRecord = records[i];
-                if (null == currentRecord) continue;
-                rawValue = currentRecord[fieldId];
-                const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
-                displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
-                    [fieldId]: rawValue
-                }) : rawValue;
-            } else rawValue = records[i][fieldId], displayValue = rawValue;
-            null == rawValue || displayToRawMap.has(displayValue) || (displayToRawMap.set(displayValue, rawValue), 
-            this.displayToRawValueMap.has(fieldId) && !(null === (_a = this.displayToRawValueMap.get(fieldId)) || void 0 === _a ? void 0 : _a.has(displayValue)) && (null === (_c = null === (_b = this.filterStateManager.getFilterState(fieldId)) || void 0 === _b ? void 0 : _b.values) || void 0 === _c ? void 0 : _c.length) > 0 && this.filterStateManager.getFilterState(fieldId).values.push(rawValue));
-        }
-        this.displayToRawValueMap.set(fieldId, displayToRawMap);
-        const uniqueValues = Array.from(displayToRawMap.entries()).map((([displayValue, rawValue]) => ({
-            value: displayValue,
-            count: 0,
-            rawValue: rawValue
-        })));
-        this.uniqueKeys.set(fieldId, uniqueValues);
+        })), this.candidateKeys.set(fieldId, countMap), this.toUnformattedCache.set(fieldId, toUnformatted);
     }
-    updateCandidateCounts(fieldId) {
-        const uniqueValues = this.uniqueKeys.get(fieldId);
-        if (!uniqueValues) return;
-        const filter = this.filterStateManager.getFilterState(fieldId), dataSource = (null == filter ? void 0 : filter.enable) ? this.table.internalProps.records : this.table.internalProps.dataSource;
-        let targetCol = -1;
-        for (let col = 0; col < this.table.colCount; col++) {
-            for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
-                const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
-                if (bodyInfo && bodyInfo.field === fieldId) {
-                    targetCol = col;
-                    break;
+    collectCandidateKeysForFilteredColumn(candidateField) {
+        var _a, _b;
+        const syncFilterItemsState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncFilterItemsState) || void 0 === _b || _b, filteredFields = this.filterStateManager.getActiveFilterFields().filter((field => field !== candidateField)), toUnformatted = new Map, formatFn = this.getFormatFnCache(candidateField), countMap = new Map;
+        let records = [];
+        if (syncFilterItemsState) {
+            records = this.table.internalProps.records.filter((record => filteredFields.every((field => this.selectedKeys.get(field).has(record[field])))));
+        } else records = this.table.internalProps.records;
+        records.forEach((record => {
+            if ((0, vutils_1.isValid)(record)) {
+                const originalValue = record[candidateField], formattedValue = formatFn(record);
+                if (countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1), null != formattedValue) {
+                    const unformattedSet = toUnformatted.get(formattedValue);
+                    null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
                 }
             }
-            if (-1 !== targetCol) break;
-        }
-        const dataLength = dataSource.length, countMap = new Map;
-        for (let i = 0; i < dataLength; i++) {
-            let displayValue;
-            if (-1 !== targetCol) {
-                const row = this.table.columnHeaderLevelCount + i;
-                row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row));
-            } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i);
-            null != displayValue && countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
-        }
-        uniqueValues.forEach((item => {
-            item.count = countMap.get(item.value) || 0;
-        }));
+        })), this.candidateKeys.set(candidateField, countMap), this.toUnformattedCache.set(candidateField, toUnformatted);
     }
-    onValueSelect(fieldId, displayValue, selected) {
-        const displayToRawMap = this.displayToRawValueMap.get(fieldId), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue, filter = this.filterStateManager.getFilterState(fieldId);
-        let updatedValues;
-        filter ? (updatedValues = selected ? [ ...filter.values || [], rawValue ] : (filter.values || []).filter((v => v !== rawValue)), 
-        this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.UPDATE_FILTER,
-            payload: {
-                field: fieldId,
-                values: updatedValues
-            }
-        })) : (updatedValues = selected ? [ rawValue ] : [], this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: fieldId,
-                type: "byValue",
-                values: updatedValues
-            }
+    toggleSelectAll(fieldId, selected) {
+        this.valueFilterOptionList.get(fieldId).forEach((option => {
+            option.checkbox.checked = selected;
         }));
     }
-    isValueVisible(displayValue, keyword) {
-        if (!keyword) return !0;
-        const filterKeywords = keyword.toUpperCase().split(" ").filter((s => s)), txtValue = String(displayValue).toUpperCase();
-        return filterKeywords.some((keyword => txtValue.includes(keyword)));
-    }
-    toggleSelectAll(fieldId, selected) {
-        const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId), stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId), displayToRawMap = this.displayToRawValueMap.get(fieldId), visibleRawValues = stableCandidates.filter((candidate => this.isValueVisible(candidate.value, currentKeyword))).map((candidate => displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value)), filter = this.filterStateManager.getFilterState(fieldId), currentValues = new Set((null == filter ? void 0 : filter.values) || []);
-        let updatedValues;
-        updatedValues = selected ? Array.from(new Set([ ...currentValues, ...visibleRawValues ])) : Array.from(currentValues).filter((value => !visibleRawValues.includes(value))), 
-        filter ? this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.UPDATE_FILTER,
-            payload: {
-                field: fieldId,
-                values: updatedValues
-            }
-        }) : this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: fieldId,
-                type: "byValue",
-                values: updatedValues,
-                enable: !0
-            }
-        });
+    syncSelectAllCheckbox(fieldId) {
+        const options = this.valueFilterOptionList.get(fieldId) || [], allChecked = options.every((o => o.checkbox.checked)), noneChecked = options.every((o => !o.checkbox.checked));
+        this.selectAllCheckbox.checked = allChecked, this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked;
     }
     onSearch(fieldId, value) {
-        this.filterStateManager.updateSearchKeyword(fieldId, value);
         const items = this.valueFilterOptionList.get(fieldId), filterKeywords = value.toUpperCase().split(" ").filter((s => s));
         for (const item of items) {
             const txtValue = item.id.toUpperCase() || "", match = filterKeywords.some((keyword => txtValue.includes(keyword))), isVisible = 0 === filterKeywords.length || match;
@@ -141,83 +75,64 @@ class ValueFilter {
     }
     initFilterStateFromTableData(fieldId) {
         var _a, _b, _c, _d;
-        const filter = this.filterStateManager.getFilterState(fieldId), isEnable = null == filter ? void 0 : filter.enable, syncCheckboxCheckedState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncCheckboxCheckedState) || void 0 === _b || _b;
-        if (isEnable) {
-            const selectedRawValues = new Set, displayToRawMap = this.displayToRawValueMap.get(fieldId);
-            let targetCol = -1;
-            for (let col = 0; col < this.table.colCount; col++) {
-                for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
-                    const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
-                    if (bodyInfo && bodyInfo.field === fieldId) {
-                        targetCol = col;
-                        break;
-                    }
-                }
-                if (-1 !== targetCol) break;
-            }
-            const currentLength = this.table.internalProps.dataSource.length;
-            for (let i = 0; i < currentLength; i++) {
-                let displayValue, rawValue;
-                if (-1 !== targetCol) {
-                    const row = this.table.columnHeaderLevelCount + i;
-                    row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row), 
-                    rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
-                } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), 
-                rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-                null != rawValue && selectedRawValues.add(rawValue);
-            }
-            !(0, vutils_1.arrayEqual)(filter.values, Array.from(selectedRawValues)) && syncCheckboxCheckedState && this.filterStateManager.dispatch({
-                type: types_1.FilterActionType.UPDATE_FILTER,
-                payload: {
-                    field: fieldId,
-                    values: Array.from(selectedRawValues)
-                }
-            });
-        } else {
-            const availableRawValues = (null === (_d = null === (_c = this.uniqueKeys.get(fieldId)) || void 0 === _c ? void 0 : _c.filter((item => !syncCheckboxCheckedState || item.count > 0))) || void 0 === _d ? void 0 : _d.map((item => item.rawValue)).filter((v => null != v))) || [];
+        const isHasFilteredState = this.filterStateManager.getActiveFilterFields(), isValueFilter = "byValue" === (null === (_a = this.filterStateManager.getFilterState(fieldId)) || void 0 === _a ? void 0 : _a.type);
+        if (isHasFilteredState && isValueFilter) return;
+        const selectedValues = new Set, originalValues = new Set;
+        this.table.internalProps.records.forEach((record => {
+            (0, vutils_1.isValid)(record) && originalValues.add(record[fieldId]);
+        }));
+        if (null === (_c = null === (_b = this.pluginOptions) || void 0 === _b ? void 0 : _b.syncFilterItemsState) || void 0 === _c || _c) {
+            this.table.internalProps.dataSource.records.forEach((record => {
+                (0, vutils_1.isValid)(record) && selectedValues.add(record[fieldId]);
+            }));
+            !(0, vutils_1.arrayEqual)(Array.from(originalValues), Array.from(selectedValues)) && (this.selectedKeys.set(fieldId, selectedValues), 
             this.filterStateManager.dispatch({
                 type: types_1.FilterActionType.ADD_FILTER,
                 payload: {
                     field: fieldId,
                     type: "byValue",
-                    values: availableRawValues,
-                    enable: !1
+                    values: Array.from(selectedValues),
+                    enable: !0
                 }
-            });
+            }));
+        } else {
+            const selectedRules = null === (_d = this.filterStateManager.getFilterState(fieldId)) || void 0 === _d ? void 0 : _d.values;
+            if (selectedRules) {
+                !(0, vutils_1.arrayEqual)(Array.from(originalValues), selectedRules) && (this.selectedKeys.set(fieldId, new Set(selectedRules)), 
+                this.filterStateManager.dispatch({
+                    type: types_1.FilterActionType.ADD_FILTER,
+                    payload: {
+                        field: fieldId,
+                        type: "byValue",
+                        values: selectedRules,
+                        enable: !0,
+                        shouldKeepUnrelatedState: !0
+                    }
+                }));
+            } else this.selectedKeys.set(fieldId, originalValues);
         }
     }
-    syncCheckboxesWithFilterState(filter) {
-        if (!filter) return;
-        const selectedRawValues = filter.values || [], displayToRawMap = this.displayToRawValueMap.get(filter.field), optionDomList = this.valueFilterOptionList.get(filter.field);
-        null == optionDomList || optionDomList.forEach((optionDom => {
-            const displayValue = optionDom.originalValue, rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-            optionDom.checkbox.checked = selectedRawValues.some((v => v === rawValue));
-        }));
-    }
-    syncSelectAllWithFilterState(filter) {
-        var _a;
-        if (!filter || !filter.values) return this.selectAllCheckbox.checked = !1, void (this.selectAllCheckbox.indeterminate = !1);
-        const uniqueValuesCount = (null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.length) || 0;
-        0 === uniqueValuesCount || 0 === filter.values.length ? (this.selectAllCheckbox.checked = !1, 
-        this.selectAllCheckbox.indeterminate = !1) : filter.values.length === uniqueValuesCount ? (this.selectAllCheckbox.checked = !0, 
-        this.selectAllCheckbox.indeterminate = !1) : (this.selectAllCheckbox.checked = !1, 
-        this.selectAllCheckbox.indeterminate = !0);
-    }
     applyFilter(fieldId = this.selectedField) {
-        var _a;
-        const allSelectedValues = this.filterStateManager.getFilterState(fieldId).values;
-        allSelectedValues.length >= 0 && allSelectedValues.length < (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.length) ? this.filterStateManager.dispatch({
+        var _a, _b;
+        const options = this.valueFilterOptionList.get(fieldId);
+        if (!options || 0 === options.length) return;
+        const selections = options.map((option => option.checkbox.checked ? option.originalValue : null)).filter((key => null !== key)).flat();
+        this.selectedKeys.set(fieldId, new Set(selections));
+        const syncFilterItemsState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncFilterItemsState) || void 0 === _b || _b;
+        selections.length >= 0 && selections.length < this.valueFilterOptionList.get(fieldId).length || !syncFilterItemsState ? this.filterStateManager.dispatch({
             type: types_1.FilterActionType.APPLY_FILTERS,
             payload: {
                 field: fieldId,
                 type: "byValue",
-                values: allSelectedValues,
-                enable: !0
+                values: selections,
+                enable: !0,
+                shouldKeepUnrelatedState: !syncFilterItemsState
             }
         }) : this.filterStateManager.dispatch({
             type: types_1.FilterActionType.REMOVE_FILTER,
             payload: {
-                field: fieldId
+                field: fieldId,
+                type: "byValue"
             }
         });
     }
@@ -231,25 +146,25 @@ class ValueFilter {
     }
     render(container) {
         var _a;
-        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, this.styles.filterPanel), 
+        const filterStyles = this.styles;
+        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, filterStyles.filterPanel), 
         this.searchContainer = document.createElement("div"), (0, styles_1.applyStyles)(this.searchContainer, this.styles.searchContainer), 
         this.filterByValueSearchInput = document.createElement("input"), this.filterByValueSearchInput.type = "text", 
-        this.filterByValueSearchInput.placeholder = (null === (_a = this.styles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
-        (0, styles_1.applyStyles)(this.filterByValueSearchInput, this.styles.searchInput), 
+        this.filterByValueSearchInput.placeholder = (null === (_a = filterStyles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
+        (0, styles_1.applyStyles)(this.filterByValueSearchInput, filterStyles.searchInput), 
         this.searchContainer.appendChild(this.filterByValueSearchInput), this.optionsContainer = document.createElement("div"), 
         (0, styles_1.applyStyles)(this.optionsContainer, this.styles.optionsContainer), 
         this.selectAllItemDiv = document.createElement("div"), (0, styles_1.applyStyles)(this.selectAllItemDiv, this.styles.optionItem), 
         this.selectAllLabel = document.createElement("label"), (0, styles_1.applyStyles)(this.selectAllLabel, this.styles.optionLabel), 
         this.selectAllCheckbox = document.createElement("input"), this.selectAllCheckbox.type = "checkbox", 
-        this.selectAllCheckbox.checked = !0, (0, styles_1.applyStyles)(this.selectAllCheckbox, this.styles.checkbox), 
-        this.selectAllLabel.append(this.selectAllCheckbox, " 全选"), this.selectAllItemDiv.appendChild(this.selectAllLabel), 
-        this.filterItemsContainer = document.createElement("div"), this.optionsContainer.append(this.selectAllItemDiv, this.filterItemsContainer), 
+        this.selectAllCheckbox.checked = !0, (0, styles_1.applyStyles)(this.selectAllCheckbox, filterStyles.checkbox), 
+        this.totalCountSpan = document.createElement("span"), this.totalCountSpan.textContent = "", 
+        (0, styles_1.applyStyles)(this.totalCountSpan, filterStyles.countSpan), this.selectAllLabel.append(this.selectAllCheckbox, " 全选"), 
+        this.selectAllItemDiv.appendChild(this.selectAllLabel), this.filterItemsContainer = document.createElement("div"), 
+        this.optionsContainer.append(this.selectAllItemDiv, this.filterItemsContainer), 
         this.filterByValuePanel.append(this.searchContainer, this.optionsContainer), container.appendChild(this.filterByValuePanel), 
         this.bindEventForFilterByValue();
     }
-    updatePluginOptions(pluginOptions) {
-        this.pluginOptions = pluginOptions, this.styles = pluginOptions.styles, this.updateStyles(pluginOptions.styles);
-    }
     updateStyles(styles) {
         var _a;
         (0, styles_1.applyStyles)(this.filterByValuePanel, styles.filterPanel), (0, styles_1.applyStyles)(this.searchContainer, styles.searchContainer), 
@@ -259,68 +174,57 @@ class ValueFilter {
         (0, styles_1.applyStyles)(this.selectAllLabel, styles.optionLabel), (0, styles_1.applyStyles)(this.selectAllCheckbox, styles.checkbox);
     }
     renderFilterOptions(field) {
-        var _a, _b;
+        var _a, _b, _c;
+        const filterStyles = this.styles;
         this.filterItemsContainer.innerHTML = "", this.valueFilterOptionList.delete(field), 
         this.valueFilterOptionList.set(field, []);
-        const selectedRawValues = (null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.values) || [], selectedRawValueSet = new Set(selectedRawValues), itemDomList = [];
-        null === (_b = this.uniqueKeys.get(field)) || void 0 === _b || _b.forEach((({value: value, count: count, rawValue: rawValue}) => {
-            const itemDiv = document.createElement("div");
-            (0, styles_1.applyStyles)(itemDiv, this.styles.optionItem), itemDiv.style.display = "flex";
+        let totalCount = 0, allChecked = !0, noneChecked = !0;
+        const selectedKeysSet = this.selectedKeys.get(field), itemDomList = [], isFiltered = null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.enable, toUnformatted = this.toUnformattedCache.get(field), candidates = this.candidateKeys.get(field);
+        if (!candidates || 0 === candidates.size) return;
+        const candidatesArr = [ ...candidates.entries() ], sortedCandidatesArr = "number" == typeof candidatesArr[0][0] ? null === (_b = [ ...candidatesArr ]) || void 0 === _b ? void 0 : _b.sort((([a], [b]) => Number(a) - Number(b))) : null === (_c = [ ...candidatesArr ]) || void 0 === _c ? void 0 : _c.sort((([a], [b]) => String(a).localeCompare(String(b))));
+        null == sortedCandidatesArr || sortedCandidatesArr.forEach((([val, count]) => {
+            var _a, _b;
+            totalCount += count;
+            const unformattedArr = Array.from(toUnformatted.get(val) || new Set), itemDiv = document.createElement("div");
+            (0, styles_1.applyStyles)(itemDiv, filterStyles.optionItem), itemDiv.style.display = "flex";
             const label = document.createElement("label");
-            (0, styles_1.applyStyles)(label, this.styles.optionLabel);
+            (0, styles_1.applyStyles)(label, filterStyles.optionLabel);
             const checkbox = document.createElement("input");
-            checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), 
-            (0, styles_1.applyStyles)(checkbox, this.styles.checkbox);
+            checkbox.type = "checkbox", checkbox.value = String(val), checkbox.checked = !isFiltered || unformattedArr.some((v => null == selectedKeysSet ? void 0 : selectedKeysSet.has(v))), 
+            (0, styles_1.applyStyles)(checkbox, filterStyles.checkbox), checkbox.checked ? noneChecked = !1 : allChecked = !1;
             const countSpan = document.createElement("span");
-            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, this.styles.countSpan), 
-            label.append(checkbox, ` ${rawValue}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
+            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, filterStyles.countSpan), 
+            label.append(checkbox, ` ${(null === (_b = (_a = this.pluginOptions).checkboxItemFormat) || void 0 === _b ? void 0 : _b.call(_a, val, unformattedArr)) || val}`), 
+            itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
             const itemDom = {
-                id: String(value),
-                originalValue: value,
+                id: String(val),
+                originalValue: unformattedArr,
                 itemContainer: itemDiv,
                 checkbox: checkbox,
                 countSpan: countSpan
             };
             itemDomList.push(itemDom);
-        })), this.valueFilterOptionList.set(field, itemDomList);
+        })), this.valueFilterOptionList.set(field, itemDomList), this.selectAllCheckbox.checked = allChecked, 
+        this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked, this.totalCountSpan.textContent = String(totalCount);
     }
     bindEventForFilterByValue() {
-        this.filterByValuePanel.addEventListener("keyup", (event => {
+        this._onInputKeyUpHandler = event => {
             const target = event.target;
             if (target instanceof HTMLInputElement && "text" === target.type) {
                 const value = target.value;
                 this.onSearch(this.selectedField, value);
             }
-        })), this.filterByValuePanel.addEventListener("change", (event => {
+        }, this._onCheckboxChangeHandler = event => {
             const target = event.target;
-            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.valueFilterOptionList.get(this.selectedField).forEach((item => item.checkbox.checked = target.checked)) : this.updateCheckboxUI(this.selectedField));
-        }));
-    }
-    updateCheckboxUI(field) {
-        var _a, _b;
-        const checkedItem = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)), uncheckedItem = null === (_b = this.valueFilterOptionList.get(field)) || void 0 === _b ? void 0 : _b.filter((item => !item.checkbox.checked));
-        (0, vutils_1.isValid)(checkedItem) && (0, vutils_1.isValid)(uncheckedItem) && (0 !== checkedItem.length && 0 !== uncheckedItem.length ? this.selectAllCheckbox.indeterminate = !0 : (this.selectAllCheckbox.indeterminate = !1, 
-        this.selectAllCheckbox.checked = 0 === uncheckedItem.length));
-    }
-    updateCheckboxState(field) {
-        var _a;
-        const originalValues = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)).map((item => item.originalValue)), displayToRawMap = this.displayToRawValueMap.get(field), rawValues = originalValues.map((displayValue => displayToRawMap ? displayToRawMap.get(displayValue) : displayValue));
-        this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: field,
-                type: "byValue",
-                values: rawValues
-            }
-        });
+            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.toggleSelectAll(this.selectedField, this.selectAllCheckbox.checked) : this.syncSelectAllCheckbox(this.selectedField));
+        }, this.filterByValuePanel.addEventListener("keyup", this._onInputKeyUpHandler), 
+        this.filterByValuePanel.addEventListener("change", this._onCheckboxChangeHandler);
     }
     show() {
-        this.collectUniqueColumnValues(this.selectedField), this.updateCandidateCounts(this.selectedField), 
-        this.initFilterStateFromTableData(this.selectedField);
-        const uniqueValues = this.uniqueKeys.get(this.selectedField), displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
-        uniqueValues && displayToRawMap && this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap), 
-        this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), this.renderFilterOptions(this.selectedField), 
-        this.updateCheckboxUI(this.selectedField), this.filterByValuePanel.style.display = "block";
+        var _a;
+        (null === (_a = this.filterStateManager.getFilterState(this.selectedField)) || void 0 === _a ? void 0 : _a.enable) ? this.collectCandidateKeysForFilteredColumn(this.selectedField) : this.collectCandidateKeysForUnfilteredColumn(this.selectedField), 
+        this.initFilterStateFromTableData(this.selectedField), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
+        this.renderFilterOptions(this.selectedField), this.filterByValuePanel.style.display = "block";
     }
     hide() {
         this.filterByValuePanel.style.display = "none";
@@ -328,6 +232,20 @@ class ValueFilter {
     clearSearchInputValue() {
         this.filterByValueSearchInput.value = "";
     }
+    destroy() {
+        if (this.filterByValuePanel && (this._onInputKeyUpHandler && this.filterByValuePanel.removeEventListener("keyup", this._onInputKeyUpHandler), 
+        this._onCheckboxChangeHandler && this.filterByValuePanel.removeEventListener("change", this._onCheckboxChangeHandler)), 
+        this._onInputKeyUpHandler = void 0, this._onCheckboxChangeHandler = void 0, this.filterByValuePanel) {
+            const parent = this.filterByValuePanel.parentElement;
+            parent ? parent.removeChild(this.filterByValuePanel) : this.filterByValuePanel.remove();
+        }
+        this.filterItemsContainer && (this.filterItemsContainer.innerHTML = ""), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
+        this.selectedKeys && this.selectedKeys.clear(), this.candidateKeys && this.candidateKeys.clear(), 
+        this.formatFnCache && this.formatFnCache.clear(), this.toUnformattedCache && this.toUnformattedCache.clear(), 
+        this.valueFilterOptionList && this.valueFilterOptionList.clear(), this.filterByValuePanel = void 0, 
+        this.filterByValueSearchInput = void 0, this.selectAllCheckbox = void 0, this.totalCountSpan = void 0, 
+        this.filterItemsContainer = void 0;
+    }
 }
 
 exports.ValueFilter = ValueFilter;