@v-c/dialog 1.0.1 → 1.0.3

package/dist/Dialog/Content/Panel.js

@@ -3,6 +3,7 @@ import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "
 import { classNames, clsx } 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";
 import { getStylePxValue } from "@v-c/util/dist/props-util";
 var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	const { setPanel } = useGetRefContext();
@@ -12,7 +13,8 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 		setPanel?.(el);
 		props?.holderRef?.(el);
 	};
-	useLockFocus(computed(() => !!props.visible && !!props.isFixedPos && props.focusTrap !== false), () => internalRef.value);
+	const [, registerAllowedElement] = useLockFocus(computed(() => !!props.visible && !!props.isFixedPos && props.focusTrap !== false), () => internalRef.value);
+	useFocusBoundaryProvider({ registerAllowedElement });
 	expose({ focus: () => {
 		internalRef.value?.focus?.({ preventScroll: true });
 	} });
@@ -46,7 +48,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", {

package/dist/Dialog/index.js

@@ -1,7 +1,7 @@
 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 { 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";
@@ -40,53 +40,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_default, {
 			"prefixCls": prefixCls,
 			"visible": !!(mask && visible),
 			"motionName": getMotionName(prefixCls, maskTransitionName, maskAnimation),
@@ -105,11 +102,10 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			],
 			"ref": wrapperRef,
 			"onClick": onWrapperClick,
+			"onMousedown": onWrapperMouseDown,
 			"style": mergedStyle
 		}, wrapProps), [createVNode(Content_default, mergeProps({
 			...props,
-			onMouseDown: onContentMouseDown,
-			onMouseUp: onContentMouseUp,
 			onClose: onInternalClose,
 			onVisibleChanged: onDialogVisibleChanged
 		}, {

package/dist/DialogWrap.js

@@ -27,6 +27,7 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		}, { default: () => [createVNode(Dialog_default, mergeProps(props, {
 			"destroyOnHidden": destroyOnHidden,
 			"afterClose": () => {
+				(props.closable && typeof props.closable === "object" ? props.closable : {}).afterClose?.();
 				afterClose?.();
 				animatedVisible.value = false;
 			}

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/dialog",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.7",
-    "@v-c/util": "^1.0.12"
+    "@v-c/portal": "^1.0.8",
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",