@v-c/dialog 1.0.2 → 1.1.0-rc.1

package/dist/Dialog/Content/Panel.js

@@ -5,7 +5,8 @@ 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";
 import { getStylePxValue } from "@v-c/util/dist/props-util";
-var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
+//#region src/Dialog/Content/Panel.tsx
+var Panel = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	const { setPanel } = useGetRefContext();
 	const internalRef = shallowRef();
 	const mergeRefFun = (el) => {
@@ -48,7 +49,8 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 			"onClick": onClose,
 			"aria-label": "Close"
 		}, ariaProps, {
-			"class": `${prefixCls}-close`,
+			"class": classNames(`${prefixCls}-close`, modalClassNames?.close),
+			"style": modalStyles?.close,
 			"disabled": closeBtnIsDisabled
 		}), [closableObj.closeIcon]) : null;
 		const content = createVNode("div", {
@@ -90,8 +92,7 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		ariaId: {
 			type: String,
@@ -351,11 +352,11 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 		},
 		animationVisible: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "Panel",
 	inheritAttrs: false
 });
-export { Panel_default as default };
+//#endregion
+export { Panel as default };

package/dist/Dialog/Content/index.js

@@ -1,8 +1,9 @@
 import { offset } from "../../util.js";
-import Panel_default from "./Panel.js";
+import Panel from "./Panel.js";
 import { Transition, createVNode, defineComponent, mergeProps, nextTick, shallowRef, vShow, watch, withDirectives } from "vue";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
-var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+//#region src/Dialog/Content/index.tsx
+var Content = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const dialogRef = shallowRef();
 	const transformOrigin = shallowRef("");
 	function onPrepare() {
@@ -29,7 +30,7 @@ var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 				onVisibleChanged?.(false);
 				animationVisible.value = false;
 			}
-		}), { default: () => [visible || !destroyOnHidden ? withDirectives(createVNode(Panel_default, mergeProps(props, {
+		}), { default: () => [visible || !destroyOnHidden ? withDirectives(createVNode(Panel, mergeProps(props, {
 			"animationVisible": animationVisible.value,
 			"title": title,
 			"ariaId": ariaId,
@@ -58,13 +59,11 @@ var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		},
 		onVisibleChanged: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onMouseDown: {
 			type: Function,
@@ -320,4 +319,5 @@ var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	},
 	name: "Content"
 });
-export { Content_default as default };
+//#endregion
+export { Content as default };

package/dist/Dialog/Mask.js

@@ -1,7 +1,8 @@
 import { Transition, createVNode, defineComponent, mergeProps } from "vue";
 import { classNames } from "@v-c/util";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
-var Mask_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Dialog/Mask.tsx
+var Mask = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
 		const { maskProps, prefixCls, className, style, visible, motionName } = props;
 		return createVNode(Transition, mergeProps(getTransitionProps(motionName), { "key": "mask" }), { default: () => [visible && createVNode("div", mergeProps({
@@ -13,13 +14,11 @@ var Mask_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		visible: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		motionName: {
 			type: String,
@@ -44,4 +43,5 @@ var Mask_default = /* @__PURE__ */ defineComponent((props) => {
 	},
 	name: "Mask"
 });
-export { Mask_default as default };
+//#endregion
+export { Mask as default };

package/dist/Dialog/index.js

@@ -1,11 +1,12 @@
 import { getMotionName } from "../util.js";
-import Content_default from "./Content/index.js";
-import Mask_default from "./Mask.js";
-import { createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onUnmounted, shallowRef, useId, watch } from "vue";
+import Content from "./Content/index.js";
+import Mask from "./Mask.js";
+import { createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, useId, watch } from "vue";
 import { warning } from "@v-c/util";
 import contains from "@v-c/util/dist/Dom/contains";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
-var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
+//#region src/Dialog/index.tsx
+var Dialog = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	if (process.env.NODE_ENV !== "production") {
 		[
 			"wrapStyle",
@@ -40,53 +41,50 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 				lastOutSideActiveElementRef.value = null;
 			}
 			if (_animatedVisible) props?.afterClose?.();
-			props?.afterOpenChange?.(newVisible);
 		}
+		props?.afterOpenChange?.(newVisible);
 	}
 	function onInternalClose(e) {
 		props?.onClose?.(e);
 	}
-	const contentClickRef = shallowRef(false);
-	const contentTimeoutRef = shallowRef();
-	const onContentMouseDown = () => {
-		clearTimeout(contentTimeoutRef.value);
-		contentClickRef.value = true;
-	};
-	const onContentMouseUp = () => {
-		contentTimeoutRef.value = setTimeout(() => {
-			contentClickRef.value = false;
-		});
-	};
+	const mouseDownOnMaskRef = shallowRef(false);
 	let onWrapperClick = null;
 	watch(() => props.maskClosable, () => {
 		if (props.maskClosable) onWrapperClick = (e) => {
-			if (contentClickRef.value) contentClickRef.value = false;
-			else if (wrapperRef.value === e.target) onInternalClose(e);
+			if (wrapperRef.value === e.target && mouseDownOnMaskRef.value) onInternalClose(e);
 		};
+		else onWrapperClick = null;
 	}, { immediate: true });
+	function onWrapperMouseDown(e) {
+		mouseDownOnMaskRef.value = e.target === wrapperRef.value;
+	}
 	watch(() => props.visible, () => {
 		if (props.visible) {
+			mouseDownOnMaskRef.value = false;
 			animatedVisible.value = true;
 			saveLastOutSideActiveElementRef();
 			nextTick(() => {
 				const wrapEl = wrapperRef.value;
 				if (wrapEl) isFixedPos.value = getComputedStyle(wrapEl).position === "fixed";
 			});
-		}
+			if (!getMotionName(props.prefixCls, props.transitionName, props.animation)) nextTick(() => {
+				onDialogVisibleChanged(true);
+			});
+		} else if (animatedVisible.value && !getMotionName(props.prefixCls, props.transitionName, props.animation)) onDialogVisibleChanged(false);
 	}, { immediate: true });
-	onUnmounted(() => {
-		clearTimeout(contentTimeoutRef.value);
-	});
 	expose({});
 	return () => {
-		const { zIndex, wrapStyle, wrapProps, wrapClassName, closable, transitionName, animation, styles: modalStyles, prefixCls, rootClassName, visible, mask, maskAnimation, maskTransitionName, maskStyle, maskProps, classNames: modalClassNames } = props;
+		const { zIndex, wrapStyle, wrapProps, wrapClassName, closable, transitionName, animation, styles: modalStyles, prefixCls, rootClassName, visible, mask, maskAnimation, maskTransitionName, maskStyle, maskProps, classNames: modalClassNames, rootStyle } = props;
 		const mergedStyle = {
 			zIndex,
 			...wrapStyle,
 			...modalStyles?.wrapper,
 			display: !animatedVisible.value ? "none" : void 0
 		};
-		return createVNode("div", mergeProps({ "class": [`${prefixCls}-root`, rootClassName] }, pickAttrs(props, { data: true })), [createVNode(Mask_default, {
+		return createVNode("div", mergeProps({
+			"class": [`${prefixCls}-root`, rootClassName],
+			"style": rootStyle
+		}, pickAttrs(props, { data: true })), [createVNode(Mask, {
 			"prefixCls": prefixCls,
 			"visible": !!(mask && visible),
 			"motionName": getMotionName(prefixCls, maskTransitionName, maskAnimation),
@@ -105,11 +103,10 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			],
 			"ref": wrapperRef,
 			"onClick": onWrapperClick,
+			"onMousedown": onWrapperMouseDown,
 			"style": mergedStyle
-		}, wrapProps), [createVNode(Content_default, mergeProps({
+		}, wrapProps), [createVNode(Content, mergeProps({
 			...props,
-			onMouseDown: onContentMouseDown,
-			onMouseUp: onContentMouseUp,
 			onClose: onInternalClose,
 			onVisibleChanged: onDialogVisibleChanged
 		}, {
@@ -371,4 +368,5 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 	}),
 	name: "Dialog"
 });
-export { Dialog_default as default };
+//#endregion
+export { Dialog as default };

package/dist/DialogWrap.js

@@ -1,8 +1,9 @@
 import { useRefProvide } from "./context.js";
-import Dialog_default from "./Dialog/index.js";
+import Dialog from "./Dialog/index.js";
 import { createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
 import Portal from "@v-c/portal";
-var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+//#region src/DialogWrap.tsx
+var DialogWrap = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const animatedVisible = shallowRef(false);
 	useRefProvide(props);
 	const onEsc = ({ top, event }) => {
@@ -24,9 +25,10 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			"onEsc": onEsc,
 			"getContainer": getContainer,
 			"autoLock": visible || animatedVisible.value
-		}, { default: () => [createVNode(Dialog_default, mergeProps(props, {
+		}, { default: () => [createVNode(Dialog, mergeProps(props, {
 			"destroyOnHidden": destroyOnHidden,
 			"afterClose": () => {
+				(props.closable && typeof props.closable === "object" ? props.closable : {}).afterClose?.();
 				afterClose?.();
 				animatedVisible.value = false;
 			}
@@ -284,4 +286,5 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	}),
 	name: "Dialog"
 });
-export { DialogWrap_default as default };
+//#endregion
+export { DialogWrap as default };

package/dist/IDialogPropTypes.d.ts

@@ -1,9 +1,14 @@
 import { GetContainer } from '@v-c/util/dist/PortalWrapper';
 import { VueNode } from '@v-c/util/dist/type';
 import { CSSProperties } from 'vue';
-export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
+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 = {
+    closeIcon?: VueNode;
+    disabled?: boolean;
+    afterClose?: () => any;
+};
 export interface IDialogPropTypes {
     className?: string;
     keyboard?: boolean;
@@ -14,10 +19,7 @@ export interface IDialogPropTypes {
     afterClose?: () => any;
     afterOpenChange?: (open: boolean) => void;
     onClose?: (e: any) => any;
-    closable?: boolean | ({
-        closeIcon?: VueNode;
-        disabled?: boolean;
-    } & Record<string, any>);
+    closable?: boolean | (ClosableType & Record<string, any>);
     maskClosable?: boolean;
     visible?: boolean;
     destroyOnHidden?: boolean;

package/dist/context.js

@@ -1,4 +1,5 @@
 import { inject, provide, shallowRef } from "vue";
+//#region src/context.ts
 var RefContext = Symbol("RefContext");
 function useRefProvide(props) {
 	const panel = shallowRef();
@@ -8,8 +9,8 @@ function useRefProvide(props) {
 	};
 	provide(RefContext, {
 		panel,
-		setPanel(panel$1) {
-			setPanelRef(panel$1);
+		setPanel(panel) {
+			setPanelRef(panel);
 		}
 	});
 	return {
@@ -20,4 +21,5 @@ function useRefProvide(props) {
 function useGetRefContext() {
 	return inject(RefContext, {});
 }
+//#endregion
 export { useGetRefContext, useRefProvide };

package/dist/index.js

@@ -1,4 +1,6 @@
-import Panel_default from "./Dialog/Content/Panel.js";
-import DialogWrap_default from "./DialogWrap.js";
-var src_default = DialogWrap_default;
-export { Panel_default as Panel, src_default as default };
+import Panel from "./Dialog/Content/Panel.js";
+import DialogWrap from "./DialogWrap.js";
+//#region src/index.ts
+var src_default = DialogWrap;
+//#endregion
+export { Panel, src_default as default };

package/dist/util.js

@@ -1,3 +1,4 @@
+//#region src/util.ts
 function getMotionName(prefixCls, transitionName, animationName) {
 	let motionName = transitionName;
 	if (!motionName && animationName) motionName = `${prefixCls}-${animationName}`;
@@ -27,4 +28,5 @@ function offset(el) {
 	}
 	return pos;
 }
+//#endregion
 export { getMotionName, offset };

package/package.json

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