@koi-design/uxd-ui 14.0.13 → 14.0.14

package/uxd-ui.esm.mjs

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.13 */
+/*! @koi-design/uxd-ui@4.0.14 */
 
 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, createStaticVNode, watchEffect, onActivated, onDeactivated, normalizeProps, guardReactiveProps, withKeys, TransitionGroup, createApp, onBeforeMount, unref } from 'vue';
 import { X, Terminal, CircleAlert, Info, CircleCheck, LoaderCircle, CircleX, Search, Eye, EyeOff, Check, CornerDownLeft, ChevronUp, ChevronDown, ChevronRight, MenuIcon, Minus, ChevronLeft, CheckIcon, ChevronsLeft, ChevronsRight, Calendar as Calendar$1, ZoomIn, ZoomOut, RotateCcw, RotateCw, PanelLeft, PanelRight, Image as Image$2, CheckCircle, XCircle, Star as Star$1, XIcon, FilterIcon, GripVertical, Plus, Clock, FileIcon, HelpCircle, CircleHelp, AlertCircle, SearchIcon } from 'lucide-vue-next';
@@ -32101,11 +32101,15 @@ const _sfc_main$L = defineComponent({
     columns: {
       type: Array,
       default: () => []
+    },
+    isHeadTable: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const {
-      size: { resizeColumns }
+      size: { resizeColumns, columnWidths }
     } = inject("tableContext", {});
     const cols = computed(() => {
       let rst = [];
@@ -32126,8 +32130,15 @@ const _sfc_main$L = defineComponent({
       );
       return rst;
     });
+    const getWidth = (col) => {
+      if (props.isHeadTable) {
+        return `${columnWidths.value[col.key]}px`;
+      }
+      return col.resizeWidth ? col.resizeWidth : col.width;
+    };
     return {
-      cols
+      cols,
+      getWidth
     };
   }
 });
@@ -32136,7 +32147,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.cols, (col) => {
       return openBlock(), createElementBlock("col", {
         key: col.key,
-        style: normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
+        style: normalizeStyle({ width: _ctx.getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
       }, null, 4);
     }), 128))
   ]);
@@ -32361,6 +32372,7 @@ function getWidth(width, tableWidth) {
 function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
   const tableWidth = ref(void 0);
   const resizeColumns = shallowRef([]);
+  const columnWidths = ref({});
   const syncColumnsWidth = () => {
     const { bodyTable } = tableRefs;
     if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -32378,6 +32390,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       tableWidth.value = void 0;
     }
   };
+  const syncColumnWidth = (width, column) => {
+    columnWidths.value[getColumnKey(column)] = width;
+  };
   let syncHeightTimer = null;
   const scrollPosition = ref("left");
   const setScrollPositionClass = () => {
@@ -32416,6 +32431,7 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       _column.width = width;
     }
     resizeColumns.value = columns;
+    syncColumnWidth(width, _column);
   };
   const isScrollX = computed(() => {
     const { table } = tableRefs;
@@ -32449,7 +32465,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     setScrollPositionClass,
     resetScrollX,
     clearResizeTimer,
-    setResizeWidth
+    setResizeWidth,
+    syncColumnWidth,
+    columnWidths
   };
 }
 
@@ -32968,6 +32986,7 @@ const _sfc_main$G = defineComponent({
       props: { indentSize },
       expand: { handleExpandChange, isRowExpanded },
       filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
+      size: { syncColumnWidth },
       pagination
     } = inject("tableContext", {});
     const cellRef = ref();
@@ -33055,8 +33074,10 @@ const _sfc_main$G = defineComponent({
           }
         }
       });
+      if (props.index === 0) {
+        syncColumnWidth(width, props.column);
+      }
     };
-    const debouncedHandleResize = debounce$2((args) => checkWidth(args), 100);
     return {
       tablePrefixCls,
       isRender,
@@ -33077,7 +33098,7 @@ const _sfc_main$G = defineComponent({
       cellRef,
       ellipsisSpanRef,
       isOverflow,
-      debouncedHandleResize
+      checkWidth
     };
   }
 });
@@ -33088,7 +33109,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Render = resolveComponent("Render");
   const _component_UTooltip = resolveComponent("UTooltip");
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
-  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.checkWidth }, {
     default: withCtx(() => {
       var _a;
       return [
@@ -33740,7 +33761,10 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "tableRef",
     style: normalizeStyle(_ctx.tableStyle)
   }, [
-    createVNode(_component_ColGroup, { columns: _ctx.columns }, null, 8, ["columns"]),
+    createVNode(_component_ColGroup, {
+      columns: _ctx.columns,
+      "is-head-table": !_ctx.showBody
+    }, null, 8, ["columns", "is-head-table"]),
     _ctx.showHeader ? (openBlock(), createBlock(_component_TableHeader, {
       key: 0,
       columns: _ctx.getColumns()
@@ -35342,7 +35366,9 @@ const _sfc_main$u = defineComponent({
       tableWidth,
       resizeColumns,
       clearResizeTimer,
-      setResizeWidth
+      setResizeWidth,
+      syncColumnWidth,
+      columnWidths
     } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
     const debouncedHandleResize = debounce$2(handleResize, 150);
     onMounted(() => {
@@ -35460,7 +35486,9 @@ const _sfc_main$u = defineComponent({
         isScrollX,
         setResizeWidth,
         handleColumnResize,
-        debouncedHandleResize
+        debouncedHandleResize,
+        syncColumnWidth,
+        columnWidths
       },
       fixed: {
         isColumnFixed,

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.13 */
+/*! @koi-design/uxd-ui@4.0.14 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lucide-vue-next')) :
@@ -32104,11 +32104,15 @@
       columns: {
         type: Array,
         default: () => []
+      },
+      isHeadTable: {
+        type: Boolean,
+        default: false
       }
     },
     setup(props) {
       const {
-        size: { resizeColumns }
+        size: { resizeColumns, columnWidths }
       } = vue.inject("tableContext", {});
       const cols = vue.computed(() => {
         let rst = [];
@@ -32129,8 +32133,15 @@
         );
         return rst;
       });
+      const getWidth = (col) => {
+        if (props.isHeadTable) {
+          return `${columnWidths.value[col.key]}px`;
+        }
+        return col.resizeWidth ? col.resizeWidth : col.width;
+      };
       return {
-        cols
+        cols,
+        getWidth
       };
     }
   });
@@ -32139,7 +32150,7 @@
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.cols, (col) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: col.key,
-          style: vue.normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
+          style: vue.normalizeStyle({ width: _ctx.getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
         }, null, 4);
       }), 128))
     ]);
@@ -32364,6 +32375,7 @@
   function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
     const tableWidth = vue.ref(void 0);
     const resizeColumns = vue.shallowRef([]);
+    const columnWidths = vue.ref({});
     const syncColumnsWidth = () => {
       const { bodyTable } = tableRefs;
       if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -32381,6 +32393,9 @@
         tableWidth.value = void 0;
       }
     };
+    const syncColumnWidth = (width, column) => {
+      columnWidths.value[getColumnKey(column)] = width;
+    };
     let syncHeightTimer = null;
     const scrollPosition = vue.ref("left");
     const setScrollPositionClass = () => {
@@ -32419,6 +32434,7 @@
         _column.width = width;
       }
       resizeColumns.value = columns;
+      syncColumnWidth(width, _column);
     };
     const isScrollX = vue.computed(() => {
       const { table } = tableRefs;
@@ -32452,7 +32468,9 @@
       setScrollPositionClass,
       resetScrollX,
       clearResizeTimer,
-      setResizeWidth
+      setResizeWidth,
+      syncColumnWidth,
+      columnWidths
     };
   }
 
@@ -32971,6 +32989,7 @@
         props: { indentSize },
         expand: { handleExpandChange, isRowExpanded },
         filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
+        size: { syncColumnWidth },
         pagination
       } = vue.inject("tableContext", {});
       const cellRef = vue.ref();
@@ -33058,8 +33077,10 @@
             }
           }
         });
+        if (props.index === 0) {
+          syncColumnWidth(width, props.column);
+        }
       };
-      const debouncedHandleResize = debounce$2((args) => checkWidth(args), 100);
       return {
         tablePrefixCls,
         isRender,
@@ -33080,7 +33101,7 @@
         cellRef,
         ellipsisSpanRef,
         isOverflow,
-        debouncedHandleResize
+        checkWidth
       };
     }
   });
@@ -33091,7 +33112,7 @@
     const _component_Render = vue.resolveComponent("Render");
     const _component_UTooltip = vue.resolveComponent("UTooltip");
     const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
-    return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+    return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.checkWidth }, {
       default: vue.withCtx(() => {
         var _a;
         return [
@@ -33743,7 +33764,10 @@
       ref: "tableRef",
       style: vue.normalizeStyle(_ctx.tableStyle)
     }, [
-      vue.createVNode(_component_ColGroup, { columns: _ctx.columns }, null, 8, ["columns"]),
+      vue.createVNode(_component_ColGroup, {
+        columns: _ctx.columns,
+        "is-head-table": !_ctx.showBody
+      }, null, 8, ["columns", "is-head-table"]),
       _ctx.showHeader ? (vue.openBlock(), vue.createBlock(_component_TableHeader, {
         key: 0,
         columns: _ctx.getColumns()
@@ -35345,7 +35369,9 @@
         tableWidth,
         resizeColumns,
         clearResizeTimer,
-        setResizeWidth
+        setResizeWidth,
+        syncColumnWidth,
+        columnWidths
       } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
       const debouncedHandleResize = debounce$2(handleResize, 150);
       vue.onMounted(() => {
@@ -35463,7 +35489,9 @@
           isScrollX,
           setResizeWidth,
           handleColumnResize,
-          debouncedHandleResize
+          debouncedHandleResize,
+          syncColumnWidth,
+          columnWidths
         },
         fixed: {
           isColumnFixed,