@koi-design/uxd-ui 14.0.13 → 14.0.15

package/uxd-ui.esm.mjs

@@ -1,6 +1,6 @@
-/*! @koi-design/uxd-ui@4.0.13 */
+/*! @koi-design/uxd-ui@4.0.15 */
 
-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 { 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, normalizeProps, guardReactiveProps, watchEffect, onActivated, onDeactivated, 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';
 
 const isFunction$2 = (val) => typeof val === "function";
@@ -15122,6 +15122,7 @@ const _sfc_main$1O = defineComponent({
           emitChange(rowValue);
         }
       } else if (value !== stateValue.value && !Array.isArray(value)) {
+        console.log("onSelect", value);
         emitChange([value]);
       }
       const { autoClearSearchValue = true } = props;
@@ -15324,40 +15325,53 @@ function _sfc_render$1M(_ctx, _cache, $props, $setup, $data, $options) {
     "click-outside": _ctx.onClickOutside
   }, {
     popup: withCtx(() => [
-      createVNode(_component_DropdownMenu, {
-        id: _ctx.ariaId,
-        ref: "listRef",
-        "prefix-cls": _ctx.prefixCls,
+      renderSlot(_ctx.$slots, "dropdown", normalizeProps(guardReactiveProps({
         open: _ctx.stateOpen,
-        width: _ctx.dropdownMenuWidth,
+        options: _ctx.displayOptions,
         multiple: _ctx.multiple,
-        "multiple-limit": _ctx.multipleLimit,
-        options: _ctx.loading ? [] : _ctx.displayOptions,
+        multipleLimit: _ctx.multipleLimit,
         values: _ctx.innerValue,
-        "search-value": _ctx.searchValue,
-        "default-active-first": _ctx.defaultActiveFirst,
-        height: _ctx.dropdownHeight,
-        "item-height": _ctx.dropdownItemHeight,
-        size: _ctx.size,
-        "select-all": _ctx.selectAll,
-        direction: _ctx.computedDirection,
-        "title-key": _ctx.titleKey,
+        searchValue: _ctx.searchValue,
+        loading: _ctx.loading,
         onSelect: _ctx.onOptionSelect,
-        onClose: _cache[4] || (_cache[4] = ($event) => _ctx.onToggleOpen(false)),
-        onScrollAtTop: _ctx.onScrollAtTop,
-        onScrollAtBottom: _ctx.onScrollAtBottom,
-        onCreateSubmit: _ctx.onCreateSubmit
-      }, {
-        empty: withCtx(() => [
-          renderSlot(_ctx.$slots, "notFound", {}, () => [
-            createVNode(_component_RenderEmpty, {
-              size: "small",
-              text: _ctx.loading ? _ctx.loadingTextLocale : _ctx.notFoundText
-            }, null, 8, ["text"])
-          ])
-        ]),
-        _: 3
-      }, 8, ["id", "prefix-cls", "open", "width", "multiple", "multiple-limit", "options", "values", "search-value", "default-active-first", "height", "item-height", "size", "select-all", "direction", "title-key", "onSelect", "onScrollAtTop", "onScrollAtBottom", "onCreateSubmit"])
+        onCreate: _ctx.onCreateSubmit,
+        onClose: () => _ctx.onToggleOpen(false)
+      })), () => [
+        createVNode(_component_DropdownMenu, {
+          id: _ctx.ariaId,
+          ref: "listRef",
+          "prefix-cls": _ctx.prefixCls,
+          open: _ctx.stateOpen,
+          width: _ctx.dropdownMenuWidth,
+          multiple: _ctx.multiple,
+          "multiple-limit": _ctx.multipleLimit,
+          options: _ctx.loading ? [] : _ctx.displayOptions,
+          values: _ctx.innerValue,
+          "search-value": _ctx.searchValue,
+          "default-active-first": _ctx.defaultActiveFirst,
+          height: _ctx.dropdownHeight,
+          "item-height": _ctx.dropdownItemHeight,
+          size: _ctx.size,
+          "select-all": _ctx.selectAll,
+          direction: _ctx.computedDirection,
+          "title-key": _ctx.titleKey,
+          onSelect: _ctx.onOptionSelect,
+          onClose: _cache[4] || (_cache[4] = ($event) => _ctx.onToggleOpen(false)),
+          onScrollAtTop: _ctx.onScrollAtTop,
+          onScrollAtBottom: _ctx.onScrollAtBottom,
+          onCreateSubmit: _ctx.onCreateSubmit
+        }, {
+          empty: withCtx(() => [
+            renderSlot(_ctx.$slots, "notFound", {}, () => [
+              createVNode(_component_RenderEmpty, {
+                size: "small",
+                text: _ctx.loading ? _ctx.loadingTextLocale : _ctx.notFoundText
+              }, null, 8, ["text"])
+            ])
+          ]),
+          _: 3
+        }, 8, ["id", "prefix-cls", "open", "width", "multiple", "multiple-limit", "options", "values", "search-value", "default-active-first", "height", "item-height", "size", "select-all", "direction", "title-key", "onSelect", "onScrollAtTop", "onScrollAtBottom", "onCreateSubmit"])
+      ])
     ]),
     default: withCtx(() => [
       createElementVNode("div", mergeProps({
@@ -32101,11 +32115,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 +32144,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 +32161,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 +32386,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 +32404,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 +32445,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 +32479,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     setScrollPositionClass,
     resetScrollX,
     clearResizeTimer,
-    setResizeWidth
+    setResizeWidth,
+    syncColumnWidth,
+    columnWidths
   };
 }
 
@@ -32968,6 +33000,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 +33088,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 +33112,7 @@ const _sfc_main$G = defineComponent({
       cellRef,
       ellipsisSpanRef,
       isOverflow,
-      debouncedHandleResize
+      checkWidth
     };
   }
 });
@@ -33088,7 +33123,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 [
@@ -33682,10 +33717,9 @@ const _sfc_main$B = defineComponent({
       if (width.value) {
         style.width = typeof width.value === "number" ? `${width.value}px` : width.value;
       } else if (props.columns.some((x) => x.fixed)) {
-        style.width = "max-content";
         style.minWidth = "100%";
       }
-      if (props.columns.some((x) => x.ellipsis) || props.columns.some((x) => x.resizable)) {
+      if (props.columns.some((x) => x.ellipsis) || props.columns.some((x) => x.resizable) || props.columns.some((x) => x.fixed)) {
         style.tableLayout = "fixed";
       } else {
         style.tableLayout = "auto";
@@ -33740,7 +33774,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 +35379,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 +35499,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.15 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lucide-vue-next')) :
@@ -15125,6 +15125,7 @@
             emitChange(rowValue);
           }
         } else if (value !== stateValue.value && !Array.isArray(value)) {
+          console.log("onSelect", value);
           emitChange([value]);
         }
         const { autoClearSearchValue = true } = props;
@@ -15327,40 +15328,53 @@
       "click-outside": _ctx.onClickOutside
     }, {
       popup: vue.withCtx(() => [
-        vue.createVNode(_component_DropdownMenu, {
-          id: _ctx.ariaId,
-          ref: "listRef",
-          "prefix-cls": _ctx.prefixCls,
+        vue.renderSlot(_ctx.$slots, "dropdown", vue.normalizeProps(vue.guardReactiveProps({
           open: _ctx.stateOpen,
-          width: _ctx.dropdownMenuWidth,
+          options: _ctx.displayOptions,
           multiple: _ctx.multiple,
-          "multiple-limit": _ctx.multipleLimit,
-          options: _ctx.loading ? [] : _ctx.displayOptions,
+          multipleLimit: _ctx.multipleLimit,
           values: _ctx.innerValue,
-          "search-value": _ctx.searchValue,
-          "default-active-first": _ctx.defaultActiveFirst,
-          height: _ctx.dropdownHeight,
-          "item-height": _ctx.dropdownItemHeight,
-          size: _ctx.size,
-          "select-all": _ctx.selectAll,
-          direction: _ctx.computedDirection,
-          "title-key": _ctx.titleKey,
+          searchValue: _ctx.searchValue,
+          loading: _ctx.loading,
           onSelect: _ctx.onOptionSelect,
-          onClose: _cache[4] || (_cache[4] = ($event) => _ctx.onToggleOpen(false)),
-          onScrollAtTop: _ctx.onScrollAtTop,
-          onScrollAtBottom: _ctx.onScrollAtBottom,
-          onCreateSubmit: _ctx.onCreateSubmit
-        }, {
-          empty: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "notFound", {}, () => [
-              vue.createVNode(_component_RenderEmpty, {
-                size: "small",
-                text: _ctx.loading ? _ctx.loadingTextLocale : _ctx.notFoundText
-              }, null, 8, ["text"])
-            ])
-          ]),
-          _: 3
-        }, 8, ["id", "prefix-cls", "open", "width", "multiple", "multiple-limit", "options", "values", "search-value", "default-active-first", "height", "item-height", "size", "select-all", "direction", "title-key", "onSelect", "onScrollAtTop", "onScrollAtBottom", "onCreateSubmit"])
+          onCreate: _ctx.onCreateSubmit,
+          onClose: () => _ctx.onToggleOpen(false)
+        })), () => [
+          vue.createVNode(_component_DropdownMenu, {
+            id: _ctx.ariaId,
+            ref: "listRef",
+            "prefix-cls": _ctx.prefixCls,
+            open: _ctx.stateOpen,
+            width: _ctx.dropdownMenuWidth,
+            multiple: _ctx.multiple,
+            "multiple-limit": _ctx.multipleLimit,
+            options: _ctx.loading ? [] : _ctx.displayOptions,
+            values: _ctx.innerValue,
+            "search-value": _ctx.searchValue,
+            "default-active-first": _ctx.defaultActiveFirst,
+            height: _ctx.dropdownHeight,
+            "item-height": _ctx.dropdownItemHeight,
+            size: _ctx.size,
+            "select-all": _ctx.selectAll,
+            direction: _ctx.computedDirection,
+            "title-key": _ctx.titleKey,
+            onSelect: _ctx.onOptionSelect,
+            onClose: _cache[4] || (_cache[4] = ($event) => _ctx.onToggleOpen(false)),
+            onScrollAtTop: _ctx.onScrollAtTop,
+            onScrollAtBottom: _ctx.onScrollAtBottom,
+            onCreateSubmit: _ctx.onCreateSubmit
+          }, {
+            empty: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "notFound", {}, () => [
+                vue.createVNode(_component_RenderEmpty, {
+                  size: "small",
+                  text: _ctx.loading ? _ctx.loadingTextLocale : _ctx.notFoundText
+                }, null, 8, ["text"])
+              ])
+            ]),
+            _: 3
+          }, 8, ["id", "prefix-cls", "open", "width", "multiple", "multiple-limit", "options", "values", "search-value", "default-active-first", "height", "item-height", "size", "select-all", "direction", "title-key", "onSelect", "onScrollAtTop", "onScrollAtBottom", "onCreateSubmit"])
+        ])
       ]),
       default: vue.withCtx(() => [
         vue.createElementVNode("div", vue.mergeProps({
@@ -32104,11 +32118,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 +32147,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 +32164,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 +32389,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 +32407,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 +32448,7 @@
         _column.width = width;
       }
       resizeColumns.value = columns;
+      syncColumnWidth(width, _column);
     };
     const isScrollX = vue.computed(() => {
       const { table } = tableRefs;
@@ -32452,7 +32482,9 @@
       setScrollPositionClass,
       resetScrollX,
       clearResizeTimer,
-      setResizeWidth
+      setResizeWidth,
+      syncColumnWidth,
+      columnWidths
     };
   }
 
@@ -32971,6 +33003,7 @@
         props: { indentSize },
         expand: { handleExpandChange, isRowExpanded },
         filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
+        size: { syncColumnWidth },
         pagination
       } = vue.inject("tableContext", {});
       const cellRef = vue.ref();
@@ -33058,8 +33091,10 @@
             }
           }
         });
+        if (props.index === 0) {
+          syncColumnWidth(width, props.column);
+        }
       };
-      const debouncedHandleResize = debounce$2((args) => checkWidth(args), 100);
       return {
         tablePrefixCls,
         isRender,
@@ -33080,7 +33115,7 @@
         cellRef,
         ellipsisSpanRef,
         isOverflow,
-        debouncedHandleResize
+        checkWidth
       };
     }
   });
@@ -33091,7 +33126,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 [
@@ -33685,10 +33720,9 @@
         if (width.value) {
           style.width = typeof width.value === "number" ? `${width.value}px` : width.value;
         } else if (props.columns.some((x) => x.fixed)) {
-          style.width = "max-content";
           style.minWidth = "100%";
         }
-        if (props.columns.some((x) => x.ellipsis) || props.columns.some((x) => x.resizable)) {
+        if (props.columns.some((x) => x.ellipsis) || props.columns.some((x) => x.resizable) || props.columns.some((x) => x.fixed)) {
           style.tableLayout = "fixed";
         } else {
           style.tableLayout = "auto";
@@ -33743,7 +33777,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 +35382,9 @@
         tableWidth,
         resizeColumns,
         clearResizeTimer,
-        setResizeWidth
+        setResizeWidth,
+        syncColumnWidth,
+        columnWidths
       } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
       const debouncedHandleResize = debounce$2(handleResize, 150);
       vue.onMounted(() => {
@@ -35463,7 +35502,9 @@
           isScrollX,
           setResizeWidth,
           handleColumnResize,
-          debouncedHandleResize
+          debouncedHandleResize,
+          syncColumnWidth,
+          columnWidths
         },
         fixed: {
           isColumnFixed,