@koi-design/uxd-ui 14.0.3 → 14.0.5

package/uxd-ui.esm.mjs

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.3 */
+/*! @koi-design/uxd-ui@4.0.5 */
 
 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, CheckCircle, ChevronsLeft, ChevronsRight, Calendar as Calendar$1, ZoomIn, ZoomOut, RotateCcw, RotateCw, PanelLeft, Image as Image$2, XCircle, Star as Star$1, CheckIcon, XIcon, FilterIcon, GripVertical, Plus, Clock, FileIcon, HelpCircle, CircleHelp, AlertCircle, SearchIcon } from 'lucide-vue-next';
@@ -7500,7 +7500,7 @@ var ResizeObserver$1 = defineComponent({
       if (stateWidth !== _width || stateHeight !== _height) {
         stateWidth = _width;
         stateHeight = _height;
-        emit("resize", { widht: _width, height: _height });
+        emit("resize", { target, width: _width, height: _height });
       }
     };
     const destroyObserver = () => {
@@ -10950,13 +10950,11 @@ const _sfc_main$23 = defineComponent({
       if (props.status) {
         switch (props.status) {
           case "success":
-            return "green";
-          case "processing":
-            return "blue";
           case "error":
-            return "red";
           case "warning":
-            return "orange";
+            return props.status;
+          case "processing":
+            return "primary";
           default:
             return void 0;
         }
@@ -15479,6 +15477,10 @@ const radioProps = {
     type: [String, Number],
     default: ""
   },
+  label: {
+    type: String,
+    default: ""
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -15683,13 +15685,14 @@ function _sfc_render$1L(_ctx, _cache, $props, $setup, $data, $options) {
         onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleOnBlur && _ctx.handleOnBlur(...args))
       }, null, 42, _hoisted_1$I)
     ], 2),
-    createElementVNode("span", {
+    _ctx.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+      key: 0,
       class: normalizeClass([`${_ctx.prefixCls}-label`])
     }, [
       renderSlot(_ctx.$slots, "default", {}, () => [
-        createTextVNode(toDisplayString(_ctx.value), 1)
+        createTextVNode(toDisplayString(_ctx.label), 1)
       ])
-    ], 2)
+    ], 2)) : createCommentVNode("v-if", true)
   ], 2);
 }
 var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["render", _sfc_render$1L], ["__file", "Radio.vue"]]);
@@ -24999,7 +25002,7 @@ const maskProps = {
 var Mask = defineComponent({
   name: "UMask",
   props: maskProps,
-  emits: ["after-show-mask-change"],
+  emits: ["after-show-mask-change", "click"],
   setup(props, {
     slots,
     emit,
@@ -25030,6 +25033,9 @@ var Mask = defineComponent({
       const maskColor = props.color === "white" ? "255, 255, 255" : "0, 0, 0";
       return `rgba(${maskColor}, ${opacity})`;
     });
+    const handleClick = () => {
+      emit("click");
+    };
     const renderMask = lazyRender(() => {
       const style = {
         backgroundColor: maskBackground.value,
@@ -25045,7 +25051,8 @@ var Mask = defineComponent({
         "class": prefixCls.value,
         "onTouchmove": props.preventScroll ? handleTouchMove : () => {
         },
-        "onAnimationend": handleAnimationend
+        "onAnimationend": handleAnimationend,
+        "onClick": handleClick
       }, [useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)]), [[vShow, props.show]]);
     });
     return () => createVNode(Transition, {
@@ -25089,6 +25096,10 @@ const drawerProps = {
     type: String,
     default: ""
   },
+  description: {
+    type: String,
+    default: ""
+  },
   closable: {
     type: Boolean,
     default: true
@@ -25356,20 +25367,22 @@ var Drawer = defineComponent({
     const renderDrawer = lazyRender(() => {
       const renderConrent = () => {
         var _a;
-        return createVNode(Fragment, null, [createVNode("div", {
-          "ref": headerRef,
-          "class": `${prefixCls.value}-header`,
-          "style": props.headerStyle
-        }, [createVNode("h2", {
-          "class": `${prefixCls.value}-header-title`
-        }, [slots.title ? slots.title() : props.title]), props.closable && createVNode("button", {
+        return createVNode(Fragment, null, [props.closable && createVNode("button", {
           "class": `${prefixCls.value}-close`,
           "onClick": () => handleClose("close")
         }, [createVNode(UIcon, {
           "class": `${prefixCls.value}-close-icon`
         }, {
           default: () => [createVNode(X, null, null)]
-        })])]), createVNode("div", {
+        })]), createVNode("div", {
+          "ref": headerRef,
+          "class": `${prefixCls.value}-header`,
+          "style": props.headerStyle
+        }, [createVNode("h2", {
+          "class": `${prefixCls.value}-header-title`
+        }, [slots.title ? slots.title() : props.title]), props.description && createVNode("p", {
+          "class": `${prefixCls.value}-header-description`
+        }, [props.description])]), createVNode("div", {
           "class": `${prefixCls.value}-body`,
           "style": {
             ...props.bodyStyle,
@@ -30883,15 +30896,6 @@ const sliderProps = {
     type: String,
     default: "surface"
   },
-  color: {
-    type: String,
-    default: void 0,
-    validator: oneOf(colorType)
-  },
-  size: {
-    type: String,
-    default: "default"
-  },
   direction: {
     type: String
   }
@@ -31309,13 +31313,12 @@ var Slider = defineComponent({
     })]);
     return createVNode("div", {
       "ref": "sliderRef",
-      "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, `${this.prefixCls}-size-${this.size}`, {
+      "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, {
         [`${this.prefixCls}-with-marks`]: this.marks && Object.keys(this.marks).length,
         [`${this.prefixCls}-disabled`]: this.disabled,
         [`${this.prefixCls}-vertical`]: this.vertical,
         [`${this.prefixCls}-rtl`]: this.direction === "rtl" && !this.vertical
       }],
-      "data-color": this.color,
       "onMousedown": this.handleMouseDown,
       "onMouseup": this.handleMouseUp
     }, [createVNode("div", {
@@ -32058,19 +32061,22 @@ const _sfc_main$L = defineComponent({
   },
   setup(props) {
     const {
-      size: { sizesMap }
+      size: { resizeColumns }
     } = inject("tableContext", {});
     const cols = computed(() => {
       let rst = [];
       rst = rst.concat(
         getLeafColumns(props.columns).map((col) => {
+          var _a;
           const { fixed } = col;
           const colKey = getColumnKey(col);
-          const w = sizesMap[colKey] ? `${sizesMap[colKey]}px` : "";
+          const resizeWidth = (_a = resizeColumns.value.find((x) => x.key === colKey)) == null ? void 0 : _a.width;
           return {
-            width: w,
+            width: typeof col.width === "number" ? `${col.width}px` : col.width,
+            minWidth: typeof col.minWidth === "number" ? `${col.minWidth}px` : col.minWidth,
             key: colKey,
-            fixed: !!fixed
+            fixed: !!fixed,
+            resizeWidth: resizeWidth ? `${resizeWidth}px` : void 0
           };
         })
       );
@@ -32086,7 +32092,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.width, maxWidth: col.fixed ? col.width : "" })
+        style: normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
       }, null, 4);
     }), 128))
   ]);
@@ -32309,8 +32315,8 @@ function getWidth(width, tableWidth) {
   return _width;
 }
 function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
-  const sizesMap = reactive({});
   const tableWidth = ref(void 0);
+  const resizeColumns = shallowRef([]);
   const syncColumnsWidth = () => {
     const { bodyTable } = tableRefs;
     if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -32318,73 +32324,15 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     }
     const wrapWidth = bodyTable.getWidth();
     const columns = getLeafColumns(updatedColumns.value);
-    let usedWidth = 0;
-    Object.keys(sizesMap).forEach((key) => {
-      delete sizesMap[key];
-    });
-    const minWidthColumns = [];
-    const maxWidthColumns = [];
-    const nothingColumns = [];
-    columns.forEach((c) => {
-      const colKey = getColumnKey(c);
-      if (c.width) {
-        const _width = getWidth(c.width, wrapWidth);
-        usedWidth += _width;
-        sizesMap[colKey] = _width;
-      } else if (c.minWidth) {
-        const _width = getWidth(c.minWidth, wrapWidth);
-        usedWidth += _width;
-        sizesMap[colKey] = _width;
-        minWidthColumns.push(c);
-      } else {
-        const minWidth = getMinWidth(c);
-        sizesMap[colKey] = minWidth;
-        usedWidth += minWidth;
-        if (c.maxWidth) {
-          maxWidthColumns.push(c);
-        } else {
-          nothingColumns.push(c);
-        }
-      }
-    });
-    let unUsedWidth = wrapWidth - usedWidth;
-    let length = minWidthColumns.length + maxWidthColumns.length + nothingColumns.length;
-    if (unUsedWidth > 0 && length > 0) {
-      let avgWidth;
-      maxWidthColumns.forEach((mc) => {
-        avgWidth = Math.floor(unUsedWidth / length);
-        if (getWidth(mc.maxWidth, wrapWidth) < avgWidth) {
-          sizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
-          unUsedWidth -= getWidth(mc.maxWidth, wrapWidth) - getMinWidth(mc);
-        } else {
-          sizesMap[mc.key] += avgWidth;
-          unUsedWidth -= avgWidth;
-        }
-        length -= 1;
-      });
-      avgWidth = Math.floor(unUsedWidth / length);
-      if (avgWidth > 50 || nothingColumns.length === 0) {
-        [...minWidthColumns, ...nothingColumns].forEach((c, i) => {
-          if (i < length - 1) {
-            sizesMap[c.key] += avgWidth;
-            unUsedWidth -= avgWidth;
-          } else {
-            sizesMap[c.key] += unUsedWidth;
-          }
-        });
-      } else {
-        avgWidth = Math.floor(unUsedWidth / nothingColumns.length);
-        nothingColumns.forEach((c, i) => {
-          if (i < nothingColumns.length - 1) {
-            sizesMap[c.key] += avgWidth;
-            unUsedWidth -= avgWidth;
-          } else {
-            sizesMap[c.key] += unUsedWidth;
-          }
-        });
-      }
+    const totalWidth = columns.reduce((sum, col) => {
+      var _a;
+      return sum + getWidth((_a = col.width) != null ? _a : col.minWidth, wrapWidth);
+    }, 0);
+    if (totalWidth > wrapWidth) {
+      tableWidth.value = totalWidth;
+    } else {
+      tableWidth.value = void 0;
     }
-    tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);
   };
   let syncHeightTimer = null;
   const scrollPosition = ref("left");
@@ -32422,8 +32370,8 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));
     if (_column) {
       _column.width = width;
-      handleResize();
     }
+    resizeColumns.value = columns;
   };
   const isScrollX = computed(() => {
     const { table } = tableRefs;
@@ -32449,10 +32397,10 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     }
   };
   return {
-    sizesMap,
     tableWidth,
     isScrollX,
     scrollPosition,
+    resizeColumns,
     handleResize,
     setScrollPositionClass,
     resetScrollX,
@@ -32853,7 +32801,7 @@ const _sfc_main$H = defineComponent({
     },
     expandIcon: {
       type: [String, Object, Function],
-      default: () => ChevronRight
+      default: void 0
     },
     needIndentSpaced: {
       type: Boolean,
@@ -32934,7 +32882,8 @@ const _sfc_main$G = defineComponent({
     ExpandIcon,
     UTooltip,
     USkeleton,
-    USkeletonItem
+    USkeletonItem,
+    ResizeObserver: ResizeObserver$1
   },
   props: {
     prefixCls: {
@@ -32975,12 +32924,12 @@ const _sfc_main$G = defineComponent({
       props: { indentSize },
       expand: { handleExpandChange, isRowExpanded },
       filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
-      size: { sizesMap },
       pagination
     } = inject("tableContext", {});
     const cellRef = ref();
     const ellipsisSpanRef = ref();
     const isOverflow = ref(false);
+    const isMinWidth = ref(false);
     const renderFn = computed(() => {
       const { render } = props.column;
       return render || null;
@@ -33025,6 +32974,9 @@ const _sfc_main$G = defineComponent({
       if (right !== void 0) {
         style.right = `${right}px`;
       }
+      if (isMinWidth.value) {
+        style.width = `${props.column.minWidth}px`;
+      }
       return style;
     });
     const handleExpand = (e) => {
@@ -33042,26 +32994,25 @@ const _sfc_main$G = defineComponent({
         e
       );
     };
-    watch(
-      () => sizesMap,
-      () => {
+    const checkWidth = ({ target, width }) => {
+      nextTick(() => {
         if (ellipsisSpanRef.value) {
-          const cell = cellRef.value;
+          const cell = target;
           const padding = (Number.parseInt(getStyle$1(cell, "paddingLeft")) || 0) + (Number.parseInt(getStyle$1(cell, "paddingRight")) || 0);
           const span = ellipsisSpanRef.value;
           const range = document.createRange();
           range.setStart(span, 0);
           range.setEnd(span, span.childNodes.length);
           const rangeWidth = range.getBoundingClientRect().width;
-          const colKey = getColumnKey(props.column);
-          const cellWidth = sizesMap[colKey];
-          if (rangeWidth + padding > cellWidth) {
+          if (rangeWidth + padding > width) {
             isOverflow.value = true;
+          } else {
+            isOverflow.value = false;
           }
         }
-      },
-      { deep: true }
-    );
+      });
+    };
+    const debouncedHandleResize = debounce$2((args) => checkWidth(args), 100);
     return {
       tablePrefixCls,
       isRender,
@@ -33081,97 +33032,106 @@ const _sfc_main$G = defineComponent({
       pagination,
       cellRef,
       ellipsisSpanRef,
-      isOverflow
+      isOverflow,
+      debouncedHandleResize
     };
   }
 });
 function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
-  var _a;
   const _component_USkeletonItem = resolveComponent("USkeletonItem");
   const _component_USkeleton = resolveComponent("USkeleton");
   const _component_ExpandIcon = resolveComponent("ExpandIcon");
   const _component_Render = resolveComponent("Render");
   const _component_UTooltip = resolveComponent("UTooltip");
-  return _ctx.showCell ? (openBlock(), createElementBlock("td", mergeProps({
-    key: 0,
-    ref: "cellRef"
-  }, _ctx.tdProps, {
-    class: {
-      [`${_ctx.prefixCls}-cell-custom`]: !!((_a = _ctx.tdProps) == null ? void 0 : _a.class),
-      [`${_ctx.column.className}`]: !!_ctx.column.className,
-      [`${_ctx.prefixCls}-cell-ellipsis`]: !!_ctx.column.ellipsis,
-      [`${_ctx.prefixCls}-cell-break-word`]: !!_ctx.column.width,
-      [`${_ctx.tablePrefixCls}-column-has-actions`]: _ctx.hasAction(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-has-sorters`]: _ctx.hasSorters(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-has-filters`]: _ctx.hasFilters(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-sort`]: _ctx.isSortColumn(_ctx.column)
-    },
-    style: _ctx.tdStyle
-  }), [
-    _ctx.skeleton ? (openBlock(), createBlock(_component_USkeleton, {
-      key: 0,
-      class: normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
-      active: ""
-    }, {
-      default: withCtx(() => [
-        _ctx.column.skeleton ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
-          return openBlock(), createBlock(_component_USkeletonItem, {
-            key: ski,
-            type: _ctx.column.skeleton[ski].type,
-            style: normalizeStyle(_ctx.column.skeleton[ski].style)
-          }, null, 8, ["type", "style"]);
-        }), 128)) : (openBlock(), createBlock(_component_USkeletonItem, {
-          key: 1,
-          type: "text",
-          style: { "width": "50%" }
-        }))
-      ]),
-      _: 1
-    }, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-      _ctx.expandIcon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createElementVNode("span", {
-          class: normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
-          style: normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
-        }, null, 6),
-        createVNode(_component_ExpandIcon, {
-          "need-indent-spaced": "",
-          expandable: !!_ctx.data.children,
-          "need-loading": _ctx.data.children === true,
-          "row-key": _ctx.rowKey,
-          expanded: _ctx.isRowExpanded(_ctx.rowKey, true),
-          onExpand: _ctx.handleExpand,
-          onAsyncExpand: _ctx.handleAsyncExpand
-        }, null, 8, ["expandable", "need-loading", "row-key", "expanded", "onExpand", "onAsyncExpand"])
-      ], 64)) : createCommentVNode("v-if", true),
-      _ctx.isRender ? (openBlock(), createBlock(_component_Render, {
-        key: 1,
-        render: () => {
-          var _a2;
-          return (_a2 = _ctx.renderFn) == null ? void 0 : _a2.call(_ctx, {
-            row: _ctx.data,
-            index: _ctx.index,
-            rowKey: _ctx.rowKey,
-            pagination: _ctx.pagination,
-            column: _ctx.column
-          });
-        }
-      }, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        _ctx.column.ellipsis && _ctx.displayCell ? (openBlock(), createBlock(_component_UTooltip, {
+  const _component_ResizeObserver = resolveComponent("ResizeObserver");
+  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+    default: withCtx(() => {
+      var _a;
+      return [
+        _ctx.showCell ? (openBlock(), createElementBlock("td", mergeProps({
           key: 0,
-          title: _ctx.displayCell.toString(),
-          disabled: !_ctx.isOverflow,
-          "mouse-enter-delay": 0.5
-        }, {
-          default: withCtx(() => [
-            createElementVNode("span", { ref: "ellipsisSpanRef" }, toDisplayString(_ctx.displayCell), 513)
-          ]),
-          _: 1
-        }, 8, ["title", "disabled"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createTextVNode(toDisplayString(_ctx.displayCell), 1)
-        ], 64))
-      ], 64))
-    ], 64))
-  ], 16)) : createCommentVNode("v-if", true);
+          ref: "cellRef"
+        }, _ctx.tdProps, {
+          class: {
+            [`${_ctx.prefixCls}-cell-custom`]: !!((_a = _ctx.tdProps) == null ? void 0 : _a.class),
+            [`${_ctx.column.className}`]: !!_ctx.column.className,
+            [`${_ctx.prefixCls}-cell-ellipsis`]: !!_ctx.column.ellipsis,
+            [`${_ctx.prefixCls}-cell-break-word`]: !!_ctx.column.width,
+            [`${_ctx.tablePrefixCls}-column-has-actions`]: _ctx.hasAction(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-has-sorters`]: _ctx.hasSorters(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-has-filters`]: _ctx.hasFilters(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-sort`]: _ctx.isSortColumn(_ctx.column)
+          },
+          style: _ctx.tdStyle
+        }), [
+          _ctx.skeleton ? (openBlock(), createBlock(_component_USkeleton, {
+            key: 0,
+            class: normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
+            active: ""
+          }, {
+            default: withCtx(() => [
+              _ctx.column.skeleton ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
+                return openBlock(), createBlock(_component_USkeletonItem, {
+                  key: ski,
+                  type: _ctx.column.skeleton[ski].type,
+                  style: normalizeStyle(_ctx.column.skeleton[ski].style)
+                }, null, 8, ["type", "style"]);
+              }), 128)) : (openBlock(), createBlock(_component_USkeletonItem, {
+                key: 1,
+                type: "text",
+                style: { "width": "50%" }
+              }))
+            ]),
+            _: 1
+          }, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            _ctx.expandIcon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createElementVNode("span", {
+                class: normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
+                style: normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
+              }, null, 6),
+              createVNode(_component_ExpandIcon, {
+                "need-indent-spaced": "",
+                expandable: !!_ctx.data.children,
+                "need-loading": _ctx.data.children === true,
+                "row-key": _ctx.rowKey,
+                expanded: _ctx.isRowExpanded(_ctx.rowKey, true),
+                onExpand: _ctx.handleExpand,
+                onAsyncExpand: _ctx.handleAsyncExpand
+              }, null, 8, ["expandable", "need-loading", "row-key", "expanded", "onExpand", "onAsyncExpand"])
+            ], 64)) : createCommentVNode("v-if", true),
+            _ctx.isRender ? (openBlock(), createBlock(_component_Render, {
+              key: 1,
+              render: () => {
+                var _a2;
+                return (_a2 = _ctx.renderFn) == null ? void 0 : _a2.call(_ctx, {
+                  row: _ctx.data,
+                  index: _ctx.index,
+                  rowKey: _ctx.rowKey,
+                  pagination: _ctx.pagination,
+                  column: _ctx.column
+                });
+              }
+            }, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              _ctx.column.ellipsis && _ctx.displayCell ? (openBlock(), createBlock(_component_UTooltip, {
+                key: 0,
+                title: _ctx.displayCell.toString(),
+                disabled: !_ctx.isOverflow,
+                "mouse-enter-delay": 0.5
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", { ref: "ellipsisSpanRef" }, toDisplayString(_ctx.displayCell), 513)
+                ]),
+                _: 1
+              }, 8, ["title", "disabled"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(_ctx.displayCell), 1)
+              ], 64))
+            ], 64))
+          ], 64))
+        ], 16)) : createCommentVNode("v-if", true)
+      ];
+    }),
+    _: 1
+  }, 8, ["onResize"]);
 }
 var TableCell = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$E], ["__file", "TableCell.vue"]]);
 
@@ -33669,35 +33629,48 @@ const _sfc_main$B = defineComponent({
   setup(props) {
     const {
       prefixCls,
-      size: { tableWidth, sizesMap }
+      props: { width },
+      size: { tableWidth }
     } = inject("tableContext", {});
     const tableRef = ref(null);
     const tableStyle = computed(() => {
       const style = {};
-      style.width = `${tableWidth.value}px`;
+      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)) {
+        style.tableLayout = "fixed";
+      } else {
+        style.tableLayout = "auto";
+      }
       return style;
     });
     const getColumns = () => {
       let left = 0;
-      let right = props.columns.filter((x) => x.fixed === "right").reduce((sum, { key }) => {
-        const w = sizesMap[key];
+      let right = props.columns.filter((x) => x.fixed === "right").reduce((sum, column) => {
+        var _a;
+        const w = getWidth((_a = column.width) != null ? _a : column.minWidth, tableWidth.value);
         return sum + w;
       }, 0);
       return props.columns.map((column) => {
+        var _a, _b;
         const rst = {
           ...column,
           className: column.fixed ? `${column.className || ""} ${prefixCls.value}-fixed-column ${prefixCls.value}-fixed-column-${column.fixed}` : column.className
         };
         if (column.fixed === "left") {
           rst.left = left;
-          const w = sizesMap[column.key];
+          const w = getWidth((_a = column.width) != null ? _a : column.minWidth, tableWidth.value);
           left += w;
           if (column.lastLeft) {
             rst.className = `${rst.className || ""} ${prefixCls.value}-fixed-column-${column.fixed}-last`;
           }
         }
         if (column.fixed === "right") {
-          const w = sizesMap[column.key];
+          const w = getWidth((_b = column.width) != null ? _b : column.minWidth, tableWidth.value);
           right -= w;
           rst.right = right;
           if (column.firstRight) {
@@ -35317,13 +35290,13 @@ const _sfc_main$u = defineComponent({
       selectionColumn
     });
     const {
-      sizesMap,
       handleResize,
       isScrollX,
       scrollPosition,
       setScrollPositionClass,
       resetScrollX,
       tableWidth,
+      resizeColumns,
       clearResizeTimer,
       setResizeWidth
     } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
@@ -35405,7 +35378,7 @@ const _sfc_main$u = defineComponent({
     const handleColumnResize = (columnWidth, changeWidth, column, event) => {
       emit("column-resize", columnWidth, changeWidth, column, event);
     };
-    const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading } = toRefs(props);
+    const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading, width } = toRefs(props);
     provide("tableContext", {
       prefixCls,
       locale,
@@ -35424,7 +35397,8 @@ const _sfc_main$u = defineComponent({
         disabledHover,
         expandIndent,
         headerSticky,
-        loading
+        loading,
+        width
       },
       slots,
       expand: {
@@ -35438,7 +35412,7 @@ const _sfc_main$u = defineComponent({
       },
       size: {
         tableWidth,
-        sizesMap,
+        resizeColumns,
         isScrollX,
         setResizeWidth,
         handleColumnResize,
@@ -35507,8 +35481,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
     default: withCtx(() => [
       createElementVNode("div", {
-        class: normalizeClass([`${_ctx.prefixCls}-wrapper`]),
-        style: normalizeStyle({ width: typeof _ctx.width === "number" ? `${_ctx.width}px` : _ctx.width })
+        class: normalizeClass([`${_ctx.prefixCls}-wrapper`])
       }, [
         _ctx.showPagination && _ctx.pagination && (_ctx.pagination.position === "top" || _ctx.pagination.position === "both") ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -35536,7 +35509,6 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
               [`${_ctx.prefixCls}-empty`]: !_ctx.data.length,
               [`${_ctx.prefixCls}-without-column-header`]: !_ctx.showHeader,
               [`${_ctx.prefixCls}-fixed-header`]: !!_ctx.maxHeight,
-              [`${_ctx.prefixCls}-layout-fixed`]: true,
               [`${_ctx.prefixCls}-scroll-position-left`]: _ctx.scrollPosition === "left" || _ctx.scrollPosition === "both",
               [`${_ctx.prefixCls}-scroll-position-right`]: _ctx.scrollPosition === "right" || _ctx.scrollPosition === "both",
               [`${_ctx.prefixCls}-dragging`]: _ctx.showResizeLine,
@@ -35599,7 +35571,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
             onPageSizeChange: _ctx.handlePageSizeChange
           }), null, 16, ["total", "onChange", "onPageSizeChange"])
         ], 2)) : createCommentVNode("v-if", true)
-      ], 6)
+      ], 2)
     ]),
     _: 3
   }, 8, ["onResize"]);
@@ -36603,10 +36575,6 @@ const tagProps = {
     type: String,
     default: "surface"
   },
-  size: {
-    type: String,
-    default: "default"
-  },
   round: {
     type: Boolean,
     default: false
@@ -36700,25 +36668,23 @@ const _sfc_main$q = defineComponent({
         }
         if (props.variant === "outline") {
           return {
-            borderColor: void 0,
-            color: props.color,
-            boxShadow: `0 0 0 1px ${props.color} inset`
+            border: `1px solid ${props.color}`,
+            color: props.color
           };
         }
         if (props.variant === "solid") {
           return {
-            backgroundColor: props.color
+            backgroundColor: props.color,
+            color: "white"
           };
         }
         return {
           backgroundColor: hexToRgba(props.color, 0.1),
           color: props.color,
-          boxShadow: `0 0 0 1px ${props.color} inset`
+          border: `1px solid ${props.color}`
         };
       }
-      return {
-        backgroundColor: void 0
-      };
+      return {};
     });
     const showIcon = computed(() => {
       return !!slots.icon || !!props.icon;
@@ -36745,7 +36711,6 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass([
       `${_ctx.prefixCls}`,
       `${_ctx.prefixCls}-variant-${_ctx.variant}`,
-      `${_ctx.prefixCls}-${_ctx.size}`,
       {
         [`${_ctx.prefixCls}-has-color ${_ctx.prefixCls}-has-color-${_ctx.variant}`]: _ctx.color && !_ctx.isPresetColor && !_ctx.isStatusType,
         [`${_ctx.prefixCls}-has-icon`]: _ctx.showIcon,