naive-ui 2.25.1 → 2.25.4

package/lib/modal/src/Modal.d.ts

@@ -11,8 +11,8 @@ declare const modalProps: {
     onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
     onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -22,7 +22,7 @@ declare const modalProps: {
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -65,7 +65,7 @@ declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -923,8 +923,8 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick: PropType<() => any>;
     onNegativeClick: PropType<() => any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -934,7 +934,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -977,7 +977,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -1836,12 +1836,9 @@ declare const _default: import("vue").DefineComponent<{
     handleNegativeClick: () => void;
     handlePositiveClick: () => void;
     handleCloseClick: () => void;
-    cssVars: import("vue").ComputedRef<{
-        '--n-bezier-ease-out': string;
-        '--n-box-shadow': string;
-        '--n-color': string;
-        '--n-text-color': string;
-    }>;
+    cssVars: false | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onEsc: PropType<() => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
@@ -1853,8 +1850,8 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick: PropType<() => any>;
     onNegativeClick: PropType<() => any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -1864,7 +1861,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -1907,7 +1904,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -2753,15 +2750,13 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     size: "small" | "medium" | "large" | "huge";
     show: boolean;
     transformOrigin: "center" | "mouse";
-    appear: boolean | undefined;
-    dialog: boolean;
     autoFocus: boolean;
-    bordered: boolean;
     loading: boolean;
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
     displayDirective: "show" | "if";
@@ -2769,6 +2764,8 @@ declare const _default: import("vue").DefineComponent<{
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;
     trapFocus: boolean;
+    internalDialog: boolean;
+    internalAppear: boolean | undefined;
     unstableShowMask: boolean;
     maskClosable: boolean;
     closeOnEsc: boolean;

package/lib/modal/src/Modal.js

@@ -40,7 +40,7 @@ const modalProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _
     // events
     onEsc: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onClose: Function, onPositiveClick: Function, onNegativeClick: Function, onMaskClick: Function, 
     // private
-    dialog: Boolean, appear: {
+    internalDialog: Boolean, internalAppear: {
         type: Boolean,
         default: undefined
     }, 
@@ -66,12 +66,12 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         const containerRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Modal', '-modal', index_cssr_1.default, styles_1.modalLight, props, mergedClsPrefixRef);
         const clickedRef = (0, vooks_1.useClicked)(64);
         const clickedPositionRef = (0, vooks_1.useClickPosition)();
         const isMountedRef = (0, vooks_1.useIsMounted)();
-        const NDialogProvider = props.dialog
+        const NDialogProvider = props.internalDialog
             ? (0, vue_1.inject)(context_1.dialogProviderInjectionKey, null)
             : null;
         function doUpdateShow(show) {
@@ -174,9 +174,21 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,
             isMountedRef,
-            appearRef: (0, vue_1.toRef)(props, 'appear'),
+            appearRef: (0, vue_1.toRef)(props, 'internalAppear'),
             transformOriginRef: (0, vue_1.toRef)(props, 'transformOrigin')
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
+            return {
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-box-shadow': boxShadow,
+                '--n-color': color,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('theme-class', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -195,39 +207,36 @@ exports.default = (0, vue_1.defineComponent)({
             handleNegativeClick,
             handlePositiveClick,
             handleCloseClick,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
-                return {
-                    '--n-bezier-ease-out': cubicBezierEaseOut,
-                    '--n-box-shadow': boxShadow,
-                    '--n-color': color,
-                    '--n-text-color': textColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : inlineThemeDisabled,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                var _a;
-                return [
-                    (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [`${mergedClsPrefix}-modal-container`, this.namespace], style: this.cssVars },
-                        this.unstableShowMask ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted }, {
-                            default: () => {
-                                return this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
-                            }
-                        })) : null,
-                        (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: 'bodyWrapper', displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside }), this.$slots)), [
-                        [
-                            vdirs_1.zindexable,
-                            {
-                                zIndex: this.zIndex,
-                                enabled: this.show
-                            }
-                        ]
-                    ])
-                ];
+                var _a, _b;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
+                        `${mergedClsPrefix}-modal-container`,
+                        this.themeClass,
+                        this.namespace
+                    ], style: this.cssVars },
+                    this.unstableShowMask ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_b = this.internalAppear) !== null && _b !== void 0 ? _b : this.isMounted }, {
+                        default: () => {
+                            return this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
+                        }
+                    })) : null,
+                    (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside }), this.$slots)), [
+                    [
+                        vdirs_1.zindexable,
+                        {
+                            zIndex: this.zIndex,
+                            enabled: this.show
+                        }
+                    ]
+                ]);
             }
         }));
     }

package/lib/modal/src/presetProps.d.ts

@@ -1,7 +1,7 @@
 declare const presetProps: {
     icon: import("vue").PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: import("vue").PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: import("vue").PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
@@ -39,5 +39,5 @@ declare const presetProps: {
     hoverable: BooleanConstructor;
     role: StringConstructor;
 };
-declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "bordered" | "positiveText" | "negativeText" | "loading" | "showIcon" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick")[];
 export { presetProps, presetPropsKeys };

package/lib/notification/src/Notification.d.ts

@@ -5,7 +5,7 @@ export declare const notificationProps: {
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -26,7 +26,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -75,7 +75,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -89,6 +89,6 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly required: true;
     };
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

package/lib/notification/src/NotificationEnvironment.d.ts

@@ -16,7 +16,7 @@ export declare const notificationEnvOptions: {
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => import("vue").VNodeChild>;
@@ -48,7 +48,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
         readonly default: true;
     };
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     avatar: PropType<() => import("vue").VNodeChild>;
@@ -88,7 +88,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
         readonly default: true;
     };
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     avatar: PropType<() => import("vue").VNodeChild>;
@@ -98,6 +98,6 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
     meta: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<string | (() => import("vue").VNodeChild)>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

package/lib/notification/src/NotificationProvider.d.ts

@@ -242,7 +242,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly destroy: () => void;
         readonly hide: () => void;
         readonly deactivate: () => void;
-        type?: "default" | "success" | "error" | "warning" | "info" | undefined;
+        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
         closable?: boolean | undefined;
         meta?: string | (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;

package/lib/notification/src/styles/index.cssr.js

@@ -140,6 +140,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  width: 28px;
  height: 28px;
  font-size: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
  `, [(0, cssr_1.cB)('icon', {
   transition: 'color .3s var(--n-bezier)'
 })]), (0, cssr_1.cB)('notification-main', `
@@ -186,14 +189,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
 })])])])])]);
 
 function placementTransformStyle(placement) {
-  const [position, direction] = placement.split('-');
-  const transformYEnter = position === 'top' ? '-100%' : '100%';
-  const transformYLeave = position === 'top' ? '0' : '0';
+  const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
   const transformXLeave = '0';
   return (0, cssr_1.cB)('notification', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, ${transformYEnter});
+ transform: translate(${transformXEnter}, 0);
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, ${transformYLeave});
+ transform: translate(${transformXLeave}, 0);
  `)]);
 }

package/lib/page-header/src/PageHeader.d.ts

@@ -92,7 +92,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-back-color-hover': string;
         '--n-back-color-pressed': string;
         '--n-bezier': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     subtitle: StringConstructor;

package/lib/page-header/src/PageHeader.js

@@ -16,31 +16,39 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'PageHeader',
     props: pageHeaderProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('PageHeader', '-page-header', index_cssr_1.default, light_1.pageHeaderLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.default)('PageHeader', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-font-size': fontSize,
+                '--n-back-size': backSize,
+                '--n-subtitle-text-color': subtitleTextColor,
+                '--n-back-color': backColor,
+                '--n-back-color-hover': backColorHover,
+                '--n-back-color-pressed': backColorPressed,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('page-header', undefined, cssVarsRef, props)
+            : undefined;
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-font-size': fontSize,
-                    '--n-back-size': backSize,
-                    '--n-subtitle-text-color': subtitleTextColor,
-                    '--n-back-color': backColor,
-                    '--n-back-color-hover': backColorHover,
-                    '--n-back-color-pressed': backColorPressed,
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         const { title: titleSlot, subtitle: subtitleSlot, extra: extraSlot, default: defaultSlot, header: headerSlot, avatar: avatarSlot, footer: footerSlot, back: backSlot } = $slots;
         const showBack = onBack;
         const showTitle = title || titleSlot;
@@ -48,6 +56,7 @@ exports.default = (0, vue_1.defineComponent)({
         const showExtra = extra || extraSlot;
         return ((0, vue_1.h)("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-page-header-wrapper`,
+                this.themeClass,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
             headerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,