@v-c/dialog 1.1.0 → 1.2.0

package/dist/Dialog/Content/Panel.d.ts

@@ -12,9 +12,5 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
 export interface ContentRef {
     focus: () => void;
 }
-declare const Panel: import('vue').DefineSetupFnComponent<PanelProps & {
-    animationVisible: boolean;
-}, {}, {}, PanelProps & {
-    animationVisible: boolean;
-} & {}, import('vue').PublicProps>;
+declare const Panel: import('vue').DefineSetupFnComponent<PanelProps, {}, {}, PanelProps & {}, import('vue').PublicProps>;
 export default Panel;

package/dist/Dialog/Content/Panel.js

@@ -20,7 +20,7 @@ var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		internalRef.value?.focus?.({ preventScroll: true });
 	} });
 	return () => {
-		const { width, height, footer, prefixCls, classNames: modalClassNames, styles: modalStyles, title, closable, closeIcon, bodyProps, bodyStyle, ariaId, style, className, forceRender, onClose, onMouseDown, onMouseUp, modalRender, animationVisible } = props;
+		const { width, height, footer, prefixCls, classNames: modalClassNames, styles: modalStyles, title, closable, closeIcon, bodyProps, bodyStyle, ariaId, style, className, forceRender, onClose, onMouseDown, onMouseUp, modalRender } = props;
 		const contentStyle = {};
 		if (width !== void 0) contentStyle.width = getStylePxValue(width);
 		if (height !== void 0) contentStyle.height = getStylePxValue(height);
@@ -69,7 +69,6 @@ var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 			footerNode
 		]);
 		const renderContent = () => {
-			if (!animationVisible && forceRender) return null;
 			return modalRender ? modalRender(content) : content;
 		};
 		return createVNode("div", mergeProps({
@@ -346,13 +345,14 @@ var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 			required: false,
 			default: void 0
 		},
-		panelRef: {
+		scrollLock: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		animationVisible: {
-			type: Boolean,
-			required: true
+		panelRef: {
+			required: false,
+			default: void 0
 		}
 	},
 	name: "Panel",

package/dist/Dialog/Content/index.js

@@ -1,6 +1,6 @@
 import { offset } from "../../util.js";
 import Panel from "./Panel.js";
-import { Transition, createVNode, defineComponent, mergeProps, nextTick, shallowRef, vShow, watch, withDirectives } from "vue";
+import { Transition, createVNode, defineComponent, mergeProps, nextTick, shallowRef, vShow, withDirectives } from "vue";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
 //#region src/Dialog/Content/index.tsx
 var Content = /* @__PURE__ */ defineComponent((props, { slots }) => {
@@ -15,12 +15,8 @@ var Content = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			}
 		});
 	}
-	const animationVisible = shallowRef(props.visible);
-	watch(() => props.visible, () => {
-		if (props.visible) animationVisible.value = true;
-	});
 	return () => {
-		const { prefixCls, className, style, visible, destroyOnHidden, onVisibleChanged, ariaId, title, motionName } = props;
+		const { prefixCls, className, style, visible, destroyOnHidden, onVisibleChanged, ariaId, title, motionName, forceRender } = props;
 		const contentStyle = {};
 		if (transformOrigin.value) contentStyle.transformOrigin = transformOrigin.value;
 		return createVNode(Transition, mergeProps(getTransitionProps(motionName), {
@@ -28,10 +24,8 @@ var Content = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			"onAfterEnter": () => onVisibleChanged?.(true),
 			"onAfterLeave": () => {
 				onVisibleChanged?.(false);
-				animationVisible.value = false;
 			}
-		}), { default: () => [visible || !destroyOnHidden ? withDirectives(createVNode(Panel, mergeProps(props, {
-			"animationVisible": animationVisible.value,
+		}), { default: () => [visible || !destroyOnHidden || forceRender ? withDirectives(createVNode(Panel, mergeProps(props, {
 			"title": title,
 			"ariaId": ariaId,
 			"prefixCls": prefixCls,
@@ -312,6 +306,11 @@ var Content = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		scrollLock: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

package/dist/Dialog/index.js

@@ -353,6 +353,11 @@ var Dialog = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 			required: false,
 			default: void 0
 		},
+		scrollLock: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

package/dist/DialogWrap.js

@@ -17,15 +17,16 @@ var DialogWrap = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		if (props.visible) animatedVisible.value = true;
 	}, { immediate: true });
 	return () => {
-		const { visible, getContainer, forceRender, destroyOnHidden = false, afterClose } = props;
+		const { visible, getContainer, forceRender, destroyOnHidden = false, scrollLock = true, afterClose } = props;
+		const { scrollLock: _, ...restProps } = props;
 		if (!forceRender && destroyOnHidden && !animatedVisible.value) return null;
 		return createVNode(Portal, {
 			"open": visible || forceRender || animatedVisible.value,
 			"autoDestroy": false,
 			"onEsc": onEsc,
 			"getContainer": getContainer,
-			"autoLock": visible || animatedVisible.value
-		}, { default: () => [createVNode(Dialog, mergeProps(props, {
+			"autoLock": scrollLock && (visible || animatedVisible.value)
+		}, { default: () => [createVNode(Dialog, mergeProps(restProps, {
 			"destroyOnHidden": destroyOnHidden,
 			"afterClose": () => {
 				(props.closable && typeof props.closable === "object" ? props.closable : {}).afterClose?.();
@@ -268,6 +269,11 @@ var DialogWrap = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		scrollLock: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

package/dist/IDialogPropTypes.d.ts

@@ -4,11 +4,11 @@ import { CSSProperties } from 'vue';
 export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask' | 'close';
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
-export type ClosableType = {
+export interface ClosableType {
     closeIcon?: VueNode;
     disabled?: boolean;
     afterClose?: () => any;
-};
+}
 export interface IDialogPropTypes {
     className?: string;
     keyboard?: boolean;
@@ -53,5 +53,7 @@ export interface IDialogPropTypes {
     forceRender?: boolean;
     focusTriggerAfterClose?: boolean;
     focusTrap?: boolean;
+    /** Control whether to lock body scroll when modal opens. Default is true. */
+    scrollLock?: boolean;
     panelRef?: any;
 }

package/dist/util.js

@@ -5,6 +5,7 @@ function getMotionName(prefixCls, transitionName, animationName) {
 	return motionName;
 }
 function getScroll(w, top) {
+	if (!w) return 0;
 	let ret = w[`page${top ? "Y" : "X"}Offset`];
 	const method = `scroll${top ? "Top" : "Left"}`;
 	if (typeof ret !== "number") {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/dialog",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",