naive-ui 2.23.1 → 2.24.2

package/es/message/src/message-props.d.ts

@@ -1,5 +1,6 @@
-import { PropType, VNodeChild } from 'vue';
-export declare type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+import { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+import { MessageType } from './types';
 export declare const messageProps: {
     readonly icon: PropType<() => VNodeChild>;
     readonly type: {
@@ -13,3 +14,5 @@ export declare const messageProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
 };
+export declare type MessageProps = ExtractPublicPropTypes<typeof messageProps>;
+export declare type MessageSetupProps = ExtractPropTypes<typeof messageProps>;

package/es/message/src/styles/index.cssr.js

@@ -1,36 +1,36 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr';
 import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand.cssr'; // vars:
-// --margin
-// --bezier
-// --padding
-// --max-width
-// --font-size
-// --icon-margin
-// --icon-size
-// --close-size
-// --close-margin
-// --text-color
-// --color
-// --box-shadow
-// --icon-color-info
-// --icon-color-success
-// --icon-color-warning
-// --icon-color-error
-// --icon-color-loading
-// --close-color
-// --close-color-pressed
-// --close-color-hover
-// --border-radius
+// --n-margin
+// --n-bezier
+// --n-padding
+// --n-max-width
+// --n-font-size
+// --n-icon-margin
+// --n-icon-size
+// --n-close-size
+// --n-close-margin
+// --n-text-color
+// --n-color
+// --n-box-shadow
+// --n-icon-color-info
+// --n-icon-color-success
+// --n-icon-color-warning
+// --n-icon-color-error
+// --n-icon-color-loading
+// --n-close-color
+// --n-close-color-pressed
+// --n-close-color-hover
+// --n-border-radius
 
 export default c([cB('message-wrapper', `
- margin: var(--margin);
+ margin: var(--n-margin);
  z-index: 0;
  transform-origin: top center;
  display: flex;
  `, [fadeInHeightExpand({
   overflow: 'visible',
-  originalTransition: 'transform .3s var(--bezier)',
+  originalTransition: 'transform .3s var(--n-bezier)',
   enterToProps: {
     transform: 'scale(1)'
   },
@@ -42,34 +42,34 @@ export default c([cB('message-wrapper', `
  display: flex;
  align-items: center;
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- transform .3s var(--bezier),
- margin-bottom .3s var(--bezier);
- padding: var(--padding);
- border-radius: var(--border-radius);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ transform .3s var(--n-bezier),
+ margin-bottom .3s var(--n-bezier);
+ padding: var(--n-padding);
+ border-radius: var(--n-border-radius);
  flex-wrap: nowrap;
  overflow: hidden;
- max-width: var(--max-width);
- color: var(--text-color);
- background-color: var(--color);
- box-shadow: var(--box-shadow);
+ max-width: var(--n-max-width);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ box-shadow: var(--n-box-shadow);
  `, [cE('content', `
  display: inline-block;
- line-height: var(--line-height);
- font-size: var(--font-size);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
  `), cE('icon', `
  position: relative;
- margin: var(--icon-margin);
- height: var(--icon-size);
- width: var(--icon-size);
- font-size: var(--icon-size);
+ margin: var(--n-icon-margin);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
+ font-size: var(--n-icon-size);
  flex-shrink: 0;
  `, [['info', 'success', 'warning', 'error', 'loading'].map(type => cM(`${type}-type`, [c('> *', `
- color: var(--icon-color-${type});
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color-${type});
+ transition: color .3s var(--n-bezier);
  `)])), c('> *', `
  position: absolute;
  left: 0;
@@ -77,14 +77,14 @@ export default c([cB('message-wrapper', `
  right: 0;
  bottom: 0;
  `, [iconSwitchTransition()])]), cE('close', `
- font-size: var(--close-size);
- margin: var(--close-margin);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ margin: var(--n-close-margin);
+ transition: color .3s var(--n-bezier);
  flex-shrink: 0;
  `, [c('&:hover', `
- color: var(--close-color-hover);
+ color: var(--n-close-color-hover);
  `), c('&:active', `
- color: var(--close-color-pressed);
+ color: var(--n-close-color-pressed);
  `)])]), cB('message-container', `
  z-index: 6000;
  position: fixed;

package/es/message/src/types.d.ts

@@ -0,0 +1,15 @@
+import { VNodeChild } from 'vue';
+import { MessageSetupProps } from './message-props';
+export declare type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+export declare type RenderMessageProps = Pick<MessageSetupProps, 'closable' | 'content' | 'icon' | 'onClose' | 'type'>;
+export declare type MessageRenderMessage = (props: RenderMessageProps) => VNodeChild;
+export interface MessageOptions {
+    render?: MessageRenderMessage;
+    duration?: number;
+    closable?: boolean;
+    keepAliveOnHover?: boolean;
+    icon?: () => VNodeChild;
+    onClose?: () => void;
+    onLeave?: () => void;
+    onAfterLeave?: () => void;
+}

package/es/message/src/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     onAfterEnter: PropType<() => void>;
+    onEsc: PropType<() => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
@@ -59,6 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     show: {
         type: BooleanConstructor;
         required: true;
@@ -68,6 +70,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         required: true;
     };
+    trapFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -674,11 +684,14 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").Ref<string>;
     bodyRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | HTMLElement | null>;
     scrollbarRef: import("vue").Ref<{
-        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     displayed: import("vue").Ref<boolean>;
     handleClickOutside: (e: MouseEvent) => void;
@@ -688,76 +701,96 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterLeave: () => void;
     handleBeforeLeave: (el: HTMLElement) => void;
     handleEnter: (el: HTMLElement) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    onClickoutside?: unknown;
-    onBeforeLeave?: unknown;
-    onAfterLeave?: unknown;
-    onPositiveClick?: unknown;
-    onNegativeClick?: unknown;
-    onClose?: unknown;
-    onAfterEnter?: unknown;
-    icon?: unknown;
-    type?: unknown;
-    title?: unknown;
-    closable?: unknown;
-    negativeText?: unknown;
-    positiveText?: unknown;
-    content?: unknown;
-    action?: unknown;
-    showIcon?: unknown;
-    loading?: unknown;
-    bordered?: unknown;
-    iconPlacement?: unknown;
-    contentStyle?: unknown;
-    headerStyle?: unknown;
-    footerStyle?: unknown;
-    embedded?: unknown;
-    segmented?: unknown;
-    size?: unknown;
-    hoverable?: unknown;
-    show?: unknown;
-    preset?: unknown;
-    displayDirective?: unknown;
-} & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onClickoutside: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onBeforeLeave: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onAfterLeave: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onPositiveClick: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onNegativeClick: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onClose: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    onAfterEnter: PropType<() => void>;
+    onEsc: PropType<() => void>;
+    icon: PropType<() => import("vue").VNodeChild>;
+    type: {
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly default: "default";
+    };
+    title: PropType<string | (() => import("vue").VNodeChild)>;
+    closable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    negativeText: StringConstructor;
+    positiveText: StringConstructor;
+    content: PropType<string | (() => import("vue").VNodeChild)>;
+    action: PropType<() => import("vue").VNodeChild>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    loading: BooleanConstructor;
+    bordered: BooleanConstructor;
+    iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentStyle: PropType<string | import("vue").CSSProperties>;
+    headerStyle: PropType<string | import("vue").CSSProperties>;
+    footerStyle: PropType<string | import("vue").CSSProperties>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../../card/src/Card").Segmented>;
+        readonly default: false;
+    };
+    size: {
+        readonly type: PropType<"small" | "medium" | "large" | "huge">;
+        readonly default: "medium";
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    preset: PropType<"dialog" | "card" | "confirm">;
+    displayDirective: {
+        type: PropType<"show" | "if">;
+        required: true;
+    };
+    trapFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
     size: "small" | "medium" | "large" | "huge";
-    show: boolean;
-    onBeforeLeave: Function;
-    onAfterLeave: Function;
+    autoFocus: boolean;
     loading: boolean;
-    bordered: boolean;
-    onClose: Function;
-    closable: boolean;
-    displayDirective: "show" | "if";
-    onClickoutside: Function;
     showIcon: boolean;
-    hoverable: boolean;
-    embedded: boolean;
-    segmented: boolean | import("../../card/src/Card").Segmented;
-    onPositiveClick: Function;
-    onNegativeClick: Function;
-} & {
-    content?: string | (() => import("vue").VNodeChild) | undefined;
-    icon?: (() => import("vue").VNodeChild) | undefined;
-    onAfterEnter?: (() => void) | undefined;
-    title?: string | (() => import("vue").VNodeChild) | undefined;
-    action?: (() => import("vue").VNodeChild) | undefined;
-    positiveText?: string | undefined;
-    negativeText?: string | undefined;
-    contentStyle?: string | import("vue").CSSProperties | undefined;
-    iconPlacement?: import("../../dialog/src/interface").IconPlacement | undefined;
-    headerStyle?: string | import("vue").CSSProperties | undefined;
-    footerStyle?: string | import("vue").CSSProperties | undefined;
-    preset?: "dialog" | "card" | "confirm" | undefined;
-}>, {
-    type: "default" | "error" | "info" | "success" | "warning";
-    size: "small" | "medium" | "large" | "huge";
-    loading: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;
+    trapFocus: boolean;
 }>;
 export default _default;

package/es/modal/src/BodyWrapper.js

@@ -1,15 +1,16 @@
 import { h, nextTick, toRef, watch, ref, inject, defineComponent, provide, withDirectives, vShow, Transition, mergeProps, cloneVNode } from 'vue';
 import { clickoutside } from 'vdirs';
+import { VFocusTrap } from 'vueuc';
 import { dialogPropKeys } from '../../dialog/src/Dialog';
 import { cardBasePropKeys } from '../../card/src/Card';
+import { drawerBodyInjectionKey } from '../../drawer/src/interface';
+import { popoverBodyInjectionKey } from '../../popover/src/interface';
 import { NScrollbar } from '../../_internal';
 import { NDialog } from '../../dialog';
 import { NCard } from '../../card';
 import { getFirstSlotVNode, keep, warn } from '../../_utils';
-import { presetProps } from './presetProps';
-import { drawerBodyInjectionKey } from '../../drawer/src/interface';
-import { popoverBodyInjectionKey } from '../../popover/src/interface';
 import { modalBodyInjectionKey, modalInjectionKey } from './interface';
+import { presetProps } from './presetProps';
 export default defineComponent({
     name: 'ModalBody',
     inheritAttrs: false,
@@ -19,6 +20,12 @@ export default defineComponent({
         }, preset: String, displayDirective: {
             type: String,
             required: true
+        }, trapFocus: {
+            type: Boolean,
+            default: true
+        }, autoFocus: {
+            type: Boolean,
+            default: true
         } }, presetProps), { 
         // events
         onClickoutside: {
@@ -39,7 +46,7 @@ export default defineComponent({
         }, onClose: {
             type: Function,
             required: true
-        }, onAfterEnter: Function }),
+        }, onAfterEnter: Function, onEsc: Function }),
     setup(props) {
         const bodyRef = ref(null);
         const scrollbarRef = ref(null);
@@ -152,24 +159,26 @@ export default defineComponent({
             }, $attrs, childNode.props || {});
         }
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? withDirectives(h("div", { class: `${mergedClsPrefix}-modal-body-wrapper` },
+            ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
                 h(NScrollbar, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
-                    default: () => {
-                        var _a;
-                        return (h(Transition, { name: "fade-in-scale-up-transition", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
-                            default: () => withDirectives((this.preset === 'confirm' ||
-                                this.preset === 'dialog' ? (h(NDialog, Object.assign({}, this.$attrs, { class: [
-                                    `${mergedClsPrefix}-modal`,
-                                    this.$attrs.class
-                                ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, keep(this.$props, dialogPropKeys)), $slots)) : this.preset === 'card' ? (h(NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
-                                    `${mergedClsPrefix}-modal`,
-                                    this.$attrs.class
-                                ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, keep(this.$props, cardBasePropKeys)), $slots)) : (childNode)), [
-                                [vShow, this.show],
-                                [clickoutside, handleClickOutside]
-                            ])
-                        }));
-                    }
+                    default: () => (h(VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
+                        default: () => {
+                            var _a;
+                            return (h(Transition, { name: "fade-in-scale-up-transition", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
+                                default: () => withDirectives((this.preset === 'confirm' ||
+                                    this.preset === 'dialog' ? (h(NDialog, Object.assign({}, this.$attrs, { class: [
+                                        `${mergedClsPrefix}-modal`,
+                                        this.$attrs.class
+                                    ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, keep(this.$props, dialogPropKeys), { "aria-modal": "true" }), $slots)) : this.preset === 'card' ? (h(NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
+                                        `${mergedClsPrefix}-modal`,
+                                        this.$attrs.class
+                                    ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, keep(this.$props, cardBasePropKeys), { "aria-modal": "true", role: "dialog" }), $slots)) : (childNode)), [
+                                    [vShow, this.show],
+                                    [clickoutside, handleClickOutside]
+                                ])
+                            }));
+                        }
+                    }))
                 })), [
                 [
                     vShow,