@v-c/dialog 0.0.1

package/dist/Dialog/index.js

@@ -0,0 +1,373 @@
+import { getMotionName } from "../util.js";
+import Content_default from "./Content/index.js";
+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") {
+		[
+			"wrapStyle",
+			"bodyStyle",
+			"maskStyle"
+		].forEach((prop) => {
+			warning(!(prop in props && props[prop]), `${prop} is deprecated, please use styles instead.`);
+		});
+		if ("wrapClassName" in props && props.wrapClassName) warning(false, `wrapClassName is deprecated, please use classNames instead.`);
+	}
+	const lastOutSideActiveElementRef = shallowRef(null);
+	const wrapperRef = shallowRef();
+	const contentRef = shallowRef();
+	const animatedVisible = shallowRef(props.visible);
+	const ariaId = useId();
+	function saveLastOutSideActiveElementRef() {
+		if (!contains(wrapperRef.value, document.activeElement)) lastOutSideActiveElementRef.value = document.activeElement;
+	}
+	function focusDialogContent() {
+		if (!contains(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 = shallowRef(false);
+	const contentTimeoutRef = shallowRef();
+	const onContentMouseDown = () => {
+		clearTimeout(contentTimeoutRef.value);
+		contentClickRef.value = true;
+	};
+	const onContentMouseUp = () => {
+		contentTimeoutRef.value = setTimeout(() => {
+			contentClickRef.value = 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);
+		};
+	}, { 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;
+			saveLastOutSideActiveElementRef();
+		}
+	}, { 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 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, {
+			"prefixCls": prefixCls,
+			"visible": !!(mask && visible),
+			"motionName": getMotionName(prefixCls, maskTransitionName, maskAnimation),
+			"style": {
+				zIndex,
+				...maskStyle,
+				...modalStyles?.mask
+			},
+			"maskProps": maskProps,
+			"className": modalClassNames?.mask
+		}, null), createVNode("div", mergeProps({
+			"tabindex": -1,
+			"onKeydown": onWrapperKeyDown,
+			"class": [
+				`${prefixCls}-wrap`,
+				wrapClassName,
+				modalClassNames?.wrapper
+			],
+			"ref": wrapperRef,
+			"onClick": onWrapperClick,
+			"style": mergedStyle
+		}, wrapProps), [createVNode(Content_default, mergeProps({
+			...props,
+			onMouseDown: onContentMouseDown,
+			onMouseUp: onContentMouseUp,
+			onClose: onInternalClose,
+			onVisibleChanged: onDialogVisibleChanged
+		}, {
+			"ref": contentRef,
+			"closable": closable,
+			"ariaId": ariaId,
+			"prefixCls": prefixCls,
+			"visible": !!visible,
+			"motionName": getMotionName(prefixCls, transitionName, animation)
+		}), slots)])]);
+	};
+}, {
+	props: /* @__PURE__ */ 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"
+});
+export { Dialog_default as default };

package/dist/DialogWrap.cjs

@@ -0,0 +1,281 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+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 });
+	(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),
+			"autoDestroy": false,
+			"getContainer": getContainer,
+			"autoLock": !!(visible || animatedVisible)
+		}, { default: () => [(0, vue.createVNode)(require_index.default, (0, vue.mergeProps)(props, {
+			"destroyOnHidden": destroyOnHidden,
+			"afterClose": () => {
+				afterClose?.();
+				animatedVisible.value = false;
+			}
+		}), 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
+		}
+	}, {
+		getContainer: void 0,
+		closeIcon: void 0,
+		prefixCls: "vc-dialog",
+		visible: true,
+		keyboard: true,
+		focusTriggerAfterClose: true,
+		closable: true,
+		mask: true,
+		maskClosable: true,
+		forceRender: false
+	}),
+	name: "Dialog"
+});
+var DialogWrap_default = DialogWrap;
+exports.default = DialogWrap_default;

package/dist/DialogWrap.d.ts

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