@opentinyvue/vue-grid 2.26.0 → 2.27.0

package/lib/index.js

@@ -263,6 +263,7 @@ function _extends() {
 var GlobalConfig$1 = {
   validConfig: {
     message: "tooltip",
+    highlightError: false,
     icon: iconError()
   },
   editConfig: {
@@ -2035,6 +2036,38 @@ var getEventParams = function getEventParams2(_ref17, $table) {
 var isOperateMouse = function isOperateMouse2($table) {
   return $table._isResize || $table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover;
 };
+var hideAlignLines = function hideAlignLines2($table, cell) {
+  var _$table$mouseConfig;
+  if (!((_$table$mouseConfig = $table.mouseConfig) != null && _$table$mouseConfig.hover) || cell) {
+    return;
+  }
+  var xBar = $table.elemStore["main-body-alignXBar"];
+  var yBar = $table.elemStore["main-body-alignYBar"];
+  if (xBar) {
+    xBar.style.display = "none";
+  }
+  if (yBar) {
+    yBar.style.display = "none";
+  }
+};
+var showAlignLines = function showAlignLines2($table, cell) {
+  var _$table$mouseConfig2;
+  if (!((_$table$mouseConfig2 = $table.mouseConfig) != null && _$table$mouseConfig2.hover)) {
+    return;
+  }
+  var xBar = $table.elemStore["main-body-alignXBar"];
+  var yBar = $table.elemStore["main-body-alignYBar"];
+  if (xBar) {
+    xBar.style.display = "block";
+    xBar.style.top = cell.offsetTop - 1 + "px";
+    xBar.style.setProperty("--after-top-offset", cell.offsetHeight + "px");
+  }
+  if (yBar) {
+    yBar.style.display = "block";
+    yBar.style.left = cell.offsetLeft - 1 + "px";
+    yBar.style.setProperty("--after-left-offset", cell.offsetWidth + "px");
+  }
+};
 var useCellEvent = function useCellEvent2(_ref21) {
   var table = _ref21.table, $table = _ref21.$table;
   var isBound = false;
@@ -2082,7 +2115,7 @@ var useCellEvent = function useCellEvent2(_ref21) {
     var source = getEventSource(e, $table);
     if (source) {
       var params = getEventParams(source, $table);
-      var _$table$mouseConfig = $table.mouseConfig, mouseConfig = _$table$mouseConfig === void 0 ? {} : _$table$mouseConfig;
+      var _$table$mouseConfig3 = $table.mouseConfig, mouseConfig = _$table$mouseConfig3 === void 0 ? {} : _$table$mouseConfig3;
       if (source.part === "header" && mouseConfig.checked) {
         $table.triggerHeaderCellMousedownEvent(e, params);
       }
@@ -2100,7 +2133,7 @@ var useCellEvent = function useCellEvent2(_ref21) {
       var satisfy = function satisfy2(equal, trigger2) {
         return trigger2 === "row" || equal(column) && trigger2 === "cell";
       };
-      var editConfig = $table.editConfig, _$table$expandConfig = $table.expandConfig, expandConfig = _$table$expandConfig === void 0 ? {} : _$table$expandConfig, highlightCurrentColumn = $table.highlightCurrentColumn, highlightCurrentRow = $table.highlightCurrentRow, _$table$mouseConfig2 = $table.mouseConfig, mouseConfig = _$table$mouseConfig2 === void 0 ? {} : _$table$mouseConfig2, _$table$radioConfig = $table.radioConfig, radioConfig = _$table$radioConfig === void 0 ? {} : _$table$radioConfig, _$table$selectConfig = $table.selectConfig, selectConfig = _$table$selectConfig === void 0 ? {} : _$table$selectConfig, sortOpts2 = $table.sortOpts, tableListeners = $table.tableListeners, _$table$treeConfig = $table.treeConfig, treeConfig = _$table$treeConfig === void 0 ? {} : _$table$treeConfig;
+      var editConfig = $table.editConfig, _$table$expandConfig = $table.expandConfig, expandConfig = _$table$expandConfig === void 0 ? {} : _$table$expandConfig, highlightCurrentColumn = $table.highlightCurrentColumn, highlightCurrentRow = $table.highlightCurrentRow, _$table$mouseConfig4 = $table.mouseConfig, mouseConfig = _$table$mouseConfig4 === void 0 ? {} : _$table$mouseConfig4, _$table$radioConfig = $table.radioConfig, radioConfig = _$table$radioConfig === void 0 ? {} : _$table$radioConfig, _$table$selectConfig = $table.selectConfig, selectConfig = _$table$selectConfig === void 0 ? {} : _$table$selectConfig, sortOpts2 = $table.sortOpts, tableListeners = $table.tableListeners, _$table$treeConfig = $table.treeConfig, treeConfig = _$table$treeConfig === void 0 ? {} : _$table$treeConfig;
       if (source.part === "header" && (highlightCurrentColumn || tableListeners["header-cell-click"] || mouseConfig.checked || sortOpts2.trigger === "cell")) {
         $table.triggerHeaderCellClickEvent(e, params);
       }
@@ -2232,6 +2265,7 @@ var useCellEvent = function useCellEvent2(_ref21) {
         if (tableListeners["cell-mouseleave"]) {
           emitEvent($table, "cell-mouseleave", [params, e]);
         }
+        hideAlignLines($table, curCell);
       }
     }
     if (curCell) {
@@ -2241,6 +2275,7 @@ var useCellEvent = function useCellEvent2(_ref21) {
         if (tableListeners["cell-mouseenter"]) {
           emitEvent($table, "cell-mouseenter", [_params, _e]);
         }
+        showAlignLines($table, curCell);
       }
     }
   });
@@ -2781,7 +2816,7 @@ function renderColumn(_ref39) {
     row: row2,
     column
   } : _ref40$params;
-  var isMessageDefault = validOpts2.isMessageDefault, isMessageInline = validOpts2.isMessageInline;
+  var isMessageDefault = validOpts2.isMessageDefault, isMessageInline = validOpts2.isMessageInline, highlightError = validOpts2.highlightError;
   var actived = editStore.actived;
   var validated = validatedMap[column.id + "-" + row2[rowId]];
   var validError = validStore.row === row2 && validStore.column === column;
@@ -2810,7 +2845,7 @@ function renderColumn(_ref39) {
       "rowspan": attrs.rowspan > 1 ? attrs.rowspan : void 0,
       "colspan": attrs.colspan > 1 ? attrs.colspan : void 0
     },
-    "class": ["tiny-grid-body__column", column.id, (_ref41 = {}, _ref41["col__" + cellAlign] = cellAlign, _ref41["col__edit"] = editor, _ref41["col__index"] = column.type === "index", _ref41["col__radio"] = column.type === "radio", _ref41["col__selection"] = column.type === "selection", _ref41["col__ellipsis"] = cellOverflowHint, _ref41["edit__visible"] = editor && editor.type === "visible", _ref41["col__dirty"] = isDirty, _ref41["col__actived"] = columnActived, _ref41["col__valid-error"] = validError && validated, _ref41["col__valid-success"] = columnActived ? !validError && !validated : isDirty && !validated, _ref41["col__treenode"] = column.treeNode, _ref41), getClass(className, params), getClass(cellClassName, params), getFixedClass(column, $table), attrs._stickyClass || ""]
+    "class": ["tiny-grid-body__column", column.id, (_ref41 = {}, _ref41["col__" + cellAlign] = cellAlign, _ref41["col__edit"] = editor, _ref41["col__index"] = column.type === "index", _ref41["col__radio"] = column.type === "radio", _ref41["col__selection"] = column.type === "selection", _ref41["col__ellipsis"] = cellOverflowHint, _ref41["edit__visible"] = editor && editor.type === "visible", _ref41["col__dirty"] = isDirty, _ref41["col__actived"] = columnActived, _ref41["col__highlight-error"] = highlightError && validated, _ref41["col__valid-error"] = validError && validated, _ref41["col__valid-success"] = columnActived ? !validError && !validated : isDirty && !validated, _ref41["col__treenode"] = column.treeNode, _ref41), getClass(className, params), getClass(cellClassName, params), getFixedClass(column, $table), attrs._stickyClass || ""]
   }, [[
     // 行拖拽手柄
     dropConfig.rowHandle === "index" && column.type === "index" ? h("div", {
@@ -2847,7 +2882,7 @@ function renderHeaderRows(_vm) {
   var $table = _vm.$parent, headerTable = _vm.headerTable;
   var headerCellClassName = $table.headerCellClassName, headerRowClassName = $table.headerRowClassName, headerSuffixIconAbsolute = $table.headerSuffixIconAbsolute;
   var allAlign = $table.align, border = $table.border, allHeaderAlign = $table.headerAlign, resizable = $table.resizable;
-  var editConfig = $table.editConfig, operationColumnResizable = $table.operationColumnResizable, _$table$mouseConfig3 = $table.mouseConfig, mouseConfig = _$table$mouseConfig3 === void 0 ? {} : _$table$mouseConfig3, _$table$dropConfig2 = $table.dropConfig, dropConfig = _$table$dropConfig2 === void 0 ? {} : _$table$dropConfig2;
+  var editConfig = $table.editConfig, operationColumnResizable = $table.operationColumnResizable, _$table$mouseConfig5 = $table.mouseConfig, mouseConfig = _$table$mouseConfig5 === void 0 ? {} : _$table$mouseConfig5, _$table$dropConfig2 = $table.dropConfig, dropConfig = _$table$dropConfig2 === void 0 ? {} : _$table$dropConfig2;
   return headerTable.map(function(cols, $rowIndex) {
     return h("tr", {
       "attrs": {
@@ -3427,6 +3462,8 @@ var Body = defineComponent({
     var thead = hooks.ref();
     var tbody = hooks.ref();
     var ySpace = hooks.ref();
+    var alignXBar = hooks.ref();
+    var alignYBar = hooks.ref();
     hooks.watch(wrapperScrollLeft, function(wrapperScrollLeft2) {
       var el = stickyWrapper.value;
       if (!el) return;
@@ -3452,13 +3489,15 @@ var Body = defineComponent({
       $table
     });
     var _useCellSpan = useCellSpan(vm, props), normalRows = _useCellSpan.normalRows, footerRows = _useCellSpan.footerRows;
-    hooks.watch([body, table, thead, tbody, ySpace], function() {
+    hooks.watch([body, table, thead, tbody, ySpace, alignXBar, alignYBar], function() {
       var elemStore = $table.elemStore;
       elemStore["main-body-wrapper"] = body.value;
       elemStore["main-body-table"] = table.value;
       elemStore["main-body-headerList"] = thead.value;
       elemStore["main-body-list"] = tbody.value;
       elemStore["main-body-ySpace"] = ySpace.value;
+      elemStore["main-body-alignXBar"] = alignXBar.value;
+      elemStore["main-body-alignYBar"] = alignYBar.value;
     });
     var bodyClientWidth = hooks.ref(0);
     var resizeObserver = new ResizeObserver(function(entries) {
@@ -3533,6 +3572,8 @@ var Body = defineComponent({
       thead,
       tbody,
       ySpace,
+      alignXBar,
+      alignYBar,
       normalRows,
       footerRows,
       resetStickyWrapperScrollPos
@@ -3554,11 +3595,26 @@ var Body = defineComponent({
         "no-data": isNoData && $table.isShapeTable
       },
       "style": {
+        "--body-container-scroll-height": containerScrollHeight + "px",
+        "--body-container-scroll-width": containerScrollWidth + "px",
         height: bodyWrapperHeight ? bodyWrapperHeight + "px" : void 0,
         minHeight: bodyWrapperMinHeight ? bodyWrapperMinHeight + "px" : void 0,
         maxHeight: bodyWrapperMaxHeight ? bodyWrapperMaxHeight + "px" : void 0
       }
     }, [[
+      mouseConfig != null && mouseConfig.hover ? [h2("div", {
+        "ref": "alignYBar",
+        "class": "tiny-grid-body__hover-align-y-bar",
+        "style": {
+          height: containerScrollHeight + "px"
+        }
+      }), h2("div", {
+        "ref": "alignXBar",
+        "class": "tiny-grid-body__hover-align-x-bar",
+        "style": {
+          width: containerScrollWidth + "px"
+        }
+      })] : null,
       h2("div", {
         "class": "tiny-grid-body__x-space",
         "style": {
@@ -7560,19 +7616,26 @@ var Methods$d = {
   clearAll: function clearAll(silent) {
     var _this$$grid$fetchOpti = this.$grid.fetchOption, fetchOption = _this$$grid$fetchOpti === void 0 ? {} : _this$$grid$fetchOpti;
     var isReloadFilter = fetchOption.isReloadFilter, _fetchOption$isReload = fetchOption.isReloadScroll, isReloadScroll = _fetchOption$isReload === void 0 ? false : _fetchOption$isReload;
-    var functionNames = ["clearScroll", "clearSort", "clearCurrentRow", "clearCurrentColumn", "clearSelection", "clearRowExpand", "clearTreeExpand"];
-    if (isReloadScroll) {
-      functionNames = functionNames.filter(function(i) {
-        return i !== "clearScroll";
-      });
+    this.clearSort();
+    this.clearCurrentRow();
+    this.clearCurrentColumn();
+    this.clearSelection();
+    this.clearRowExpand();
+    this.clearTreeExpand();
+    this.clearValidateMap();
+    if (!isReloadScroll) {
+      this.clearScroll();
     }
-    run(functionNames, this);
     this.cellStatus.clear();
     if (typeof isReloadFilter === "undefined" ? Grid$1._filter : !isReloadFilter) {
       this.clearFilter(silent);
     }
     if (this.keyboardConfig || this.mouseConfig) {
-      run(["clearIndexChecked", "clearHeaderChecked", "clearChecked", "clearSelected", "clearCopyed"], this);
+      this.clearIndexChecked();
+      this.clearHeaderChecked();
+      this.clearChecked();
+      this.clearSelected();
+      this.clearCopyed();
     }
     return this.clearActived();
   },
@@ -7581,6 +7644,7 @@ var Methods$d = {
     var next = function next2() {
       _this16.tableData = [];
       _this16.cellStatus.clear();
+      _this16.clearValidateMap();
       return _this16.loadTableData(data7 || _this16.tableFullData);
     };
     return this.$nextTick().then(next);
@@ -10983,7 +11047,8 @@ var Table = defineComponent({
         id: "",
         multi: false,
         options: [],
-        visible: false
+        visible: false,
+        searchValue: ""
       },
       // 所有列已禁用
       headerCheckDisabled: false,
@@ -11265,6 +11330,8 @@ var Table = defineComponent({
     var bodyWrapperHeight = hooks.ref();
     var bodyWrapperMinHeight = hooks.ref();
     var bodyWrapperMaxHeight = hooks.ref();
+    var containerScrollWidth = hooks.ref(0);
+    var containerScrollHeight = hooks.ref(0);
     var bodyTableWidth = hooks.ref();
     var scrollLoadScrollHeight = hooks.ref();
     var columnStore = hooks.ref({
@@ -11425,6 +11492,8 @@ var Table = defineComponent({
       bodyWrapperHeight,
       bodyWrapperMinHeight,
       bodyWrapperMaxHeight,
+      containerScrollWidth,
+      containerScrollHeight,
       bodyTableWidth,
       scrollLoadScrollHeight,
       columnStore,
@@ -11446,7 +11515,7 @@ var Table = defineComponent({
     return h("div", {
       class: (_class4 = {
         "tiny-grid h-full sm:h-auto !bg-transparent sm:!bg-color-bg-1 after:border-none sm:after:border-solid": true
-      }, _class4["row__valid-" + validOpts2.message] = true, _class4["size__" + vSize3] = vSize3, _class4["tiny-grid-editable"] = editConfig, _class4["show__head"] = showHeader, _class4["show__foot"] = showFooter, _class4["scroll__y"] = overflowY, _class4["scroll__x"] = overflowX, _class4["all-overflow"] = showOverflow, _class4["all-head-overflow"] = showHeaderOverflow, _class4["tiny-grid-cell__highlight"] = highlightCell, _class4["tiny-grid__animat"] = optimizeOpts.animat, _class4["tiny-grid__stripe"] = !isThemeSaas3 && stripe, _class4["tiny-grid__stripe-saas"] = isThemeSaas3 && stripeSaas, _class4["tiny-grid__border"] = border || isGroup2, _class4["tiny-grid__border-saas"] = isThemeSaas3 && borderSaas, _class4["tiny-grid__group-saas"] = isThemeSaas3 && isGroup2, _class4["tiny-grid__border-vertical"] = borderVertical, _class4["tiny-grid__checked"] = mouseConfig.checked, _class4["mark-insert"] = editConfig && editConfig.markInsert, _class4["edit__no-border"] = editConfig && editConfig.showBorder === false, _class4["is__loading"] = loading, _class4["row__highlight"] = highlightHoverRow, _class4["column__highlight"] = highlightHoverColumn, _class4["is__row-span"] = rowSpan && rowSpan.length > 0 || typeof spanMethod === "function", _class4["row__drop-handle--index"] = dropConfig.rowHandle === "index", _class4["fixed__sticky"] = horizonScroll.fixed, _class4["tiny-grid-fixed__left"] = !horizonScroll.isLeft, _class4["tiny-grid-fixed__right"] = !horizonScroll.isRight, _class4)
+      }, _class4["row__valid-" + validOpts2.message] = true, _class4["size__" + vSize3] = vSize3, _class4["tiny-grid-editable"] = editConfig, _class4["show__head"] = showHeader, _class4["show__foot"] = showFooter, _class4["scroll__y"] = overflowY, _class4["scroll__x"] = overflowX, _class4["all-overflow"] = showOverflow, _class4["all-head-overflow"] = showHeaderOverflow, _class4["tiny-grid-cell__highlight"] = highlightCell, _class4["tiny-grid__animat"] = optimizeOpts.animat, _class4["tiny-grid__stripe"] = !isThemeSaas3 && stripe, _class4["tiny-grid__stripe-saas"] = isThemeSaas3 && stripeSaas, _class4["tiny-grid__border"] = border || isGroup2, _class4["tiny-grid__border-saas"] = isThemeSaas3 && borderSaas, _class4["tiny-grid__group-saas"] = isThemeSaas3 && isGroup2, _class4["tiny-grid__border-vertical"] = borderVertical, _class4["tiny-grid__checked"] = mouseConfig.checked, _class4["tiny-grid__hover-align"] = mouseConfig.hover, _class4["mark-insert"] = editConfig && editConfig.markInsert, _class4["edit__no-border"] = editConfig && editConfig.showBorder === false, _class4["is__loading"] = loading, _class4["row__highlight"] = highlightHoverRow, _class4["column__highlight"] = highlightHoverColumn, _class4["is__row-span"] = rowSpan && rowSpan.length > 0 || typeof spanMethod === "function", _class4["row__drop-handle--index"] = dropConfig.rowHandle === "index", _class4["fixed__sticky"] = horizonScroll.fixed, _class4["tiny-grid-fixed__left"] = !horizonScroll.isLeft, _class4["tiny-grid-fixed__right"] = !horizonScroll.isRight, _class4)
     }, [
       // 隐藏列
       h("div", {
@@ -11474,9 +11543,10 @@ var Table = defineComponent({
         key: "tinyGridResizeBar"
       }) : null,
       // 加载中
-      h(loadingComponent || Loading, {
+      h(Loading, {
         props: {
-          visible: loading
+          visible: loading,
+          loadingComponent
         },
         class: this.viewCls("gridLoading")
       }),
@@ -13975,6 +14045,13 @@ var Methods$a = {
     this.clostValidTooltip(void 0);
     return this.$nextTick();
   },
+  clearValidateMap: function clearValidateMap() {
+    if (this.validatedMap) {
+      for (var key in this.validatedMap) {
+        this.validatedMap[key] = false;
+      }
+    }
+  },
   // 触发校验
   triggerValidate: function triggerValidate(type) {
     var _this70 = this;

package/package.json

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

package/src/config.d.ts

@@ -1,6 +1,7 @@
 declare const GlobalConfig: {
     validConfig: {
         message: string;
+        highlightError: boolean;
         icon: any;
     };
     editConfig: {

package/src/validator/src/methods.d.ts

@@ -35,6 +35,7 @@ declare const _default: {
      */
     validCellRules(type: any, row: any, column: any, defaultValue: any): Promise<void>;
     _clearValidate(): any;
+    clearValidateMap(): void;
     triggerValidate(type: any): Promise<void>;
     showValidTooltip(params: any): void;
     clostValidTooltip(): any;