@koi-design/uxd-ui 13.2.11 → 13.2.12

package/uxd-ui.esm.mjs

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@13.2.11 */
+/*! @koi-design/uxd-ui@13.2.12 */
 
 import { defineComponent, reactive, watch, provide, inject, computed, onMounted, ref, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, renderSlot, withDirectives, vShow, createBlock, resolveDynamicComponent, createCommentVNode, toRaw, resolveComponent, Transition, withCtx, createVNode, toDisplayString, isVNode, Comment as Comment$1, Fragment, Text as Text$1, h, shallowRef, toRef, nextTick, onUpdated, onUnmounted, cloneVNode, Teleport, toRefs, withModifiers, mergeProps, renderList, onBeforeUpdate, createTextVNode, watchEffect, onActivated, onDeactivated, normalizeProps, guardReactiveProps, createStaticVNode, withKeys, TransitionGroup, createApp, onBeforeMount } from 'vue';
 import { URoundClose, USolidCheckmarkCircle, USolidCloseCircle, USolidAlertCircle, USolidInfoCircle, ULineLoading, URoundSearch, URoundCloseCircle, URoundEyeOpen, URoundEyeOff, URoundCheck, ULineEnter, ULineUp, ULineDown, ULineRight, ULineMenu, URoundDown, USolidCheck, USolidRemove, UColorfulEmpty, ULineSearch, ULineLeft, USolidDown, ULineSortRight, ULineLeftDouble, ULineRightDouble, URoundCalendar, ULineShrink, ULineMagnify, ULineRefreshLeft, ULineRefreshRight, ULineScreenOpen, ULineScaleToOriginal, USolidCaretLeft, USolidCaretRight, ULineUnfold, ULinePack, ULinePicture, ULineAlertCircle, USolidStar, UColorfulNotFound, UColorfulStatisticsEmpty, UColorfulMessageEmpty, USolidFilter, USolidCaretUp, USolidCaretDown, ULineCanDrag, ULineAdd, URoundTime, ULineText, ULineDelete, USolidHelpCircle, URoundHelpCircle, ULineInfoCircle, ULineCheckmarkCircle } from '@koi-design/uxd-icon';
@@ -32660,20 +32660,35 @@ function getWidth(width, tableWidth) {
   }
   return _width;
 }
+function applySizesMap(sizesMap, nextSizesMap) {
+  Object.keys(sizesMap).forEach((key) => {
+    if (!(key in nextSizesMap)) {
+      delete sizesMap[key];
+    }
+  });
+  Object.keys(nextSizesMap).forEach((key) => {
+    if (sizesMap[key] !== nextSizesMap[key]) {
+      sizesMap[key] = nextSizesMap[key];
+    }
+  });
+}
 function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
   const sizesMap = reactive({});
   const tableWidth = ref(void 0);
+  let lastWrapWidth;
+  const WRAP_WIDTH_TOLERANCE = 1;
   const syncColumnsWidth = () => {
     const { bodyTable } = tableRefs;
     if (!bodyTable || bodyTable.getWidth() === void 0) {
-      return;
+      return false;
+    }
+    let wrapWidth = bodyTable.getWidth();
+    if (lastWrapWidth !== void 0 && Math.abs(wrapWidth - lastWrapWidth) <= WRAP_WIDTH_TOLERANCE) {
+      wrapWidth = lastWrapWidth;
     }
-    const wrapWidth = bodyTable.getWidth();
     const columns = getLeafColumns(updatedColumns.value);
     let usedWidth = 0;
-    Object.keys(sizesMap).forEach((key) => {
-      delete sizesMap[key];
-    });
+    const nextSizesMap = {};
     const minWidthColumns = [];
     const maxWidthColumns = [];
     const nothingColumns = [];
@@ -32682,15 +32697,15 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       if (c.width) {
         const _width = getWidth(c.width, wrapWidth);
         usedWidth += _width;
-        sizesMap[colKey] = _width;
+        nextSizesMap[colKey] = _width;
       } else if (c.minWidth) {
         const _width = getWidth(c.minWidth, wrapWidth);
         usedWidth += _width;
-        sizesMap[colKey] = _width;
+        nextSizesMap[colKey] = _width;
         minWidthColumns.push(c);
       } else {
         const minWidth = getMinWidth(c);
-        sizesMap[colKey] = minWidth;
+        nextSizesMap[colKey] = minWidth;
         usedWidth += minWidth;
         if (c.maxWidth) {
           maxWidthColumns.push(c);
@@ -32706,10 +32721,10 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       maxWidthColumns.forEach((mc) => {
         avgWidth = Math.floor(unUsedWidth / length);
         if (getWidth(mc.maxWidth, wrapWidth) < avgWidth) {
-          sizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
+          nextSizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
           unUsedWidth -= getWidth(mc.maxWidth, wrapWidth) - getMinWidth(mc);
         } else {
-          sizesMap[mc.key] += avgWidth;
+          nextSizesMap[mc.key] += avgWidth;
           unUsedWidth -= avgWidth;
         }
         length -= 1;
@@ -32718,25 +32733,32 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       if (avgWidth > 50 || nothingColumns.length === 0) {
         [...minWidthColumns, ...nothingColumns].forEach((c, i) => {
           if (i < length - 1) {
-            sizesMap[c.key] += avgWidth;
+            nextSizesMap[c.key] += avgWidth;
             unUsedWidth -= avgWidth;
           } else {
-            sizesMap[c.key] += unUsedWidth;
+            nextSizesMap[c.key] += unUsedWidth;
           }
         });
       } else {
         avgWidth = Math.floor(unUsedWidth / nothingColumns.length);
         nothingColumns.forEach((c, i) => {
           if (i < nothingColumns.length - 1) {
-            sizesMap[c.key] += avgWidth;
+            nextSizesMap[c.key] += avgWidth;
             unUsedWidth -= avgWidth;
           } else {
-            sizesMap[c.key] += unUsedWidth;
+            nextSizesMap[c.key] += unUsedWidth;
           }
         });
       }
     }
-    tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);
+    const nextTableWidth = Object.keys(nextSizesMap).reduce((sum, key) => sum + nextSizesMap[key], 0);
+    lastWrapWidth = wrapWidth;
+    if (shallowequal(sizesMap, nextSizesMap) && tableWidth.value === nextTableWidth) {
+      return false;
+    }
+    applySizesMap(sizesMap, nextSizesMap);
+    tableWidth.value = nextTableWidth;
+    return true;
   };
   let syncHeightTimer = null;
   let updateBodyTableTimer = null;
@@ -32750,20 +32772,23 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     if (!bodyDom) {
       return;
     }
-    const scrollToLeft = bodyDom.scrollLeft === 0;
-    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;
+    const { scrollLeft, scrollWidth, clientWidth } = bodyDom;
+    const scrollToLeft = scrollLeft <= 0;
+    const scrollToRight = scrollLeft + 1 >= scrollWidth - clientWidth;
+    let nextPosition = "middle";
     if (scrollToLeft && scrollToRight) {
-      scrollPosition.value = "both";
+      nextPosition = "both";
     } else if (scrollToLeft) {
-      scrollPosition.value = "left";
+      nextPosition = "left";
     } else if (scrollToRight) {
-      scrollPosition.value = "right";
-    } else {
-      scrollPosition.value = "middle";
+      nextPosition = "right";
+    }
+    if (scrollPosition.value !== nextPosition) {
+      scrollPosition.value = nextPosition;
     }
   };
   const handleResize = () => {
-    syncColumnsWidth();
+    const changed = syncColumnsWidth();
     if (isColumnFixed.value) {
       if (syncHeightTimer) {
         clearTimeout(syncHeightTimer);
@@ -32773,6 +32798,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
         setScrollPositionClass();
       }, 0);
     }
+    if (!changed) {
+      return;
+    }
     if (updateBodyTableTimer) {
       clearTimeout(updateBodyTableTimer);
     }
@@ -35797,7 +35825,7 @@ const _sfc_main$u = defineComponent({
     });
     onUpdated(() => {
       nextTick(() => {
-        handleResize();
+        debouncedHandleResize();
       });
     });
     onBeforeUnmount(() => {

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@13.2.11 */
+/*! @koi-design/uxd-ui@13.2.12 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@koi-design/uxd-icon')) :
@@ -32663,20 +32663,35 @@
     }
     return _width;
   }
+  function applySizesMap(sizesMap, nextSizesMap) {
+    Object.keys(sizesMap).forEach((key) => {
+      if (!(key in nextSizesMap)) {
+        delete sizesMap[key];
+      }
+    });
+    Object.keys(nextSizesMap).forEach((key) => {
+      if (sizesMap[key] !== nextSizesMap[key]) {
+        sizesMap[key] = nextSizesMap[key];
+      }
+    });
+  }
   function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
     const sizesMap = vue.reactive({});
     const tableWidth = vue.ref(void 0);
+    let lastWrapWidth;
+    const WRAP_WIDTH_TOLERANCE = 1;
     const syncColumnsWidth = () => {
       const { bodyTable } = tableRefs;
       if (!bodyTable || bodyTable.getWidth() === void 0) {
-        return;
+        return false;
+      }
+      let wrapWidth = bodyTable.getWidth();
+      if (lastWrapWidth !== void 0 && Math.abs(wrapWidth - lastWrapWidth) <= WRAP_WIDTH_TOLERANCE) {
+        wrapWidth = lastWrapWidth;
       }
-      const wrapWidth = bodyTable.getWidth();
       const columns = getLeafColumns(updatedColumns.value);
       let usedWidth = 0;
-      Object.keys(sizesMap).forEach((key) => {
-        delete sizesMap[key];
-      });
+      const nextSizesMap = {};
       const minWidthColumns = [];
       const maxWidthColumns = [];
       const nothingColumns = [];
@@ -32685,15 +32700,15 @@
         if (c.width) {
           const _width = getWidth(c.width, wrapWidth);
           usedWidth += _width;
-          sizesMap[colKey] = _width;
+          nextSizesMap[colKey] = _width;
         } else if (c.minWidth) {
           const _width = getWidth(c.minWidth, wrapWidth);
           usedWidth += _width;
-          sizesMap[colKey] = _width;
+          nextSizesMap[colKey] = _width;
           minWidthColumns.push(c);
         } else {
           const minWidth = getMinWidth(c);
-          sizesMap[colKey] = minWidth;
+          nextSizesMap[colKey] = minWidth;
           usedWidth += minWidth;
           if (c.maxWidth) {
             maxWidthColumns.push(c);
@@ -32709,10 +32724,10 @@
         maxWidthColumns.forEach((mc) => {
           avgWidth = Math.floor(unUsedWidth / length);
           if (getWidth(mc.maxWidth, wrapWidth) < avgWidth) {
-            sizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
+            nextSizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
             unUsedWidth -= getWidth(mc.maxWidth, wrapWidth) - getMinWidth(mc);
           } else {
-            sizesMap[mc.key] += avgWidth;
+            nextSizesMap[mc.key] += avgWidth;
             unUsedWidth -= avgWidth;
           }
           length -= 1;
@@ -32721,25 +32736,32 @@
         if (avgWidth > 50 || nothingColumns.length === 0) {
           [...minWidthColumns, ...nothingColumns].forEach((c, i) => {
             if (i < length - 1) {
-              sizesMap[c.key] += avgWidth;
+              nextSizesMap[c.key] += avgWidth;
               unUsedWidth -= avgWidth;
             } else {
-              sizesMap[c.key] += unUsedWidth;
+              nextSizesMap[c.key] += unUsedWidth;
             }
           });
         } else {
           avgWidth = Math.floor(unUsedWidth / nothingColumns.length);
           nothingColumns.forEach((c, i) => {
             if (i < nothingColumns.length - 1) {
-              sizesMap[c.key] += avgWidth;
+              nextSizesMap[c.key] += avgWidth;
               unUsedWidth -= avgWidth;
             } else {
-              sizesMap[c.key] += unUsedWidth;
+              nextSizesMap[c.key] += unUsedWidth;
             }
           });
         }
       }
-      tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);
+      const nextTableWidth = Object.keys(nextSizesMap).reduce((sum, key) => sum + nextSizesMap[key], 0);
+      lastWrapWidth = wrapWidth;
+      if (shallowequal(sizesMap, nextSizesMap) && tableWidth.value === nextTableWidth) {
+        return false;
+      }
+      applySizesMap(sizesMap, nextSizesMap);
+      tableWidth.value = nextTableWidth;
+      return true;
     };
     let syncHeightTimer = null;
     let updateBodyTableTimer = null;
@@ -32753,20 +32775,23 @@
       if (!bodyDom) {
         return;
       }
-      const scrollToLeft = bodyDom.scrollLeft === 0;
-      const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;
+      const { scrollLeft, scrollWidth, clientWidth } = bodyDom;
+      const scrollToLeft = scrollLeft <= 0;
+      const scrollToRight = scrollLeft + 1 >= scrollWidth - clientWidth;
+      let nextPosition = "middle";
       if (scrollToLeft && scrollToRight) {
-        scrollPosition.value = "both";
+        nextPosition = "both";
       } else if (scrollToLeft) {
-        scrollPosition.value = "left";
+        nextPosition = "left";
       } else if (scrollToRight) {
-        scrollPosition.value = "right";
-      } else {
-        scrollPosition.value = "middle";
+        nextPosition = "right";
+      }
+      if (scrollPosition.value !== nextPosition) {
+        scrollPosition.value = nextPosition;
       }
     };
     const handleResize = () => {
-      syncColumnsWidth();
+      const changed = syncColumnsWidth();
       if (isColumnFixed.value) {
         if (syncHeightTimer) {
           clearTimeout(syncHeightTimer);
@@ -32776,6 +32801,9 @@
           setScrollPositionClass();
         }, 0);
       }
+      if (!changed) {
+        return;
+      }
       if (updateBodyTableTimer) {
         clearTimeout(updateBodyTableTimer);
       }
@@ -35800,7 +35828,7 @@
       });
       vue.onUpdated(() => {
         vue.nextTick(() => {
-          handleResize();
+          debouncedHandleResize();
         });
       });
       vue.onBeforeUnmount(() => {