@v-c/dialog 0.0.2 → 0.0.4

package/dist/Dialog/Content/Panel.cjs

@@ -1,52 +1,41 @@
-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_dist_props_util = require("@v-c/util/dist/props-util");
-var sentinelStyle = {
-	width: 0,
-	height: 0,
-	overflow: "hidden",
-	outline: "none"
-};
-var entityStyle = { outline: "none" };
+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_Dom_focus = require("@v-c/util/dist/Dom/focus");
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
 	const { setPanel } = require_context.useGetRefContext();
-	const mergedRef = (0, vue.shallowRef)();
+	const internalRef = (0, vue.shallowRef)();
 	const mergeRefFun = (el) => {
-		mergedRef.value = el;
-		setPanel(el);
+		internalRef.value = el;
+		setPanel?.(el);
 		props?.holderRef?.(el);
 	};
-	const sentinelStartRef = (0, vue.shallowRef)();
-	const sentinelEndRef = (0, vue.shallowRef)();
-	expose({
-		focus: () => {
-			sentinelStartRef.value?.focus?.({ preventScroll: true });
-		},
-		changeActive: (next) => {
-			const { activeElement } = document;
-			if (next && activeElement === sentinelEndRef.value) sentinelStartRef.value?.focus?.({ preventScroll: true });
-			else if (!next && activeElement === sentinelStartRef.value) sentinelEndRef.value?.focus?.({ preventScroll: true });
-		}
-	});
+	(0, _v_c_util_dist_Dom_focus.useLockFocus)((0, vue.computed)(() => !!props.visible && !!props.isFixedPos && props.focusTrap !== false), () => internalRef.value);
+	expose({ focus: () => {
+		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 contentStyle = {};
-		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);
+		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 }
 		}, [(0, vue.createVNode)("div", {
-			"class": (0, __v_c_util.clsx)(`${prefixCls}-title`, modalClassNames?.title),
+			"class": (0, _v_c_util.clsx)(`${prefixCls}-title`, modalClassNames?.title),
 			"id": ariaId,
 			"style": { ...modalStyles?.title }
 		}, [title])]) : null;
@@ -56,7 +45,7 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			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",
@@ -67,13 +56,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
@@ -97,16 +86,9 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			},
 			"class": [prefixCls, className],
 			"onMousedown": onMouseDown,
-			"onMouseup": onMouseUp
-		}), [(0, vue.createVNode)("div", {
-			"ref": sentinelStartRef,
-			"tabindex": 0,
-			"style": entityStyle
-		}, [renderContent()]), (0, vue.createVNode)("div", {
-			"tabindex": 0,
-			"ref": sentinelEndRef,
-			"style": sentinelStyle
-		}, null)]);
+			"onMouseup": onMouseUp,
+			"tabindex": -1
+		}), [renderContent()]);
 	};
 }, {
 	props: {
@@ -135,6 +117,11 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			required: false,
 			default: void 0
 		},
+		isFixedPos: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		className: {
 			type: String,
 			required: false,
@@ -357,6 +344,11 @@ var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

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

@@ -6,10 +6,11 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
     onMouseDown?: (e: MouseEvent) => void;
     onMouseUp?: MouseEventHandler;
     holderRef?: (el: HTMLDivElement) => void;
+    /** Used for focus lock. When true and open, focus will lock into the panel */
+    isFixedPos?: boolean;
 }
 export interface ContentRef {
     focus: () => void;
-    changeActive: (next: boolean) => void;
 }
 declare const Panel: import('vue').DefineSetupFnComponent<PanelProps & {
     animationVisible: boolean;

package/dist/Dialog/Content/Panel.js

@@ -1,35 +1,21 @@
 import { useGetRefContext } from "../../context.js";
-import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
 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 { getStylePxValue } from "@v-c/util/dist/props-util";
-var sentinelStyle = {
-	width: 0,
-	height: 0,
-	overflow: "hidden",
-	outline: "none"
-};
-var entityStyle = { outline: "none" };
 var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	const { setPanel } = useGetRefContext();
-	const mergedRef = shallowRef();
+	const internalRef = shallowRef();
 	const mergeRefFun = (el) => {
-		mergedRef.value = el;
-		setPanel(el);
+		internalRef.value = el;
+		setPanel?.(el);
 		props?.holderRef?.(el);
 	};
-	const sentinelStartRef = shallowRef();
-	const sentinelEndRef = shallowRef();
-	expose({
-		focus: () => {
-			sentinelStartRef.value?.focus?.({ preventScroll: true });
-		},
-		changeActive: (next) => {
-			const { activeElement } = document;
-			if (next && activeElement === sentinelEndRef.value) sentinelStartRef.value?.focus?.({ preventScroll: true });
-			else if (!next && activeElement === sentinelStartRef.value) sentinelEndRef.value?.focus?.({ preventScroll: true });
-		}
-	});
+	useLockFocus(computed(() => !!props.visible && !!props.isFixedPos && props.focusTrap !== false), () => internalRef.value);
+	expose({ focus: () => {
+		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 contentStyle = {};
@@ -94,16 +80,9 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 			},
 			"class": [prefixCls, className],
 			"onMousedown": onMouseDown,
-			"onMouseup": onMouseUp
-		}), [createVNode("div", {
-			"ref": sentinelStartRef,
-			"tabindex": 0,
-			"style": entityStyle
-		}, [renderContent()]), createVNode("div", {
-			"tabindex": 0,
-			"ref": sentinelEndRef,
-			"style": sentinelStyle
-		}, null)]);
+			"onMouseup": onMouseUp,
+			"tabindex": -1
+		}), [renderContent()]);
 	};
 }, {
 	props: {
@@ -132,6 +111,11 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 			required: false,
 			default: void 0
 		},
+		isFixedPos: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		className: {
 			type: String,
 			required: false,
@@ -354,6 +338,11 @@ var Panel_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) =
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

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": () => {
@@ -83,6 +86,11 @@ var Content = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		isFixedPos: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		className: {
 			type: String,
 			required: false,
@@ -305,6 +313,11 @@ var Content = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

package/dist/Dialog/Content/index.js

@@ -81,6 +81,11 @@ var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		isFixedPos: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		className: {
 			type: String,
 			required: false,
@@ -303,6 +308,11 @@ var Content_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0

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,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");
 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_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 +19,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,10 +29,10 @@ 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();
@@ -69,13 +70,6 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			else if (wrapperRef.value === e.target) onInternalClose(e);
 		};
 	}, { immediate: true });
-	function onWrapperKeyDown(e) {
-		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);
-	}
 	(0, vue.watch)(() => props.visible, () => {
 		if (props.visible) {
 			animatedVisible.value = true;
@@ -94,7 +88,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),
@@ -106,8 +100,6 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			"maskProps": maskProps,
 			"className": modalClassNames?.mask
 		}, null), (0, vue.createVNode)("div", (0, vue.mergeProps)({
-			"tabindex": -1,
-			"onKeydown": onWrapperKeyDown,
 			"class": [
 				`${prefixCls}-wrap`,
 				wrapClassName,
@@ -360,14 +352,18 @@ var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots })
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0
 		}
 	}, {
 		prefixCls: "vc-dialog",
-		visible: true,
-		keyboard: true,
+		visible: false,
 		focusTriggerAfterClose: true,
 		closable: true,
 		mask: true,

package/dist/Dialog/index.js

@@ -4,7 +4,6 @@ import Mask_default from "./Mask.js";
 import { createVNode, defineComponent, mergeDefaults, mergeProps, onUnmounted, shallowRef, useId, watch } from "vue";
 import { warning } from "@v-c/util";
 import contains from "@v-c/util/dist/Dom/contains";
-import KeyCode from "@v-c/util/dist/KeyCode";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	if (process.env.NODE_ENV !== "production") {
@@ -64,13 +63,6 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			else if (wrapperRef.value === e.target) onInternalClose(e);
 		};
 	}, { immediate: true });
-	function onWrapperKeyDown(e) {
-		if (props.keyboard && e === KeyCode.ESC) {
-			e.stopPropagation();
-			onInternalClose(e);
-		}
-		if (props.visible && e.keyCode === KeyCode.TAB) contentRef.value?.changeActive?.(!e.shiftKey);
-	}
 	watch(() => props.visible, () => {
 		if (props.visible) {
 			animatedVisible.value = true;
@@ -101,8 +93,6 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			"maskProps": maskProps,
 			"className": modalClassNames?.mask
 		}, null), createVNode("div", mergeProps({
-			"tabindex": -1,
-			"onKeydown": onWrapperKeyDown,
 			"class": [
 				`${prefixCls}-wrap`,
 				wrapClassName,
@@ -355,14 +345,18 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0
 		}
 	}, {
 		prefixCls: "vc-dialog",
-		visible: true,
-		keyboard: true,
+		visible: false,
 		focusTriggerAfterClose: true,
 		closable: true,
 		mask: true,

package/dist/DialogWrap.cjs

@@ -1,25 +1,33 @@
-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);
+	const onEsc = ({ top, event }) => {
+		const { keyboard = true } = props;
+		if (top && keyboard) {
+			event.stopPropagation();
+			props?.onClose?.(event);
+		}
+	};
 	(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.value) return null;
-		return (0, vue.createVNode)(__v_c_portal.default, {
+		return (0, vue.createVNode)(_v_c_portal.default, {
 			"open": visible || forceRender || animatedVisible.value,
 			"autoDestroy": false,
+			"onEsc": onEsc,
 			"getContainer": getContainer,
 			"autoLock": visible || animatedVisible.value
 		}, { default: () => [(0, vue.createVNode)(require_index.default, (0, vue.mergeProps)(props, {
@@ -259,6 +267,11 @@ var DialogWrap = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) =>
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0
@@ -267,12 +280,12 @@ var DialogWrap = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) =>
 		getContainer: void 0,
 		closeIcon: void 0,
 		prefixCls: "vc-dialog",
-		visible: true,
 		keyboard: true,
 		focusTriggerAfterClose: true,
 		closable: true,
 		mask: true,
 		maskClosable: true,
+		destroyOnHidden: false,
 		forceRender: false
 	}),
 	name: "Dialog"

package/dist/DialogWrap.js

@@ -4,10 +4,14 @@ 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);
+	const onEsc = ({ top, event }) => {
+		const { keyboard = true } = props;
+		if (top && keyboard) {
+			event.stopPropagation();
+			props?.onClose?.(event);
+		}
+	};
 	watch(() => props.visible, () => {
 		if (props.visible) animatedVisible.value = true;
 	}, { immediate: true });
@@ -17,6 +21,7 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		return createVNode(Portal, {
 			"open": visible || forceRender || animatedVisible.value,
 			"autoDestroy": false,
+			"onEsc": onEsc,
 			"getContainer": getContainer,
 			"autoLock": visible || animatedVisible.value
 		}, { default: () => [createVNode(Dialog_default, mergeProps(props, {
@@ -256,6 +261,11 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		panelRef: {
 			required: false,
 			default: void 0
@@ -264,12 +274,12 @@ var DialogWrap_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		getContainer: void 0,
 		closeIcon: void 0,
 		prefixCls: "vc-dialog",
-		visible: true,
 		keyboard: true,
 		focusTriggerAfterClose: true,
 		closable: true,
 		mask: true,
 		maskClosable: true,
+		destroyOnHidden: false,
 		forceRender: false
 	}),
 	name: "Dialog"

package/dist/IDialogPropTypes.cjs

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

package/dist/IDialogPropTypes.d.ts

@@ -50,5 +50,6 @@ export interface IDialogPropTypes {
     modalRender?: (node: VueNode) => VueNode;
     forceRender?: boolean;
     focusTriggerAfterClose?: boolean;
+    focusTrap?: boolean;
     panelRef?: any;
 }

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.2",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.1",
-    "@v-c/util": "^1.0.3"
+    "@v-c/portal": "^1.0.3",
+    "@v-c/util": "^1.0.8"
   },
   "scripts": {
     "build": "vite build",