@opentinyvue/vue-grid 2.28.0 → 2.29.0

package/lib/index.js

@@ -295,6 +295,8 @@ var GlobalConfig$1 = {
   defaultTreeSpacing: 30,
   rowId: "_RID",
   // 行数据的唯一主键字段名
+  $rowIndex: Symbol("$rowIndex"),
+  // 虚拟滚动处理后的行索引
   version: 0,
   // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   optimization: {
@@ -2313,9 +2315,9 @@ var useCellSpan = function useCellSpan2(bodyVm, bodyProps) {
     var leftList = columnStore.leftList, rightList = columnStore.rightList;
     var normalState = {};
     var normalTable = [];
-    for (var $rowIndex = 0; $rowIndex < tableData.length; $rowIndex++) {
-      var row2 = tableData[$rowIndex];
-      var rowLevel = tableNode[$rowIndex].level;
+    for (var _index4 = 0; _index4 < tableData.length; _index4++) {
+      var row2 = tableData[_index4];
+      var rowLevel = tableNode[_index4].level;
       var rowIndex = $table.getRowIndex(row2);
       var virtualRow = false;
       if (hasVirtualRow) {
@@ -2325,7 +2327,7 @@ var useCellSpan = function useCellSpan2(bodyVm, bodyProps) {
       if (!isSkipRowRender) {
         seqCount.value = seqCount.value + 1;
       }
-      var seq = isOrdered ? seqCount.value : $rowIndex + 1;
+      var seq = isOrdered ? seqCount.value : _index4 + 1;
       if (scrollYLoad) {
         seq += startIndex;
       }
@@ -2340,7 +2342,7 @@ var useCellSpan = function useCellSpan2(bodyVm, bodyProps) {
         $table,
         data: tableData,
         row: row2,
-        $rowIndex,
+        $rowIndex: row2[GlobalConfig$1.$rowIndex],
         rowIndex,
         level: rowLevel,
         $seq: "",
@@ -2784,9 +2786,11 @@ var updatePool = function updatePool2(array, context) {
   var indices = /* @__PURE__ */ new WeakMap();
   expires.forEach(function(item) {
     var view = context.idViewMap.get(item.id);
-    view.used = false;
-    context.idViewMap.delete(item.id);
-    context.unusedViews.push(view);
+    if (view) {
+      view.used = false;
+      context.idViewMap.delete(item.id);
+      context.unusedViews.push(view);
+    }
   });
   array.forEach(function(item, i) {
     indices.set(item, i);
@@ -2813,6 +2817,34 @@ var updatePool = function updatePool2(array, context) {
   });
   return context;
 };
+function addTableDataRowIndex(rowPool) {
+  var treeTableData = [];
+  var $rowIndex = GlobalConfig$1.$rowIndex;
+  var tempChildren = Symbol("tempChildren");
+  rowPool.forEach(function(rowPoolItem) {
+    var _rowPoolItem$item = rowPoolItem.item, row2 = _rowPoolItem$item.payload, level = _rowPoolItem$item.level, parentNode = _rowPoolItem$item.parentNode, used = rowPoolItem.used;
+    if (!used) {
+      return;
+    }
+    if (level === 0) {
+      treeTableData.push(row2);
+      row2[$rowIndex] = treeTableData.length - 1;
+      return;
+    }
+    var parent = parentNode == null ? void 0 : parentNode.payload;
+    if (!parent) {
+      return;
+    }
+    if (!parent[tempChildren]) {
+      parent[tempChildren] = [];
+    }
+    parent[tempChildren].push(row2);
+    row2[$rowIndex] = parent[tempChildren].length - 1;
+  });
+  rowPool.forEach(function(rowPoolItem) {
+    delete rowPoolItem.item.payload[tempChildren];
+  });
+}
 var usePool = function usePool2(props) {
   var columnPool = hooks.ref([]);
   var rowPool = hooks.ref([]);
@@ -2839,6 +2871,7 @@ var usePool = function usePool2(props) {
       rowContext = createPool(props.tableNode);
     }
     rowPool.value = ((_rowContext = rowContext) == null ? void 0 : _rowContext.pool) || rowPool.value;
+    addTableDataRowIndex(rowPool.value);
     isNoData.value = !(((_props$tableNode = props.tableNode) == null ? void 0 : _props$tableNode.length) > 0);
   });
   return {
@@ -3103,13 +3136,14 @@ function renderRows(_vm) {
     value: 0
   };
   var $seq = "";
-  rowPool.forEach(function(_ref49, $rowIndex) {
+  rowPool.forEach(function(_ref49) {
     var id3 = _ref49.id, _ref49$item = _ref49.item, row2 = _ref49$item.payload, rowLevel = _ref49$item.level, used = _ref49.used;
     var rowActived = editConfig && actived.row === row2;
     var virtualRow = isVirtualRow(row2);
     var isSkipRowRender = hideMethod && hideMethod(row2, rowLevel) || virtualRow;
     var rowid2 = getRowid($table, row2);
     var rowIndex = $table.getRowIndex(row2);
+    var $rowIndex = row2[GlobalConfig$1.$rowIndex];
     if (!isSkipRowRender) {
       seqCount.value = seqCount.value + 1;
     }
@@ -3152,7 +3186,8 @@ function renderRows(_vm) {
       seq,
       treeConfig,
       used,
-      selectRow
+      selectRow,
+      scrollYLoad
     });
     renderRow(args);
     renderRowAfter({
@@ -3238,9 +3273,8 @@ function renderRowAfter(_ref50) {
   }, h);
 }
 function renderRow(args) {
-  var _ref51;
   var $rowIndex = args.$rowIndex, $seq = args.$seq, $table = args.$table, _vm = args._vm, editStore = args.editStore, id3 = args.id, isSkipRowRender = args.isSkipRowRender, row2 = args.row, rowActived = args.rowActived, rowClassName = args.rowClassName;
-  var rowIndex = args.rowIndex, rowLevel = args.rowLevel, rowid2 = args.rowid, rows = args.rows, selection = args.selection, selectRow = args.selectRow, seq = args.seq, treeConfig = args.treeConfig, used = args.used;
+  var rowIndex = args.rowIndex, rowLevel = args.rowLevel, rowid2 = args.rowid, rows = args.rows, selection = args.selection, selectRow = args.selectRow, seq = args.seq, treeConfig = args.treeConfig, used = args.used, scrollYLoad = args.scrollYLoad;
   if (isSkipRowRender) {
     return;
   }
@@ -3254,40 +3288,43 @@ function renderRow(args) {
     }
   }
   var columnPool = _vm.columnPool;
-  rows.push(h("tr", {
-    "key": key,
-    "attrs": {
-      "data-rowid": rowid2,
-      "data-rowindex": $rowIndex,
-      "data-rowlevel": rowLevel
-    },
-    "style": {
-      display: used ? void 0 : "none"
-    },
-    "class": ["tiny-grid-body__row", (_ref51 = {}, _ref51["row__level-" + rowLevel] = treeConfig, _ref51["row__new"] = editStore.insertList.includes(row2), _ref51["row__selected"] = selection.includes(row2), _ref51["row__radio"] = selectRow === row2, _ref51["row__actived"] = rowActived, _ref51), rowClassName ? isFunction(rowClassName) ? rowClassName({
-      $table,
-      $seq,
-      seq,
-      fixedType: void 0,
-      rowLevel,
-      row: row2,
-      rowIndex,
-      $rowIndex
-    }) : rowClassName : ""]
-  }, [columnPool.map(function(_ref52, $columnIndex) {
-    var id4 = _ref52.id, column = _ref52.item, used2 = _ref52.used;
-    return renderColumn({
-      $columnIndex,
-      $table,
-      _vm,
-      column,
-      id: id4,
-      row: row2,
-      rowid: rowid2,
-      seq,
-      used: used2
-    });
-  })]));
+  if (used || scrollYLoad) {
+    var _ref51;
+    rows.push(h("tr", {
+      "key": key,
+      "attrs": {
+        "data-rowid": rowid2,
+        "data-rowindex": $rowIndex,
+        "data-rowlevel": rowLevel
+      },
+      "style": {
+        display: used ? void 0 : "none"
+      },
+      "class": ["tiny-grid-body__row", (_ref51 = {}, _ref51["row__level-" + rowLevel] = treeConfig, _ref51["row__new"] = editStore.insertList.includes(row2), _ref51["row__selected"] = selection.includes(row2), _ref51["row__radio"] = selectRow === row2, _ref51["row__actived"] = rowActived, _ref51), rowClassName ? isFunction(rowClassName) ? rowClassName({
+        $table,
+        $seq,
+        seq,
+        fixedType: void 0,
+        rowLevel,
+        row: row2,
+        rowIndex,
+        $rowIndex
+      }) : rowClassName : ""]
+    }, [columnPool.map(function(_ref52, $columnIndex) {
+      var id4 = _ref52.id, column = _ref52.item, used2 = _ref52.used;
+      return renderColumn({
+        $columnIndex,
+        $table,
+        _vm,
+        column,
+        id: id4,
+        row: row2,
+        rowid: rowid2,
+        seq,
+        used: used2
+      });
+    })]));
+  }
 }
 function renderRowGroupTds(_ref53) {
   var $table = _ref53.$table, closeable = _ref53.closeable, render19 = _ref53.render, renderGroupCell = _ref53.renderGroupCell, row2 = _ref53.row, tds = _ref53.tds, title = _ref53.title, _vm = _ref53._vm;
@@ -4142,14 +4179,15 @@ var Panel$1 = defineComponent({
       }
       if (this.visible) {
         setTimeout(function() {
+          var _this4$$grid;
           var _this4$filterStore = _this4.filterStore, targetElemParentTr = _this4$filterStore.targetElemParentTr, id3 = _this4$filterStore.id;
           var reference = targetElemParentTr && targetElemParentTr.querySelector("svg.tiny-grid-filter__btn." + id3);
           var popper = _this4.$el;
           popper.style.zIndex = PopupManager.nextZIndex();
-          _this4.popperJS = new PopperJS(reference, popper, {
+          _this4.popperJS = new PopperJS(reference, popper, _extends({
             placement: "bottom-end",
             gpuAcceleration: false
-          });
+          }, ((_this4$$grid = _this4.$grid) == null ? void 0 : _this4$$grid.filterPopperOptions) || {}));
           popper.style.display = "block";
         });
       }
@@ -5732,11 +5770,11 @@ function getColumnRuleTypeOther(_ref94) {
   var $table = _ref94.$table, _vm = _ref94._vm, colProps = _ref94.colProps, editor = _ref94.editor, filter2 = _ref94.filter, isTreeNode = _ref94.isTreeNode, renMaps = _ref94.renMaps, type = _ref94.type;
   return {
     match: function match() {
-      return !~["index", "radio", "selection", "expand", "operation"].indexOf(type);
+      return !["index", "radio", "selection", "expand", "operation"].includes(type);
     },
     action: function action() {
       var sortable = colProps.sortable, remoteSort = colProps.remoteSort;
-      var isSortable = $table.sortable && (type ? false : sortable);
+      var isSortable = $table.sortable && sortable;
       var isSortColumn = isSortable || remoteSort;
       if (editor) {
         renMaps.renderHeader = _vm.renderEditHeader;
@@ -5863,6 +5901,7 @@ var Cell = {
     var $table = params.$table, row2 = params.row, column = params.column;
     var slots = column.slots, renderer = column.renderer;
     var format = column.format || {};
+    $table.columnSlotsWeakMap || ($table.columnSlotsWeakMap = /* @__PURE__ */ new WeakMap());
     if (slots && slots.default) {
       return slots.default(params, h2);
     }
@@ -6464,7 +6503,7 @@ var Cell = {
         return renderBig(buttonConfig, viewClass);
       });
       var scopedSlots = {
-        default: function _default28() {
+        default: function _default29() {
           return h2(iconEllipsis(), {
             class: "tiny-grid__oper-col-elps"
           });
@@ -8995,7 +9034,7 @@ var Methods$d = {
   // 点击排序事件
   triggerSortEvent: function triggerSortEvent(event, column, order) {
     var property = column.property;
-    var isColumnSortable = column.type ? false : column.sortable || column.remoteSort;
+    var isColumnSortable = column.sortable || column.remoteSort;
     if (this.sortable && isColumnSortable) {
       var evntParams = {
         $table: this,
@@ -9020,7 +9059,7 @@ var Methods$d = {
       return item.property === field;
     });
     var isRemote = isBoolean(column.remoteSort) ? column.remoteSort : remoteSort;
-    var isColumnSortable = column.type ? false : column.sortable || column.remoteSort;
+    var isColumnSortable = column.sortable || column.remoteSort;
     if (this.sortable && isColumnSortable) {
       if (column.order !== order) {
         tableFullColumn.forEach(function(column2) {
@@ -9966,7 +10005,7 @@ var __vue2_script$7 = defineComponent({
         })]);
       } else {
         var scopedSlots = {
-          default: function _default28() {
+          default: function _default29() {
             return h(IconEllipsis(), {
               class: "mf-table-more outline-none text-base cursor-pointer"
             });
@@ -11642,6 +11681,7 @@ var Table = defineComponent({
     var tableListeners = getListeners(attrs, listeners);
     var markColumnIndex = hooks.ref(0);
     var rowidCacheMap = /* @__PURE__ */ new Map();
+    var columnSlotsWeakMap = /* @__PURE__ */ new WeakMap();
     return {
       slots,
       tableListeners,
@@ -11680,7 +11720,8 @@ var Table = defineComponent({
       markColumnIndex,
       rowidCacheMap,
       horizonScroll,
-      resolveMap
+      resolveMap,
+      columnSlotsWeakMap
     };
   },
   render: function render16() {
@@ -12062,7 +12103,13 @@ var Grid = defineComponent({
       default: false
     },
     isMultipleHistory: Boolean,
-    selectToolbar: [Boolean, Object]
+    selectToolbar: [Boolean, Object],
+    filterPopperOptions: {
+      type: Object,
+      default: function _default28() {
+        return {};
+      }
+    }
   }),
   data: function data6() {
     return {
@@ -12487,8 +12534,10 @@ var Methods$c = {
       var _column$format, _column$format$async;
       return (_column$format = column.format) == null ? void 0 : (_column$format$async = _column$format.async) == null ? void 0 : _column$format$async.fetch;
     });
+    var defaultRowId = "_RID";
     var newRecords = records.map(function(record) {
       isColumnFormat && (record[GlobalConfig$1.constant.insertedField] = true);
+      delete record[defaultRowId];
       return hooks.reactive(_this54.defineField(Object.assign({}, record)));
     });
     operArrs({
@@ -12683,7 +12732,7 @@ var Methods$c = {
               editConfig,
               row: row2
             });
-            if (!(editor && cell && isActiveCell)) {
+            if (!(editor && cell && isActiveCell && editConfig)) {
               _context.n = 2;
               break;
             }
@@ -12955,10 +13004,10 @@ function findLeft(params) {
       targetRowIndex
     };
   }
-  for (var _index4 = columnIndex - 1; _index4 >= 0; _index4--) {
-    if (checkColumn(visibleColumn[_index4])) {
-      targetColumnIndex = _index4;
-      targetColumn = visibleColumn[_index4];
+  for (var _index5 = columnIndex - 1; _index5 >= 0; _index5--) {
+    if (checkColumn(visibleColumn[_index5])) {
+      targetColumnIndex = _index5;
+      targetColumn = visibleColumn[_index5];
       break;
     }
   }
@@ -12972,10 +13021,10 @@ function findLeft(params) {
   }
   targetRowIndex = rowIndex - 1;
   targetRow = tableData[targetRowIndex];
-  for (var _index5 = visibleColumn.length - 1; _index5 >= 0; _index5--) {
-    if (checkColumn(visibleColumn[_index5])) {
-      targetColumnIndex = _index5;
-      targetColumn = visibleColumn[_index5];
+  for (var _index6 = visibleColumn.length - 1; _index6 >= 0; _index6--) {
+    if (checkColumn(visibleColumn[_index6])) {
+      targetColumnIndex = _index6;
+      targetColumn = visibleColumn[_index6];
       break;
     }
   }
@@ -12997,10 +13046,10 @@ function findRight(params) {
       targetRowIndex
     };
   }
-  for (var _index6 = columnIndex + 1; _index6 < visibleColumn.length; _index6++) {
-    if (checkColumn(visibleColumn[_index6])) {
-      targetColumnIndex = _index6;
-      targetColumn = visibleColumn[_index6];
+  for (var _index7 = columnIndex + 1; _index7 < visibleColumn.length; _index7++) {
+    if (checkColumn(visibleColumn[_index7])) {
+      targetColumnIndex = _index7;
+      targetColumn = visibleColumn[_index7];
       break;
     }
   }
@@ -13014,10 +13063,10 @@ function findRight(params) {
   }
   targetRowIndex = rowIndex + 1;
   targetRow = tableData[targetRowIndex];
-  for (var _index7 = 0; _index7 < visibleColumn.length; _index7++) {
-    if (checkColumn(visibleColumn[_index7])) {
-      targetColumnIndex = _index7;
-      targetColumn = visibleColumn[_index7];
+  for (var _index8 = 0; _index8 < visibleColumn.length; _index8++) {
+    if (checkColumn(visibleColumn[_index8])) {
+      targetColumnIndex = _index8;
+      targetColumn = visibleColumn[_index8];
       break;
     }
   }
@@ -16113,7 +16162,7 @@ var Methods = {
     var treeExpandedsCopy = [].concat(treeExpandeds);
     rows.forEach(function(row2) {
       if (row2[children] && row2[children].length) {
-        var _index8 = treeExpandedsCopy.indexOf(row2);
+        var _index9 = treeExpandedsCopy.indexOf(row2);
         if (accordion) {
           var matchObj = findTree$1(tableFullData, function(item) {
             return item === row2;
@@ -16122,11 +16171,11 @@ var Methods = {
             return ~matchObj.items.indexOf(item);
           });
         }
-        if (~_index8 && (isToggle || !expanded)) {
-          treeExpandedsCopy.splice(_index8, 1);
+        if (~_index9 && (isToggle || !expanded)) {
+          treeExpandedsCopy.splice(_index9, 1);
           return;
         }
-        if (!~_index8 && (isToggle || expanded)) {
+        if (!~_index9 && (isToggle || expanded)) {
           treeExpandedsCopy.push(row2);
         }
       }

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@opentinyvue/vue-grid",
   "type": "module",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/utils": "~3.28.0",
-    "@opentinyvue/vue-common": "~2.28.0",
-    "@opentinyvue/vue-directive": "~2.28.0",
-    "@opentinyvue/vue-dropdown": "~2.28.0",
-    "@opentinyvue/vue-dropdown-item": "~2.28.0",
-    "@opentinyvue/vue-dropdown-menu": "~2.28.0",
-    "@opentinyvue/vue-exception": "~2.28.0",
-    "@opentinyvue/vue-icon": "~2.28.0",
-    "@opentinyvue/vue-loading": "~2.28.0",
-    "@opentinyvue/vue-locale": "~2.28.0",
-    "@opentinyvue/vue-modal": "~2.28.0",
-    "@opentinyvue/vue-pager": "~2.28.0",
-    "@opentinyvue/vue-renderless": "~3.28.0",
-    "@opentinyvue/vue-tag": "~2.28.0",
-    "@opentinyvue/vue-theme": "~3.28.0",
-    "@opentinyvue/vue-tooltip": "~2.28.0"
+    "@opentinyvue/utils": "~3.29.0",
+    "@opentinyvue/vue-common": "~2.29.0",
+    "@opentinyvue/vue-directive": "~2.29.0",
+    "@opentinyvue/vue-dropdown": "~2.29.0",
+    "@opentinyvue/vue-dropdown-item": "~2.29.0",
+    "@opentinyvue/vue-dropdown-menu": "~2.29.0",
+    "@opentinyvue/vue-exception": "~2.29.0",
+    "@opentinyvue/vue-icon": "~2.29.0",
+    "@opentinyvue/vue-loading": "~2.29.0",
+    "@opentinyvue/vue-locale": "~2.29.0",
+    "@opentinyvue/vue-modal": "~2.29.0",
+    "@opentinyvue/vue-pager": "~2.29.0",
+    "@opentinyvue/vue-renderless": "~3.29.0",
+    "@opentinyvue/vue-tag": "~2.29.0",
+    "@opentinyvue/vue-theme": "~3.29.0",
+    "@opentinyvue/vue-tooltip": "~2.29.0"
   },
   "types": "index.d.ts",
   "scripts": {

package/src/config.d.ts

@@ -25,6 +25,7 @@ declare const GlobalConfig: {
     defaultTreeIndent: number;
     defaultTreeSpacing: number;
     rowId: string;
+    $rowIndex: symbol;
     version: number;
     optimization: {
         animat: boolean;