@koi-design/uxd-ui 14.0.3 → 14.0.5

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.3 */
+/*! @koi-design/uxd-ui@4.0.5 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lucide-vue-next')) :
@@ -7503,7 +7503,7 @@
         if (stateWidth !== _width || stateHeight !== _height) {
           stateWidth = _width;
           stateHeight = _height;
-          emit("resize", { widht: _width, height: _height });
+          emit("resize", { target, width: _width, height: _height });
         }
       };
       const destroyObserver = () => {
@@ -10953,13 +10953,11 @@
         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;
           }
@@ -15482,6 +15480,10 @@
       type: [String, Number],
       default: ""
     },
+    label: {
+      type: String,
+      default: ""
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -15686,13 +15688,14 @@
           onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleOnBlur && _ctx.handleOnBlur(...args))
         }, null, 42, _hoisted_1$I)
       ], 2),
-      vue.createElementVNode("span", {
+      _ctx.label || _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 0,
         class: vue.normalizeClass([`${_ctx.prefixCls}-label`])
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
+          vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
         ])
-      ], 2)
+      ], 2)) : vue.createCommentVNode("v-if", true)
     ], 2);
   }
   var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["render", _sfc_render$1L], ["__file", "Radio.vue"]]);
@@ -25002,7 +25005,7 @@
   var Mask = vue.defineComponent({
     name: "UMask",
     props: maskProps,
-    emits: ["after-show-mask-change"],
+    emits: ["after-show-mask-change", "click"],
     setup(props, {
       slots,
       emit,
@@ -25033,6 +25036,9 @@
         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,
@@ -25048,7 +25054,8 @@
           "class": prefixCls.value,
           "onTouchmove": props.preventScroll ? handleTouchMove : () => {
           },
-          "onAnimationend": handleAnimationend
+          "onAnimationend": handleAnimationend,
+          "onClick": handleClick
         }, [useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)]), [[vue.vShow, props.show]]);
       });
       return () => vue.createVNode(vue.Transition, {
@@ -25092,6 +25099,10 @@
       type: String,
       default: ""
     },
+    description: {
+      type: String,
+      default: ""
+    },
     closable: {
       type: Boolean,
       default: true
@@ -25359,20 +25370,22 @@
       const renderDrawer = lazyRender(() => {
         const renderConrent = () => {
           var _a;
-          return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-            "ref": headerRef,
-            "class": `${prefixCls.value}-header`,
-            "style": props.headerStyle
-          }, [vue.createVNode("h2", {
-            "class": `${prefixCls.value}-header-title`
-          }, [slots.title ? slots.title() : props.title]), props.closable && vue.createVNode("button", {
+          return vue.createVNode(vue.Fragment, null, [props.closable && vue.createVNode("button", {
             "class": `${prefixCls.value}-close`,
             "onClick": () => handleClose("close")
           }, [vue.createVNode(UIcon, {
             "class": `${prefixCls.value}-close-icon`
           }, {
             default: () => [vue.createVNode(lucideVueNext.X, null, null)]
-          })])]), vue.createVNode("div", {
+          })]), vue.createVNode("div", {
+            "ref": headerRef,
+            "class": `${prefixCls.value}-header`,
+            "style": props.headerStyle
+          }, [vue.createVNode("h2", {
+            "class": `${prefixCls.value}-header-title`
+          }, [slots.title ? slots.title() : props.title]), props.description && vue.createVNode("p", {
+            "class": `${prefixCls.value}-header-description`
+          }, [props.description])]), vue.createVNode("div", {
             "class": `${prefixCls.value}-body`,
             "style": {
               ...props.bodyStyle,
@@ -30886,15 +30899,6 @@
       type: String,
       default: "surface"
     },
-    color: {
-      type: String,
-      default: void 0,
-      validator: oneOf(colorType)
-    },
-    size: {
-      type: String,
-      default: "default"
-    },
     direction: {
       type: String
     }
@@ -31312,13 +31316,12 @@
       })]);
       return vue.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
       }, [vue.createVNode("div", {
@@ -32061,19 +32064,22 @@
     },
     setup(props) {
       const {
-        size: { sizesMap }
+        size: { resizeColumns }
       } = vue.inject("tableContext", {});
       const cols = vue.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
             };
           })
         );
@@ -32089,7 +32095,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.width, maxWidth: col.fixed ? col.width : "" })
+          style: vue.normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
         }, null, 4);
       }), 128))
     ]);
@@ -32312,8 +32318,8 @@
     return _width;
   }
   function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
-    const sizesMap = vue.reactive({});
     const tableWidth = vue.ref(void 0);
+    const resizeColumns = vue.shallowRef([]);
     const syncColumnsWidth = () => {
       const { bodyTable } = tableRefs;
       if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -32321,73 +32327,15 @@
       }
       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 = vue.ref("left");
@@ -32425,8 +32373,8 @@
       const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));
       if (_column) {
         _column.width = width;
-        handleResize();
       }
+      resizeColumns.value = columns;
     };
     const isScrollX = vue.computed(() => {
       const { table } = tableRefs;
@@ -32452,10 +32400,10 @@
       }
     };
     return {
-      sizesMap,
       tableWidth,
       isScrollX,
       scrollPosition,
+      resizeColumns,
       handleResize,
       setScrollPositionClass,
       resetScrollX,
@@ -32856,7 +32804,7 @@
       },
       expandIcon: {
         type: [String, Object, Function],
-        default: () => lucideVueNext.ChevronRight
+        default: void 0
       },
       needIndentSpaced: {
         type: Boolean,
@@ -32937,7 +32885,8 @@
       ExpandIcon,
       UTooltip,
       USkeleton,
-      USkeletonItem
+      USkeletonItem,
+      ResizeObserver: ResizeObserver$1
     },
     props: {
       prefixCls: {
@@ -32978,12 +32927,12 @@
         props: { indentSize },
         expand: { handleExpandChange, isRowExpanded },
         filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
-        size: { sizesMap },
         pagination
       } = vue.inject("tableContext", {});
       const cellRef = vue.ref();
       const ellipsisSpanRef = vue.ref();
       const isOverflow = vue.ref(false);
+      const isMinWidth = vue.ref(false);
       const renderFn = vue.computed(() => {
         const { render } = props.column;
         return render || null;
@@ -33028,6 +32977,9 @@
         if (right !== void 0) {
           style.right = `${right}px`;
         }
+        if (isMinWidth.value) {
+          style.width = `${props.column.minWidth}px`;
+        }
         return style;
       });
       const handleExpand = (e) => {
@@ -33045,26 +32997,25 @@
           e
         );
       };
-      vue.watch(
-        () => sizesMap,
-        () => {
+      const checkWidth = ({ target, width }) => {
+        vue.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,
@@ -33084,97 +33035,106 @@
         pagination,
         cellRef,
         ellipsisSpanRef,
-        isOverflow
+        isOverflow,
+        debouncedHandleResize
       };
     }
   });
   function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
-    var _a;
     const _component_USkeletonItem = vue.resolveComponent("USkeletonItem");
     const _component_USkeleton = vue.resolveComponent("USkeleton");
     const _component_ExpandIcon = vue.resolveComponent("ExpandIcon");
     const _component_Render = vue.resolveComponent("Render");
     const _component_UTooltip = vue.resolveComponent("UTooltip");
-    return _ctx.showCell ? (vue.openBlock(), vue.createElementBlock("td", vue.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 ? (vue.openBlock(), vue.createBlock(_component_USkeleton, {
-        key: 0,
-        class: vue.normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
-        active: ""
-      }, {
-        default: vue.withCtx(() => [
-          _ctx.column.skeleton ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
-            return vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
-              key: ski,
-              type: _ctx.column.skeleton[ski].type,
-              style: vue.normalizeStyle(_ctx.column.skeleton[ski].style)
-            }, null, 8, ["type", "style"]);
-          }), 128)) : (vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
-            key: 1,
-            type: "text",
-            style: { "width": "50%" }
-          }))
-        ]),
-        _: 1
-      }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-        _ctx.expandIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
-            style: vue.normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
-          }, null, 6),
-          vue.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)) : vue.createCommentVNode("v-if", true),
-        _ctx.isRender ? (vue.openBlock(), vue.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"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          _ctx.column.ellipsis && _ctx.displayCell ? (vue.openBlock(), vue.createBlock(_component_UTooltip, {
+    const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
+    return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+      default: vue.withCtx(() => {
+        var _a;
+        return [
+          _ctx.showCell ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
             key: 0,
-            title: _ctx.displayCell.toString(),
-            disabled: !_ctx.isOverflow,
-            "mouse-enter-delay": 0.5
-          }, {
-            default: vue.withCtx(() => [
-              vue.createElementVNode("span", { ref: "ellipsisSpanRef" }, vue.toDisplayString(_ctx.displayCell), 513)
-            ]),
-            _: 1
-          }, 8, ["title", "disabled"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createTextVNode(vue.toDisplayString(_ctx.displayCell), 1)
-          ], 64))
-        ], 64))
-      ], 64))
-    ], 16)) : vue.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 ? (vue.openBlock(), vue.createBlock(_component_USkeleton, {
+              key: 0,
+              class: vue.normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
+              active: ""
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.column.skeleton ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
+                  return vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
+                    key: ski,
+                    type: _ctx.column.skeleton[ski].type,
+                    style: vue.normalizeStyle(_ctx.column.skeleton[ski].style)
+                  }, null, 8, ["type", "style"]);
+                }), 128)) : (vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
+                  key: 1,
+                  type: "text",
+                  style: { "width": "50%" }
+                }))
+              ]),
+              _: 1
+            }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              _ctx.expandIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
+                  style: vue.normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
+                }, null, 6),
+                vue.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)) : vue.createCommentVNode("v-if", true),
+              _ctx.isRender ? (vue.openBlock(), vue.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"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                _ctx.column.ellipsis && _ctx.displayCell ? (vue.openBlock(), vue.createBlock(_component_UTooltip, {
+                  key: 0,
+                  title: _ctx.displayCell.toString(),
+                  disabled: !_ctx.isOverflow,
+                  "mouse-enter-delay": 0.5
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("span", { ref: "ellipsisSpanRef" }, vue.toDisplayString(_ctx.displayCell), 513)
+                  ]),
+                  _: 1
+                }, 8, ["title", "disabled"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.displayCell), 1)
+                ], 64))
+              ], 64))
+            ], 64))
+          ], 16)) : vue.createCommentVNode("v-if", true)
+        ];
+      }),
+      _: 1
+    }, 8, ["onResize"]);
   }
   var TableCell = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$E], ["__file", "TableCell.vue"]]);
 
@@ -33672,35 +33632,48 @@
     setup(props) {
       const {
         prefixCls,
-        size: { tableWidth, sizesMap }
+        props: { width },
+        size: { tableWidth }
       } = vue.inject("tableContext", {});
       const tableRef = vue.ref(null);
       const tableStyle = vue.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) {
@@ -35320,13 +35293,13 @@
         selectionColumn
       });
       const {
-        sizesMap,
         handleResize,
         isScrollX,
         scrollPosition,
         setScrollPositionClass,
         resetScrollX,
         tableWidth,
+        resizeColumns,
         clearResizeTimer,
         setResizeWidth
       } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
@@ -35408,7 +35381,7 @@
       const handleColumnResize = (columnWidth, changeWidth, column, event) => {
         emit("column-resize", columnWidth, changeWidth, column, event);
       };
-      const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading } = vue.toRefs(props);
+      const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading, width } = vue.toRefs(props);
       vue.provide("tableContext", {
         prefixCls,
         locale,
@@ -35427,7 +35400,8 @@
           disabledHover,
           expandIndent,
           headerSticky,
-          loading
+          loading,
+          width
         },
         slots,
         expand: {
@@ -35441,7 +35415,7 @@
         },
         size: {
           tableWidth,
-          sizesMap,
+          resizeColumns,
           isScrollX,
           setResizeWidth,
           handleColumnResize,
@@ -35510,8 +35484,7 @@
     return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
       default: vue.withCtx(() => [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass([`${_ctx.prefixCls}-wrapper`]),
-          style: vue.normalizeStyle({ width: typeof _ctx.width === "number" ? `${_ctx.width}px` : _ctx.width })
+          class: vue.normalizeClass([`${_ctx.prefixCls}-wrapper`])
         }, [
           _ctx.showPagination && _ctx.pagination && (_ctx.pagination.position === "top" || _ctx.pagination.position === "both") ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
@@ -35539,7 +35512,6 @@
                 [`${_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,
@@ -35602,7 +35574,7 @@
               onPageSizeChange: _ctx.handlePageSizeChange
             }), null, 16, ["total", "onChange", "onPageSizeChange"])
           ], 2)) : vue.createCommentVNode("v-if", true)
-        ], 6)
+        ], 2)
       ]),
       _: 3
     }, 8, ["onResize"]);
@@ -36606,10 +36578,6 @@
       type: String,
       default: "surface"
     },
-    size: {
-      type: String,
-      default: "default"
-    },
     round: {
       type: Boolean,
       default: false
@@ -36703,25 +36671,23 @@
           }
           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 = vue.computed(() => {
         return !!slots.icon || !!props.icon;
@@ -36748,7 +36714,6 @@
       class: vue.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,