@uzum-tech/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -277,6 +277,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  color: var(--u-text-color-disabled);
  `), (0, cssr_1.cE)('render-label', `
  color: var(--u-text-color-disabled);
+ `), (0, cssr_1.cB)('base-selection-overlay', `
+ pointer-events: auto;
+ user-select: text;
  `)]), (0, cssr_1.cB)('base-selection-tag-wrapper', `
  max-width: 100%;
  display: inline-flex;

package/lib/card-list/src/CardList.d.ts

@@ -251,9 +251,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         dropDownBgColor: string;
     }, any>>>;
 }>> & Readonly<{}>, {
+    readonly cols: string | number;
     readonly showDivider: boolean;
     readonly xGap: string | number;
     readonly yGap: string | number;
-    readonly cols: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/checkbox/src/Checkbox.d.ts

@@ -713,12 +713,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabled: boolean | undefined;
     position: "left" | "right";
     focusable: boolean;
+    checkedValue: string | number | boolean;
+    uncheckedValue: string | number | boolean;
     indeterminate: boolean;
     ripple: boolean;
     privateInsideTable: boolean;
     checked: string | number | boolean | undefined;
     defaultChecked: string | number | boolean;
-    checkedValue: string | number | boolean;
-    uncheckedValue: string | number | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components.d.ts

@@ -63,6 +63,7 @@ export * from './legacy-transfer';
 export * from './list';
 export * from './loading-bar';
 export * from './log';
+export * from './mapping-card';
 export * from './marquee';
 export * from './mention';
 export * from './menu';

package/lib/components.js

@@ -79,6 +79,7 @@ __exportStar(require("./legacy-transfer"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./loading-bar"), exports);
 __exportStar(require("./log"), exports);
+__exportStar(require("./mapping-card"), exports);
 __exportStar(require("./marquee"), exports);
 __exportStar(require("./mention"), exports);
 __exportStar(require("./menu"), exports);

package/lib/config-provider/src/internal-interface.d.ts

@@ -52,7 +52,7 @@ import type { CollapseTransitionTheme } from '../../collapse-transition/styles';
 import type { CollapseTheme } from '../../collapse/styles';
 import type { ColorPickerProps } from '../../color-picker';
 import type { ColorPickerTheme } from '../../color-picker/styles';
-import type { DatePickerV2Props, DatePickerV2Theme } from '../../components';
+import type { DatePickerV2Props, DatePickerV2Theme, MappingCardProps, MappingCardTheme } from '../../components';
 import type { CropTheme } from '../../crop/styles';
 import type { DataTableProps, DataTableRenderFilter, DataTableRenderSorter } from '../../data-table';
 import type { DataTableTheme } from '../../data-table/styles';
@@ -209,6 +209,7 @@ export interface GlobalThemeWithoutCommon {
     ButtonGroup?: ButtonGroupTheme;
     Calendar?: CalendarTheme;
     ActionCard?: ActionCardTheme;
+    MappingCard?: MappingCardTheme;
     Card?: CardTheme;
     Carousel?: CarouselTheme;
     Cascader?: CascaderTheme;
@@ -315,6 +316,7 @@ export interface GlobalComponentConfig {
     ButtonGroup?: ButtonGroupProps;
     Calendar?: CalendarProps;
     ActionCard?: ActionCardProps;
+    MappingCard?: MappingCardProps;
     Card?: CardProps;
     Carousel?: CarouselProps;
     Cascader?: CascaderProps;

package/lib/data-table/src/DataTable.d.ts

@@ -1,6 +1,6 @@
-import type { CsvOptionsType, MainTableRef, RowKey, TableBaseColumn } from './interface';
+import type { ColumnKey, CsvOptionsType, MainTableRef, RowKey, TableBaseColumn } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly onUnstableColumnResize: import("vue").PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: import("./interface").ColumnKey) => number | undefined) => void>;
+    readonly onUnstableColumnResize: import("vue").PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
         readonly type: import("vue").PropType<false | import("../../pagination").PaginationProps>;
         readonly default: false;
@@ -62,6 +62,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: import("vue").PropType<"auto" | "fixed">;
         readonly default: "auto";
     };
+    readonly resizableMinWidth: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: 50;
+    };
+    readonly resizableMaxWidth: import("vue").PropType<number | string>;
+    readonly resizableStorage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly cascade: {
         readonly type: BooleanConstructor;
@@ -2965,7 +2974,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     clearFilters: () => void;
     clearSorter: () => void;
     page: (page: number) => void;
-    sort: (columnKey: import("./interface").ColumnKey, order: import("./interface").SortOrder) => void;
+    sort: (columnKey: ColumnKey, order: import("./interface").SortOrder) => void;
     scrollTo: import("../../scrollbar/src/Scrollbar").ScrollTo;
     downloadCsv: (options?: CsvOptionsType) => void;
     getData: () => {
@@ -4421,7 +4430,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "edit"[], "edit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly onUnstableColumnResize: import("vue").PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: import("./interface").ColumnKey) => number | undefined) => void>;
+    readonly onUnstableColumnResize: import("vue").PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
         readonly type: import("vue").PropType<false | import("../../pagination").PaginationProps>;
         readonly default: false;
@@ -4483,6 +4492,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: import("vue").PropType<"auto" | "fixed">;
         readonly default: "auto";
     };
+    readonly resizableMinWidth: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: 50;
+    };
+    readonly resizableMaxWidth: import("vue").PropType<number | string>;
+    readonly resizableStorage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly cascade: {
         readonly type: BooleanConstructor;
@@ -7388,6 +7406,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly bordered: boolean | undefined;
     readonly loading: boolean;
     readonly loadingSkeleton: boolean;
+    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
     readonly allowCheckingNotLoaded: boolean;
     readonly remote: boolean;
     readonly cascade: boolean;
@@ -7404,11 +7423,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly defaultExpandAll: boolean;
     readonly stickyExpandedRows: boolean;
     readonly tableLayout: "auto" | "fixed";
+    readonly resizableMinWidth: string | number;
+    readonly resizableStorage: boolean;
     readonly childrenKey: string;
     readonly indent: number;
     readonly flexHeight: boolean;
     readonly summaryPlacement: "top" | "bottom";
     readonly paginationBehaviorOnFilter: "first" | "current";
-    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/data-table/src/DataTable.js

@@ -60,7 +60,7 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('DataTable', '-data-table', index_cssr_1.default, styles_1.dataTableLight, props, mergedClsPrefixRef);
         const bodyWidthRef = (0, vue_1.ref)(null);
         const mainTableInstRef = (0, vue_1.ref)(null);
-        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth, resizableWidthsRef } = (0, use_resizable_1.useResizable)();
+        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth, setResizableWidths, resizableWidthsRef } = (0, use_resizable_1.useResizable)();
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = (0, use_group_header_1.useGroupHeader)(props, getResizableWidth);
         const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdatePageSize, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, restoreSortState, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
         const downloadCsv = (options) => {
@@ -81,7 +81,8 @@ exports.default = (0, vue_1.defineComponent)({
         const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = (0, use_scroll_1.useScroll)(props, {
             bodyWidthRef,
             mainTableInstRef,
-            mergedCurrentPageRef
+            mergedCurrentPageRef,
+            getResizableWidth
         });
         (0, vue_1.onMounted)(() => {
             var _a, _b;
@@ -91,7 +92,9 @@ exports.default = (0, vue_1.defineComponent)({
             const stored = (0, use_table_storage_1.loadTableState)(key);
             if (!stored)
                 return;
-            if (stored.columnWidths && Object.keys(stored.columnWidths).length > 0) {
+            if (props.resizableStorage
+                && stored.columnWidths
+                && Object.keys(stored.columnWidths).length > 0) {
                 resizableWidthsRef.value = Object.assign(Object.assign({}, resizableWidthsRef.value), stored.columnWidths);
             }
             if (props.pagination && stored.page != null) {
@@ -136,7 +139,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (!(state === null || state === void 0 ? void 0 : state.key))
                 return;
             (0, use_table_storage_1.saveTableState)(state.key, {
-                columnWidths: state.columnWidths,
+                columnWidths: state.columnWidths && Object.keys(state.columnWidths).length
+                    ? state.columnWidths
+                    : undefined,
                 page: state.page,
                 pageSize: state.pageSize,
                 filters: state.filters,
@@ -162,6 +167,127 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return props.tableLayout;
         });
+        const resizableColumnPresentRef = (0, vue_1.computed)(() => {
+            return dataRelatedColsRef.value.some(column => (0, utils_1.isColumnResizable)(column));
+        });
+        const resizableEnabledRef = (0, vue_1.computed)(() => {
+            return resizableColumnPresentRef.value;
+        });
+        const fixedResizableModeRef = (0, vue_1.computed)(() => {
+            return mergedTableLayoutRef.value === 'fixed' && resizableEnabledRef.value;
+        });
+        const visibleLeafColumnsSignalRef = (0, vue_1.computed)(() => (0, utils_1.deriveVisibleLeafColumnWidthItems)(dataRelatedColsRef.value));
+        const visibleLeafKeySignatureRef = (0, vue_1.computed)(() => {
+            return visibleLeafColumnsSignalRef.value
+                .map(column => String(column.key))
+                .join('|');
+        });
+        const visibleLeafDescriptorSignatureRef = (0, vue_1.computed)(() => {
+            return (0, utils_1.deriveColumnWidthSignature)(visibleLeafColumnsSignalRef.value);
+        });
+        const resizableColumnsSignalRef = (0, vue_1.computed)(() => (0, utils_1.deriveResizableColumnWidthItems)(dataRelatedColsRef.value));
+        const resizableColumnsSignatureRef = (0, vue_1.computed)(() => {
+            return (0, utils_1.deriveColumnWidthSignature)(resizableColumnsSignalRef.value);
+        });
+        const modeSignalRef = (0, vue_1.computed)(() => {
+            return fixedResizableModeRef.value ? 'fixed' : 'non-fixed';
+        });
+        const containerWidthSignalRef = (0, vue_1.computed)(() => {
+            const bodyWidth = bodyWidthRef.value;
+            const scrollXWidth = (0, utils_1.parseLengthToNumber)(props.scrollX);
+            return bodyWidth !== null && bodyWidth > 0
+                ? bodyWidth
+                : scrollXWidth !== undefined && scrollXWidth > 0
+                    ? scrollXWidth
+                    : undefined;
+        });
+        const widthConstraintSignalRef = (0, vue_1.computed)(() => {
+            return {
+                systemMinWidth: props.resizableMinWidth,
+                systemMaxWidth: props.resizableMaxWidth
+            };
+        });
+        function buildNonFixedModeWidthMap(currentWidths, resizableColumns) {
+            const { systemMinWidth, systemMaxWidth } = widthConstraintSignalRef.value;
+            return {
+                keys: resizableColumns.map(column => column.key),
+                widthMap: (0, utils_1.sanitizeColumnWidthMap)(resizableColumns, {
+                    systemMinWidth,
+                    systemMaxWidth,
+                    source: currentWidths
+                })
+            };
+        }
+        function buildFixedModeWidthMap(visibleLeafColumns, currentWidths) {
+            const { systemMinWidth, systemMaxWidth } = widthConstraintSignalRef.value;
+            const preferredWidths = (0, utils_1.sanitizeColumnWidthMap)(visibleLeafColumns, {
+                systemMinWidth,
+                systemMaxWidth,
+                source: currentWidths
+            });
+            const containerWidth = containerWidthSignalRef.value;
+            if (containerWidth === undefined) {
+                return preferredWidths;
+            }
+            return (0, utils_1.computeFixedTableColumnWidths)(visibleLeafColumns, {
+                containerWidth,
+                systemMinWidth,
+                systemMaxWidth,
+                preferredWidths
+            });
+        }
+        function syncResizableWidths(nextWidths, keys) {
+            const prevWidths = resizableWidthsRef.value;
+            const keySet = new Set(keys.map(String));
+            const staleKeysPresent = Object.keys(prevWidths).some(key => !keySet.has(key));
+            if (!staleKeysPresent
+                && (0, utils_1.areColumnWidthMapsEqual)(prevWidths, nextWidths, keys)) {
+                return;
+            }
+            setResizableWidths(nextWidths);
+        }
+        function reconcileResizableWidths(_reason) {
+            const visibleLeafColumns = visibleLeafColumnsSignalRef.value;
+            const currentWidths = resizableWidthsRef.value;
+            if (!visibleLeafColumns.length || !resizableColumnPresentRef.value) {
+                if (Object.keys(currentWidths).length) {
+                    clearResizableWidth();
+                }
+                return;
+            }
+            if (modeSignalRef.value !== 'fixed') {
+                const { widthMap, keys } = buildNonFixedModeWidthMap(currentWidths, resizableColumnsSignalRef.value);
+                syncResizableWidths(widthMap, keys);
+                return;
+            }
+            const visibleLeafKeys = visibleLeafColumns.map(column => column.key);
+            const nextWidths = buildFixedModeWidthMap(visibleLeafColumns, currentWidths);
+            syncResizableWidths(nextWidths, visibleLeafKeys);
+        }
+        function registerResizableWidthReconcileWatches() {
+            (0, vue_1.watch)(() => [
+                visibleLeafDescriptorSignatureRef.value,
+                visibleLeafKeySignatureRef.value,
+                resizableColumnsSignatureRef.value,
+                resizableColumnPresentRef.value
+            ], () => {
+                reconcileResizableWidths('topology/capability');
+            }, { immediate: true });
+            (0, vue_1.watch)(modeSignalRef, () => {
+                reconcileResizableWidths('mode');
+            });
+            (0, vue_1.watch)(() => [
+                containerWidthSignalRef.value,
+                widthConstraintSignalRef.value.systemMinWidth,
+                widthConstraintSignalRef.value.systemMaxWidth
+            ], () => {
+                reconcileResizableWidths('environment');
+            });
+            (0, vue_1.watch)(() => resizableWidthsRef.value, () => {
+                reconcileResizableWidths('width-state');
+            }, { deep: true });
+        }
+        registerResizableWidthReconcileWatches();
         const calculateTotalRowValue = (pageData, config) => {
             const { type, fields, function: customFn } = config;
             switch (type) {
@@ -357,6 +483,7 @@ exports.default = (0, vue_1.defineComponent)({
             }),
             onLoadRef: (0, vue_1.toRef)(props, 'onLoad'),
             mergedTableLayoutRef,
+            resizableEnabledRef,
             maxHeightRef: (0, vue_1.toRef)(props, 'maxHeight'),
             minHeightRef: (0, vue_1.toRef)(props, 'minHeight'),
             flexHeightRef: (0, vue_1.toRef)(props, 'flexHeight'),

package/lib/data-table/src/TableParts/Body.d.ts

@@ -3,6 +3,12 @@ import type { VirtualListInst } from 'vueuc';
 import type { ScrollbarInst } from '../../../_internal';
 import type { ColumnKey, RowKey, TmNode } from '../interface';
 import type { ColItem } from '../use-group-header';
+interface NormalRowRenderInfo {
+    striped: boolean;
+    tmNode: TmNode;
+    key: RowKey;
+    index: number;
+}
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;
@@ -2822,12 +2828,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
     empty: import("vue").ComputedRef<boolean>;
     paginatedDataAndInfo: import("vue").ComputedRef<{
-        data: {
-            tmNode: TmNode;
-            key: import("treemate").Key;
-            striped: boolean;
-            index: number;
-        }[];
+        data: NormalRowRenderInfo[];
         hasChildren: boolean;
     }>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[], import("../interface").InternalRowData[]>;
@@ -2853,6 +2854,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     mergedSortState: import("vue").Ref<import("../interface").SortState[], import("../interface").SortState[]>;
     virtualScroll: import("vue").Ref<boolean, boolean>;
     mergedTableLayout: import("vue").Ref<"auto" | "fixed", "auto" | "fixed">;
+    fixedResizableMode: import("vue").ComputedRef<boolean>;
+    fixedResizableTableWidth: import("vue").ComputedRef<string | undefined>;
     childTriggerColIndex: import("vue").Ref<number, number>;
     indent: import("vue").Ref<number, number>;
     rowProps: import("vue").Ref<import("../interface").CreateRowProps<import("../interface").InternalRowData> | undefined, import("../interface").CreateRowProps<import("../interface").InternalRowData> | undefined>;

package/lib/data-table/src/TableParts/Body.js

@@ -78,12 +78,13 @@ const VirtualListItemWrapper = (0, vue_1.defineComponent)({
             type: Array,
             required: true
         },
+        tableWidth: String,
         onMouseenter: Function,
         onMouseleave: Function
     },
     render() {
-        const { clsPrefix, id, cols, onMouseenter, onMouseleave } = this;
-        return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed' }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
+        const { clsPrefix, id, cols, tableWidth, onMouseenter, onMouseleave } = this;
+        return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed', width: tableWidth }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
             (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
             (0, vue_1.h)("tbody", { "data-u-id": id, class: `${clsPrefix}-data-table-tbody` }, this.$slots)));
     }
@@ -99,7 +100,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, defaultEmptyValueRef, emptyPropsRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, resizableEnabledRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, defaultEmptyValueRef, emptyPropsRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const scrollbarInstRef = (0, vue_1.ref)(null);
         const virtualListRef = (0, vue_1.ref)(null);
@@ -116,6 +117,21 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedExpandedRowKeySetRef = (0, vue_1.computed)(() => {
             return new Set(mergedExpandedRowKeysRef.value);
         });
+        const fixedResizableModeRef = (0, vue_1.computed)(() => {
+            return mergedTableLayoutRef.value === 'fixed' && resizableEnabledRef.value;
+        });
+        const fixedResizableTableWidthRef = (0, vue_1.computed)(() => {
+            if (!fixedResizableModeRef.value)
+                return;
+            let total = 0;
+            for (const column of colsRef.value) {
+                const width = (0, seemly_1.depx)(column.style.width);
+                if (!Number.isFinite(width) || width <= 0)
+                    return;
+                total += width;
+            }
+            return `${total}px`;
+        });
         function getRowInfo(key) {
             var _a;
             return (_a = treeMateRef.value.getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
@@ -338,7 +354,7 @@ exports.default = (0, vue_1.defineComponent)({
                     data,
                     hasChildren
                 };
-            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, fixedResizableMode: fixedResizableModeRef, fixedResizableTableWidth: fixedResizableTableWidthRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
             handleVirtualListScroll,
             handleVirtualListResize,
             handleMouseleaveTable,
@@ -353,16 +369,19 @@ exports.default = (0, vue_1.defineComponent)({
             emptyPropsRef }, exposedMethods);
     },
     render() {
-        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
-        const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
+        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, fixedResizableMode, fixedResizableTableWidth, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
+        const scrollable = scrollX !== undefined
+            || maxHeight !== undefined
+            || flexHeight
+            || fixedResizableMode;
         // For a basic table with auto layout whose content may overflow we will
         // make it scrollable, which differs from browser's native behavior.
         // For native behavior, see
         // https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
         const isBasicAutoLayout = !scrollable && mergedTableLayout === 'auto';
-        const xScrollable = scrollX !== undefined || isBasicAutoLayout;
+        const xScrollable = scrollX !== undefined || isBasicAutoLayout || fixedResizableMode;
         const contentStyle = {
-            minWidth: (0, _utils_1.formatLength)(scrollX) || '100%'
+            minWidth: fixedResizableTableWidth || (0, _utils_1.formatLength)(scrollX) || '100%'
         };
         if (scrollX)
             contentStyle.width = '100%';
@@ -601,6 +620,7 @@ exports.default = (0, vue_1.defineComponent)({
                 };
                 if (!virtualScroll) {
                     return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
+                            width: fixedResizableTableWidth,
                             tableLayout: this.mergedTableLayout
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
@@ -612,6 +632,7 @@ exports.default = (0, vue_1.defineComponent)({
                 else {
                     if (this.loading || this.loadingSkeleton) {
                         return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
+                                width: fixedResizableTableWidth,
                                 tableLayout: this.mergedTableLayout
                             } },
                             (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
@@ -622,6 +643,7 @@ exports.default = (0, vue_1.defineComponent)({
                             clsPrefix: mergedClsPrefix,
                             id: componentId,
                             cols,
+                            tableWidth: fixedResizableTableWidth,
                             onMouseleave: handleMouseleaveTable
                         }, showScrollbar: false, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemsStyle: contentStyle, itemResizable: true }, {
                         default: ({ item, index }) => renderRow(item, index, true)

package/lib/data-table/src/TableParts/Cell.js

@@ -41,7 +41,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { render, key, ellipsis, editable, numeric } = column;
         if (numeric && !mask)
             mask = utils_1.defaultNumericMask;
-        const isEditable = typeof editable === 'function' ? editable(row) : editable;
+        const rowEditable = typeof editable === 'function' ? editable(row) : editable;
         if (render && !isSummary) {
             let cellValue = render(row, this.index);
             if (cellValue == null || cellValue === false) {
@@ -67,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
                 cell = cellValue;
             }
         }
-        else if (isEditable && !isSummary) {
+        else if (rowEditable && !isSummary) {
             const { placeholder } = column;
             const rawValue = String(row[key] || '');
             const displayValue = mask ? (0, use_mask_1.processMaskedValue)(rawValue, mask) : rawValue;
@@ -76,19 +76,19 @@ exports.default = (0, vue_1.defineComponent)({
                 class: `${this.clsPrefix}-data-table-editable-input`,
                 value: displayValue,
                 placeholder: placeholder || '',
-                onFocus: (e) => {
-                    const input = e.target;
+                onFocus: (event) => {
+                    const input = event.target;
                     isEditingRef.current = true;
                     input.value = rawValue;
                 },
-                onKeyDown: (e) => {
+                onKeyDown: (event) => {
                     if (mask && typeof mask === 'function' && isEditingRef.current) {
-                        const input = e.target;
+                        const input = event.target;
                         input.value = rawValue;
                     }
                 },
-                onInput: (e) => {
-                    const input = e.target;
+                onInput: (event) => {
+                    const input = event.target;
                     let value = input.value;
                     if (numeric) {
                         const cursorPosition = input.selectionStart || 0;
@@ -136,15 +136,15 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                     this.$emit('edit', processedValue, row, key);
                 },
-                onKeyUp: (e) => {
+                onKeyUp: (event) => {
                     if (mask && typeof mask === 'function' && isEditingRef.current) {
-                        const input = e.target;
+                        const input = event.target;
                         input.value = rawValue;
                     }
                 },
-                onChange: (e) => {
+                onChange: (event) => {
                     if (mask && typeof mask === 'function' && isEditingRef.current) {
-                        const input = e.target;
+                        const input = event.target;
                         setTimeout(() => {
                             if (isEditingRef.current && input.value !== rawValue) {
                                 input.value = rawValue;
@@ -157,10 +157,10 @@ exports.default = (0, vue_1.defineComponent)({
                         }, 10);
                     }
                 },
-                onBlur: (e) => {
+                onBlur: (event) => {
                     isEditingRef.current = false;
                     if (mask) {
-                        const input = e.target;
+                        const input = event.target;
                         let currentValue = input.value;
                         if (numeric && currentValue !== '') {
                             currentValue = currentValue.replace(',', '.');
@@ -241,8 +241,8 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        if (ellipsis) {
-            if (typeof ellipsis === 'object') {
+        if ((0, utils_1.isColumnEllipsisEnabled)(column)) {
+            if (ellipsis && typeof ellipsis === 'object') {
                 const { mergedTheme } = this;
                 return ((0, vue_1.h)(ellipsis_1.UEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
             }

package/lib/data-table/src/TableParts/Header.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>, {
-    cellElsRef: import("vue").Ref<Record<ColumnKey, HTMLTableCellElement>, Record<ColumnKey, HTMLTableCellElement>>;
+    cellElementsRef: import("vue").Ref<Record<ColumnKey, HTMLTableCellElement>, Record<ColumnKey, HTMLTableCellElement>>;
     componentId: string;
     mergedSortState: import("vue").Ref<import("../interface").SortState[], import("../interface").SortState[]>;
     mergedClsPrefix: import("vue").Ref<string, string>;
@@ -2792,9 +2792,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined, import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
     mergedTableLayout: import("vue").Ref<"auto" | "fixed", "auto" | "fixed">;
+    resizableEnabled: import("vue").Ref<boolean, boolean>;
+    fixedResizableTableWidth: import("vue").ComputedRef<string | undefined>;
     headerCheckboxDisabled: import("vue").Ref<boolean, boolean>;
     handleCheckboxUpdateChecked: () => void;
-    handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
+    handleColHeaderClick: (event: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
     handleColumnResizeStart: (column: TableBaseColumn) => void;
     handleColumnResize: (column: TableBaseColumn, displacementX: number) => void;