naive-ui 2.30.3 → 2.30.6

package/lib/layout/src/LayoutSider.js

@@ -135,6 +135,24 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, _utils_1.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);
+        };
+        (0, _utils_1.useReactivated)(() => {
+            if (props.nativeScrollbar) {
+                const el = scrollableElRef.value;
+                if (el) {
+                    el.scrollTop = scrollY;
+                    el.scrollLeft = scrollX;
+                }
+            }
+        });
         (0, vue_1.provide)(interface_1.layoutSiderInjectionKey, {
             collapsedRef: mergedCollapsedRef,
             collapseModeRef: (0, vue_1.toRef)(props, 'collapseMode')
@@ -185,7 +203,8 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('layout-sider', (0, vue_1.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);
     },
@@ -217,7 +236,7 @@ exports.default = (0, vue_1.defineComponent)({
                         colorHover: 'rgba(255, 255, 255, .4)',
                         color: 'rgba(255, 255, 255, .3)'
                     }
-                    : undefined }), this.$slots)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-layout-sider-scroll-container`, onScroll: this.onScroll, style: [
+                    : undefined }), this.$slots)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-layout-sider-scroll-container`, onScroll: this.handleNativeElScroll, style: [
                     this.scrollContainerStyle,
                     {
                         overflow: 'auto'

package/lib/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/lib/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/lib/modal/src/BodyWrapper.js

@@ -28,12 +28,9 @@ exports.default = (0, vue_1.defineComponent)({
         }, autoFocus: {
             type: Boolean,
             default: true
-        }, blockScroll: Boolean }, presetProps_1.presetProps), { 
+        }, blockScroll: Boolean }, presetProps_1.presetProps), { renderMask: Function, 
         // events
-        onClickoutside: {
-            type: Function,
-            required: true
-        }, onBeforeLeave: {
+        onClickoutside: Function, onBeforeLeave: {
             type: Function,
             required: true
         }, onAfterLeave: {
@@ -124,9 +121,6 @@ exports.default = (0, vue_1.defineComponent)({
         function handlePositiveClick() {
             props.onPositiveClick();
         }
-        function handleClickOutside(e) {
-            props.onClickoutside(e);
-        }
         const childNodeRef = (0, vue_1.ref)(null);
         (0, vue_1.watch)(childNodeRef, (node) => {
             if (node) {
@@ -150,7 +144,6 @@ exports.default = (0, vue_1.defineComponent)({
             scrollbarRef,
             displayed: displayedRef,
             childNodeRef,
-            handleClickOutside,
             handlePositiveClick,
             handleNegativeClick,
             handleCloseClick,
@@ -160,7 +153,7 @@ exports.default = (0, vue_1.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 = (0, _utils_1.getFirstSlotVNode)($slots);
@@ -176,29 +169,41 @@ exports.default = (0, vue_1.defineComponent)({
         return this.displayDirective === 'show' || this.displayed || this.show
             ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
                 (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
-                    default: () => ((0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
-                        default: () => {
-                            var _a;
-                            return ((0, vue_1.h)(vue_1.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: () => (0, vue_1.withDirectives)((this.preset === 'confirm' ||
-                                    this.preset === 'dialog' ? ((0, vue_1.h)(Dialog_1.NDialog, Object.assign({}, this.$attrs, { class: [
-                                        `${mergedClsPrefix}-modal`,
-                                        this.$attrs.class
-                                    ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, dialogProps_1.dialogPropKeys), { "aria-modal": "true" }), $slots)) : this.preset === 'card' ? ((0, vue_1.h)(card_1.NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
-                                        `${mergedClsPrefix}-modal`,
-                                        this.$attrs.class
-                                    ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, (0, _utils_1.keep)(this.$props, Card_1.cardBasePropKeys), { "aria-modal": "true", role: "dialog" }), $slots)) : ((this.childNodeRef = childNode))), [
-                                    [vue_1.vShow, this.show],
-                                    [
-                                        vdirs_1.clickoutside,
-                                        handleClickOutside,
-                                        undefined,
-                                        { capture: true }
-                                    ]
-                                ])
-                            }));
-                        }
-                    }))
+                    default: () => {
+                        var _a;
+                        return [
+                            (_a = this.renderMask) === null || _a === void 0 ? void 0 : _a.call(this),
+                            (0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
+                                default: () => {
+                                    var _a;
+                                    return ((0, vue_1.h)(vue_1.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 = [
+                                                [vue_1.vShow, this.show]
+                                            ];
+                                            const { onClickoutside } = this;
+                                            if (onClickoutside) {
+                                                dirs.push([
+                                                    vdirs_1.clickoutside,
+                                                    this.onClickoutside,
+                                                    undefined,
+                                                    { capture: true }
+                                                ]);
+                                            }
+                                            return (0, vue_1.withDirectives)((this.preset === 'confirm' ||
+                                                this.preset === 'dialog' ? ((0, vue_1.h)(Dialog_1.NDialog, Object.assign({}, this.$attrs, { class: [
+                                                    `${mergedClsPrefix}-modal`,
+                                                    this.$attrs.class
+                                                ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, dialogProps_1.dialogPropKeys), { "aria-modal": "true" }), $slots)) : this.preset === 'card' ? ((0, vue_1.h)(card_1.NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
+                                                    `${mergedClsPrefix}-modal`,
+                                                    this.$attrs.class
+                                                ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, (0, _utils_1.keep)(this.$props, Card_1.cardBasePropKeys), { "aria-modal": "true", role: "dialog" }), $slots)) : ((this.childNodeRef = childNode))), dirs);
+                                        }
+                                    }));
+                                }
+                            })
+                        ];
+                    }
                 })), [
                 [
                     vue_1.vShow,

package/lib/modal/src/Modal.js

@@ -155,7 +155,7 @@ exports.default = (0, vue_1.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 && (0, _utils_1.eventEffectNotPerformed)(e)) {
                 !isComposingRef.value && doUpdateShow(false);
             }
         }
@@ -217,19 +217,24 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.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 (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, 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)), [
+                    (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, 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 ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.internalAppear) !== 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`, onClick: this.handleClickoutside })) : null;
+                                    }
+                                }));
+                            }
+                            : undefined }), this.$slots)), [
                     [
                         vdirs_1.zindexable,
                         {