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

package/es/_internal/component-renderer/index.d.ts

@@ -0,0 +1,2 @@
+export type { BuiltinType, BuiltinTypeMap, ComponentConfig } from './src/interface';
+export { renderConfig } from './src/renderer';

package/es/_internal/component-renderer/index.mjs

@@ -0,0 +1 @@
+export { renderConfig } from "./src/renderer.mjs";

package/es/_internal/component-renderer/src/interface.d.ts

@@ -0,0 +1,29 @@
+import type { VNode } from 'vue';
+import type { BadgeProps } from '../../../badge';
+import type { ListItemProps } from '../../../list/src/props';
+import type { StatusProps } from '../../../status';
+import type { TagProps } from '../../../tag';
+import type { TextProps } from '../../../typography';
+export interface BuiltinTypeMap {
+    text: TextProps;
+    status: StatusProps;
+    badge: BadgeProps;
+    tag: TagProps;
+    list_item: ListItemProps;
+}
+export type BuiltinType = keyof BuiltinTypeMap;
+export type BuiltinConfig = {
+    [K in BuiltinType]: {
+        type: K;
+        params?: BuiltinTypeMap[K];
+        slots?: Record<string, ComponentConfig>;
+        render?: never;
+    };
+}[BuiltinType];
+export interface RenderConfig {
+    render: () => VNode;
+    type?: never;
+    params?: never;
+    slots?: never;
+}
+export type ComponentConfig = BuiltinConfig | RenderConfig;

package/es/_internal/component-renderer/src/interface.mjs

@@ -0,0 +1 @@
+export {};

package/es/_internal/component-renderer/src/renderer.d.ts

@@ -0,0 +1,3 @@
+import type { VNode } from 'vue';
+import type { ComponentConfig } from './interface';
+export declare function renderConfig(config: ComponentConfig): VNode;

package/es/_internal/component-renderer/src/renderer.mjs

@@ -0,0 +1,20 @@
+import { h } from 'vue';
+import { UBadge } from "../../../badge/index.mjs";
+import { UListItem } from "../../../list/index.mjs";
+import { UStatus } from "../../../status/index.mjs";
+import { UTag } from "../../../tag/index.mjs";
+import { UText } from "../../../typography/index.mjs";
+const registry = {
+  text: UText,
+  status: UStatus,
+  badge: UBadge,
+  tag: UTag,
+  list_item: UListItem
+};
+export function renderConfig(config) {
+  if (config.render) {
+    return config.render();
+  }
+  const slots = config.slots ? Object.fromEntries(Object.entries(config.slots).map(([name, slotConfig]) => [name, () => renderConfig(slotConfig)])) : undefined;
+  return h(registry[config.type], config.params, slots);
+}

package/es/_internal/select-menu/src/SelectOption.mjs

@@ -6,7 +6,9 @@ import { UBaseIcon } from "../../icon/index.mjs";
 import { CheckmarkIcon } from "../../icons/index.mjs";
 import { internalSelectionMenuInjectionKey } from "./interface.mjs";
 function renderCheckMark(show, clsPrefix) {
-  return h(Transition, {
+  return h("div", {
+    class: `${clsPrefix}-base-select-option__check-wrapper`
+  }, h(Transition, {
     name: "fade-in-scale-up-transition"
   }, {
     default: () => show ? h(UBaseIcon, {
@@ -15,7 +17,7 @@ function renderCheckMark(show, clsPrefix) {
     }, {
       default: () => h(CheckmarkIcon)
     }) : null
-  });
+  }));
 }
 export default defineComponent({
   name: 'UBaseSelectOption',
@@ -98,7 +100,9 @@ export default defineComponent({
         const {
           value: multiple
         } = multipleRef;
-        if (value === null) return false;
+        if (value === null) {
+          return false;
+        }
         const optionValue = props.tmNode.rawNode[valueFieldRef.value];
         if (multiple) {
           const {
@@ -135,11 +139,11 @@ export default defineComponent({
       handleMouseMove,
       account
     } = this;
-    const checkmark = renderCheckMark(isSelected, clsPrefix);
+    const checkmark = renderCheckMark(showCheckmark && isSelected, clsPrefix);
     const label = renderLabel ? renderLabel(rawNode, isSelected) : render(rawNode[this.labelField], rawNode, isSelected);
     const children = account ? [h(UBaseAccountOption, Object.assign({}, rawNode, {
       label: label
-    })), showCheckmark && checkmark] : [label, showCheckmark && checkmark];
+    })), checkmark] : [label, checkmark];
     const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
     const node = h("div", Object.assign({}, attrs, {
       class: [`${clsPrefix}-base-select-option`, rawNode.class, attrs === null || attrs === void 0 ? void 0 : attrs.class, {

package/es/_internal/select-menu/src/styles/index.cssr.mjs

@@ -104,14 +104,15 @@ export default cB('base-select-menu', `
  color: var(--u-option-text-color-disabled);
  `), cM('selected', `
  opacity: var(--u-option-opacity-disabled);
- `)]), cE('check', `
- font-size: 24px;
+ `)]), cE('check-wrapper', `
  position: absolute;
  right: calc(var(--u-option-padding-right) - 4px);
  top: 50%;
  transform: translateY(-50%);
+ `, [cE('check', `
+ font-size: 24px;
  color: var(--u-option-check-color);
  transition: color .3s var(--u-bezier);
  `, [fadeInScaleUpTransition({
   enterScale: '0.5'
-})])])]);
+})])])])]);

package/es/_internal/selection/src/styles/index.cssr.mjs

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

package/es/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/es/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/es/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/es/components.mjs

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

package/es/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/es/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("../..").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("../..").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/es/data-table/src/DataTable.mjs

@@ -14,7 +14,7 @@ import { useResizable } from "./use-resizable.mjs";
 import { useScroll } from "./use-scroll.mjs";
 import { useTableData } from "./use-table-data.mjs";
 import { loadTableState, restoreSortStateFromStored, saveTableState } from "./use-table-storage.mjs";
-import { generateCsv } from "./utils.mjs";
+import { areColumnWidthMapsEqual, computeFixedTableColumnWidths, deriveColumnWidthSignature, deriveResizableColumnWidthItems, deriveVisibleLeafColumnWidthItems, generateCsv, isColumnResizable, parseLengthToNumber, sanitizeColumnWidthMap } from "./utils/index.mjs";
 export default defineComponent({
   name: 'DataTable',
   alias: ['AdvancedTable'],
@@ -66,6 +66,7 @@ export default defineComponent({
       getResizableWidth,
       clearResizableWidth,
       doUpdateResizableWidth,
+      setResizableWidths,
       resizableWidthsRef
     } = useResizable();
     const {
@@ -155,7 +156,8 @@ export default defineComponent({
     } = useScroll(props, {
       bodyWidthRef,
       mainTableInstRef,
-      mergedCurrentPageRef
+      mergedCurrentPageRef,
+      getResizableWidth
     });
     onMounted(() => {
       var _a, _b;
@@ -163,7 +165,7 @@ export default defineComponent({
       if (!key) return;
       const stored = 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) {
@@ -205,7 +207,7 @@ export default defineComponent({
       var _a, _b;
       if (!(state === null || state === void 0 ? void 0 : state.key)) return;
       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,
@@ -228,6 +230,124 @@ export default defineComponent({
       }
       return props.tableLayout;
     });
+    const resizableColumnPresentRef = computed(() => {
+      return dataRelatedColsRef.value.some(column => isColumnResizable(column));
+    });
+    const resizableEnabledRef = computed(() => {
+      return resizableColumnPresentRef.value;
+    });
+    const fixedResizableModeRef = computed(() => {
+      return mergedTableLayoutRef.value === 'fixed' && resizableEnabledRef.value;
+    });
+    const visibleLeafColumnsSignalRef = computed(() => deriveVisibleLeafColumnWidthItems(dataRelatedColsRef.value));
+    const visibleLeafKeySignatureRef = computed(() => {
+      return visibleLeafColumnsSignalRef.value.map(column => String(column.key)).join('|');
+    });
+    const visibleLeafDescriptorSignatureRef = computed(() => {
+      return deriveColumnWidthSignature(visibleLeafColumnsSignalRef.value);
+    });
+    const resizableColumnsSignalRef = computed(() => deriveResizableColumnWidthItems(dataRelatedColsRef.value));
+    const resizableColumnsSignatureRef = computed(() => {
+      return deriveColumnWidthSignature(resizableColumnsSignalRef.value);
+    });
+    const modeSignalRef = computed(() => {
+      return fixedResizableModeRef.value ? 'fixed' : 'non-fixed';
+    });
+    const containerWidthSignalRef = computed(() => {
+      const bodyWidth = bodyWidthRef.value;
+      const scrollXWidth = parseLengthToNumber(props.scrollX);
+      return bodyWidth !== null && bodyWidth > 0 ? bodyWidth : scrollXWidth !== undefined && scrollXWidth > 0 ? scrollXWidth : undefined;
+    });
+    const widthConstraintSignalRef = 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: sanitizeColumnWidthMap(resizableColumns, {
+          systemMinWidth,
+          systemMaxWidth,
+          source: currentWidths
+        })
+      };
+    }
+    function buildFixedModeWidthMap(visibleLeafColumns, currentWidths) {
+      const {
+        systemMinWidth,
+        systemMaxWidth
+      } = widthConstraintSignalRef.value;
+      const preferredWidths = sanitizeColumnWidthMap(visibleLeafColumns, {
+        systemMinWidth,
+        systemMaxWidth,
+        source: currentWidths
+      });
+      const containerWidth = containerWidthSignalRef.value;
+      if (containerWidth === undefined) {
+        return preferredWidths;
+      }
+      return 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 && 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() {
+      watch(() => [visibleLeafDescriptorSignatureRef.value, visibleLeafKeySignatureRef.value, resizableColumnsSignatureRef.value, resizableColumnPresentRef.value], () => {
+        reconcileResizableWidths('topology/capability');
+      }, {
+        immediate: true
+      });
+      watch(modeSignalRef, () => {
+        reconcileResizableWidths('mode');
+      });
+      watch(() => [containerWidthSignalRef.value, widthConstraintSignalRef.value.systemMinWidth, widthConstraintSignalRef.value.systemMaxWidth], () => {
+        reconcileResizableWidths('environment');
+      });
+      watch(() => resizableWidthsRef.value, () => {
+        reconcileResizableWidths('width-state');
+      }, {
+        deep: true
+      });
+    }
+    registerResizableWidthReconcileWatches();
     const calculateTotalRowValue = (pageData, config) => {
       const {
         type,
@@ -438,6 +558,7 @@ export default defineComponent({
       }),
       onLoadRef: toRef(props, 'onLoad'),
       mergedTableLayoutRef,
+      resizableEnabledRef,
       maxHeightRef: toRef(props, 'maxHeight'),
       minHeightRef: toRef(props, 'minHeight'),
       flexHeightRef: toRef(props, 'flexHeight'),

package/es/data-table/src/HeaderButton/FilterMenu.mjs

@@ -4,7 +4,7 @@ import { UButton } from "../../../button/index.mjs";
 import { UCheckbox, UCheckboxGroup } from "../../../checkbox/index.mjs";
 import { URadio, URadioGroup } from "../../../radio/index.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
-import { shouldUseArrayInSingleMode } from "../utils.mjs";
+import { shouldUseArrayInSingleMode } from "../utils/index.mjs";
 export default defineComponent({
   name: 'DataTableFilterMenu',
   props: {

package/es/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/es/data-table/src/TableParts/Body.mjs

@@ -6,7 +6,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { pxfy, repeat } from 'seemly';
+import { depx, pxfy, repeat } from 'seemly';
 import { useMemo } from 'vooks';
 import { computed, defineComponent, Fragment, h, inject, onUnmounted, ref, watchEffect } from 'vue';
 import { VirtualList, VResizeObserver } from 'vueuc';
@@ -17,7 +17,7 @@ import { c } from "../../../_utils/cssr/index.mjs";
 import { configProviderInjectionKey } from "../../../config-provider/src/context.mjs";
 import { UEmpty } from "../../../empty/index.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
-import { createRowClassName, getColKey, isColumnSorting } from "../utils.mjs";
+import { createRowClassName, getColKey, isColumnSorting } from "../utils/index.mjs";
 import RenderSafeCheckbox from "./BodyCheckbox.mjs";
 import RenderSafeRadio from "./BodyRadio.mjs";
 import BodySkeleton from "./BodySkeleton.mjs";
@@ -71,6 +71,7 @@ const VirtualListItemWrapper = defineComponent({
       type: Array,
       required: true
     },
+    tableWidth: String,
     onMouseenter: Function,
     onMouseleave: Function
   },
@@ -79,12 +80,14 @@ const VirtualListItemWrapper = defineComponent({
       clsPrefix,
       id,
       cols,
+      tableWidth,
       onMouseenter,
       onMouseleave
     } = this;
     return h("table", {
       style: {
-        tableLayout: 'fixed'
+        tableLayout: 'fixed',
+        width: tableWidth
       },
       class: `${clsPrefix}-data-table-table`,
       onMouseenter: onMouseenter,
@@ -134,6 +137,7 @@ export default defineComponent({
       virtualScrollRef,
       componentId,
       mergedTableLayoutRef,
+      resizableEnabledRef,
       childTriggerColIndexRef,
       indentRef,
       rowPropsRef,
@@ -174,6 +178,19 @@ export default defineComponent({
     const mergedExpandedRowKeySetRef = computed(() => {
       return new Set(mergedExpandedRowKeysRef.value);
     });
+    const fixedResizableModeRef = computed(() => {
+      return mergedTableLayoutRef.value === 'fixed' && resizableEnabledRef.value;
+    });
+    const fixedResizableTableWidthRef = computed(() => {
+      if (!fixedResizableModeRef.value) return;
+      let total = 0;
+      for (const column of colsRef.value) {
+        const width = 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;
@@ -427,6 +444,8 @@ export default defineComponent({
       mergedSortState: mergedSortStateRef,
       virtualScroll: virtualScrollRef,
       mergedTableLayout: mergedTableLayoutRef,
+      fixedResizableMode: fixedResizableModeRef,
+      fixedResizableTableWidth: fixedResizableTableWidthRef,
       childTriggerColIndex: childTriggerColIndexRef,
       indent: indentRef,
       rowProps: rowPropsRef,
@@ -459,21 +478,23 @@ export default defineComponent({
       virtualScroll,
       maxHeight,
       mergedTableLayout,
+      fixedResizableMode,
+      fixedResizableTableWidth,
       flexHeight,
       loadingKeySet,
       onResize,
       setHeaderScrollLeft,
       emptyPropsRef
     } = this;
-    const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
+    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: formatLength(scrollX) || '100%'
+      minWidth: fixedResizableTableWidth || formatLength(scrollX) || '100%'
     };
     if (scrollX) contentStyle.width = '100%';
     const tableNode = h(UScrollbar, Object.assign({}, this.scrollbarProps, {
@@ -767,6 +788,7 @@ export default defineComponent({
             class: `${mergedClsPrefix}-data-table-table`,
             onMouseleave: handleMouseleaveTable,
             style: {
+              width: fixedResizableTableWidth,
               tableLayout: this.mergedTableLayout
             }
           }, h("colgroup", null, cols.map(col => h("col", {
@@ -786,6 +808,7 @@ export default defineComponent({
               class: `${mergedClsPrefix}-data-table-table`,
               onMouseleave: handleMouseleaveTable,
               style: {
+                width: fixedResizableTableWidth,
                 tableLayout: this.mergedTableLayout
               }
             }, h("colgroup", null, cols.map(col => h("col", {
@@ -804,6 +827,7 @@ export default defineComponent({
               clsPrefix: mergedClsPrefix,
               id: componentId,
               cols,
+              tableWidth: fixedResizableTableWidth,
               onMouseleave: handleMouseleaveTable
             },
             showScrollbar: false,