naive-ui 2.38.2 → 2.40.0

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

@@ -1,5 +1,5 @@
-import { type PropType, type CSSProperties } from 'vue';
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import { type CSSProperties, type PropType } from 'vue';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 export declare const modalProps: {
     onEsc: PropType<() => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
@@ -23,7 +23,7 @@ export declare const modalProps: {
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"info" | "success" | "warning" | "error" | "default">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -33,8 +33,8 @@ export declare const modalProps: {
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: PropType<import("naive-ui").ButtonProps>;
-    negativeButtonProps: PropType<import("naive-ui").ButtonProps>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<() => import("vue").VNodeChild>;
     showIcon: {
@@ -44,21 +44,21 @@ export declare const modalProps: {
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    titleClass: PropType<string | (string | undefined)[]>;
+    titleClass: PropType<string | Array<string | undefined>>;
     titleStyle: PropType<string | CSSProperties>;
-    contentClass: PropType<string | (string | undefined)[]>;
+    contentClass: PropType<string | Array<string | undefined>>;
     contentStyle: PropType<string | CSSProperties>;
-    actionClass: PropType<string | (string | undefined)[]>;
+    actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | CSSProperties>;
     headerClass: StringConstructor;
-    headerStyle: PropType<string | CSSProperties>;
+    headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
-    headerExtraStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<CSSProperties | string>;
     footerClass: StringConstructor;
-    footerStyle: PropType<string | CSSProperties>;
+    footerStyle: PropType<CSSProperties | string>;
     embedded: BooleanConstructor;
     segmented: {
-        readonly type: PropType<boolean | import("naive-ui").CardSegmented>;
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
         readonly default: false;
     };
     size: {
@@ -86,7 +86,7 @@ export declare const modalProps: {
     preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
-        type: PropType<"show" | "if">;
+        type: PropType<"if" | "show">;
         default: string;
     };
     transformOrigin: {
@@ -121,8 +121,10 @@ export declare const modalProps: {
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -411,8 +413,10 @@ export declare const modalProps: {
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -701,8 +705,10 @@ export declare const modalProps: {
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -989,9 +995,9 @@ declare const _default: import("vue").DefineComponent<{
     onAfterEnter: PropType<() => void>;
     onBeforeLeave: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
-    onClose: PropType<() => any>;
-    onPositiveClick: PropType<() => any>;
-    onNegativeClick: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
+    onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
+    onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
     internalDialog: BooleanConstructor;
     internalModal: BooleanConstructor;
@@ -1005,7 +1011,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"info" | "success" | "warning" | "error" | "default">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -1015,8 +1021,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: PropType<import("naive-ui").ButtonProps>;
-    negativeButtonProps: PropType<import("naive-ui").ButtonProps>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<() => import("vue").VNodeChild>;
     showIcon: {
@@ -1026,21 +1032,21 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    titleClass: PropType<string | (string | undefined)[]>;
+    titleClass: PropType<string | Array<string | undefined>>;
     titleStyle: PropType<string | CSSProperties>;
-    contentClass: PropType<string | (string | undefined)[]>;
+    contentClass: PropType<string | Array<string | undefined>>;
     contentStyle: PropType<string | CSSProperties>;
-    actionClass: PropType<string | (string | undefined)[]>;
+    actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | CSSProperties>;
     headerClass: StringConstructor;
-    headerStyle: PropType<string | CSSProperties>;
+    headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
-    headerExtraStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<CSSProperties | string>;
     footerClass: StringConstructor;
-    footerStyle: PropType<string | CSSProperties>;
+    footerStyle: PropType<CSSProperties | string>;
     embedded: BooleanConstructor;
     segmented: {
-        readonly type: PropType<boolean | import("naive-ui").CardSegmented>;
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
         readonly default: false;
     };
     size: {
@@ -1068,7 +1074,7 @@ declare const _default: import("vue").DefineComponent<{
     preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
-        type: PropType<"show" | "if">;
+        type: PropType<"if" | "show">;
         default: string;
     };
     transformOrigin: {
@@ -1103,8 +1109,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1393,8 +1401,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1683,8 +1693,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1991,9 +2003,9 @@ declare const _default: import("vue").DefineComponent<{
     onAfterEnter: PropType<() => void>;
     onBeforeLeave: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
-    onClose: PropType<() => any>;
-    onPositiveClick: PropType<() => any>;
-    onNegativeClick: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
+    onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
+    onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
     internalDialog: BooleanConstructor;
     internalModal: BooleanConstructor;
@@ -2007,7 +2019,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"info" | "success" | "warning" | "error" | "default">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -2017,8 +2029,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: PropType<import("naive-ui").ButtonProps>;
-    negativeButtonProps: PropType<import("naive-ui").ButtonProps>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<() => import("vue").VNodeChild>;
     showIcon: {
@@ -2028,21 +2040,21 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    titleClass: PropType<string | (string | undefined)[]>;
+    titleClass: PropType<string | Array<string | undefined>>;
     titleStyle: PropType<string | CSSProperties>;
-    contentClass: PropType<string | (string | undefined)[]>;
+    contentClass: PropType<string | Array<string | undefined>>;
     contentStyle: PropType<string | CSSProperties>;
-    actionClass: PropType<string | (string | undefined)[]>;
+    actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | CSSProperties>;
     headerClass: StringConstructor;
-    headerStyle: PropType<string | CSSProperties>;
+    headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
-    headerExtraStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<CSSProperties | string>;
     footerClass: StringConstructor;
-    footerStyle: PropType<string | CSSProperties>;
+    footerStyle: PropType<CSSProperties | string>;
     embedded: BooleanConstructor;
     segmented: {
-        readonly type: PropType<boolean | import("naive-ui").CardSegmented>;
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
         readonly default: false;
     };
     size: {
@@ -2070,7 +2082,7 @@ declare const _default: import("vue").DefineComponent<{
     preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
-        type: PropType<"show" | "if">;
+        type: PropType<"if" | "show">;
         default: string;
     };
     transformOrigin: {
@@ -2105,8 +2117,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -2395,8 +2409,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -2685,8 +2701,10 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -2978,7 +2996,7 @@ declare const _default: import("vue").DefineComponent<{
     displayDirective: "show" | "if";
     hoverable: boolean;
     embedded: boolean;
-    segmented: boolean | import("naive-ui").CardSegmented;
+    segmented: boolean | import("../..").CardSegmented;
     trapFocus: boolean;
     blockScroll: boolean;
     internalDialog: boolean;

package/es/modal/src/Modal.mjs

@@ -1,11 +1,11 @@
-import { h, withDirectives, Transition, ref, computed, defineComponent, provide, toRef, inject } from 'vue';
+import { Transition, computed, defineComponent, h, inject, provide, ref, toRef, withDirectives } from 'vue';
 import { zindexable } from 'vdirs';
-import { useIsMounted, useClicked, useClickPosition } from 'vooks';
+import { useClickPosition, useClicked, useIsMounted } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
 import { getPreciseEventTarget } from 'seemly';
 import { dialogProviderInjectionKey } from "../../dialog/src/context.mjs";
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
-import { keep, call, warnOnce, useIsComposing, eventEffectNotPerformed } from "../../_utils/index.mjs";
+import { call, eventEffectNotPerformed, keep, useIsComposing, warnOnce } from "../../_utils/index.mjs";
 import { modalLight } from "../styles/index.mjs";
 import { presetProps, presetPropsKeys } from "./presetProps.mjs";
 import NModalBodyWrapper from "./BodyWrapper.mjs";
@@ -191,7 +191,9 @@ export default defineComponent({
       var _a;
       (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
       if (props.show && props.closeOnEsc && eventEffectNotPerformed(e)) {
-        !isComposingRef.value && doUpdateShow(false);
+        if (!isComposingRef.value) {
+          doUpdateShow(false);
+        }
       }
     }
     provide(modalInjectionKey, {

package/es/modal/src/ModalEnvironment.d.ts

@@ -14,9 +14,9 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     onAfterEnter: PropType<() => void>;
     onBeforeLeave: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
-    onClose: PropType<() => any>;
-    onPositiveClick: PropType<() => any>;
-    onNegativeClick: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
+    onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
+    onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
     internalDialog: BooleanConstructor;
     internalModal: BooleanConstructor;
@@ -30,7 +30,7 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"info" | "success" | "warning" | "error" | "default">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -40,8 +40,8 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: PropType<import("naive-ui").ButtonProps>;
-    negativeButtonProps: PropType<import("naive-ui").ButtonProps>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<() => import("vue").VNodeChild>;
     showIcon: {
@@ -51,21 +51,21 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    titleClass: PropType<string | (string | undefined)[]>;
+    titleClass: PropType<string | Array<string | undefined>>;
     titleStyle: PropType<string | import("vue").CSSProperties>;
-    contentClass: PropType<string | (string | undefined)[]>;
+    contentClass: PropType<string | Array<string | undefined>>;
     contentStyle: PropType<string | import("vue").CSSProperties>;
-    actionClass: PropType<string | (string | undefined)[]>;
+    actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | import("vue").CSSProperties>;
     headerClass: StringConstructor;
-    headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
     headerExtraClass: StringConstructor;
-    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
     footerClass: StringConstructor;
-    footerStyle: PropType<string | import("vue").CSSProperties>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
     embedded: BooleanConstructor;
     segmented: {
-        readonly type: PropType<boolean | import("naive-ui").CardSegmented>;
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
         readonly default: false;
     };
     size: {
@@ -93,7 +93,7 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
-        type: PropType<"show" | "if">;
+        type: PropType<"if" | "show">;
         default: string;
     };
     transformOrigin: {
@@ -128,8 +128,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -418,8 +420,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -708,8 +712,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1012,9 +1018,9 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     onAfterEnter: PropType<() => void>;
     onBeforeLeave: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
-    onClose: PropType<() => any>;
-    onPositiveClick: PropType<() => any>;
-    onNegativeClick: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
+    onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
+    onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
     internalDialog: BooleanConstructor;
     internalModal: BooleanConstructor;
@@ -1028,7 +1034,7 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"info" | "success" | "warning" | "error" | "default">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -1038,8 +1044,8 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: PropType<import("naive-ui").ButtonProps>;
-    negativeButtonProps: PropType<import("naive-ui").ButtonProps>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<() => import("vue").VNodeChild>;
     showIcon: {
@@ -1049,21 +1055,21 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    titleClass: PropType<string | (string | undefined)[]>;
+    titleClass: PropType<string | Array<string | undefined>>;
     titleStyle: PropType<string | import("vue").CSSProperties>;
-    contentClass: PropType<string | (string | undefined)[]>;
+    contentClass: PropType<string | Array<string | undefined>>;
     contentStyle: PropType<string | import("vue").CSSProperties>;
-    actionClass: PropType<string | (string | undefined)[]>;
+    actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | import("vue").CSSProperties>;
     headerClass: StringConstructor;
-    headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
     headerExtraClass: StringConstructor;
-    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
     footerClass: StringConstructor;
-    footerStyle: PropType<string | import("vue").CSSProperties>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
     embedded: BooleanConstructor;
     segmented: {
-        readonly type: PropType<boolean | import("naive-ui").CardSegmented>;
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
         readonly default: false;
     };
     size: {
@@ -1091,7 +1097,7 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
-        type: PropType<"show" | "if">;
+        type: PropType<"if" | "show">;
         default: string;
     };
     transformOrigin: {
@@ -1126,8 +1132,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1416,8 +1424,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1706,8 +1716,10 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Dialog: import("../../_mixins").Theme<"Dialog", {
@@ -1999,7 +2011,7 @@ export declare const NModalEnvironment: import("vue").DefineComponent<{
     displayDirective: "show" | "if";
     hoverable: boolean;
     embedded: boolean;
-    segmented: boolean | import("naive-ui").CardSegmented;
+    segmented: boolean | import("../..").CardSegmented;
     trapFocus: boolean;
     blockScroll: boolean;
     internalDialog: boolean;

package/es/modal/src/ModalEnvironment.mjs

@@ -1,6 +1,6 @@
 // use absolute path to make sure no circular ref of style
 // this -> modal-index -> modal-style
-import { h, defineComponent, ref } from 'vue';
+import { defineComponent, h, ref } from 'vue';
 import NModal, { modalProps } from "./Modal.mjs";
 export const NModalEnvironment = defineComponent({
   name: 'ModalEnvironment',
@@ -72,7 +72,9 @@ export const NModalEnvironment = defineComponent({
       } = props;
       if (onMaskClick) {
         onMaskClick(e);
-        maskClosable && hide();
+        if (maskClosable) {
+          hide();
+        }
       }
     }
     function handleEsc() {