@visactor/vtable-plugins 1.22.4-alpha.10 → 1.22.4-alpha.12

package/dist/vtable-plugins.js

@@ -10362,19 +10362,25 @@ ${recordsStr}
     class ValueFilter {
         table;
         filterStateManager;
+        pluginOptions;
         styles;
         uniqueKeys = new Map();
         displayToRawValueMap = new Map();
         selectedField;
         valueFilterOptionList = new Map();
         filterByValuePanel;
+        searchContainer;
+        optionsContainer;
+        selectAllItemDiv;
+        selectAllLabel;
         filterByValueSearchInput;
         selectAllCheckbox;
         filterItemsContainer;
-        constructor(table, filterStateManager, styles) {
+        constructor(table, filterStateManager, pluginOptions) {
             this.table = table;
             this.filterStateManager = filterStateManager;
-            this.styles = styles;
+            this.pluginOptions = pluginOptions;
+            this.styles = pluginOptions.styles;
             this.filterStateManager.subscribe((state) => {
                 const filterState = state.filters.get(this.selectedField);
                 if (filterState && filterState.type === 'byValue') {
@@ -10591,6 +10597,7 @@ ${recordsStr}
         initFilterStateFromTableData(fieldId) {
             const filter = this.filterStateManager.getFilterState(fieldId);
             const isEnable = filter?.enable;
+            const syncCheckboxCheckedState = this.pluginOptions?.syncCheckboxCheckedState ?? true;
             if (isEnable) {
                 const selectedRawValues = new Set();
                 const displayToRawMap = this.displayToRawValueMap.get(fieldId);
@@ -10630,7 +10637,7 @@ ${recordsStr}
                     }
                 }
                 const hasChanged = !arrayEqual(filter.values, Array.from(selectedRawValues));
-                if (hasChanged) {
+                if (hasChanged && syncCheckboxCheckedState) {
                     this.filterStateManager.dispatch({
                         type: exports.FilterActionType.UPDATE_FILTER,
                         payload: {
@@ -10641,22 +10648,20 @@ ${recordsStr}
                 }
             }
             else {
-                if (!filter) {
-                    const availableRawValues = this.uniqueKeys
-                        .get(fieldId)
-                        ?.filter(item => item.count > 0)
-                        ?.map(item => item.rawValue)
-                        .filter(v => v !== undefined && v !== null) || [];
-                    this.filterStateManager.dispatch({
-                        type: exports.FilterActionType.ADD_FILTER,
-                        payload: {
-                            field: fieldId,
-                            type: 'byValue',
-                            values: availableRawValues,
-                            enable: false
-                        }
-                    });
-                }
+                const availableRawValues = this.uniqueKeys
+                    .get(fieldId)
+                    ?.filter(item => !syncCheckboxCheckedState || item.count > 0)
+                    ?.map(item => item.rawValue)
+                    .filter(v => v !== undefined && v !== null) || [];
+                this.filterStateManager.dispatch({
+                    type: exports.FilterActionType.ADD_FILTER,
+                    payload: {
+                        field: fieldId,
+                        type: 'byValue',
+                        values: availableRawValues,
+                        enable: false
+                    }
+                });
             }
         }
         syncCheckboxesWithFilterState(filter) {
@@ -10697,14 +10702,15 @@ ${recordsStr}
             }
         }
         applyFilter(fieldId = this.selectedField) {
-            const visibleSelectedKeys = Array.from(this.filterStateManager.getVisibleSelectedValues(fieldId));
-            if (visibleSelectedKeys.length > 0 && visibleSelectedKeys.length < this.uniqueKeys.get(fieldId)?.length) {
+            const filter = this.filterStateManager.getFilterState(fieldId);
+            const allSelectedValues = filter.values;
+            if (allSelectedValues.length >= 0 && allSelectedValues.length < this.uniqueKeys.get(fieldId)?.length) {
                 this.filterStateManager.dispatch({
                     type: exports.FilterActionType.APPLY_FILTERS,
                     payload: {
                         field: fieldId,
                         type: 'byValue',
-                        values: visibleSelectedKeys,
+                        values: allSelectedValues,
                         enable: true
                     }
                 });
@@ -10730,31 +10736,46 @@ ${recordsStr}
         render(container) {
             this.filterByValuePanel = document.createElement('div');
             applyStyles(this.filterByValuePanel, this.styles.filterPanel);
-            const searchContainer = document.createElement('div');
-            applyStyles(searchContainer, this.styles.searchContainer);
+            this.searchContainer = document.createElement('div');
+            applyStyles(this.searchContainer, this.styles.searchContainer);
             this.filterByValueSearchInput = document.createElement('input');
             this.filterByValueSearchInput.type = 'text';
             this.filterByValueSearchInput.placeholder = this.styles.searchInput?.placeholder || '可使用空格分隔多个关键词';
             applyStyles(this.filterByValueSearchInput, this.styles.searchInput);
-            searchContainer.appendChild(this.filterByValueSearchInput);
-            const optionsContainer = document.createElement('div');
-            applyStyles(optionsContainer, this.styles.optionsContainer);
-            const selectAllItemDiv = document.createElement('div');
-            applyStyles(selectAllItemDiv, this.styles.optionItem);
-            const selectAllLabel = document.createElement('label');
-            applyStyles(selectAllLabel, this.styles.optionLabel);
+            this.searchContainer.appendChild(this.filterByValueSearchInput);
+            this.optionsContainer = document.createElement('div');
+            applyStyles(this.optionsContainer, this.styles.optionsContainer);
+            this.selectAllItemDiv = document.createElement('div');
+            applyStyles(this.selectAllItemDiv, this.styles.optionItem);
+            this.selectAllLabel = document.createElement('label');
+            applyStyles(this.selectAllLabel, this.styles.optionLabel);
             this.selectAllCheckbox = document.createElement('input');
             this.selectAllCheckbox.type = 'checkbox';
             this.selectAllCheckbox.checked = true;
             applyStyles(this.selectAllCheckbox, this.styles.checkbox);
-            selectAllLabel.append(this.selectAllCheckbox, ' 全选');
-            selectAllItemDiv.appendChild(selectAllLabel);
+            this.selectAllLabel.append(this.selectAllCheckbox, ' 全选');
+            this.selectAllItemDiv.appendChild(this.selectAllLabel);
             this.filterItemsContainer = document.createElement('div');
-            optionsContainer.append(selectAllItemDiv, this.filterItemsContainer);
-            this.filterByValuePanel.append(searchContainer, optionsContainer);
+            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) {
+            applyStyles(this.filterByValuePanel, styles.filterPanel);
+            applyStyles(this.searchContainer, styles.searchContainer);
+            this.filterByValueSearchInput.placeholder = styles.searchInput?.placeholder || '可使用空格分隔多个关键词';
+            applyStyles(this.filterByValueSearchInput, styles.searchInput);
+            applyStyles(this.optionsContainer, styles.optionsContainer);
+            applyStyles(this.selectAllItemDiv, styles.optionItem);
+            applyStyles(this.selectAllLabel, styles.optionLabel);
+            applyStyles(this.selectAllCheckbox, styles.checkbox);
+        }
         renderFilterOptions(field) {
             this.filterItemsContainer.innerHTML = '';
             this.valueFilterOptionList.delete(field);
@@ -10906,19 +10927,25 @@ ${recordsStr}
         filterStateManager;
         styles;
         filterByConditionPanel;
+        conditionContainer;
+        categoryLabel;
         selectedField;
         operatorSelect;
         valueInput;
+        andLabel;
         valueInputMax;
         categorySelect;
+        operatorLabel;
+        rangeInputContainer;
+        valueLabel;
         currentCategory = exports.FilterOperatorCategory.ALL;
         categories = [];
         operators = [];
-        constructor(table, filterStateManager, styles, conditionCategories) {
+        constructor(table, filterStateManager, pluginOptions) {
             this.table = table;
-            this.styles = styles;
+            this.styles = pluginOptions.styles;
             this.filterStateManager = filterStateManager;
-            this.categories = conditionCategories;
+            this.categories = pluginOptions.conditionCategories;
             this.operators = operators;
         }
         setSelectedField(fieldId) {
@@ -11091,10 +11118,10 @@ ${recordsStr}
         render(container) {
             this.filterByConditionPanel = document.createElement('div');
             applyStyles(this.filterByConditionPanel, this.styles.filterPanel);
-            const conditionContainer = document.createElement('div');
-            applyStyles(conditionContainer, this.styles.conditionContainer);
-            const categoryLabel = createElement('label', {}, ['筛选类型：']);
-            applyStyles(categoryLabel, this.styles.formLabel);
+            this.conditionContainer = document.createElement('div');
+            applyStyles(this.conditionContainer, this.styles.conditionContainer);
+            this.categoryLabel = createElement('label', {}, ['筛选类型：']);
+            applyStyles(this.categoryLabel, this.styles.formLabel);
             this.categorySelect = createElement('select');
             applyStyles(this.categorySelect, this.styles.operatorSelect);
             this.categories.forEach(category => {
@@ -11103,43 +11130,61 @@ ${recordsStr}
                 option.textContent = category.label;
                 this.categorySelect.appendChild(option);
             });
-            const operatorLabel = createElement('label', {}, ['筛选条件：']);
-            applyStyles(operatorLabel, this.styles.formLabel);
+            this.operatorLabel = createElement('label', {}, ['筛选条件：']);
+            applyStyles(this.operatorLabel, this.styles.formLabel);
             this.operatorSelect = createElement('select');
             applyStyles(this.operatorSelect, this.styles.operatorSelect);
-            const valueLabel = createElement('label', {}, ['筛选值：']);
-            applyStyles(valueLabel, this.styles.formLabel);
-            const rangeInputContainer = createElement('div');
-            applyStyles(rangeInputContainer, this.styles.rangeInputContainer);
+            this.valueLabel = createElement('label', {}, ['筛选值：']);
+            applyStyles(this.valueLabel, this.styles.formLabel);
+            this.rangeInputContainer = createElement('div');
+            applyStyles(this.rangeInputContainer, this.styles.rangeInputContainer);
             this.valueInput = createElement('input', {
                 type: 'text',
                 placeholder: '请输入筛选值'
             });
             applyStyles(this.valueInput, this.styles.searchInput);
-            const andLabel = createElement('span', {}, ['和']);
-            applyStyles(andLabel, this.styles.addLabel);
-            andLabel.style.display = 'none';
+            this.andLabel = createElement('span', {}, ['和']);
+            applyStyles(this.andLabel, this.styles.addLabel);
+            this.andLabel.style.display = 'none';
             this.valueInputMax = createElement('input', {
                 type: 'text',
                 placeholder: '最大值'
             });
             applyStyles(this.valueInputMax, this.styles.searchInput);
             this.valueInputMax.style.display = 'none';
-            rangeInputContainer.appendChild(this.valueInput);
-            rangeInputContainer.appendChild(andLabel);
-            rangeInputContainer.appendChild(this.valueInputMax);
-            conditionContainer.appendChild(categoryLabel);
-            conditionContainer.appendChild(this.categorySelect);
-            conditionContainer.appendChild(operatorLabel);
-            conditionContainer.appendChild(this.operatorSelect);
-            conditionContainer.appendChild(valueLabel);
-            conditionContainer.appendChild(rangeInputContainer);
-            this.filterByConditionPanel.appendChild(conditionContainer);
+            this.rangeInputContainer.appendChild(this.valueInput);
+            this.rangeInputContainer.appendChild(this.andLabel);
+            this.rangeInputContainer.appendChild(this.valueInputMax);
+            this.conditionContainer.appendChild(this.categoryLabel);
+            this.conditionContainer.appendChild(this.categorySelect);
+            this.conditionContainer.appendChild(this.operatorLabel);
+            this.conditionContainer.appendChild(this.operatorSelect);
+            this.conditionContainer.appendChild(this.valueLabel);
+            this.conditionContainer.appendChild(this.rangeInputContainer);
+            this.filterByConditionPanel.appendChild(this.conditionContainer);
             container.appendChild(this.filterByConditionPanel);
             this.hide();
             this.updateOperatorOptions();
             this.bindEvents();
         }
+        updatePluginOptions(filterOptions) {
+            this.styles = filterOptions.styles;
+            this.categories = filterOptions.conditionCategories;
+            this.updateStyles(filterOptions.styles);
+        }
+        updateStyles(styles) {
+            applyStyles(this.filterByConditionPanel, styles.filterPanel);
+            applyStyles(this.conditionContainer, styles.conditionContainer);
+            applyStyles(this.categoryLabel, styles.formLabel);
+            applyStyles(this.categorySelect, styles.operatorSelect);
+            applyStyles(this.operatorLabel, styles.formLabel);
+            applyStyles(this.operatorSelect, styles.operatorSelect);
+            applyStyles(this.valueLabel, styles.formLabel);
+            applyStyles(this.rangeInputContainer, styles.rangeInputContainer);
+            applyStyles(this.valueInput, styles.searchInput);
+            applyStyles(this.andLabel, styles.addLabel);
+            applyStyles(this.valueInputMax, styles.searchInput);
+        }
         bindEvents() {
             this.valueInput.addEventListener('keypress', event => {
                 if (event.key === 'Enter') {
@@ -11193,20 +11238,22 @@ ${recordsStr}
         selectedField = null;
         filterModes = [];
         filterMenu;
+        filterTabsContainer;
         filterMenuWidth;
         currentCol;
         currentRow;
         filterTabByValue;
         filterTabByCondition;
+        footerContainer;
         clearFilterOptionLink;
         cancelFilterButton;
         applyFilterButton;
-        constructor(table, filterStateManager, styles, conditionCategories) {
+        constructor(table, filterStateManager, pluginOptions) {
             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, conditionCategories);
+            this.styles = pluginOptions.styles;
+            this.valueFilter = new ValueFilter(this.table, this.filterStateManager, pluginOptions);
+            this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, pluginOptions);
             this.filterMenuWidth = 300;
             this.filterStateManager.subscribe(state => {
                 if (this.isVisible && this.selectedField !== null) {
@@ -11214,6 +11261,10 @@ ${recordsStr}
                 }
             });
         }
+        updatePluginOptions(pluginOptions) {
+            this.valueFilter.updatePluginOptions(pluginOptions);
+            this.conditionFilter.updatePluginOptions(pluginOptions);
+        }
         onTabSwitch(tab) {
             this.activeTab = tab;
             if (tab === 'byValue') {
@@ -11269,17 +11320,17 @@ ${recordsStr}
             this.filterMenu.classList.add('vtable-filter-menu');
             applyStyles(this.filterMenu, this.styles.filterMenu);
             this.filterMenu.style.width = `${this.filterMenuWidth}px`;
-            const filterTabsContainer = document.createElement('div');
-            applyStyles(filterTabsContainer, this.styles.tabsContainer);
+            this.filterTabsContainer = document.createElement('div');
+            applyStyles(this.filterTabsContainer, this.styles.tabsContainer);
             this.filterTabByValue = document.createElement('button');
             this.filterTabByValue.innerText = '按值筛选';
             applyStyles(this.filterTabByValue, this.styles.tabStyle(true));
             this.filterTabByCondition = document.createElement('button');
             this.filterTabByCondition.innerText = '按条件筛选';
             applyStyles(this.filterTabByCondition, this.styles.tabStyle(false));
-            filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
-            const footerContainer = document.createElement('div');
-            applyStyles(footerContainer, this.styles.footerContainer);
+            this.filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
+            this.footerContainer = document.createElement('div');
+            applyStyles(this.footerContainer, this.styles.footerContainer);
             this.clearFilterOptionLink = document.createElement('a');
             this.clearFilterOptionLink.href = '#';
             this.clearFilterOptionLink.innerText = '清除筛选';
@@ -11292,14 +11343,25 @@ ${recordsStr}
             this.applyFilterButton.innerText = '确认';
             applyStyles(this.applyFilterButton, this.styles.footerButton(true));
             footerButtons.append(this.cancelFilterButton, this.applyFilterButton);
-            footerContainer.append(this.clearFilterOptionLink, footerButtons);
-            this.filterMenu.append(filterTabsContainer);
+            this.footerContainer.append(this.clearFilterOptionLink, footerButtons);
+            this.filterMenu.append(this.filterTabsContainer);
             this.valueFilter.render(this.filterMenu);
             this.conditionFilter.render(this.filterMenu);
-            this.filterMenu.append(footerContainer);
+            this.filterMenu.append(this.footerContainer);
             container.appendChild(this.filterMenu);
             this.attachEventListeners();
         }
+        updateStyles(styles) {
+            applyStyles(this.filterMenu, styles.filterMenu);
+            applyStyles(this.filterTabsContainer, styles.tabsContainer);
+            applyStyles(this.filterTabByValue, styles.tabStyle(true));
+            applyStyles(this.footerContainer, styles.footerContainer);
+            applyStyles(this.clearFilterOptionLink, styles.clearLink);
+            applyStyles(this.cancelFilterButton, styles.footerButton(false));
+            applyStyles(this.applyFilterButton, styles.footerButton(true));
+            this.valueFilter.updateStyles(styles);
+            this.conditionFilter.updateStyles(styles);
+        }
         attachEventListeners() {
             this.filterTabByValue.addEventListener('click', () => {
                 this.onTabSwitch('byValue');
@@ -11342,6 +11404,8 @@ ${recordsStr}
             let top = 0;
             const canvasBounds = this.table.canvas.getBoundingClientRect();
             const cell = this.table.getCellRelativeRect(effectiveCol, effectiveRow);
+            const filterMenuWidth = this.filterMenuWidth;
+            const filterMenuHeight = 380;
             if (cell.right < this.filterMenuWidth) {
                 left = cell.left + canvasBounds.left;
                 top = cell.bottom + canvasBounds.top;
@@ -11350,6 +11414,8 @@ ${recordsStr}
                 left = cell.right + canvasBounds.left - this.filterMenuWidth;
                 top = cell.bottom + canvasBounds.top;
             }
+            left = Math.max(0, Math.min(window.innerWidth - filterMenuWidth, left));
+            top = Math.max(0, Math.min(window.innerHeight - filterMenuHeight, top));
             this.filterMenu.style.display = this.isVisible ? 'block' : 'none';
             this.filterMenu.style.left = `${left}px`;
             this.filterMenu.style.top = `${top}px`;
@@ -20906,7 +20972,7 @@ ${recordsStr}
         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.filterToolbar = new FilterToolbar(this.table, this.filterStateManager, this.pluginOptions);
             this.columns = eventArgs.options.columns;
             this.filterToolbar.render(document.body);
             this.updateFilterIcons(this.columns);
@@ -20960,14 +21026,18 @@ ${recordsStr}
                 }
             }
         }
+        updatePluginOptions(pluginOptions) {
+            this.pluginOptions = lodashExports.merge(this.pluginOptions, pluginOptions);
+            this.filterToolbar.updatePluginOptions(this.pluginOptions);
+        }
         update() {
             if (this.filterToolbar.valueFilter) {
                 const allFields = this.table.columns.map(col => col.field);
                 const valueFilter = this.filterToolbar.valueFilter;
                 allFields.forEach(field => {
                     valueFilter.collectUniqueColumnValues(field, true);
-                    valueFilter.updateUI(this.filterStateManager.getFilterState(field));
                 });
+                valueFilter.updateUI(this.filterStateManager.getFilterState(this.filterToolbar.selectedField));
             }
             if (this.filterStateManager) {
                 this.reapplyActiveFilters();