@v-c/dialog 0.0.1 → 0.0.3

package/dist/Dialog/Content/Panel.cjs

@@ -1,10 +1,14 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
 const require_context = require("../../context.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
-__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 var sentinelStyle = {
 	width: 0,
 	height: 0,
@@ -35,23 +39,27 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 	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 contentStyle = {};
-		if (width !== void 0) contentStyle.width = width;
-		if (height !== void 0) contentStyle.height = height;
+		if (width !== void 0) contentStyle.width = (0, _v_c_util_dist_props_util.getStylePxValue)(width);
+		if (height !== void 0) contentStyle.height = (0, _v_c_util_dist_props_util.getStylePxValue)(height);
 		const footerNode = footer ? (0, vue.createVNode)("div", {
-			"class": (0, __v_c_util.classNames)(`${prefixCls}-footer`, modalClassNames?.footer),
+			"class": (0, _v_c_util.classNames)(`${prefixCls}-footer`, modalClassNames?.footer),
 			"style": { ...modalStyles?.footer }
 		}, [footer]) : null;
 		const headerNode = title ? (0, vue.createVNode)("div", {
-			"class": (0, __v_c_util.classNames)(`${prefixCls}-header`, modalClassNames?.header),
+			"class": (0, _v_c_util.classNames)(`${prefixCls}-header`, modalClassNames?.header),
 			"style": { ...modalStyles?.header }
-		}, [title]) : null;
+		}, [(0, vue.createVNode)("div", {
+			"class": (0, _v_c_util.clsx)(`${prefixCls}-title`, modalClassNames?.title),
+			"id": ariaId,
+			"style": { ...modalStyles?.title }
+		}, [title])]) : null;
 		const closableFun = () => {
 			if (typeof closable === "object" && closable !== null) return closable;
 			if (closable) return { closeIcon: closeIcon ?? (0, vue.createVNode)("span", { "class": `${prefixCls}-close-x` }, null) };
 			return {};
 		};
 		const closableObj = closableFun();
-		const ariaProps = (0, __v_c_util_dist_pickAttrs.default)(closableObj, true);
+		const ariaProps = (0, _v_c_util_dist_pickAttrs.default)(closableObj, true);
 		const closeBtnIsDisabled = typeof closable === "object" && closable?.disabled;
 		const closerNode = closable ? (0, vue.createVNode)("button", (0, vue.mergeProps)({
 			"type": "button",
@@ -62,13 +70,13 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			"disabled": closeBtnIsDisabled
 		}), [closableObj.closeIcon]) : null;
 		const content = (0, vue.createVNode)("div", {
-			"class": (0, __v_c_util.classNames)(`${prefixCls}-container`, modalClassNames?.container),
+			"class": (0, _v_c_util.classNames)(`${prefixCls}-container`, modalClassNames?.container),
 			"style": modalStyles?.container
 		}, [
 			closerNode,
 			headerNode,
 			(0, vue.createVNode)("div", (0, vue.mergeProps)({
-				"class": (0, __v_c_util.classNames)(`${prefixCls}-body`, modalClassNames?.body),
+				"class": (0, _v_c_util.classNames)(`${prefixCls}-body`, modalClassNames?.body),
 				"style": {
 					...bodyStyle,
 					...modalStyles?.body

package/dist/Dialog/Content/Panel.js

@@ -1,7 +1,8 @@
 import { useGetRefContext } from "../../context.js";
 import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
-import { classNames } from "@v-c/util";
+import { classNames, clsx } from "@v-c/util";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
+import { getStylePxValue } from "@v-c/util/dist/props-util";
 var sentinelStyle = {
 	width: 0,
 	height: 0,
@@ -32,8 +33,8 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 	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 contentStyle = {};
-		if (width !== void 0) contentStyle.width = width;
-		if (height !== void 0) contentStyle.height = height;
+		if (width !== void 0) contentStyle.width = getStylePxValue(width);
+		if (height !== void 0) contentStyle.height = getStylePxValue(height);
 		const footerNode = footer ? createVNode("div", {
 			"class": classNames(`${prefixCls}-footer`, modalClassNames?.footer),
 			"style": { ...modalStyles?.footer }
@@ -41,7 +42,11 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 		const headerNode = title ? createVNode("div", {
 			"class": classNames(`${prefixCls}-header`, modalClassNames?.header),
 			"style": { ...modalStyles?.header }
-		}, [title]) : null;
+		}, [createVNode("div", {
+			"class": clsx(`${prefixCls}-title`, modalClassNames?.title),
+			"id": ariaId,
+			"style": { ...modalStyles?.title }
+		}, [title])]) : null;
 		const closableFun = () => {
 			if (typeof closable === "object" && closable !== null) return closable;
 			if (closable) return { closeIcon: closeIcon ?? createVNode("span", { "class": `${prefixCls}-close-x` }, null) };

package/dist/Dialog/Content/index.cjs

@@ -1,9 +1,12 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
 const require_util = require("../../util.cjs");
 const require_Panel = require("./Panel.cjs");
 let vue = require("vue");
-let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
+let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
 var Content = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 	const dialogRef = (0, vue.shallowRef)();
 	const transformOrigin = (0, vue.shallowRef)("");
@@ -24,7 +27,7 @@ var Content = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 		const { prefixCls, className, style, visible, destroyOnHidden, onVisibleChanged, ariaId, title, motionName } = props;
 		const contentStyle = {};
 		if (transformOrigin.value) contentStyle.transformOrigin = transformOrigin.value;
-		return (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, __v_c_util_dist_utils_transition.getTransitionProps)(motionName), {
+		return (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, _v_c_util_dist_utils_transition.getTransitionProps)(motionName), {
 			"onBeforeEnter": onPrepare,
 			"onAfterEnter": () => onVisibleChanged?.(true),
 			"onAfterLeave": () => {

package/dist/Dialog/Mask.cjs

@@ -1,14 +1,17 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
 var Mask = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	return () => {
 		const { maskProps, prefixCls, className, style, visible, motionName } = props;
-		return (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, __v_c_util_dist_utils_transition.getTransitionProps)(motionName), { "key": "mask" }), { default: () => [visible && (0, vue.createVNode)("div", (0, vue.mergeProps)({
+		return (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, _v_c_util_dist_utils_transition.getTransitionProps)(motionName), { "key": "mask" }), { default: () => [visible && (0, vue.createVNode)("div", (0, vue.mergeProps)({
 			"style": [style],
-			"class": (0, __v_c_util.classNames)(`${prefixCls}-mask`, className)
+			"class": (0, _v_c_util.classNames)(`${prefixCls}-mask`, className)
 		}, maskProps), null)] });
 	};
 }, {

package/dist/Dialog/index.cjs

@@ -1,16 +1,19 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_util = require("../util.cjs");
 const require_index = require("./Content/index.cjs");
 const require_Mask = require("./Mask.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_Dom_contains = require("@v-c/util/dist/Dom/contains");
-__v_c_util_dist_Dom_contains = require_rolldown_runtime.__toESM(__v_c_util_dist_Dom_contains);
-let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
-__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
-let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
-__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_Dom_contains = require("@v-c/util/dist/Dom/contains");
+_v_c_util_dist_Dom_contains = require_rolldown_runtime.__toESM(_v_c_util_dist_Dom_contains);
+let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
+let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
 var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
 	if (process.env.NODE_ENV !== "production") {
 		[
@@ -18,9 +21,9 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			"bodyStyle",
 			"maskStyle"
 		].forEach((prop) => {
-			(0, __v_c_util.warning)(!(prop in props && props[prop]), `${prop} is deprecated, please use styles instead.`);
+			(0, _v_c_util.warning)(!(prop in props && props[prop]), `${prop} is deprecated, please use styles instead.`);
 		});
-		if ("wrapClassName" in props && props.wrapClassName) (0, __v_c_util.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
+		if ("wrapClassName" in props && props.wrapClassName) (0, _v_c_util.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
 	}
 	const lastOutSideActiveElementRef = (0, vue.shallowRef)(null);
 	const wrapperRef = (0, vue.shallowRef)();
@@ -28,14 +31,15 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 	const animatedVisible = (0, vue.shallowRef)(props.visible);
 	const ariaId = (0, vue.useId)();
 	function saveLastOutSideActiveElementRef() {
-		if (!(0, __v_c_util_dist_Dom_contains.default)(wrapperRef.value, document.activeElement)) lastOutSideActiveElementRef.value = document.activeElement;
+		if (!(0, _v_c_util_dist_Dom_contains.default)(wrapperRef.value, document.activeElement)) lastOutSideActiveElementRef.value = document.activeElement;
 	}
 	function focusDialogContent() {
-		if (!(0, __v_c_util_dist_Dom_contains.default)(wrapperRef.value, document.activeElement)) contentRef.value?.focus?.();
+		if (!(0, _v_c_util_dist_Dom_contains.default)(wrapperRef.value, document.activeElement)) contentRef.value?.focus?.();
 	}
 	function onDialogVisibleChanged(newVisible) {
 		if (newVisible) focusDialogContent();
 		else {
+			const _animatedVisible = animatedVisible.value;
 			animatedVisible.value = false;
 			if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
 				try {
@@ -43,7 +47,7 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 				} catch (e) {}
 				lastOutSideActiveElementRef.value = null;
 			}
-			if (animatedVisible.value) props?.afterClose?.();
+			if (_animatedVisible) props?.afterClose?.();
 			props?.afterOpenChange?.(newVisible);
 		}
 	}
@@ -69,11 +73,11 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 		};
 	}, { immediate: true });
 	function onWrapperKeyDown(e) {
-		if (props.keyboard && e === __v_c_util_dist_KeyCode.default.ESC) {
+		if (props.keyboard && e === _v_c_util_dist_KeyCode.default.ESC) {
 			e.stopPropagation();
 			onInternalClose(e);
 		}
-		if (props.visible && e.keyCode === __v_c_util_dist_KeyCode.default.TAB) contentRef.value?.changeActive?.(!e.shiftKey);
+		if (props.visible && e.keyCode === _v_c_util_dist_KeyCode.default.TAB) contentRef.value?.changeActive?.(!e.shiftKey);
 	}
 	(0, vue.watch)(() => props.visible, () => {
 		if (props.visible) {
@@ -93,7 +97,7 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			...modalStyles?.wrapper,
 			display: !animatedVisible.value ? "none" : void 0
 		};
-		return (0, vue.createVNode)("div", (0, vue.mergeProps)({ "class": [`${prefixCls}-root`, rootClassName] }, (0, __v_c_util_dist_pickAttrs.default)(props, { data: true })), [(0, vue.createVNode)(require_Mask.default, {
+		return (0, vue.createVNode)("div", (0, vue.mergeProps)({ "class": [`${prefixCls}-root`, rootClassName] }, (0, _v_c_util_dist_pickAttrs.default)(props, { data: true })), [(0, vue.createVNode)(require_Mask.default, {
 			"prefixCls": prefixCls,
 			"visible": !!(mask && visible),
 			"motionName": require_util.getMotionName(prefixCls, maskTransitionName, maskAnimation),

package/dist/Dialog/index.js

@@ -31,6 +31,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 	function onDialogVisibleChanged(newVisible) {
 		if (newVisible) focusDialogContent();
 		else {
+			const _animatedVisible = animatedVisible.value;
 			animatedVisible.value = false;
 			if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
 				try {
@@ -38,7 +39,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 				} catch (e) {}
 				lastOutSideActiveElementRef.value = null;
 			}
-			if (animatedVisible.value) props?.afterClose?.();
+			if (_animatedVisible) props?.afterClose?.();
 			props?.afterOpenChange?.(newVisible);
 		}
 	}

package/dist/DialogWrap.cjs

@@ -1,27 +1,27 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_context = require("./context.cjs");
 const require_index = require("./Dialog/index.cjs");
 let vue = require("vue");
-let __v_c_portal = require("@v-c/portal");
-__v_c_portal = require_rolldown_runtime.__toESM(__v_c_portal);
+let _v_c_portal = require("@v-c/portal");
+_v_c_portal = require_rolldown_runtime.__toESM(_v_c_portal);
 var DialogWrap = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 	const animatedVisible = (0, vue.shallowRef)(false);
-	const { setPanelRef } = require_context.useRefProvide();
-	(0, vue.watch)(() => props.panelRef, () => {
-		setPanelRef(props.panelRef);
-	}, { immediate: true });
+	require_context.useRefProvide(props);
 	(0, vue.watch)(() => props.visible, () => {
 		if (props.visible) animatedVisible.value = true;
 	}, { immediate: true });
 	return () => {
 		const { visible, getContainer, forceRender, destroyOnHidden = false, afterClose } = props;
-		if (!forceRender && destroyOnHidden && !animatedVisible) return null;
-		return (0, vue.createVNode)(__v_c_portal.default, {
-			"open": !!(visible || forceRender || animatedVisible),
+		if (!forceRender && destroyOnHidden && !animatedVisible.value) return null;
+		return (0, vue.createVNode)(_v_c_portal.default, {
+			"open": visible || forceRender || animatedVisible.value,
 			"autoDestroy": false,
 			"getContainer": getContainer,
-			"autoLock": !!(visible || animatedVisible)
+			"autoLock": visible || animatedVisible.value
 		}, { default: () => [(0, vue.createVNode)(require_index.default, (0, vue.mergeProps)(props, {
 			"destroyOnHidden": destroyOnHidden,
 			"afterClose": () => {

package/dist/DialogWrap.js

@@ -4,21 +4,18 @@ import { createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, wa
 import Portal from "@v-c/portal";
 var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const animatedVisible = shallowRef(false);
-	const { setPanelRef } = useRefProvide();
-	watch(() => props.panelRef, () => {
-		setPanelRef(props.panelRef);
-	}, { immediate: true });
+	useRefProvide(props);
 	watch(() => props.visible, () => {
 		if (props.visible) animatedVisible.value = true;
 	}, { immediate: true });
 	return () => {
 		const { visible, getContainer, forceRender, destroyOnHidden = false, afterClose } = props;
-		if (!forceRender && destroyOnHidden && !animatedVisible) return null;
+		if (!forceRender && destroyOnHidden && !animatedVisible.value) return null;
 		return createVNode(Portal, {
-			"open": !!(visible || forceRender || animatedVisible),
+			"open": visible || forceRender || animatedVisible.value,
 			"autoDestroy": false,
 			"getContainer": getContainer,
-			"autoLock": !!(visible || animatedVisible)
+			"autoLock": visible || animatedVisible.value
 		}, { default: () => [createVNode(Dialog_default, mergeProps(props, {
 			"destroyOnHidden": destroyOnHidden,
 			"afterClose": () => {

package/dist/IDialogPropTypes.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/context.cjs

@@ -1,9 +1,11 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 var RefContext = Symbol("RefContext");
-function useRefProvide() {
+function useRefProvide(props) {
 	const panel = (0, vue.shallowRef)();
 	const setPanelRef = (el) => {
+		if (typeof props.panelRef === "function") props.panelRef(el);
 		panel.value = el;
 	};
 	(0, vue.provide)(RefContext, {

package/dist/context.d.ts

@@ -1,9 +1,10 @@
 import { ShallowRef } from 'vue';
+import { IDialogPropTypes } from './IDialogPropTypes.ts';
 export interface RefContextProps {
     panel: ShallowRef<HTMLDivElement | undefined>;
     setPanel: (panel: HTMLDivElement) => void;
 }
-export declare function useRefProvide(): {
+export declare function useRefProvide(props: IDialogPropTypes): {
     panel: ShallowRef<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     setPanelRef: (el: HTMLDivElement) => void;
 };

package/dist/context.js

@@ -1,8 +1,9 @@
 import { inject, provide, shallowRef } from "vue";
 var RefContext = Symbol("RefContext");
-function useRefProvide() {
+function useRefProvide(props) {
 	const panel = shallowRef();
 	const setPanelRef = (el) => {
+		if (typeof props.panelRef === "function") props.panelRef(el);
 		panel.value = el;
 	};
 	provide(RefContext, {

package/dist/index.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_Panel = require("./Dialog/Content/Panel.cjs");
 const require_DialogWrap = require("./DialogWrap.cjs");
 var src_default = require_DialogWrap.default;

package/dist/util.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function getMotionName(prefixCls, transitionName, animationName) {
 	let motionName = transitionName;
 	if (!motionName && animationName) motionName = `${prefixCls}-${animationName}`;

package/package.json

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