naive-ui 2.30.3 → 2.30.6

package/es/layout/src/LayoutSider.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, ref, toRef, inject, provide } from 'vue';
 import { useMergedState } from 'vooks';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { formatLength, call, warn } from '../../_utils';
+import { formatLength, call, warn, useReactivated } from '../../_utils';
 import { NScrollbar } from '../../_internal';
 import { layoutLight } from '../styles';
 import style from './styles/layout-sider.cssr';
@@ -130,6 +130,24 @@ export default defineComponent({
                     call(onCollapse);
             }
         }
+        let scrollX = 0;
+        let scrollY = 0;
+        const handleNativeElScroll = (e) => {
+            var _a;
+            const target = e.target;
+            scrollX = target.scrollLeft;
+            scrollY = target.scrollTop;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        };
+        useReactivated(() => {
+            if (props.nativeScrollbar) {
+                const el = scrollableElRef.value;
+                if (el) {
+                    el.scrollTop = scrollY;
+                    el.scrollLeft = scrollX;
+                }
+            }
+        });
         provide(layoutSiderInjectionKey, {
             collapsedRef: mergedCollapsedRef,
             collapseModeRef: toRef(props, 'collapseMode')
@@ -180,7 +198,8 @@ export default defineComponent({
             ? useThemeClass('layout-sider', computed(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
             : undefined;
         return Object.assign({ scrollableElRef,
-            scrollbarInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, styleMaxWidth: styleMaxWidthRef, mergedCollapsed: mergedCollapsedRef, scrollContainerStyle: scrollContainerStyleRef, siderPlacement: siderPlacementRef, handleTransitionend,
+            scrollbarInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, styleMaxWidth: styleMaxWidthRef, mergedCollapsed: mergedCollapsedRef, scrollContainerStyle: scrollContainerStyleRef, siderPlacement: siderPlacementRef, handleNativeElScroll,
+            handleTransitionend,
             handleTriggerClick,
             inlineThemeDisabled, cssVars: cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
@@ -212,7 +231,7 @@ export default defineComponent({
                         colorHover: 'rgba(255, 255, 255, .4)',
                         color: 'rgba(255, 255, 255, .3)'
                     }
-                    : undefined }), this.$slots)) : (h("div", { class: `${mergedClsPrefix}-layout-sider-scroll-container`, onScroll: this.onScroll, style: [
+                    : undefined }), this.$slots)) : (h("div", { class: `${mergedClsPrefix}-layout-sider-scroll-container`, onScroll: this.handleNativeElScroll, style: [
                     this.scrollContainerStyle,
                     {
                         overflow: 'auto'

package/es/menu/src/Menu.d.ts

@@ -2147,13 +2147,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly labelField: string;
     readonly defaultValue: Key | null;
     readonly childrenField: string;
+    readonly defaultExpandAll: boolean;
     readonly indent: number;
     readonly inverted: boolean;
     readonly accordion: boolean;
     readonly collapsed: boolean | undefined;
     readonly collapsedWidth: number;
     readonly collapsedIconSize: number;
-    readonly defaultExpandAll: boolean;
     readonly watchProps: ("defaultValue" | "defaultExpandedKeys")[];
     readonly dropdownPlacement: FollowerPlacement;
 }>;

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

@@ -1,9 +1,7 @@
-import { PropType, VNode, ComponentPublicInstance } from 'vue';
+import { PropType, VNode, ComponentPublicInstance, VNodeChild } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    onClickoutside: {
-        type: FunctionConstructor;
-        required: true;
-    };
+    renderMask: PropType<() => VNodeChild>;
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     onBeforeLeave: {
         type: FunctionConstructor;
         required: true;
@@ -25,13 +23,13 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
-    icon: PropType<() => import("vue").VNodeChild>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
+    icon: PropType<() => VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
-    title: PropType<string | (() => import("vue").VNodeChild)>;
+    title: PropType<string | (() => VNodeChild)>;
     closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -40,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
     positiveText: StringConstructor;
     positiveButtonProps: PropType<import("../..").ButtonProps>;
     negativeButtonProps: PropType<import("../..").ButtonProps>;
-    content: PropType<string | (() => import("vue").VNodeChild)>;
-    action: PropType<() => import("vue").VNodeChild>;
+    content: PropType<string | (() => VNodeChild)>;
+    action: PropType<() => VNodeChild>;
     showIcon: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -713,7 +711,6 @@ declare const _default: import("vue").DefineComponent<{
     childNodeRef: import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null>;
-    handleClickOutside: (e: MouseEvent) => void;
     handlePositiveClick: () => void;
     handleNegativeClick: () => void;
     handleCloseClick: () => void;
@@ -721,10 +718,8 @@ declare const _default: import("vue").DefineComponent<{
     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<import("vue").ExtractPropTypes<{
-    onClickoutside: {
-        type: FunctionConstructor;
-        required: true;
-    };
+    renderMask: PropType<() => VNodeChild>;
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     onBeforeLeave: {
         type: FunctionConstructor;
         required: true;
@@ -746,13 +741,13 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
-    icon: PropType<() => import("vue").VNodeChild>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
+    icon: PropType<() => VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
-    title: PropType<string | (() => import("vue").VNodeChild)>;
+    title: PropType<string | (() => VNodeChild)>;
     closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -761,8 +756,8 @@ declare const _default: import("vue").DefineComponent<{
     positiveText: StringConstructor;
     positiveButtonProps: PropType<import("../..").ButtonProps>;
     negativeButtonProps: PropType<import("../..").ButtonProps>;
-    content: PropType<string | (() => import("vue").VNodeChild)>;
-    action: PropType<() => import("vue").VNodeChild>;
+    content: PropType<string | (() => VNodeChild)>;
+    action: PropType<() => VNodeChild>;
     showIcon: {
         readonly type: BooleanConstructor;
         readonly default: true;

package/es/modal/src/BodyWrapper.js

@@ -26,12 +26,9 @@ export default defineComponent({
         }, autoFocus: {
             type: Boolean,
             default: true
-        }, blockScroll: Boolean }, presetProps), { 
+        }, blockScroll: Boolean }, presetProps), { renderMask: Function, 
         // events
-        onClickoutside: {
-            type: Function,
-            required: true
-        }, onBeforeLeave: {
+        onClickoutside: Function, onBeforeLeave: {
             type: Function,
             required: true
         }, onAfterLeave: {
@@ -122,9 +119,6 @@ export default defineComponent({
         function handlePositiveClick() {
             props.onPositiveClick();
         }
-        function handleClickOutside(e) {
-            props.onClickoutside(e);
-        }
         const childNodeRef = ref(null);
         watch(childNodeRef, (node) => {
             if (node) {
@@ -148,7 +142,6 @@ export default defineComponent({
             scrollbarRef,
             displayed: displayedRef,
             childNodeRef,
-            handleClickOutside,
             handlePositiveClick,
             handleNegativeClick,
             handleCloseClick,
@@ -158,7 +151,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { $slots, $attrs, handleEnter, handleAfterLeave, handleBeforeLeave, handleClickOutside, preset, mergedClsPrefix } = this;
+        const { $slots, $attrs, handleEnter, handleAfterLeave, handleBeforeLeave, preset, mergedClsPrefix } = this;
         let childNode = null;
         if (!preset) {
             childNode = getFirstSlotVNode($slots);
@@ -174,29 +167,41 @@ export default defineComponent({
         return this.displayDirective === 'show' || this.displayed || this.show
             ? 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: () => (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)) : ((this.childNodeRef = childNode))), [
-                                    [vShow, this.show],
-                                    [
-                                        clickoutside,
-                                        handleClickOutside,
-                                        undefined,
-                                        { capture: true }
-                                    ]
-                                ])
-                            }));
-                        }
-                    }))
+                    default: () => {
+                        var _a;
+                        return [
+                            (_a = this.renderMask) === null || _a === void 0 ? void 0 : _a.call(this),
+                            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: () => {
+                                            const dirs = [
+                                                [vShow, this.show]
+                                            ];
+                                            const { onClickoutside } = this;
+                                            if (onClickoutside) {
+                                                dirs.push([
+                                                    clickoutside,
+                                                    this.onClickoutside,
+                                                    undefined,
+                                                    { capture: true }
+                                                ]);
+                                            }
+                                            return 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)) : ((this.childNodeRef = childNode))), dirs);
+                                        }
+                                    }));
+                                }
+                            })
+                        ];
+                    }
                 })), [
                 [
                     vShow,

package/es/modal/src/Modal.js

@@ -4,7 +4,7 @@ import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
 import { dialogProviderInjectionKey } from '../../dialog/src/context';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { keep, call, warnOnce, useIsComposing } from '../../_utils';
+import { keep, call, warnOnce, useIsComposing, eventEffectNotPerformed } from '../../_utils';
 import { modalLight } from '../styles';
 import { presetProps, presetPropsKeys } from './presetProps';
 import NModalBodyWrapper from './BodyWrapper';
@@ -150,7 +150,7 @@ export default defineComponent({
         function handleEsc(e) {
             var _a;
             (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
-            if (props.closeOnEsc) {
+            if (props.show && props.closeOnEsc && eventEffectNotPerformed(e)) {
                 !isComposingRef.value && doUpdateShow(false);
             }
         }
@@ -212,19 +212,24 @@ export default defineComponent({
         const { mergedClsPrefix } = this;
         return (h(VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                var _a, _b;
+                var _a;
                 (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                const { unstableShowMask } = this;
                 return withDirectives(h("div", { role: "none", ref: "containerRef", class: [
                         `${mergedClsPrefix}-modal-container`,
                         this.themeClass,
                         this.namespace
                     ], style: this.cssVars },
-                    this.unstableShowMask ? (h(Transition, { name: "fade-in-transition", key: "mask", appear: (_b = this.internalAppear) !== null && _b !== void 0 ? _b : this.isMounted }, {
-                        default: () => {
-                            return this.show ? (h("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
-                        }
-                    })) : null,
-                    h(NModalBodyWrapper, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus, blockScroll: this.blockScroll }, 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)), [
+                    h(NModalBodyWrapper, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus, blockScroll: this.blockScroll }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: unstableShowMask ? undefined : this.handleClickoutside, renderMask: unstableShowMask
+                            ? () => {
+                                var _a;
+                                return (h(Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.internalAppear) !== null && _a !== void 0 ? _a : this.isMounted }, {
+                                    default: () => {
+                                        return this.show ? (h("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask`, onClick: this.handleClickoutside })) : null;
+                                    }
+                                }));
+                            }
+                            : undefined }), this.$slots)), [
                     [
                         zindexable,
                         {