umy-ui-table 1.2.3 → 1.2.5

package/packages/ux-grid/src/grid-height.js

@@ -0,0 +1,65 @@
+import ResizeObserver from "resize-observer-polyfill";
+
+export function hasGridHeight(value) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+// Measure the configured limit in the root's actual grid/flex position. Size
+// containment excludes table content from intrinsic sizing during measurement.
+export function resolveGridHeight(value, root, isMax = false) {
+  if (!hasGridHeight(value)) return null;
+  if (typeof value === "number") return Number.isFinite(value) ? Math.max(0, value) : null;
+  const css = String(value).trim();
+  if (/^\d+(?:\.\d+)?(?:px)?$/i.test(css)) return Number.parseFloat(css);
+  if (!root || !root.parentElement || !root.getClientRects().length) return null;
+  const view = root.ownerDocument.defaultView;
+  const width = view.getComputedStyle(root).width;
+  const saved = root.style.cssText;
+  try {
+    const style = root.style;
+    style.removeProperty("height");
+    style.setProperty("height", css === "auto" ? "100%" : css, "important");
+    if (!style.height) return null;
+    style.setProperty("width", width, "important");
+    style.setProperty("min-height", "0", "important");
+    style.setProperty("max-height", isMax ? (css === "auto" ? "100%" : css) : "none", "important");
+    // A configured ceiling is not the space assigned by flex. Match numeric
+    // maxHeight semantics; restore the user's real flex rules in finally.
+    if (isMax) style.setProperty("flex", "none", "important");
+    style.setProperty("contain", "size", "important");
+    style.setProperty("overflow", "hidden", "important");
+    const size = Number.parseFloat(view.getComputedStyle(root).height);
+    if (size === 0 && (css === "auto" || css.indexOf("%") !== -1)) return null;
+    return Number.isFinite(size) && size >= 0 ? size : null;
+  } finally {
+    root.style.cssText = saved;
+  }
+}
+
+export function getGridHeightInset(root) {
+  if (!root) return 0;
+  const style = root.ownerDocument.defaultView.getComputedStyle(root);
+  return style.boxSizing === "border-box"
+    ? ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
+      .reduce((sum, key) => sum + (Number.parseFloat(style[key]) || 0), 0)
+    : 0;
+}
+
+export function observeGridHeight(vm) {
+  const root = vm.$el;
+  if (!root || !root.parentElement) return () => {};
+  const observer = new ResizeObserver(() => vm.scheduleHeight());
+  observer.observe(root.parentElement);
+  observer.observe(root);
+  // Pagination can appear/disappear after mount; updated() reconnects when its
+  // element identity changes. Root observation also covers hidden -> visible.
+  const pager = vm.$refs.myPagination;
+  if (pager) observer.observe(pager);
+  const view = root.ownerDocument.defaultView;
+  const onResize = () => vm.scheduleHeight();
+  if (view) view.addEventListener("resize", onResize);
+  return () => {
+    observer.disconnect();
+    if (view) view.removeEventListener("resize", onResize);
+  };
+}

package/packages/ux-grid/src/grid-kernel.js

@@ -0,0 +1,14 @@
+import VxeGrid from "vxe-table/lib/grid";
+
+// The upstream columns watcher queues loadColumn in nextTick. A wrapper can
+// be destroyed before that callback runs, after its table refs are released.
+// Keep this cancellation local to UxGrid; active calls retain kernel semantics.
+export default {
+  extends: VxeGrid,
+  methods: {
+    loadColumn(...args) {
+      if (this._isDestroyed || this._isBeingDestroyed) return Promise.resolve();
+      return VxeGrid.methods.loadColumn.apply(this, args);
+    },
+  },
+};

package/packages/ux-grid/src/setup.js

@@ -0,0 +1,42 @@
+import { VxeUI } from "vxe-table/lib/ui";
+import zhCN from "vxe-table/lib/locale/lang/zh-CN";
+import XEUtils from "xe-utils";
+
+// Core setConfig deep-merges arrays by index. Restore pre-existing arrays
+// exactly after merging defaults (including empty arrays and nested arrays).
+function restoreConfigArrays(target, source) {
+  Object.keys(source).forEach(key => {
+    const value = source[key];
+    if (Array.isArray(value)) {
+      target[key] = XEUtils.clone(value, true);
+    } else if (XEUtils.isPlainObject(value) && target[key]) {
+      restoreConfigArrays(target[key], value);
+    }
+  });
+}
+
+// Register only missing UI dependencies. Importing PC UI initializes shared
+// defaults, so preserve existing application config and icon customizations.
+if (!VxeUI.getComponent("VxeTooltip") || !VxeUI.getComponent("VxeLoading")) {
+  const config = XEUtils.clone(VxeUI.getConfig(), true);
+  const icons = Object.assign({}, VxeUI.getIcon());
+  try {
+    if (!VxeUI.getComponent("VxeTooltip")) {
+      VxeUI.component(require("vxe-pc-ui/lib/tooltip/src/tooltip").default);
+    }
+    if (!VxeUI.getComponent("VxeLoading")) {
+      VxeUI.component(require("vxe-pc-ui/lib/loading/src/loading").default);
+    }
+  } finally {
+    VxeUI.setConfig(config);
+    restoreConfigArrays(VxeUI.getConfig(), config);
+    VxeUI.setIcon(icons);
+  }
+}
+
+// Initialize fresh consumers without replacing an application's chosen language
+// or translator. An already registered Chinese dictionary is retained as well.
+if (!VxeUI.getLanguage() && !VxeUI.getConfig().i18n) {
+  if (!VxeUI.hasLanguage("zh-CN")) VxeUI.setI18n("zh-CN", zhCN);
+  VxeUI.setLanguage("zh-CN");
+}

package/packages/ux-grid/src/ux-grid.vue

@@ -21,7 +21,8 @@
       :border="beautifyTable ? false : border"
       :scroll-y="scrollYConfig"
       :scroll-x="scrollXConfig"
-      context-menu
+      :virtual-y-config="computedVirtualYConfig"
+      :virtual-x-config="computedVirtualXConfig"
       :stripe="stripe"
       :row-key="rowKey"
       :column-key="columnKey"
@@ -33,18 +34,20 @@
       :expand-config="expandConfig"
       :keyboard-config="keyboardConfig"
       :mouse-config="mouseConfig"
+      :menu-config="{ enabled: true, header: { options: [] }, body: { options: [] }, footer: { options: [] } }"
       :checkbox-config="checkboxConfig"
       :tree-config="treeConfig"
       :sort-config="sortConfig"
       :show-header="showHeader"
       :show-overflow="showOverflow"
+      :tooltip-config="{}"
       :footer-method="footerMethod"
       :show-header-overflow="showHeaderOverflow"
       :show-footer-overflow="showFooterOverflow"
       :highlight-current-row="highlightCurrentRow"
-      :highlight-hover-row="highlightCurrentRow"
+      :highlight-hover-row="highlightHoverRow"
       :row-class-name="rowClassName"
-      :cell-class-name="cellClassName"
+      :cell-class-name="renderCellClassName"
       :header-row-class-name="headerRowClassName"
       :header-cell-class-name="headerCellClassName"
       :header-row-style="headerRowStyle"
@@ -69,14 +72,17 @@
       @edit-closed="editClosed"
       @edit-actived="editActived"
       @edit-disabled="editDisabled"
+      @cell-selected="editCurrentlyActive"
       @toggle-tree-expand="toggleTreeExpandEv"
       @toggle-row-expand="expChang"
       @keydown="keydown"
-      @edit-currently-active="editCurrentlyActive"
       @scroll="tableBodyScroll"
       @init-rendered="initRendered"
       @data-rendered="dataRendered"
     >
+      <template v-for="(_, name) in forwardedScopedSlots()" v-slot:[name]="params">
+        <slot :name="name" v-bind="params" />
+      </template>
       <!--无数据布局-->
       <template slot="empty">
         <slot name="empty">{{ emptyText }}</slot>
@@ -146,13 +152,15 @@ import draggable from "vuedraggable";
 import ElPagination from "../../pagination";
 import ElCheckbox from "../../checkbox";
 import ElButton from "../../button";
+import "./element-renderer";
 // 直接用 vxe-table@3.22.9 的 VxeGrid 作内核（替代原 umy-table 内置的 elx-grid）
 // 注意：VxeGrid 3.x 不渲染默认插槽（renderTable 仅透传 scopedSlots，不渲染 children），
 // 所以槽位式 <ux-table-column> 不会被其内部表格收集；这里在组件内解析这些槽位列 vnode，
 // 转成 columns 配置后经 :columns 交给 VxeGrid，从而兼容原有的 <ux-table-column> 写法
-import VxeGrid from "vxe-table/lib/grid";
+import VxeGrid from "./grid-kernel";
 import uxGridMixin from "../mixins";
-import { parseHeight, isArrayFn } from "../../utils/common";
+import { isArrayFn } from "../../utils/common";
+import { hasGridHeight, resolveGridHeight, getGridHeightInset, observeGridHeight } from "./grid-height";
 
 export default {
   name: "UxGrid",
@@ -169,6 +177,7 @@ export default {
       newHeight: null, // 表格高度
       newMaxHeight: null, // 表格最大高度
       slotColumns: [], // 由槽位式 <ux-table-column> 解析出的列配置（无 columns prop 时使用）
+      slotFormatterRevision: 0,
     };
   },
     computed: {
@@ -187,7 +196,9 @@ export default {
       ) {
         return Object.assign({}, this.scrollY, { enabled: false });
       }
-      return this.scrollY;
+      return Object.assign({}, this.scrollY, {
+        enabled: this.scrollY && this.scrollY.enabled !== undefined ? this.scrollY.enabled : true,
+      });
     },
     scrollXConfig() {
       const propsData = this.$options.propsData || {};
@@ -197,22 +208,30 @@ export default {
       ) {
         return Object.assign({}, this.scrollX, { enabled: false });
       }
-      return this.scrollX;
+      return Object.assign({}, this.scrollX, {
+        enabled: this.scrollX && this.scrollX.enabled !== undefined ? this.scrollX.enabled : true,
+      });
+    },
+    // vxe3 新接口：优先使用 virtualYConfig/virtualXConfig，不存在时回退到兼容 scrollY/scrollX
+    computedVirtualYConfig() {
+      if (this.virtualYConfig) return this.virtualYConfig;
+      return this.scrollYConfig;
+    },
+    computedVirtualXConfig() {
+      if (this.virtualXConfig) return this.virtualXConfig;
+      return this.scrollXConfig;
     },
     plTableHeight() {
-      if (this.height) {
-        return {
-          height: this.height + "px",
-        };
-      } else if (this.maxHeight) {
-        const maxHeight = parseHeight(this.maxHeight);
-        if (typeof maxHeight === "number") {
-          return {
-            "max-height": this.maxHeight + "px",
-          };
-        }
+      const property = hasGridHeight(this.height) ? "height" : "max-height";
+      let value = property === "height" ? this.height : this.maxHeight;
+      if (!hasGridHeight(value)) return {};
+      if (typeof value === "number") {
+        return Number.isFinite(value) ? { [property]: Math.max(0, value) + "px" } : {};
       }
-      return {};
+      value = String(value).trim();
+      // Keep the original CSS basis for flex/grid. Only the kernel receives
+      // the measured pixels; writing them here would redistribute flex space.
+      return { [property]: value === "auto" ? "100%" : /^\d+(?:\.\d+)?$/.test(value) ? value + "px" : value };
     },
   },
   watch: {
@@ -234,14 +253,23 @@ export default {
       immediate: true,
       handler() {
         this.setHeight();
+        this.scheduleHeight();
       },
     },
     maxHeight: {
       immediate: true,
       handler() {
         this.setHeight();
+        this.scheduleHeight();
       },
     },
+    paginationShow: "scheduleHeight",
+    layout: "scheduleHeight",
+    pagerCount: "scheduleHeight",
+    pageSizes: "scheduleHeight",
+    total: "scheduleHeight",
+    newPageSize: "scheduleHeight",
+    newcurrentPage: "scheduleHeight",
   },
   created() {
     this.newPageSize = this.pageSize;
@@ -252,32 +280,114 @@ export default {
   updated() {
     // 处理 <ux-table-column v-if> 动态增减列的场景
     this.syncSlotColumns();
+    this.connectHeightObserver();
   },
   mounted() {
     this.$ready = true;
+    this.connectHeightObserver();
+    this.setHeight();
     // VxeGrid 原生支持 columns prop（mounted 自动 loadColumn + watch 响应变化），无需手动 loadColumn
   },
+  activated() {
+    this._heightInactive = false;
+    this._heightLayoutSignature = null;
+    this.connectHeightObserver();
+    this.scheduleHeight();
+  },
+  deactivated() {
+    this._heightInactive = true;
+    this.disconnectHeightObserver();
+  },
+  beforeDestroy() {
+    this.disconnectHeightObserver();
+  },
   methods: {
+    renderCellClassName(params) {
+      // Every visible cell tracks this revision, including formatter cache hits.
+      this.slotFormatterRevision;
+      return typeof this.cellClassName === "function" ? this.cellClassName(params) : this.cellClassName;
+    },
+    forwardedScopedSlots() {
+      const slots = {};
+      Object.keys(this.$scopedSlots).forEach((name) => {
+        if (name !== "default" && name !== "empty") slots[name] = this.$scopedSlots[name];
+      });
+      return slots;
+    },
     // 解析默认插槽里的 <ux-table-column> vnode，转成 VxeGrid 的 columns 配置
     syncSlotColumns() {
       // columns prop 优先；仅在未传 columns 时解析槽位列
       if (this.columns && this.columns.length) return;
       try {
         const slotVnodes = (this.$slots.default || []).filter(
-          (vnode) => vnode && vnode.componentOptions
+          (vnode) => this.isColumnVNode(vnode)
         );
-        // 用稳定签名比对，避免仅插槽函数引用变化时反复赋值导致渲染循环
+        // 比较父组件提供的 vnode；自身更新不会改变这些引用，避免渲染循环。
         const sig = this.columnsSig(slotVnodes);
         if (sig === this._slotColumnsSig) return;
         this._slotColumnsSig = sig;
-        this.slotColumns = slotVnodes.map((vnode) => this.vnodeToColumn(vnode));
+        const columns = slotVnodes.map((vnode) => this.vnodeToColumn(vnode));
+        // Only render callbacks may change without loading columns again. Stable
+        // proxies retain VXE ColumnInfo, sort, resized width and edit identity.
+        const structure = this.columnsSig(slotVnodes, true);
+        if (structure === this._slotColumnsStructure && this._slotRenderSources) {
+          let index = 0;
+          let formatterChanged = false;
+          const update = (items) => items.forEach((column) => {
+            const source = this._slotRenderSources[index++];
+            if (source.column.formatter !== column.formatter) formatterChanged = true;
+            source.column = column;
+            source.revision.value++;
+            if (column.children) update(column.children);
+          });
+          update(columns);
+          const grid = this.$refs && this.$refs.singleTable;
+          if (formatterChanged && grid && grid.clearFormatterCache) {
+            grid.clearFormatterCache();
+            // Refresh visible cell rendering, without sorting/filtering all data.
+            this.slotFormatterRevision++;
+          }
+        } else {
+          this._slotColumnsStructure = structure;
+          this._slotRenderSources = [];
+          const wrap = (items) => items.map((column) => {
+            const revision = Vue.observable ? Vue.observable({ value: 0 }) : { value: 0 };
+            const source = { column, revision };
+            this._slotRenderSources.push(source);
+            const result = Object.assign({}, column);
+            if (typeof column.formatter === "function") {
+              result.formatter = function (...args) {
+                source.revision.value;
+                return source.column.formatter.apply(this, args);
+              };
+            }
+            if (column.slots) {
+              result.slots = {};
+              Object.keys(column.slots).forEach((name) => {
+                const value = column.slots[name];
+                result.slots[name] = typeof value === "function" ? (...args) => {
+                  source.revision.value;
+                  return source.column.slots[name](...args);
+                } : value;
+              });
+            }
+            if (column.children) result.children = wrap(column.children);
+            return result;
+          });
+          this.slotColumns = wrap(columns);
+        }
       } catch (e) {
-        // 解析异常时保持现状，避免渲染循环
+        console.error("[UxGrid] 无法解析槽位列", e);
       }
     },
+    isColumnVNode(vnode) {
+      const options = vnode && vnode.componentOptions;
+      const name = options && options.Ctor && options.Ctor.options.name;
+      return ["UxTableColumn", "VxeColumn", "VxeColgroup"].indexOf(name) > -1;
+    },
     // 把单个 <ux-table-column> vnode 转成列配置（支持嵌套分组列）
     vnodeToColumn(vnode) {
-      if (!vnode || !vnode.componentOptions) return null;
+      if (!this.isColumnVNode(vnode)) return null;
       const { propsData = {}, children } = vnode.componentOptions;
       const scopedSlots = (vnode.data && vnode.data.scopedSlots) || {};
       const column = Object.assign({}, propsData);
@@ -290,25 +400,48 @@ export default {
       }
       if (children && children.length) {
         const nested = [];
+        const normalSlots = {};
         children.forEach((child) => {
           const sub = this.vnodeToColumn(child);
           if (sub) nested.push(sub);
+          else if (!child.isComment && !(child.text && !child.text.trim())) {
+            const name = (child.data && child.data.slot) || "default";
+            const nodes = normalSlots[name] || (normalSlots[name] = []);
+            if (child.tag === "template") nodes.push(...(child.children || []));
+            else nodes.push(child);
+          }
         });
         if (nested.length) column.children = nested;
+        Object.keys(normalSlots).forEach((name) => {
+          if (!column.slots) column.slots = {};
+          if (!column.slots[name]) column.slots[name] = () => normalSlots[name];
+        });
       }
       return column;
     },
-    // 生成槽位列的稳定签名（忽略函数引用差异，按值比较）
-    columnsSig(vnodes) {
+    // 保留函数和普通 vnode 身份，使动态 slot/formatter 和 v-for 闭包及时更新。
+    columnsSig(vnodes, structureOnly) {
+      if (!this._columnReferenceIds) {
+        this._columnReferenceIds = new WeakMap();
+        this._columnReferenceSeq = 0;
+      }
+      const referenceId = (value) => {
+        if (!this._columnReferenceIds.has(value)) {
+          this._columnReferenceIds.set(value, ++this._columnReferenceSeq);
+        }
+        return this._columnReferenceIds.get(value);
+      };
       const fnReplacer = (key, val) =>
-        typeof val === "function" ? "[fn]" : val;
+        typeof val === "function" ? `[fn:${referenceId(val)}]` : val;
       const describe = (vnode) => {
-        if (!vnode || !vnode.componentOptions) return "";
+        if (!vnode) return "";
+        if (!this.isColumnVNode(vnode)) return structureOnly ? `slot:${(vnode.data && vnode.data.slot) || "default"}` : `node:${referenceId(vnode)}`;
         const { propsData = {}, children } = vnode.componentOptions;
-        const slotKeys = Object.keys(
-          (vnode.data && vnode.data.scopedSlots) || {}
-        ).join(",");
-        let sig = JSON.stringify(propsData, fnReplacer) + "{" + slotKeys + "}";
+        const slots = (vnode.data && vnode.data.scopedSlots) || {};
+        const signatureProps = Object.assign({}, propsData);
+        if (structureOnly && typeof signatureProps.formatter === "function") signatureProps.formatter = "[formatter]";
+        const signatureSlots = structureOnly ? Object.keys(slots).filter((key) => key.charAt(0) !== "$").sort() : slots;
+        let sig = JSON.stringify([vnode.key, signatureProps, signatureSlots], fnReplacer);
         if (children && children.length) {
           const childSigs = [];
           children.forEach((child) => {
@@ -340,21 +473,69 @@ export default {
       arr[index1] = arr.splice(index2, 1, arr[index1])[0];
       return arr;
     },
+    // Measure after the pagination DOM has applied its new layout. Coalesce
+    // related prop changes and never keep retrying a not-yet-mounted instance.
+    scheduleHeight() {
+      if (!this.$ready || this._heightInactive || this._heightUpdatePending || this._isDestroyed || this._isBeingDestroyed) return;
+      this._heightUpdatePending = true;
+      this.$nextTick(() => {
+        this._heightUpdatePending = false;
+        this.setHeight();
+      });
+    },
+    disconnectHeightObserver() {
+      if (this._stopHeightObserver) this._stopHeightObserver();
+      this._stopHeightObserver = null;
+      this._heightObservedParent = null;
+      this._heightObservedPager = null;
+    },
+    connectHeightObserver() {
+      if (!this.$ready || this._heightInactive || this._isDestroyed || this._isBeingDestroyed) return;
+      if (!hasGridHeight(this.height) && !hasGridHeight(this.maxHeight)) {
+        this.disconnectHeightObserver();
+        return;
+      }
+      const parent = this.$el && this.$el.parentElement;
+      const pager = this.$refs.myPagination;
+      if (this._stopHeightObserver && this._heightObservedParent === parent && this._heightObservedPager === pager) return;
+      this.disconnectHeightObserver();
+      this._heightObservedParent = parent;
+      this._heightObservedPager = pager;
+      this._stopHeightObserver = observeGridHeight(this);
+      this.scheduleHeight();
+    },
     // 设置表格高度
     setHeight() {
-      if (!this.$ready && this.paginationShow)
-        return Vue.nextTick(() => this.setHeight());
-      const { myPagination } = this.$refs;
-      if (this.height) {
-        this.newHeight =
-          parseHeight(this.height) -
-          (myPagination ? myPagination.offsetHeight : 0);
+      if (this._heightInactive || this._isDestroyed || this._isBeingDestroyed) return;
+      const myPagination = this.paginationShow && this.$refs && this.$refs.myPagination;
+      const paginationHeight = myPagination ? myPagination.offsetHeight : 0;
+      const total = resolveGridHeight(hasGridHeight(this.height) ? this.height : this.maxHeight, this.$el, !hasGridHeight(this.height));
+      const tableHeight = total === null ? null : Math.max(0, total - paginationHeight - getGridHeightInset(this.$el));
+      if (hasGridHeight(this.height)) {
+        this.newHeight = tableHeight;
         this.newMaxHeight = null;
-      } else if (this.maxHeight) {
-        this.newMaxHeight =
-          parseHeight(this.maxHeight) -
-          (myPagination ? myPagination.offsetHeight : 0);
+      } else if (hasGridHeight(this.maxHeight)) {
+        this.newMaxHeight = tableHeight;
+        this.newHeight = null;
+      } else {
         this.newHeight = null;
+        this.newMaxHeight = null;
+        this._heightLayoutSignature = null;
+        return;
+      }
+      const root = this.$el;
+      const signature = root ? root.clientWidth + ":" + !!root.getClientRects().length : null;
+      if (signature !== this._heightLayoutSignature) {
+        this._heightLayoutSignature = signature;
+        // Reopening a hidden/kept-alive container may retain the same height
+        // props. Refresh widths through the public API, respecting opt-out.
+        if (root && root.getClientRects().length && this.widthResize) {
+          this.$nextTick(() => {
+            if (this._heightInactive || this._isDestroyed || this._isBeingDestroyed) return;
+            const table = this.$refs.singleTable;
+            if (table && table.recalculate) table.recalculate();
+          });
+        }
       }
     },
   },