@visactor/vtable-sheet 1.22.4-alpha.11 → 1.22.4-alpha.13

package/cjs/index.d.ts

@@ -2,5 +2,5 @@ import VTableSheet from './components/vtable-sheet';
 import type { ISheetDefine, IVTableSheetOptions } from './ts-types';
 import * as TYPES from './ts-types';
 import * as VTable from './vtable';
-export declare const version = "1.22.4-alpha.11";
+export declare const version = "1.22.4-alpha.13";
 export { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };

package/cjs/index.js

@@ -47,4 +47,4 @@ exports.VTable = VTable;
 
 const style_manager_1 = require("./styles/style-manager");
 
-exports.version = "1.22.4-alpha.11", (0, style_manager_1.importStyles)();
+exports.version = "1.22.4-alpha.13", (0, style_manager_1.importStyles)();

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.11\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.13\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}

package/dist/vtable-sheet.js

@@ -59319,7 +59319,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.11", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.13", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -72532,8 +72532,8 @@
     }
 
     class ValueFilter {
-      constructor(table, filterStateManager, styles) {
-        this.uniqueKeys = new Map(), this.displayToRawValueMap = new Map(), this.valueFilterOptionList = new Map(), this.table = table, this.filterStateManager = filterStateManager, this.styles = styles, this.filterStateManager.subscribe(state => {
+      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);
         });
@@ -72564,8 +72564,10 @@
         for (let i = 0; i < recordsLength; i++) {
           let rawValue, displayValue;
           if (-1 !== targetCol) {
-            const row = this.table.columnHeaderLevelCount + i;
-            rawValue = records[i][fieldId];
+            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
@@ -72673,9 +72675,11 @@
         }
       }
       initFilterStateFromTableData(fieldId) {
-        var _a, _b;
-        const filter = this.filterStateManager.getFilterState(fieldId);
-        if (null == filter ? void 0 : filter.enable) {
+        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;
@@ -72698,7 +72702,7 @@
             } 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);
           }
-          !arrayEqual(filter.values, Array.from(selectedRawValues)) && this.filterStateManager.dispatch({
+          !arrayEqual(filter.values, Array.from(selectedRawValues)) && syncCheckboxCheckedState && this.filterStateManager.dispatch({
             type: FilterActionType.UPDATE_FILTER,
             payload: {
               field: fieldId,
@@ -72706,7 +72710,7 @@
             }
           });
         } else {
-          const availableRawValues = (null === (_b = null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.filter(item => item.count > 0)) || void 0 === _b ? void 0 : _b.map(item => item.rawValue).filter(v => null != v)) || [];
+          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)) || [];
           this.filterStateManager.dispatch({
             type: FilterActionType.ADD_FILTER,
             payload: {
@@ -72724,12 +72728,9 @@
           displayToRawMap = this.displayToRawValueMap.get(filter.field),
           optionDomList = this.valueFilterOptionList.get(filter.field);
         null == optionDomList || optionDomList.forEach(optionDom => {
-          var _a, _b;
           const displayValue = optionDom.originalValue,
             rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
           optionDom.checkbox.checked = selectedRawValues.some(v => v === rawValue);
-          const count = (null === (_b = null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.find(key => String(key.value) === optionDom.id)) || void 0 === _b ? void 0 : _b.count) || 0;
-          optionDom.checkbox.disabled = 0 === count;
         });
       }
       syncSelectAllWithFilterState(filter) {
@@ -72768,6 +72769,9 @@
         var _a;
         this.filterByValuePanel = document.createElement("div"), applyStyles(this.filterByValuePanel, this.styles.filterPanel), this.searchContainer = document.createElement("div"), 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) || "可使用空格分隔多个关键词", applyStyles(this.filterByValueSearchInput, this.styles.searchInput), 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 = !0, 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.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;
         applyStyles(this.filterByValuePanel, styles.filterPanel), applyStyles(this.searchContainer, styles.searchContainer), this.filterByValueSearchInput.placeholder = (null === (_a = styles.searchInput) || void 0 === _a ? void 0 : _a.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);
@@ -72788,7 +72792,7 @@
           const label = document.createElement("label");
           applyStyles(label, this.styles.optionLabel);
           const checkbox = document.createElement("input");
-          checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), checkbox.disabled = 0 === count, applyStyles(checkbox, this.styles.checkbox);
+          checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), applyStyles(checkbox, this.styles.checkbox);
           const countSpan = document.createElement("span");
           countSpan.textContent = String(count), applyStyles(countSpan, this.styles.countSpan), label.append(checkbox, ` ${rawValue}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
           const itemDom = {
@@ -72965,8 +72969,8 @@
     }];
 
     class ConditionFilter {
-      constructor(table, filterStateManager, styles, conditionCategories) {
-        this.currentCategory = FilterOperatorCategory.ALL, this.categories = [], this.operators = [], this.table = table, this.styles = styles, this.filterStateManager = filterStateManager, this.categories = conditionCategories, this.operators = operators;
+      constructor(table, filterStateManager, pluginOptions) {
+        this.currentCategory = FilterOperatorCategory.ALL, this.categories = [], this.operators = [], this.table = table, this.styles = pluginOptions.styles, this.filterStateManager = filterStateManager, this.categories = pluginOptions.conditionCategories, this.operators = operators;
       }
       setSelectedField(fieldId) {
         this.selectedField = fieldId, this.updateOperatorOptions(), this.loadCurrentFilterState();
@@ -73055,6 +73059,9 @@
           placeholder: "最大值"
         }), applyStyles(this.valueInputMax, this.styles.searchInput), this.valueInputMax.style.display = "none", 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);
       }
@@ -73080,11 +73087,14 @@
     }
 
     class FilterToolbar {
-      constructor(table, filterStateManager, styles, conditionCategories) {
-        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], 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.filterMenuWidth = 300, this.filterStateManager.subscribe(state => {
+      constructor(table, filterStateManager, pluginOptions) {
+        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, this.filterStateManager = filterStateManager, 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 => {
           this.isVisible && null !== this.selectedField && this.updateClearFilterButtonState(this.selectedField);
         });
       }
+      updatePluginOptions(pluginOptions) {
+        this.valueFilter.updatePluginOptions(pluginOptions), this.conditionFilter.updatePluginOptions(pluginOptions);
+      }
       onTabSwitch(tab) {
         this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(), this.valueFilter.hide());
         const isValueTab = "byValue" === tab;
@@ -82648,7 +82658,7 @@
         }, this.pluginOptions.filterModes && this.pluginOptions.filterModes.length || (this.pluginOptions.filterModes = ["byValue", "byCondition"]), this.pluginOptions.styles = lodashExports.merge({}, filterStyles, pluginOptions.styles), this.pluginOptions.conditionCategories = null !== (_d = pluginOptions.conditionCategories) && void 0 !== _d ? _d : 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) => {
+        this.filterEngine = new FilterEngine(), this.filterStateManager = new FilterStateManager(this.table, this.filterEngine), this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager, this.pluginOptions), this.columns = eventArgs.options.columns, this.filterToolbar.render(document.body), this.updateFilterIcons(this.columns), this.filterStateManager.subscribe((_, action) => {
           (null == action ? void 0 : action.type) !== FilterActionType.ADD_FILTER && (this.updateFilterIcons(this.columns), this.table.updateColumns(this.columns, {
             clearRowHeightCache: !1
           }));
@@ -82667,10 +82677,10 @@
         } else runtime === TABLE_EVENT_TYPE.SCROLL && "horizontal" === eventArgs.scrollDirection && this.filterToolbar.adjustMenuPosition();
       }
       updatePluginOptions(pluginOptions) {
-        this.pluginOptions = lodashExports.merge(this.pluginOptions, pluginOptions);
+        this.pluginOptions = lodashExports.merge(this.pluginOptions, pluginOptions), this.filterToolbar.updatePluginOptions(this.pluginOptions);
       }
       update() {
-        if (this.filterToolbar.updateStyles(this.pluginOptions.styles), this.filterToolbar.valueFilter) {
+        if (this.filterToolbar.valueFilter) {
           const allFields = this.table.columns.map(col => col.field),
             valueFilter = this.filterToolbar.valueFilter;
           allFields.forEach(field => {
@@ -90068,7 +90078,7 @@
         importStyle();
     }
 
-    const version = "1.22.4-alpha.11";
+    const version = "1.22.4-alpha.13";
     importStyles();
 
     exports.TYPES = index;