@v-c/dialog 0.0.1

package/dist/Dialog/index.cjs

@@ -0,0 +1,379 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+var Dialog = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
+	if (process.env.NODE_ENV !== "production") {
+		[
+			"wrapStyle",
+			"bodyStyle",
+			"maskStyle"
+		].forEach((prop) => {
+			(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.`);
+	}
+	const lastOutSideActiveElementRef = (0, vue.shallowRef)(null);
+	const wrapperRef = (0, vue.shallowRef)();
+	const contentRef = (0, vue.shallowRef)();
+	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;
+	}
+	function focusDialogContent() {
+		if (!(0, __v_c_util_dist_Dom_contains.default)(wrapperRef.value, document.activeElement)) contentRef.value?.focus?.();
+	}
+	function onDialogVisibleChanged(newVisible) {
+		if (newVisible) focusDialogContent();
+		else {
+			animatedVisible.value = false;
+			if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
+				try {
+					lastOutSideActiveElementRef.value?.focus?.({ preventScroll: true });
+				} catch (e) {}
+				lastOutSideActiveElementRef.value = null;
+			}
+			if (animatedVisible.value) props?.afterClose?.();
+			props?.afterOpenChange?.(newVisible);
+		}
+	}
+	function onInternalClose(e) {
+		props?.onClose?.(e);
+	}
+	const contentClickRef = (0, vue.shallowRef)(false);
+	const contentTimeoutRef = (0, vue.shallowRef)();
+	const onContentMouseDown = () => {
+		clearTimeout(contentTimeoutRef.value);
+		contentClickRef.value = true;
+	};
+	const onContentMouseUp = () => {
+		contentTimeoutRef.value = setTimeout(() => {
+			contentClickRef.value = false;
+		});
+	};
+	let onWrapperClick = null;
+	(0, vue.watch)(() => props.maskClosable, () => {
+		if (props.maskClosable) onWrapperClick = (e) => {
+			if (contentClickRef.value) contentClickRef.value = false;
+			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;
+			saveLastOutSideActiveElementRef();
+		}
+	}, { immediate: true });
+	(0, vue.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 mergedStyle = {
+			zIndex,
+			...wrapStyle,
+			...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, {
+			"prefixCls": prefixCls,
+			"visible": !!(mask && visible),
+			"motionName": require_util.getMotionName(prefixCls, maskTransitionName, maskAnimation),
+			"style": {
+				zIndex,
+				...maskStyle,
+				...modalStyles?.mask
+			},
+			"maskProps": maskProps,
+			"className": modalClassNames?.mask
+		}, null), (0, vue.createVNode)("div", (0, vue.mergeProps)({
+			"tabindex": -1,
+			"onKeydown": onWrapperKeyDown,
+			"class": [
+				`${prefixCls}-wrap`,
+				wrapClassName,
+				modalClassNames?.wrapper
+			],
+			"ref": wrapperRef,
+			"onClick": onWrapperClick,
+			"style": mergedStyle
+		}, wrapProps), [(0, vue.createVNode)(require_index.default, (0, vue.mergeProps)({
+			...props,
+			onMouseDown: onContentMouseDown,
+			onMouseUp: onContentMouseUp,
+			onClose: onInternalClose,
+			onVisibleChanged: onDialogVisibleChanged
+		}, {
+			"ref": contentRef,
+			"closable": closable,
+			"ariaId": ariaId,
+			"prefixCls": prefixCls,
+			"visible": !!visible,
+			"motionName": require_util.getMotionName(prefixCls, transitionName, animation)
+		}), slots)])]);
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		keyboard: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		rootStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		mask: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		afterClose: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		afterOpenChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClose: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		closable: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		maskClosable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		mousePosition: {
+			type: [Object, null],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		footer: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		transitionName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		maskTransitionName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		animation: {
+			required: false,
+			default: void 0
+		},
+		maskAnimation: {
+			required: false,
+			default: void 0
+		},
+		wrapStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		bodyStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		maskStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		wrapClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		height: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		bodyProps: {
+			required: false,
+			default: void 0
+		},
+		maskProps: {
+			required: false,
+			default: void 0
+		},
+		rootClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		wrapProps: {
+			required: false,
+			default: void 0
+		},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		closeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		modalRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		forceRender: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		focusTriggerAfterClose: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		panelRef: {
+			required: false,
+			default: void 0
+		}
+	}, {
+		prefixCls: "vc-dialog",
+		visible: true,
+		keyboard: true,
+		focusTriggerAfterClose: true,
+		closable: true,
+		mask: true,
+		maskClosable: true,
+		forceRender: false
+	}),
+	name: "Dialog"
+});
+var Dialog_default = Dialog;
+exports.default = Dialog_default;

package/dist/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { IDialogPropTypes } from '../IDialogPropTypes';
+declare const Dialog: import('vue').DefineSetupFnComponent<IDialogPropTypes, {}, {}, IDialogPropTypes & {}, import('vue').PublicProps>;
+export default Dialog;