naive-ui 2.30.3 → 2.30.4

package/es/layout/src/Layout.d.ts

@@ -1,6 +1,6 @@
 import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import type { ScrollbarProps } from '../../_internal';
-import { ExtractPublicPropTypes } from '../../_utils';
+import type { ExtractPublicPropTypes } from '../../_utils';
 declare const layoutProps: {
     readonly embedded: BooleanConstructor;
     readonly position: {
@@ -319,6 +319,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;
@@ -718,6 +719,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;

package/es/layout/src/Layout.js

@@ -1,10 +1,10 @@
 import { h, defineComponent, computed, ref, provide } from 'vue';
 import { NScrollbar } from '../../_internal';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { createInjectionKey, useReactivated } from '../../_utils';
 import { layoutLight } from '../styles';
-import style from './styles/layout.cssr';
 import { positionProp } from './interface';
-import { createInjectionKey } from '../../_utils';
+import style from './styles/layout.cssr';
 const layoutProps = {
     embedded: Boolean,
     position: positionProp,
@@ -55,6 +55,24 @@ export function createLayoutComponent(isContent) {
                 }
             }
             provide(layoutInjectionKey, props);
+            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;
+                    }
+                }
+            });
             const hasSiderStyle = {
                 display: 'flex',
                 flexWrap: 'nowrap',
@@ -77,7 +95,7 @@ export function createLayoutComponent(isContent) {
                 : undefined;
             return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                 scrollbarInstRef,
-                hasSiderStyle, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+                hasSiderStyle, mergedTheme: themeRef, handleNativeElScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
         },
         render() {
             var _a;
@@ -90,7 +108,7 @@ export function createLayoutComponent(isContent) {
                 `${mergedClsPrefix}-layout`,
                 `${mergedClsPrefix}-layout--${this.position}-positioned`
             ];
-            return (h("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? (h("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.onScroll }, this.$slots)) : (h(NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
+            return (h("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? (h("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.handleNativeElScroll }, this.$slots)) : (h(NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
         }
     });
 }

package/es/layout/src/LayoutContent.d.ts

@@ -271,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;

package/es/layout/src/LayoutSider.d.ts

@@ -362,6 +362,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedCollapsed: import("vue").ComputedRef<boolean>;
     scrollContainerStyle: import("vue").ComputedRef<CSSProperties>;
     siderPlacement: import("vue").ComputedRef<"left" | "right">;
+    handleNativeElScroll: (e: Event) => void;
     handleTransitionend: (e: TransitionEvent) => void;
     handleTriggerClick: () => void;
     inlineThemeDisabled: boolean | undefined;

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

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
@@ -746,7 +746,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;

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);
             }
         }