@uzum-tech/ui 1.13.2 → 1.14.1

package/es/data-table/src/HeaderButton/FilterButton.d.ts

@@ -702,6 +702,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1211,6 +1218,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

package/es/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -727,6 +727,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1236,6 +1243,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

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

@@ -728,6 +728,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1237,6 +1244,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

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.d.ts

@@ -715,6 +715,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1224,6 +1231,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

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>;
@@ -812,6 +813,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -1760,6 +1768,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -2708,6 +2723,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -3185,6 +3207,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/data-table/styles/light.d.ts

@@ -749,6 +749,13 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
             borderFocus: string;
             boxShadowFocus: string;
             loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
             loadingColorWarning: string;
             borderWarning: string;
             borderHoverWarning: string;