@uzum-tech/ui 1.13.2 → 1.14.0

package/lib/_mixins/use-rtl.js

@@ -4,6 +4,7 @@ exports.useRtl = useRtl;
 const vue_1 = require("vue");
 const css_render_1 = require("css-render");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const context_1 = require("../config-provider/src/context");
 const common_1 = require("./common");
 function useRtl(mountId, rtlStateRef, clsPrefixRef) {
     if (!rtlStateRef)
@@ -20,6 +21,7 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
         }
         return componentRtlState;
     });
+    const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     const mountStyle = () => {
         (0, vue_1.watchEffect)(() => {
             const { value: clsPrefix } = clsPrefixRef;
@@ -39,7 +41,8 @@ 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/lib/_mixins/use-style.js

@@ -27,14 +27,16 @@ 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)) {
             index_cssr_1.default.mount({
                 id: 'u-global',
                 head: true,
                 anchorMetaName: common_1.cssrAnchorMetaName,
-                ssr: ssrAdapter
+                ssr: ssrAdapter,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
         }
     };

package/lib/_mixins/use-theme.js

@@ -27,14 +27,16 @@ function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef)
                     bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                 },
                 anchorMetaName: common_1.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)) {
                 index_cssr_1.default.mount({
                     id: 'u-global',
                     head: true,
                     anchorMetaName: common_1.cssrAnchorMetaName,
-                    ssr: ssrAdapter
+                    ssr: ssrAdapter,
+                    parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
                 });
             }
         };

package/lib/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/lib/config-provider/src/ConfigProvider.js

@@ -37,6 +37,7 @@ exports.configProviderProps = {
         default: 'desktop-first'
     },
     preflightStyleDisabled: Boolean,
+    styleMountTarget: Object,
     inlineThemeDisabled: {
         type: Boolean,
         default: undefined
@@ -246,6 +247,7 @@ exports.default = (0, vue_1.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 = (0, vue_1.computed)(() => {
             const { value: theme } = mergedThemeRef;
             const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
@@ -307,7 +309,8 @@ exports.default = (0, vue_1.defineComponent)({
             mergedThemeRef,
             mergedThemeOverridesRef,
             inlineThemeDisabled: inlineThemeDisabled || false,
-            preflightStyleDisabled: preflightStyleDisabled || false
+            preflightStyleDisabled: preflightStyleDisabled || false,
+            styleMountTarget
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/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/lib/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/lib/data-table/src/DataTable.js

@@ -18,6 +18,7 @@ const use_resizable_1 = require("./use-resizable");
 const interface_1 = require("./interface");
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
+const use_table_storage_1 = require("./use-table-storage");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
@@ -58,10 +59,10 @@ 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 } = (0, use_resizable_1.useResizable)();
+        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth, 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, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
-        const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.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 } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
+        const { doCheckAll, doUncheckAll, doCheck, doUncheck, doUpdateCheckedRowKeys, mergedCheckedRowKeysRef, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
             selectionColumnRef,
             treeMateRef,
             paginatedDataRef
@@ -72,6 +73,72 @@ exports.default = (0, vue_1.defineComponent)({
             mainTableInstRef,
             mergedCurrentPageRef
         });
+        (0, vue_1.onMounted)(() => {
+            var _a, _b;
+            const key = props.localStorageKey;
+            if (!key)
+                return;
+            const stored = (0, use_table_storage_1.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 = (0, use_table_storage_1.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);
+            }
+        });
+        (0, vue_1.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;
+            (0, use_table_storage_1.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 } = (0, _mixins_1.useLocale)('DataTable');
         const mergedTableLayoutRef = (0, vue_1.computed)(() => {
             // Layout

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

@@ -20,6 +20,7 @@ const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
 const common_1 = require("../../../_mixins/common");
+const context_1 = require("../../../config-provider/src/context");
 const cssr_1 = require("../../../_utils/cssr");
 const _internal_1 = require("../../../_internal");
 const _utils_1 = require("../../../_utils");
@@ -102,6 +103,7 @@ exports.default = (0, vue_1.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
          } = (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);
         const emptyElRef = (0, vue_1.ref)(null);
@@ -296,13 +298,15 @@ exports.default = (0, vue_1.defineComponent)({
                 id: `u-${componentId}`,
                 force: true,
                 props: cProps,
-                anchorMetaName: common_1.cssrAnchorMetaName
+                anchorMetaName: common_1.cssrAnchorMetaName,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
             fixedStyleMounted = true;
         });
         (0, vue_1.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/lib/data-table/src/TableParts/Header.js

@@ -28,7 +28,7 @@ exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const cellElsRef = (0, vue_1.ref)({});
@@ -56,13 +56,25 @@ exports.default = (0, vue_1.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 (0, utils_1.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 = (0, utils_1.clampValueFollowCSSRules)(widthAfterResize, column.minWidth, column.maxWidth);

package/lib/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/lib/data-table/src/interface.js

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, 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] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('u-data-table');

package/lib/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/lib/data-table/src/use-resizable.js

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

package/lib/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/lib/data-table/src/use-sorter.js

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

package/lib/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/lib/data-table/src/use-table-data.js

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

package/lib/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/lib/data-table/src/use-table-storage.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTableState = loadTableState;
+exports.saveTableState = saveTableState;
+exports.restoreSortStateFromStored = restoreSortStateFromStored;
+const STORAGE_KEY_PREFIX = 'u-data-table:';
+function getStorageKey(key) {
+    return `${STORAGE_KEY_PREFIX}${key}`;
+}
+function loadTableState(localStorageKey) {
+    try {
+        const raw = localStorage.getItem(getStorageKey(localStorageKey));
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function saveTableState(localStorageKey, state) {
+    try {
+        localStorage.setItem(getStorageKey(localStorageKey), JSON.stringify(state));
+    }
+    catch (_a) {
+        console.warn(`Could not set localStorage value for ${localStorageKey}`);
+    }
+}
+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/lib/data-table/src/utils.js

@@ -96,15 +96,49 @@ function clampValueFollowCSSRules(value, min, max) {
     return value;
 }
 function createCustomWidthStyle(column, resizedWidth) {
+    var _a;
     if (resizedWidth !== undefined) {
+        const numWidth = (0, seemly_1.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 = (0, _utils_1.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
+        ? (0, _utils_1.formatLength)(widthNum)
+        : getStringColWidth(column);
     return {
         width,
         minWidth: (0, _utils_1.formatLength)(minWidth) || width,

package/lib/locales/date/enUS.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const en_US_1 = __importDefault(require("date-fns/locale/en-US")); //
+const index_js_1 = __importDefault(require("date-fns/locale/en-US/index.js"));
 const dateEnUs = {
     name: 'en-US',
-    locale: en_US_1.default
+    locale: index_js_1.default
 };
 exports.default = dateEnUs;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.13.2";
+declare const _default: "1.14.0";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.13.2';
+exports.default = '1.14.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -3725,6 +3725,11 @@
                 "since": "2.29.0"
               }
             },
+            {
+              "name": "style-mount-target",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
+              "type": "object"
+            },
             {
               "name": "inline-theme-disabled",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
@@ -4229,6 +4234,11 @@
               "description": "See [Scrollbar props](scrollbar#Scrollbar-Props)",
               "default": "undefined"
             },
+            {
+              "name": "local-storage-key",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/data-table",
+              "type": "string"
+            },
             {
               "name": "render-cell",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/data-table",
@@ -4272,6 +4282,13 @@
               "type": "Partial<EmptyProps>",
               "description": "Props passed to the Empty component when data is empty.",
               "default": "undefined"
+            },
+            {
+              "name": "localStorage-key",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/data-table",
+              "type": "string",
+              "description": "Key for localStorage to persist table state (column widths, page, pageSize, filters, sort, checkedRowKeys, expandedRowKeys). When set, state is restored on mount and saved on change.",
+              "default": "undefined"
             }
           ],
           "js": {