@v-c/dialog 1.1.1 → 1.2.1

package/dist/Dialog/Content/Panel.js

@@ -1,6 +1,6 @@
 import { useGetRefContext } from "../../context.js";
 import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
-import { classNames, clsx } from "@v-c/util";
+import { classNames, clsx, isVueRenderable } from "@v-c/util";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 import { useLockFocus } from "@v-c/util/dist/Dom/focus";
 import { useFocusBoundaryProvider } from "@v-c/util/dist/Dom/focusBoundary";
@@ -24,11 +24,13 @@ var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		const contentStyle = {};
 		if (width !== void 0) contentStyle.width = getStylePxValue(width);
 		if (height !== void 0) contentStyle.height = getStylePxValue(height);
-		const footerNode = footer ? createVNode("div", {
+		const hasFooter = isVueRenderable(footer);
+		const hasTitle = isVueRenderable(title);
+		const footerNode = hasFooter ? createVNode("div", {
 			"class": classNames(`${prefixCls}-footer`, modalClassNames?.footer),
 			"style": { ...modalStyles?.footer }
 		}, [footer]) : null;
-		const headerNode = title ? createVNode("div", {
+		const headerNode = hasTitle ? createVNode("div", {
 			"class": classNames(`${prefixCls}-header`, modalClassNames?.header),
 			"style": { ...modalStyles?.header }
 		}, [createVNode("div", {
@@ -74,7 +76,7 @@ var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		return createVNode("div", mergeProps({
 			"key": "dialog-element",
 			"role": "dialog"
-		}, { "aria-labelledby": title ? ariaId : null }, {
+		}, { "aria-labelledby": hasTitle ? ariaId : null }, {
 			"aria-modal": "true",
 			"ref": mergeRefFun,
 			"style": {
@@ -345,6 +347,11 @@ var Panel = /* @__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/Dialog/Content/index.js

@@ -306,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

@@ -65,7 +65,10 @@ var Dialog = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 			saveLastOutSideActiveElementRef();
 			nextTick(() => {
 				const wrapEl = wrapperRef.value;
-				if (wrapEl) isFixedPos.value = getComputedStyle(wrapEl).position === "fixed";
+				if (wrapEl) {
+					const computedStyle = getComputedStyle(wrapEl);
+					isFixedPos.value = computedStyle.position === "fixed";
+				}
 			});
 			if (!getMotionName(props.prefixCls, props.transitionName, props.animation)) nextTick(() => {
 				onDialogVisibleChanged(true);
@@ -120,7 +123,7 @@ var Dialog = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		}), slots)])]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		className: {
 			type: String,
 			required: false,
@@ -353,6 +356,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?.();
@@ -35,7 +36,7 @@ var DialogWrap = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		}), slots)] });
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		className: {
 			type: String,
 			required: false,
@@ -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,13 @@
 {
   "name": "@v-c/dialog",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.2.1",
+  "license": "MIT",
+  "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/dialog",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antdv-next/vue-components.git"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +31,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.19",
-    "@v-c/portal": "^1.0.8"
+    "@v-c/portal": "^1.0.8",
+    "@v-c/util": "^1.2.0"
   },
   "scripts": {
     "build": "vite build",