@uzum-tech/ui 1.13.1 → 1.14.0

package/es/_mixins/use-css-vars-class.js

@@ -5,10 +5,11 @@ import { configProviderInjectionKey } from '../config-provider/src/context';
 import { throwError } from '../_utils';
 import { c } from '../_utils/cssr';
 export function useThemeClass(componentName, hashRef, cssVarsRef, props) {
-    var _a;
     if (!cssVarsRef)
         throwError('useThemeClass', 'cssVarsRef is not passed');
-    const mergedThemeHashRef = (_a = inject(configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
+    const UConfigProvider = inject(configProviderInjectionKey, null);
+    const mergedThemeHashRef = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeHashRef;
+    const styleMountTarget = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget;
     const themeClassRef = ref('');
     const ssrAdapter = useSsrAdapter();
     let renderCallback;
@@ -37,7 +38,8 @@ export function useThemeClass(componentName, hashRef, cssVarsRef, props) {
             }
             c(`.${finalThemeHash}`, style).mount({
                 id: finalThemeHash,
-                ssr: ssrAdapter
+                ssr: ssrAdapter,
+                parent: styleMountTarget
             });
             renderCallback = undefined;
         };

package/es/_mixins/use-rtl.js

@@ -1,6 +1,7 @@
-import { onBeforeMount, watchEffect, computed } from 'vue';
+import { onBeforeMount, watchEffect, computed, inject } from 'vue';
 import { exists } from 'css-render';
 import { useSsrAdapter } from '@css-render/vue3-ssr';
+import { configProviderInjectionKey } from '../config-provider/src/context';
 import { cssrAnchorMetaName } from './common';
 export function useRtl(mountId, rtlStateRef, clsPrefixRef) {
     if (!rtlStateRef)
@@ -17,6 +18,7 @@ export function useRtl(mountId, rtlStateRef, clsPrefixRef) {
         }
         return componentRtlState;
     });
+    const UConfigProvider = inject(configProviderInjectionKey, null);
     const mountStyle = () => {
         watchEffect(() => {
             const { value: clsPrefix } = clsPrefixRef;
@@ -36,7 +38,8 @@ export function useRtl(mountId, rtlStateRef, clsPrefixRef) {
                 props: {
                     bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                 },
-                ssr: ssrAdapter
+                ssr: ssrAdapter,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
         });
     };

package/es/_mixins/use-style.js

@@ -21,14 +21,16 @@ export default function useStyle(mountId, style, clsPrefixRef) {
             props: {
                 bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
             },
-            ssr: ssrAdapter
+            ssr: ssrAdapter,
+            parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
         });
         if (!(UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.preflightStyleDisabled)) {
             globalStyle.mount({
                 id: 'u-global',
                 head: true,
                 anchorMetaName: cssrAnchorMetaName,
-                ssr: ssrAdapter
+                ssr: ssrAdapter,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
         }
     };

package/es/_mixins/use-theme.js

@@ -21,14 +21,16 @@ function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef)
                     bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                 },
                 anchorMetaName: cssrAnchorMetaName,
-                ssr: ssrAdapter
+                ssr: ssrAdapter,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
             if (!(UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.preflightStyleDisabled)) {
                 globalStyle.mount({
                     id: 'u-global',
                     head: true,
                     anchorMetaName: cssrAnchorMetaName,
-                    ssr: ssrAdapter
+                    ssr: ssrAdapter,
+                    parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
                 });
             }
         };

package/es/config-provider/src/ConfigProvider.d.ts

@@ -36,6 +36,7 @@ export declare const configProviderProps: {
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
@@ -79,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
@@ -126,6 +128,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;

package/es/config-provider/src/ConfigProvider.js

@@ -34,6 +34,7 @@ export const configProviderProps = {
         default: 'desktop-first'
     },
     preflightStyleDisabled: Boolean,
+    styleMountTarget: Object,
     inlineThemeDisabled: {
         type: Boolean,
         default: undefined
@@ -243,6 +244,7 @@ export default defineComponent({
         });
         const inlineThemeDisabled = props.inlineThemeDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.inlineThemeDisabled);
         const preflightStyleDisabled = props.preflightStyleDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.preflightStyleDisabled);
+        const styleMountTarget = props.styleMountTarget || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget);
         const mergedThemeHashRef = computed(() => {
             const { value: theme } = mergedThemeRef;
             const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
@@ -304,7 +306,8 @@ export default defineComponent({
             mergedThemeRef,
             mergedThemeOverridesRef,
             inlineThemeDisabled: inlineThemeDisabled || false,
-            preflightStyleDisabled: preflightStyleDisabled || false
+            preflightStyleDisabled: preflightStyleDisabled || false,
+            styleMountTarget
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

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

@@ -457,4 +457,5 @@ export interface ConfigProviderInjection {
     activeBreakpointThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     inlineThemeDisabled: boolean;
     preflightStyleDisabled: boolean;
+    styleMountTarget: ParentNode | undefined;
 }

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

@@ -85,6 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "current";
     };
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: TableBaseColumn) => import("vue").VNodeChild>;
     readonly defaultEmptyValue: import("vue").PropType<string | (() => import("vue").VNodeChild) | undefined>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;
@@ -4498,6 +4499,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "current";
     };
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: TableBaseColumn) => import("vue").VNodeChild>;
     readonly defaultEmptyValue: import("vue").PropType<string | (() => import("vue").VNodeChild) | undefined>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;

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

@@ -1,4 +1,4 @@
-import { h, computed, defineComponent, ref, provide, toRef, Transition, watchEffect } from 'vue';
+import { h, computed, defineComponent, ref, provide, toRef, onMounted, watch, Transition, watchEffect } from 'vue';
 import { createId } from 'seemly';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { UBaseLoading } from '../../_internal';
@@ -13,6 +13,7 @@ import { useResizable } from './use-resizable';
 import { dataTableInjectionKey, dataTableProps } from './interface';
 import { useGroupHeader } from './use-group-header';
 import { useExpand } from './use-expand';
+import { loadTableState, saveTableState, restoreSortStateFromStored } from './use-table-storage';
 import style from './styles/index.cssr';
 export default defineComponent({
     name: 'DataTable',
@@ -53,10 +54,10 @@ export default defineComponent({
         const themeRef = useTheme('DataTable', '-data-table', style, dataTableLight, props, mergedClsPrefixRef);
         const bodyWidthRef = ref(null);
         const mainTableInstRef = ref(null);
-        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth } = useResizable();
+        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth, resizableWidthsRef } = useResizable();
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = useGroupHeader(props, getResizableWidth);
-        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = useTableData(props, { dataRelatedColsRef });
-        const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = useCheck(props, {
+        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdatePageSize, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, restoreSortState, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = useTableData(props, { dataRelatedColsRef });
+        const { doCheckAll, doUncheckAll, doCheck, doUncheck, doUpdateCheckedRowKeys, mergedCheckedRowKeysRef, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = useCheck(props, {
             selectionColumnRef,
             treeMateRef,
             paginatedDataRef
@@ -67,6 +68,72 @@ export default defineComponent({
             mainTableInstRef,
             mergedCurrentPageRef
         });
+        onMounted(() => {
+            var _a, _b;
+            const key = props.localStorageKey;
+            if (!key)
+                return;
+            const stored = loadTableState(key);
+            if (!stored)
+                return;
+            if (stored.columnWidths && Object.keys(stored.columnWidths).length > 0) {
+                resizableWidthsRef.value = Object.assign(Object.assign({}, resizableWidthsRef.value), stored.columnWidths);
+            }
+            if (props.pagination && stored.page != null) {
+                doUpdatePage(stored.page);
+            }
+            if (props.pagination && stored.pageSize != null) {
+                doUpdatePageSize(stored.pageSize);
+            }
+            if (stored.filters) {
+                filter(stored.filters);
+            }
+            const sortToRestore = restoreSortStateFromStored(stored.sortState, dataRelatedColsRef.value);
+            if (sortToRestore === null || sortToRestore === void 0 ? void 0 : sortToRestore.length) {
+                restoreSortState(sortToRestore);
+            }
+            if ((_a = stored.checkedRowKeys) === null || _a === void 0 ? void 0 : _a.length) {
+                doUpdateCheckedRowKeys(stored.checkedRowKeys, undefined, 'check');
+            }
+            if ((_b = stored.expandedRowKeys) === null || _b === void 0 ? void 0 : _b.length) {
+                doUpdateExpandedRowKeys(stored.expandedRowKeys);
+            }
+        });
+        watch(() => {
+            var _a, _b;
+            return props.localStorageKey
+                ? {
+                    key: props.localStorageKey,
+                    columnWidths: resizableWidthsRef.value,
+                    page: (_a = mergedPaginationRef.value) === null || _a === void 0 ? void 0 : _a.page,
+                    pageSize: (_b = mergedPaginationRef.value) === null || _b === void 0 ? void 0 : _b.pageSize,
+                    filters: mergedFilterStateRef.value,
+                    sortState: mergedSortStateRef.value.map((s) => ({
+                        columnKey: s.columnKey,
+                        order: s.order
+                    })),
+                    checkedRowKeys: mergedCheckedRowKeysRef.value,
+                    expandedRowKeys: mergedExpandedRowKeysRef.value
+                }
+                : null;
+        }, (state) => {
+            var _a, _b;
+            if (!(state === null || state === void 0 ? void 0 : state.key))
+                return;
+            saveTableState(state.key, {
+                columnWidths: state.columnWidths,
+                page: state.page,
+                pageSize: state.pageSize,
+                filters: state.filters,
+                sortState: state.sortState.length ? state.sortState : undefined,
+                checkedRowKeys: ((_a = state.checkedRowKeys) === null || _a === void 0 ? void 0 : _a.length)
+                    ? state.checkedRowKeys
+                    : undefined,
+                expandedRowKeys: ((_b = state.expandedRowKeys) === null || _b === void 0 ? void 0 : _b.length)
+                    ? state.expandedRowKeys
+                    : undefined
+            });
+        }, { deep: true });
         const { localeRef } = useLocale('DataTable');
         const mergedTableLayoutRef = computed(() => {
             // Layout

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

@@ -15,6 +15,7 @@ import { pxfy, repeat } from 'seemly';
 import { VirtualList, VResizeObserver } from 'vueuc';
 import { useMemo } from 'vooks';
 import { cssrAnchorMetaName } from '../../../_mixins/common';
+import { configProviderInjectionKey } from '../../../config-provider/src/context';
 import { c } from '../../../_utils/cssr';
 import { UScrollbar } from '../../../_internal';
 import { formatLength, resolveSlot, warn } from '../../../_utils';
@@ -97,6 +98,7 @@ export default defineComponent({
         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
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
+        const UConfigProvider = inject(configProviderInjectionKey, null);
         const scrollbarInstRef = ref(null);
         const virtualListRef = ref(null);
         const emptyElRef = ref(null);
@@ -291,13 +293,15 @@ export default defineComponent({
                 id: `u-${componentId}`,
                 force: true,
                 props: cProps,
-                anchorMetaName: cssrAnchorMetaName
+                anchorMetaName: cssrAnchorMetaName,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
             fixedStyleMounted = true;
         });
         onUnmounted(() => {
             style.unmount({
-                id: `u-${componentId}`
+                id: `u-${componentId}`,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
         });
         return Object.assign({ bodyWidth: bodyWidthRef, summaryPlacement: summaryPlacementRef, dataTableSlots,

package/es/data-table/src/TableParts/Header.js

@@ -6,7 +6,7 @@ import { UEllipsis } from '../../../ellipsis';
 import SortButton from '../HeaderButton/SortButton';
 import FilterButton from '../HeaderButton/FilterButton';
 import ResizeButton from '../HeaderButton/ResizeButton';
-import { isColumnSortable, isColumnFilterable, createNextSorter, getColKey, isColumnSorting, isColumnResizable, clampValueFollowCSSRules } from '../utils';
+import { isColumnSortable, isColumnFilterable, createNextSorter, getColKey, getNumberColWidth, isColumnSorting, isColumnResizable, clampValueFollowCSSRules } from '../utils';
 import { dataTableInjectionKey } from '../interface';
 import SelectionMenu from './SelectionMenu';
 function renderTitle(column) {
@@ -23,7 +23,7 @@ export default defineComponent({
         }
     },
     setup() {
-        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, mergedTableLayoutRef, headerCheckboxDisabledRef, sizeRef, onUnstableColumnResize, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
+        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, mergedTableLayoutRef, headerCheckboxDisabledRef, sizeRef, onUnstableColumnResize, getResizableWidth, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const cellElsRef = ref({});
@@ -51,13 +51,25 @@ export default defineComponent({
             deriveNextSorter(nextSorter);
         }
         const resizeStartWidthMap = new Map();
+        function getColumnStartWidth(column) {
+            const actual = getCellActualWidth(column.key);
+            if (actual !== undefined && actual > 0)
+                return actual;
+            const resized = getResizableWidth(column.key);
+            if (resized !== undefined && resized > 0)
+                return resized;
+            return getNumberColWidth(column);
+        }
         function handleColumnResizeStart(column) {
-            resizeStartWidthMap.set(column.key, getCellActualWidth(column.key));
+            resizeStartWidthMap.set(column.key, getColumnStartWidth(column));
         }
         function handleColumnResize(column, displacementX) {
-            const startWidth = resizeStartWidthMap.get(column.key);
+            let startWidth = resizeStartWidthMap.get(column.key);
             if (startWidth === undefined) {
-                return;
+                startWidth = getColumnStartWidth(column);
+                if (startWidth === undefined)
+                    return;
+                resizeStartWidthMap.set(column.key, startWidth);
             }
             const widthAfterResize = startWidth + displacementX;
             const limitWidth = clampValueFollowCSSRules(widthAfterResize, column.minWidth, column.maxWidth);

package/es/data-table/src/interface.d.ts

@@ -96,6 +96,7 @@ export declare const dataTableProps: {
         readonly default: "current";
     };
     readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly defaultEmptyValue: PropType<string | (() => VNodeChild) | undefined>;
     readonly renderExpandIcon: PropType<RenderExpandIcon>;
@@ -3185,6 +3186,18 @@ export interface MainTableInjection {
     leftActiveFixedColKey: ColumnKey | null;
     rightActiveFixedColKey: ColumnKey | null;
 }
+export interface DataTableStorageState {
+    columnWidths?: Record<string, number>;
+    page?: number;
+    pageSize?: number;
+    filters?: FilterState;
+    sortState?: Array<{
+        columnKey: ColumnKey;
+        order: SortState['order'];
+    }>;
+    checkedRowKeys?: RowKey[];
+    expandedRowKeys?: RowKey[];
+}
 export type RenderFilter = (props: {
     active: boolean;
     show: boolean;

package/es/data-table/src/interface.js

@@ -50,7 +50,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, defaultEmptyValue: [String, Function], renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, localStorageKey: String, renderCell: Function, defaultEmptyValue: [String, Function], renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 export const dataTableInjectionKey = createInjectionKey('u-data-table');

package/es/data-table/src/use-resizable.d.ts

@@ -3,4 +3,5 @@ export declare function useResizable(): {
     getResizableWidth: (key: ColumnKey) => number | undefined;
     doUpdateResizableWidth: (column: TableColumn, width: number) => void;
     clearResizableWidth: () => void;
+    resizableWidthsRef: import("vue").Ref<Record<ColumnKey, number>>;
 };

package/es/data-table/src/use-resizable.js

@@ -17,6 +17,7 @@ export function useResizable() {
     return {
         getResizableWidth,
         doUpdateResizableWidth,
-        clearResizableWidth
+        clearResizableWidth,
+        resizableWidthsRef
     };
 }

package/es/data-table/src/use-sorter.d.ts

@@ -16,4 +16,5 @@ export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsR
         };
     }[]>;
     deriveNextSorter: (sortState: SortState | null) => void;
+    doUpdateSorter: (sortState: SortState | SortState[] | null) => void;
 };

package/es/data-table/src/use-sorter.js

@@ -186,6 +186,7 @@ export function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         sort,
         sortedDataRef,
         mergedSortStateRef,
-        deriveNextSorter
+        deriveNextSorter,
+        doUpdateSorter
     };
 }

package/es/data-table/src/use-table-data.d.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue';
 import type { PaginationProps } from '../../pagination/src/Pagination';
-import type { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey, DataTableSetupProps } from './interface';
+import type { ColumnKey, FilterState, SortState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey, DataTableSetupProps } from './interface';
 export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
 }): {
@@ -22,10 +22,11 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
     selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
     childTriggerColIndexRef: ComputedRef<number>;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;
-    deriveNextSorter: (sortState: import("./interface").SortState | null) => void;
+    deriveNextSorter: (sortState: SortState | null) => void;
     doUpdatePageSize: (pageSize: number) => void;
     doUpdatePage: (page: number) => void;
     onUnstableColumnResize: (resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void;
+    restoreSortState: (sortState: SortState | SortState[] | null) => void;
     filter: (filters: FilterState | null) => void;
     filters: (filters: FilterState | null) => void;
     clearFilter: () => void;

package/es/data-table/src/use-table-data.js

@@ -128,7 +128,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
             })
             : [];
     });
-    const { sortedDataRef, deriveNextSorter, mergedSortStateRef, sort, clearSorter } = useSorter(props, {
+    const { sortedDataRef, deriveNextSorter, mergedSortStateRef, sort, clearSorter, doUpdateSorter } = useSorter(props, {
         dataRelatedColsRef,
         filteredDataRef
     });
@@ -299,6 +299,9 @@ export function useTableData(props, { dataRelatedColsRef }) {
             warn('data-table', '`filters` is not an object');
         }
     }
+    function restoreSortState(sortState) {
+        doUpdateSorter(sortState);
+    }
     return {
         treeMateRef,
         mergedCurrentPageRef: boundedMergedCurrentPageRef,
@@ -315,6 +318,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
         doUpdatePageSize,
         doUpdatePage,
         onUnstableColumnResize,
+        restoreSortState,
         // exported methods
         filter,
         filters,

package/es/data-table/src/use-table-storage.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableStorageState, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+export declare function loadTableState(localStorageKey: string): DataTableStorageState | null;
+export declare function saveTableState(localStorageKey: string, state: DataTableStorageState): void;
+export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>): SortState[] | null;

package/es/data-table/src/use-table-storage.js

@@ -0,0 +1,43 @@
+const STORAGE_KEY_PREFIX = 'u-data-table:';
+function getStorageKey(key) {
+    return `${STORAGE_KEY_PREFIX}${key}`;
+}
+export function loadTableState(localStorageKey) {
+    try {
+        const raw = localStorage.getItem(getStorageKey(localStorageKey));
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+export function saveTableState(localStorageKey, state) {
+    try {
+        localStorage.setItem(getStorageKey(localStorageKey), JSON.stringify(state));
+    }
+    catch (_a) {
+        console.warn(`Could not set localStorage value for ${localStorageKey}`);
+    }
+}
+export function restoreSortStateFromStored(stored, dataRelatedCols) {
+    if (!(stored === null || stored === void 0 ? void 0 : stored.length))
+        return null;
+    const result = [];
+    for (const item of stored) {
+        const column = dataRelatedCols.find((col) => col.type !== 'selection' &&
+            col.type !== 'expand' &&
+            'key' in col &&
+            col.key === item.columnKey &&
+            col.sorter !== undefined);
+        if (column === null || column === void 0 ? void 0 : column.sorter) {
+            result.push({
+                columnKey: item.columnKey,
+                order: item.order,
+                sorter: column.sorter
+            });
+        }
+    }
+    return result.length ? result : null;
+}

package/es/data-table/src/utils.js

@@ -79,15 +79,49 @@ export function clampValueFollowCSSRules(value, min, max) {
     return value;
 }
 export function createCustomWidthStyle(column, resizedWidth) {
+    var _a;
     if (resizedWidth !== undefined) {
+        const numWidth = depx(resizedWidth);
+        const minMaxColumn = column && 'minWidth' in column && 'maxWidth' in column
+            ? column
+            : null;
+        const clampedNum = minMaxColumn
+            ? clampValueFollowCSSRules(numWidth, minMaxColumn.minWidth, minMaxColumn.maxWidth)
+            : numWidth;
+        const clamped = formatLength(clampedNum);
         return {
-            width: resizedWidth,
-            minWidth: resizedWidth,
-            maxWidth: resizedWidth
+            width: clamped,
+            minWidth: clamped,
+            maxWidth: clamped
         };
     }
-    const width = getStringColWidth(column);
-    const { minWidth, maxWidth } = column;
+    const explicitNum = (_a = getNumberColWidth(column)) !== null && _a !== void 0 ? _a : undefined;
+    const minWidth = column && 'minWidth' in column
+        ? column.minWidth
+        : undefined;
+    const maxWidth = column && 'maxWidth' in column
+        ? column.maxWidth
+        : undefined;
+    let widthNum = explicitNum;
+    if (widthNum === undefined &&
+        (minWidth !== undefined || maxWidth !== undefined)) {
+        widthNum = clampValueFollowCSSRules(maxWidth !== undefined
+            ? typeof maxWidth === 'number'
+                ? maxWidth
+                : parseFloat(maxWidth)
+            : minWidth !== undefined
+                ? typeof minWidth === 'number'
+                    ? minWidth
+                    : parseFloat(minWidth)
+                : 0, minWidth, maxWidth);
+    }
+    else if (widthNum !== undefined &&
+        (minWidth !== undefined || maxWidth !== undefined)) {
+        widthNum = clampValueFollowCSSRules(widthNum, minWidth, maxWidth);
+    }
+    const width = widthNum !== undefined
+        ? formatLength(widthNum)
+        : getStringColWidth(column);
     return {
         width,
         minWidth: formatLength(minWidth) || width,

package/es/icon-bar/index.d.ts

@@ -1,4 +1,4 @@
-export { default as UIconBar, iconBarProps } from './src/IconBar';
-export type { IconBarProps } from './src/IconBar';
-export { default as UIconBarItem, iconBarItemProps } from './src/IconBarItem';
-export type { IconBarItemProps } from './src/IconBarItem';
+export { default as UIconBar } from './src/IconBar';
+export { default as UIconBarItem } from './src/IconBarItem';
+export { iconBarProps, iconBarItemProps } from './src/interface';
+export type { IconBarProps, IconBarItemProps } from './src/interface';

package/es/icon-bar/index.js

@@ -1,2 +1,3 @@
-export { default as UIconBar, iconBarProps } from './src/IconBar';
-export { default as UIconBarItem, iconBarItemProps } from './src/IconBarItem';
+export { default as UIconBar } from './src/IconBar';
+export { default as UIconBarItem } from './src/IconBarItem';
+export { iconBarProps, iconBarItemProps } from './src/interface';