@visactor/vtable-plugins 1.22.4-alpha.5 → 1.22.4-alpha.7

package/dist/vtable-plugins.js

@@ -10111,7 +10111,7 @@ ${recordsStr}
             if (this.shouldApplyFilter(action)) {
                 this.applyFilters();
             }
-            this.notifyListeners();
+            this.notifyListeners(action);
         }
         subscribe(listener) {
             this.listeners.push(listener);
@@ -10119,8 +10119,8 @@ ${recordsStr}
                 this.listeners = this.listeners.filter(l => l !== listener);
             };
         }
-        notifyListeners() {
-            this.listeners.forEach(listener => listener(this.state));
+        notifyListeners(action) {
+            this.listeners.forEach(listener => listener(this.state, action));
         }
         reduce(state, action) {
             const { type, payload } = action;
@@ -10831,8 +10831,46 @@ ${recordsStr}
         hide() {
             this.filterByValuePanel.style.display = 'none';
         }
+        clearSearchInputValue() {
+            this.filterByValueSearchInput.value = '';
+        }
     }
 
+    const categories = [
+        { value: exports.FilterOperatorCategory.ALL, label: '全部' },
+        { value: exports.FilterOperatorCategory.TEXT, label: '文本' },
+        { value: exports.FilterOperatorCategory.NUMBER, label: '数值' },
+        { value: exports.FilterOperatorCategory.COLOR, label: '颜色' },
+        { value: exports.FilterOperatorCategory.CHECKBOX, label: '复选框' },
+        { value: exports.FilterOperatorCategory.RADIO, label: '单选框' }
+    ];
+    const operators = [
+        { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.ALL },
+        { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.ALL },
+        { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'greaterThan', label: '大于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'lessThan', label: '小于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'greaterThanOrEqual', label: '大于等于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'lessThanOrEqual', label: '小于等于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'between', label: '介于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'notBetween', label: '不介于', category: exports.FilterOperatorCategory.NUMBER },
+        { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'contains', label: '包含', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'notContains', label: '不包含', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'startsWith', label: '开头是', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'notStartsWith', label: '开头不是', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'endsWith', label: '结尾是', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'notEndsWith', label: '结尾不是', category: exports.FilterOperatorCategory.TEXT },
+        { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.COLOR },
+        { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.COLOR },
+        { value: 'isChecked', label: '已选中', category: exports.FilterOperatorCategory.CHECKBOX },
+        { value: 'isUnchecked', label: '未选中', category: exports.FilterOperatorCategory.CHECKBOX },
+        { value: 'isChecked', label: '已选中', category: exports.FilterOperatorCategory.RADIO },
+        { value: 'isUnchecked', label: '未选中', category: exports.FilterOperatorCategory.RADIO }
+    ];
+
     class ConditionFilter {
         table;
         filterStateManager;
@@ -10844,44 +10882,14 @@ ${recordsStr}
         valueInputMax;
         categorySelect;
         currentCategory = exports.FilterOperatorCategory.ALL;
-        operators = [
-            { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.ALL },
-            { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.ALL },
-            { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'greaterThan', label: '大于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'lessThan', label: '小于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'greaterThanOrEqual', label: '大于等于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'lessThanOrEqual', label: '小于等于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'between', label: '介于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'notBetween', label: '不介于', category: exports.FilterOperatorCategory.NUMBER },
-            { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'contains', label: '包含', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'notContains', label: '不包含', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'startsWith', label: '开头是', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'notStartsWith', label: '开头不是', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'endsWith', label: '结尾是', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'notEndsWith', label: '结尾不是', category: exports.FilterOperatorCategory.TEXT },
-            { value: 'equals', label: '等于', category: exports.FilterOperatorCategory.COLOR },
-            { value: 'notEquals', label: '不等于', category: exports.FilterOperatorCategory.COLOR },
-            { value: 'isChecked', label: '已选中', category: exports.FilterOperatorCategory.CHECKBOX },
-            { value: 'isUnchecked', label: '未选中', category: exports.FilterOperatorCategory.CHECKBOX },
-            { value: 'isChecked', label: '已选中', category: exports.FilterOperatorCategory.RADIO },
-            { value: 'isUnchecked', label: '未选中', category: exports.FilterOperatorCategory.RADIO }
-        ];
-        categories = [
-            { value: exports.FilterOperatorCategory.ALL, label: '全部' },
-            { value: exports.FilterOperatorCategory.TEXT, label: '文本' },
-            { value: exports.FilterOperatorCategory.NUMBER, label: '数值' },
-            { value: exports.FilterOperatorCategory.COLOR, label: '颜色' },
-            { value: exports.FilterOperatorCategory.CHECKBOX, label: '复选框' },
-            { value: exports.FilterOperatorCategory.RADIO, label: '单选框' }
-        ];
-        constructor(table, filterStateManager, styles) {
+        categories = [];
+        operators = [];
+        constructor(table, filterStateManager, styles, conditionCategories) {
             this.table = table;
             this.styles = styles;
             this.filterStateManager = filterStateManager;
+            this.categories = conditionCategories;
+            this.operators = operators;
         }
         setSelectedField(fieldId) {
             this.selectedField = fieldId;
@@ -10896,7 +10904,9 @@ ${recordsStr}
             let filteredOperators;
             if (this.currentCategory === exports.FilterOperatorCategory.ALL) {
                 const uniqueOperators = new Map();
-                this.operators.forEach(op => {
+                this.operators
+                    .filter(op => this.categories.map(cat => cat.value).includes(op.category))
+                    .forEach(op => {
                     if (!uniqueOperators.has(op.value)) {
                         uniqueOperators.set(op.value, op);
                     }
@@ -11161,12 +11171,12 @@ ${recordsStr}
         clearFilterOptionLink;
         cancelFilterButton;
         applyFilterButton;
-        constructor(table, filterStateManager, styles) {
+        constructor(table, filterStateManager, styles, conditionCategories) {
             this.table = table;
             this.filterStateManager = filterStateManager;
             this.styles = styles;
             this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles);
-            this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles);
+            this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles, conditionCategories);
             this.filterMenuWidth = 300;
             this.filterStateManager.subscribe(state => {
                 if (this.isVisible && this.selectedField !== null) {
@@ -11204,7 +11214,7 @@ ${recordsStr}
             else if (this.activeTab === 'byCondition') {
                 this.conditionFilter.applyFilter(field);
             }
-            this.hide();
+            this.hide(this.currentCol, this.currentRow);
         }
         clearFilter(field) {
             if (this.valueFilter) {
@@ -11213,7 +11223,7 @@ ${recordsStr}
             if (this.conditionFilter) {
                 this.conditionFilter.clearFilter(field);
             }
-            this.hide();
+            this.hide(this.currentCol, this.currentRow);
         }
         updateClearFilterButtonState(field) {
             const currentFilter = this.filterStateManager.getFilterState(field);
@@ -11266,7 +11276,7 @@ ${recordsStr}
             this.filterTabByCondition.addEventListener('click', () => {
                 this.onTabSwitch('byCondition');
             });
-            this.cancelFilterButton.addEventListener('click', () => this.hide());
+            this.cancelFilterButton.addEventListener('click', () => this.hide(this.currentCol, this.currentRow));
             this.clearFilterOptionLink.addEventListener('click', e => {
                 e.preventDefault();
                 this.clearFilter(this.selectedField);
@@ -11276,7 +11286,7 @@ ${recordsStr}
             });
             document.addEventListener('click', () => {
                 if (this.isVisible) {
-                    this.hide();
+                    this.hide(this.currentCol, this.currentRow);
                 }
             });
             this.filterMenu.addEventListener('click', e => {
@@ -11314,6 +11324,7 @@ ${recordsStr}
             this.filterMenu.style.top = `${top}px`;
         }
         show(col, row, filterModes) {
+            this.valueFilter.clearSearchInputValue();
             this.filterModes = filterModes;
             if (!this.filterModes.includes('byValue')) {
                 this.filterTabByValue.style.display = 'none';
@@ -11337,11 +11348,19 @@ ${recordsStr}
             this.updateClearFilterButtonState(field);
             setTimeout(() => {
                 this.isVisible = true;
+                this.table.fireListeners(VTable.TABLE_EVENT_TYPE.FILTER_MENU_SHOW, {
+                    col: col,
+                    row: row
+                });
             }, 0);
         }
-        hide() {
+        hide(currentCol, currentRow) {
             this.filterMenu.style.display = 'none';
             this.isVisible = false;
+            this.table.fireListeners(VTable.TABLE_EVENT_TYPE.FILTER_MENU_HIDE, {
+                col: currentCol,
+                row: currentRow
+            });
         }
     }
 
@@ -20851,6 +20870,24 @@ ${recordsStr}
                 this.pluginOptions.filterModes = ['byValue', 'byCondition'];
             }
             this.pluginOptions.styles = lodashExports.merge({}, filterStyles, pluginOptions.styles);
+            this.pluginOptions.conditionCategories = pluginOptions.conditionCategories ?? categories;
+        }
+        initFilterPlugin(eventArgs) {
+            this.filterEngine = new FilterEngine();
+            this.filterStateManager = new FilterStateManager(this.table, this.filterEngine);
+            this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager, this.pluginOptions.styles, this.pluginOptions.conditionCategories);
+            this.columns = eventArgs.options.columns;
+            this.filterToolbar.render(document.body);
+            this.updateFilterIcons(this.columns);
+            this.filterStateManager.subscribe((_, action) => {
+                if (action?.type === exports.FilterActionType.ADD_FILTER) {
+                    return;
+                }
+                this.updateFilterIcons(this.columns);
+                this.table.updateColumns(this.columns, {
+                    clearRowHeightCache: false
+                });
+            });
         }
         run(...args) {
             const eventArgs = args[0];
@@ -20858,23 +20895,15 @@ ${recordsStr}
             const table = args[2];
             this.table = table;
             if (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.pluginOptions.styles);
-                this.columns = eventArgs.options.columns;
-                this.filterToolbar.render(document.body);
-                this.updateFilterIcons(this.columns);
-                this.filterStateManager.subscribe(() => {
-                    this.updateFilterIcons(this.columns);
-                    this.table.updateColumns(this.columns, {
-                        clearRowHeightCache: false
-                    });
-                });
+                this.initFilterPlugin(eventArgs);
             }
             else if (runtime === VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) {
+                if (!this.filterEngine || !this.filterStateManager || !this.filterToolbar) {
+                    this.initFilterPlugin(eventArgs);
+                }
                 this.pluginOptions = {
                     ...this.pluginOptions,
-                    ...eventArgs.options.plugins.find(plugin => plugin.id === this.id).pluginOptions
+                    ...eventArgs.options.plugins?.find(plugin => plugin.id === this.id)?.pluginOptions
                 };
                 this.columns = eventArgs.options.columns;
                 this.handleOptionUpdate(eventArgs.options);
@@ -20888,7 +20917,7 @@ ${recordsStr}
                 const col = eventArgs.col;
                 const row = eventArgs.row;
                 if (this.filterToolbar.isVisible) {
-                    this.filterToolbar.hide();
+                    this.filterToolbar.hide(eventArgs.col, eventArgs.row);
                 }
                 else {
                     this.filterToolbar.show(col, row, this.pluginOptions.filterModes);
@@ -20935,8 +20964,8 @@ ${recordsStr}
             const filterIcon = this.pluginOptions.filterIcon;
             const filteringIcon = this.pluginOptions.filteringIcon;
             const isIconEqual = (a, b) => a === b || (a && b && typeof a === 'object' && typeof b === 'object' && a.name === b.name);
-            const toIconList = icons => (icons ? (Array.isArray(icons) ? icons : [icons]) : []);
-            const compactIcons = list => (list.length === 0 ? undefined : list.length === 1 ? list[0] : list);
+            const toIconList = (icons) => (icons ? (Array.isArray(icons) ? icons : [icons]) : []);
+            const compactIcons = (list) => (list.length === 0 ? undefined : list.length === 1 ? list[0] : list);
             columns.forEach(column => {
                 const shouldShow = this.shouldEnableFilterForColumn(column.field, column);
                 const isFiltering = !!this.filterStateManager.getFilterState(column.field)?.enable;
@@ -21025,6 +21054,9 @@ ${recordsStr}
             });
         }
         release() {
+            this.columns.forEach(column => {
+                column.headerIcon = undefined;
+            });
             this.table = null;
             this.filterEngine = null;
             this.filterStateManager = null;