umy-ui-table 1.2.4 → 1.2.6

package/lib/ux-table-column.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=35)}({33:function(e,t){e.exports=require("vxe-table/lib/column")},35:function(e,t,n){"use strict";n.r(t);var r=n(33),o=n.n(r),u=Object.assign({},o.a,{name:"UxTableColumn"});u.install=function(e){e.component(u.name,u)},t.default=u}});
+module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=39)}({35:function(e,t){e.exports=require("vxe-table/lib/column")},39:function(e,t,n){"use strict";n.r(t);var r=n(35),o=n.n(r),u=Object.assign({},o.a,{name:"UxTableColumn"});u.install=function(e){e.component(u.name,u)},t.default=u}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umy-ui-table",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "一个基于 vue 的 PC 端表格UI库，解决万级数据渲染卡顿问题，过万数据点击全选卡顿，等等问题",
   "author": {
     "name": "foriacus"
@@ -9,7 +9,7 @@
     "lint": "eslint --fix --ext .js,.vue examples",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lib:file": "node build/build-entry.js",
-    "lib:utils": "cross-env BABEL_ENV=utils babel tools --out-dir lib",
+    "lib:utils": "cross-env BABEL_ENV=utils babel tools --out-dir lib && webpack --config build/webpack.locale.js",
     "lib:umd": "node build/build-locale.js",
     "lib:theme": "gulp build",
     "lib": "npm run clean && npm run lib:file && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run lib:utils && npm run lib:umd && npm run lib:theme"
@@ -34,6 +34,7 @@
     "url": "git+https://github.com/popo-fishes/umy-ui.git"
   },
   "dependencies": {
+    "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "async-validator": "~1.8.1",
     "deepmerge": "^1.2.0",
     "normalize-wheel": "^1.0.1",
@@ -41,6 +42,7 @@
     "throttle-debounce": "^1.0.1",
     "vuedraggable": "^2.23.2",
     "vxe-table": "^3.22.9",
+    "vxe-pc-ui": "3.16.23",
     "@vxe-ui/core": "^3.4.19",
     "xe-utils": ">= 3"
   },
@@ -54,7 +56,6 @@
     "animejs": "^3.1.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "babel-loader": "^7.1.5",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-istanbul": "^4.1.1",

package/packages/tools/locale/index.js

@@ -1,48 +1,2 @@
-import defaultLang from './lang/zh-CN';
-import Vue from 'vue';
-import deepmerge from 'deepmerge';
-import Format from './format';
-
-const format = Format(Vue);
-let lang = defaultLang;
-let merged = false;
-let i18nHandler = function() {
-  const vuei18n = Object.getPrototypeOf(this || Vue).$t;
-  if (typeof vuei18n === 'function' && !!Vue.locale) {
-    if (!merged) {
-      merged = true;
-      Vue.locale(
-        Vue.config.lang,
-        deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
-      );
-    }
-    return vuei18n.apply(this, arguments);
-  }
-};
-
-export const t = function(path, options) {
-  let value = i18nHandler.apply(this, arguments);
-  if (value !== null && value !== undefined) return value;
-  const array = path.split('.');
-  let current = lang;
-  for (let i = 0, j = array.length; i < j; i++) {
-    const property = array[i];
-    value = current[property];
-    if (i === j - 1) {
-      return format(value, options)
-    }
-    if (!value) return '';
-    current = value;
-  }
-  return '';
-};
-
-export const use = function(l) {
-  lang = l || lang;
-};
-
-export const i18n = function(fn) {
-  i18nHandler = fn || i18nHandler;
-};
-
-export default { use, t, i18n };
+// Table, pagination and the public locale entry share one language store.
+export { default, use, t, i18n } from "../../../tools/locale";

package/packages/ux-grid/mixins/index.js

@@ -1,5 +1,41 @@
 import { isArrayFn } from "../../utils/common";
+import { createDialogDraft, mergeDialogDraft } from "../src/dialog-draft";
+// Vue 2 instance listeners ($on/$once) are not included in $listeners.
+function hasGridListener(vm, name) {
+  const events = vm._events && vm._events[name];
+  return !!((vm.$listeners && vm.$listeners[name]) || (events && events.length));
+}
+function bridgeStoppedClick(vm, params, header) {
+  if (vm._isDestroyed || vm._isBeingDestroyed) return;
+  const event = params && params.$event;
+  if (!event || event.type !== "click" || !event.target || !event.target.closest) return;
+  // Only VXE's built-in controls stop propagation. Row/cell-triggered actions
+  // must reach the native cell/header handler so current-change stays ordered.
+  if (!event.target.closest(".vxe-cell--checkbox,.vxe-cell--radio,.vxe-table--expand-btn,.vxe-cell--tree-btn,.vxe-sort--asc-btn,.vxe-sort--desc-btn")) return;
+  if (!hasGridListener(vm, header ? "header-click" : "cell-click") &&
+    (header || !hasGridListener(vm, "row-click"))) return;
+  const cell = event.target.closest(header ? "th" : "td");
+  const table = vm.$refs.singleTable;
+  const columnNode = cell && table && table.getColumnNode ? table.getColumnNode(cell) : null;
+  const column = params.column || (columnNode && columnNode.item);
+  if (!cell || !column) return;
+  const payload = Object.assign({}, params, { column, cell });
+  if (header) vm.headerClick(payload);
+  else vm.cellClick(payload);
+}
+function repeatedClick(vm, key, event) {
+  if (!event) return false;
+  const seen = vm[key] || (vm[key] = new WeakSet());
+  if (seen.has(event)) return true;
+  seen.add(event);
+  return false;
+}
 export default {
+  beforeDestroy() {
+    this.stopDialogSync();
+    clearTimeout(this._times);
+    this.clearNode();
+  },
   props: {
     beautifyTable: { default: false, type: Boolean }, // 美化表格，修改了样式
     showDialogIcon: { default: true, type: Boolean }, // 是否显示操作字段的上下移动按钮(侧滑框)
@@ -95,9 +131,10 @@ export default {
     },
     // 打开自定义字段框
     plDialogOpens() {
-      this._times = null;
-      // 打开时同步一次最新 dialogData（替代 deep watcher，避免每次变更都深拷贝）
-      this.newDialogData = JSON.parse(JSON.stringify(this.dialogData));
+      if (this._dialogUnwatch) return;
+      this._dialogDraft = createDialogDraft(this.dialogData);
+      this.newDialogData = this._dialogDraft.draft.slice();
+      this._dialogUnwatch = this.$watch("dialogData", () => this.syncDialogDraft(), { deep: true });
       this.$refs.plDialog.style.width = 300 + "px";
       this._times = setTimeout(() => {
         this.plDialogFals = true;
@@ -113,31 +150,43 @@ export default {
     },
     // 关闭自定义字段框（取消选择）
     closeModal() {
+      this.stopDialogSync();
       this.plDialogFals = false;
       clearTimeout(this._times);
       this.$refs.plDialog.style.width = 0 + "px";
-      this.aBox.style.display = "none";
       this.clearNode();
       this.newDialogData = JSON.parse(JSON.stringify(this.dialogData));
     },
     // 确认按钮
     confirmField() {
+      this.syncDialogDraft();
+      this.stopDialogSync();
       this.$emit("show-field", this.newDialogData);
       this.plDialogFals = false;
       clearTimeout(this._times);
       this.$refs.plDialog.style.width = 0 + "px";
-      this.aBox.style.display = "none";
       this.clearNode();
     },
     // 重置按钮
     reset() {
+      this.syncDialogDraft();
+      this.stopDialogSync();
       this.$emit("reset", this.newDialogData);
       this.plDialogFals = false;
       clearTimeout(this._times);
       this.$refs.plDialog.style.width = 0 + "px";
-      this.aBox.style.display = "none";
       this.clearNode();
     },
+    syncDialogDraft() {
+      if (!this._dialogDraft) return;
+      this._dialogDraft = mergeDialogDraft(this._dialogDraft, this.dialogData, this.newDialogData);
+      this.newDialogData = this._dialogDraft.value;
+    },
+    stopDialogSync() {
+      if (this._dialogUnwatch) this._dialogUnwatch();
+      this._dialogUnwatch = null;
+      this._dialogDraft = null;
+    },
     // 修改字段名按钮事件
     amendField(item, index) {
       this.$emit("amend-field", item, index);
@@ -147,10 +196,6 @@ export default {
       // 删除节点
       let parent = this.aBox ? this.aBox.parentNode : "";
       parent && parent.removeChild(this.aBox);
-      let doms = document.getElementsByClassName("modal-backdrop");
-      if (doms.length > 0) {
-        document.body.removeChild(doms[0]);
-      }
       this.aBox = null;
     },
 
@@ -202,7 +247,7 @@ export default {
           }
         });
         // 当选择项发生变化时会触发该事件（仅在有监听者时取值，避免无监听时全表扫描）
-        if (this.$listeners["selection-change"]) {
+        if (hasGridListener(this, "selection-change")) {
           const data = this.$refs.singleTable.getCheckboxRecords();
           this.$emit("selection-change", data);
         }
@@ -213,7 +258,7 @@ export default {
       if (this.$refs.singleTable) {
         this.$refs.singleTable.setAllCheckboxRow(checked);
         // 当选择项发生变化时会触发该事件（仅在有监听者时取值）
-        if (this.$listeners["selection-change"]) {
+        if (hasGridListener(this, "selection-change")) {
           const data = this.$refs.singleTable.getCheckboxRecords();
           this.$emit("selection-change", data);
         }
@@ -226,7 +271,7 @@ export default {
       if (this.$refs.singleTable) {
         this.$refs.singleTable.clearCheckboxRow();
         // 当选择项发生变化时会触发该事件（仅在有监听者时取值）
-        if (this.$listeners["selection-change"]) {
+        if (hasGridListener(this, "selection-change")) {
           const data = this.$refs.singleTable.getCheckboxRecords();
           this.$emit("selection-change", data);
         }
@@ -252,7 +297,8 @@ export default {
     },
     // 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
     doLayout() {
-      this.$refs.singleTable.recalculate();
+      const revision = this._selectedRevision || 0;
+      this.refreshSelectedAfter(this.$refs.singleTable.recalculate(), revision);
     },
     // 让表格滚动条回到顶部，和左侧
     pagingScrollTopLeft(top = 0, left = 0) {
@@ -277,7 +323,8 @@ export default {
       return this.$refs.singleTable.loadColumn(data);
     },
     refreshColumn() {
-      this.$refs.singleTable.refreshColumn();
+      const revision = this._selectedRevision || 0;
+      this.refreshSelectedAfter(this.$refs.singleTable.refreshColumn(), revision);
     },
     // 激活编辑状态
     setActiveRow(row) {
@@ -453,31 +500,34 @@ export default {
     selectAll(params) {
       // vxe 事件参数里的 records 是惰性 getter，仅在有监听者时才取值，避免每次全选都全表扫描
       if (
-        this.$listeners["select-all"] ||
-        this.$listeners["selection-change"]
+        hasGridListener(this, "select-all") ||
+        hasGridListener(this, "selection-change")
       ) {
         const data =
           params && typeof params.records === "function"
             ? params.records()
-            : this.$refs.singleTable.getCheckboxRecords();
+            : params && Array.isArray(params.records)
+              ? params.records : this.$refs.singleTable.getCheckboxRecords();
         this.$emit("select-all", data);
         // 当选择项发生变化时会触发该事件
         this.$emit("selection-change", data);
       }
+      bridgeStoppedClick(this, params, true);
     },
     // 当用户手动勾选数据行的 Checkbox 时触发的事件
     plSelect(params) {
       const { row, records } = params || {};
       // vxe 事件参数里的 records 是惰性 getter，仅在有监听者时才取值，避免每次勾选都全表扫描
-      if (this.$listeners["select"] || this.$listeners["selection-change"]) {
+      if (hasGridListener(this, "select") || hasGridListener(this, "selection-change")) {
         const data =
           typeof records === "function"
             ? records()
-            : this.$refs.singleTable.getCheckboxRecords();
+            : Array.isArray(records) ? records : this.$refs.singleTable.getCheckboxRecords();
         this.$emit("select", data, row);
         // 当选择项发生变化时会触发该事件
         this.$emit("selection-change", data);
       }
+      bridgeStoppedClick(this, params, false);
     },
     // 只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件
     radioChange({
@@ -488,13 +538,16 @@ export default {
       columnIndex,
       $columnIndex,
       cell,
+      $event,
     }) {
       this.$emit("radio-change", row, column);
+      bridgeStoppedClick(this, { row, column, cell, $event }, false);
     },
     // 当表格的排序条件发生变化的时候会触发该事件
-    sortChange({ column, property, order }) {
-      let objs = { column, prop: property, order };
+    sortChange({ column, property, field, order, $event }) {
+      let objs = { column, prop: property === undefined ? field : property, order };
       this.$emit("sort-change", objs);
+      bridgeStoppedClick(this, { column, $event }, true);
     },
     // 当表格的当前行发生变化的时候会触发该事件
     currentChange({ row }) {
@@ -521,15 +574,32 @@ export default {
         $columnIndex,
         $event,
       });
+      bridgeStoppedClick(this, { row, column, $event }, false);
     },
     // 当表格的筛选条件发生变化的时候会触发该事件
-    filterChange({ column, property, values, datas, filters, $event }) {
+    filterChange({ column, property, field, values, datas, filters, $event }) {
+      const supplied = typeof filters === "function" ? filters() : filters;
+      const table = this.$refs.singleTable;
+      const columns = table && table.getTableColumn ? table.getTableColumn().visibleColumn : null;
+      // The legacy wrapper reports every visible filterable column, including
+      // those with no selection. Keep the new kernel's checked-only API intact.
+      const compatibleFilters = columns ? columns.filter(item => item.filters && item.filters.length).map(item => {
+        const checked = item.filters.filter(option => option.checked);
+        const existing = (supplied || []).find(entry => entry.column === item);
+        return Object.assign({}, existing, {
+          column: item,
+          field: item.field || item.property,
+          property: item.property || item.field,
+          values: checked.map(option => option.value),
+          datas: checked.map(option => option.data),
+        });
+      }) : supplied;
       this.$emit("filter-change", {
         column,
-        property,
+        property: property === undefined ? field : property,
         values,
         datas,
-        filters,
+        filters: compatibleFilters,
         $event,
       });
     },
@@ -544,6 +614,10 @@ export default {
       cell,
       $event,
     }) {
+      // VXE dispatches this from mouseover, which also bubbles when moving
+      // between descendants. The legacy wrapper exposes mouseenter semantics.
+      const relatedTarget = $event && $event.relatedTarget;
+      if (cell && relatedTarget && relatedTarget.nodeType && cell.contains(relatedTarget)) return;
       this.$emit("cell-mouse-enter", row, column, cell, $event);
     },
     // 当单元格 hover 退出时会触发该事件
@@ -570,6 +644,7 @@ export default {
       cell,
       $event,
     }) {
+      if (repeatedClick(this, "_cellClickEvents", $event)) return;
       this.$emit("cell-click", row, column, cell, $event);
       // row-click	当某一行被点击时会触发该事件	row, event, column
       // 只有当点击的单元格不是复选框才触发行事件！
@@ -606,6 +681,7 @@ export default {
       columnIndex,
       $event,
     }) {
+      if (repeatedClick(this, "_headerClickEvents", $event)) return;
       this.$emit("header-click", column, $event);
     },
     // 当某一列的表头被鼠标右键点击时触发该事件	column, $event
@@ -686,9 +762,39 @@ export default {
         $columnIndex,
       });
     },
+    // elx-grid 扩展事件：鼠标或键盘切换当前选中单元格时触发
+    editCurrentlyActive({ row, column, cell }) {
+      this._selectedRevision = (this._selectedRevision || 0) + 1;
+      const table = this.$refs.singleTable;
+      const targetCell =
+        cell ||
+        (table && table.getCellElement
+          ? table.getCellElement(row, column)
+          : null);
+      this.$emit("edit-currently-active", {
+        row,
+        column,
+        cell: targetCell,
+      });
+    },
+    // Only public wrapper refreshes participate; no global VXE hooks or
+    // private editStore access. Preserve the legacy undefined method return.
+    refreshSelectedAfter(completion, revision = this._selectedRevision || 0) {
+      Promise.resolve(completion).then(() => this.$nextTick()).then(() => {
+        if (this._isDestroyed || this._isBeingDestroyed ||
+          revision !== (this._selectedRevision || 0) ||
+          !hasGridListener(this, "edit-currently-active")) return;
+        const table = this.$refs.singleTable;
+        const selected = table && table.getSelectedCell ? table.getSelectedCell() : null;
+        if (!selected) return;
+        const cell = table.getCellElement(selected.row, selected.column);
+        if (cell) this.editCurrentlyActive(Object.assign({}, selected, { cell }));
+      }).catch(error => console.error("[UxGrid] Selected cell refresh failed", error));
+    },
     // 当树节点展开或收起时会触发该事件
     toggleTreeExpandEv(row) {
       this.$emit("toggle-tree-expand", row);
+      bridgeStoppedClick(this, row, false);
     },
     // 键盘按下事件
     keydown({ $event }) {
@@ -700,7 +806,9 @@ export default {
     },
     // vxe 后续重新加载/刷新数据并渲染完成后触发
     dataRendered(params) {
+      const revision = this._selectedRevision || 0;
       this.$emit("data-rendered", params);
+      this.refreshSelectedAfter(undefined, revision);
     },
   },
 };

package/packages/ux-grid/src/dialog-draft.js

@@ -0,0 +1,75 @@
+import XEUtils from "xe-utils";
+
+// Keep the source snapshot separate from the editable draft. Only an open
+// dialog owns this state; closed grids do not traverse dialogData.
+export function createDialogDraft(source) {
+  return { source: source.slice(), baseline: XEUtils.clone(source, true), draft: XEUtils.clone(source, true) };
+}
+
+export function mergeDialogDraft(previous, source, draft) {
+  const keyOf = item => {
+    for (const field of ["id", "field", "prop", "key"]) {
+      if (item[field] !== undefined && item[field] !== null) return field + ":" + item[field];
+    }
+    return null;
+  };
+  const matchIndices = (items, originals) => {
+    const indices = items.map(() => -1);
+    const used = new Set();
+    const assign = (index, oldIndex) => {
+      if (oldIndex >= 0 && !used.has(oldIndex)) {
+        indices[index] = oldIndex;
+        used.add(oldIndex);
+      }
+    };
+    // Reserve every surviving reference before considering positional fallback:
+    // a new item inserted at index 0 must not take the old index of a later A.
+    items.forEach((item, index) => {
+      assign(index, originals.findIndex((entry, oldIndex) => entry === item && !used.has(oldIndex)));
+    });
+    items.forEach((item, index) => {
+      const key = keyOf(item);
+      if (indices[index] < 0 && key !== null) {
+        assign(index, previous.baseline.findIndex((entry, oldIndex) => keyOf(entry) === key && !used.has(oldIndex)));
+      }
+    });
+    items.forEach((item, index) => {
+      if (indices[index] < 0 && keyOf(item) === null &&
+        index < previous.baseline.length && keyOf(previous.baseline[index]) === null) {
+        assign(index, index);
+      }
+    });
+    return indices;
+  };
+  const draftIndices = matchIndices(draft, previous.draft);
+  const sourceIndices = matchIndices(source, previous.source);
+  const incoming = source.map((item, index) => {
+    const oldIndex = sourceIndices[index];
+    const draftIndex = draftIndices.indexOf(oldIndex);
+    const value = XEUtils.clone(item, true);
+    if (oldIndex >= 0 && draftIndex >= 0) {
+      const base = previous.baseline[oldIndex];
+      const edited = draft[draftIndex];
+      // A local field edit wins a simultaneous parent change to that field.
+      new Set(Object.keys(base).concat(Object.keys(edited))).forEach(field => {
+        if (!XEUtils.isEqual(base[field], edited[field])) {
+          if (Object.prototype.hasOwnProperty.call(edited, field)) value[field] = XEUtils.clone(edited[field], true);
+          else delete value[field];
+        }
+      });
+    }
+    return { oldIndex, value };
+  });
+  const reordered = draftIndices.some((index, position) => index !== position);
+  let nextDraft = incoming.map(entry => entry.value);
+  if (reordered) {
+    const ordered = draftIndices.filter(index => index >= 0)
+      .map(index => incoming.find(entry => entry.oldIndex === index)).filter(Boolean);
+    const retained = new Set(ordered);
+    nextDraft = ordered.concat(incoming.filter(entry => !retained.has(entry))).map(entry => entry.value);
+  }
+  // Store draft references in source order so subsequent drag operations can
+  // still be matched even when the item does not declare a stable key.
+  return { source: source.slice(), baseline: XEUtils.clone(source, true),
+    draft: incoming.map(entry => entry.value), value: nextDraft };
+}