@uzum-tech/ui 1.13.2 → 1.14.1

package/es/chat/src/ChatParts/MainArea.js

@@ -181,61 +181,54 @@ export default defineComponent({
             return value != null ? String(value) : '';
         };
         const renderHeader = () => {
+            const chat = selectedChatRef.value;
+            const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
+            const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
-                h(UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-                    default: () => {
-                        const chat = selectedChatRef.value;
-                        const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
-                        const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
-                        return (h(Fragment, null,
-                            h(UFlex, { vertical: true, size: [0, 0], justify: 'flex-start"' },
-                                h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                                    default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                                }),
-                                isTyping.value && (h(UText, { class: [
-                                        `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
-                                        'typing'
-                                    ], variant: "body-m-medium" }, {
-                                    default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
-                                }))),
-                            h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
-                                default: () => resolveSlot(slots.headerActions, () => {
-                                    const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
-                                    const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
-                                    const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
-                                    const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
-                                    const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
-                                    const buttons = [];
-                                    buttons.push(h(UTooltip, null, {
-                                        trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                .Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
-                                            default: () => (h(UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers
-                                                    .HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .HeaderShareIcon }), {
-                                                default: () => (h(ArrowHookUpRight, null))
-                                            }))
-                                        })),
-                                        default: () => shareButtonTooltipRef.value
-                                    }));
-                                    buttons.push(h(UTooltip, null, {
-                                        trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                .Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
-                                            default: () => (h(UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers
-                                                    .HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .HeaderProfileIcon }), {
-                                                default: () => h(PersonNote, null)
-                                            }))
-                                        })),
-                                        default: () => profileButtonTooltipRef.value
-                                    }));
-                                    buttons.push(h(UButton, Object.assign({ type: "primary", size: "large", round: true }, closeButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
-                                        default: () => closeButtonTextRef.value
-                                    }));
-                                    return buttons;
-                                })
-                            })));
-                    }
-                })));
+                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` },
+                    h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap` },
+                        h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                            default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                        }),
+                        isTyping.value && (h(UText, { class: [
+                                `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                'typing'
+                            ], variant: "body-m-medium" }, {
+                            default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                        }))),
+                    h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
+                        default: () => resolveSlot(slots.headerActions, () => {
+                            const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
+                            const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
+                            const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
+                            const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
+                            const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
+                            const buttons = [];
+                            buttons.push(h(UTooltip, null, {
+                                trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                            .HeaderShareIcon }), {
+                                        default: () => h(ArrowHookUpRight, null)
+                                    }))
+                                })),
+                                default: () => shareButtonTooltipRef.value
+                            }));
+                            buttons.push(h(UTooltip, null, {
+                                trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers
+                                            .HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                            .HeaderProfileIcon }), {
+                                        default: () => h(PersonNote, null)
+                                    }))
+                                })),
+                                default: () => profileButtonTooltipRef.value
+                            }));
+                            buttons.push(h(UButton, Object.assign({ type: "primary", size: "large", round: true }, closeButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
+                                default: () => closeButtonTextRef.value
+                            }));
+                            return buttons;
+                        })
+                    }))));
         };
         const renderMessages = () => {
             var _a;

package/es/chat/src/ChatParts/Sidebar.d.ts

@@ -88,6 +88,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/chat/src/styles/index.cssr.js

@@ -134,23 +134,28 @@ export default cB('chat', `
  width: 100%;
  padding: 24px 20px 10px 24px;
  flex-shrink: 0;
+ `), cE('header-inner', `
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: flex-start;
+ gap: 8px;
+ `), cE('header-title-wrap', `
+ min-width: 0;
+ overflow: hidden;
  `), cE('header-title', `
  color: var(--u-header-title-color);
- flex: 1;
- min-width: 0;
+ display: block;
  overflow: hidden;
- text-overflow: ellipsis;
  white-space: nowrap;
- display: block;
- margin-right: 16px;
+ text-overflow: ellipsis;
+ width: 100%;
  `), cE('header-subtitle', `
  display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- minWidth: 0;
- maxWidth: 100%;
+ width: 100%;
  `), cE('header-actions', `
  padding: 4px;
  flex-shrink: 0;

package/es/chat/styles/dark.d.ts

@@ -75,6 +75,13 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         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/chat/styles/light.d.ts

@@ -113,6 +113,13 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         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/color-picker/src/ColorInputUnit.d.ts

@@ -77,6 +77,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/color-picker/src/ColorPicker.d.ts

@@ -107,6 +107,13 @@ export declare const colorPickerProps: {
             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;
@@ -411,6 +418,13 @@ export declare const colorPickerProps: {
             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;
@@ -715,6 +729,13 @@ export declare const colorPickerProps: {
             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;
@@ -1064,6 +1085,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;
@@ -1368,6 +1396,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;
@@ -1672,6 +1707,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;
@@ -2050,6 +2092,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;
@@ -2354,6 +2403,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;
@@ -2658,6 +2714,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/color-picker/styles/light.d.ts

@@ -80,6 +80,13 @@ declare const colorPickerLight: import("../../_mixins/use-theme").Theme<"ColorPi
         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/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>;
@@ -801,6 +802,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;
@@ -1749,6 +1757,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;
@@ -2697,6 +2712,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;
@@ -3668,6 +3690,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;
@@ -4177,6 +4206,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;
@@ -4498,6 +4534,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>;
@@ -5214,6 +5251,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;
@@ -6162,6 +6206,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;
@@ -7110,6 +7161,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/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