@v-c/dialog 0.0.1

package/dist/Dialog/Content/Panel.js

@@ -0,0 +1,365 @@
+import { useGetRefContext } from "../../context.js";
+import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { classNames } from "@v-c/util";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+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 mergeRefFun = (el) => {
+		mergedRef.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 });
+		}
+	});
+	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;
+		const footerNode = footer ? createVNode("div", {
+			"class": classNames(`${prefixCls}-footer`, modalClassNames?.footer),
+			"style": { ...modalStyles?.footer }
+		}, [footer]) : null;
+		const headerNode = title ? createVNode("div", {
+			"class": classNames(`${prefixCls}-header`, modalClassNames?.header),
+			"style": { ...modalStyles?.header }
+		}, [title]) : null;
+		const closableFun = () => {
+			if (typeof closable === "object" && closable !== null) return closable;
+			if (closable) return { closeIcon: closeIcon ?? createVNode("span", { "class": `${prefixCls}-close-x` }, null) };
+			return {};
+		};
+		const closableObj = closableFun();
+		const ariaProps = pickAttrs(closableObj, true);
+		const closeBtnIsDisabled = typeof closable === "object" && closable?.disabled;
+		const closerNode = closable ? createVNode("button", mergeProps({
+			"type": "button",
+			"onClick": onClose,
+			"aria-label": "Close"
+		}, ariaProps, {
+			"class": `${prefixCls}-close`,
+			"disabled": closeBtnIsDisabled
+		}), [closableObj.closeIcon]) : null;
+		const content = createVNode("div", {
+			"class": classNames(`${prefixCls}-container`, modalClassNames?.container),
+			"style": modalStyles?.container
+		}, [
+			closerNode,
+			headerNode,
+			createVNode("div", mergeProps({
+				"class": classNames(`${prefixCls}-body`, modalClassNames?.body),
+				"style": {
+					...bodyStyle,
+					...modalStyles?.body
+				}
+			}, bodyProps), [slots?.default?.()]),
+			footerNode
+		]);
+		const renderContent = () => {
+			if (!animationVisible && forceRender) return null;
+			return modalRender ? modalRender(content) : content;
+		};
+		return createVNode("div", mergeProps({
+			"key": "dialog-element",
+			"role": "dialog"
+		}, { "aria-labelledby": title ? ariaId : null }, {
+			"aria-modal": "true",
+			"ref": mergeRefFun,
+			"style": {
+				...style,
+				...contentStyle
+			},
+			"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)]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		ariaId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		holderRef: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		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
+		},
+		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
+		},
+		animationVisible: {
+			type: Boolean,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "Panel",
+	inheritAttrs: false
+});
+export { Panel_default as default };

package/dist/Dialog/Content/index.cjs

@@ -0,0 +1,316 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+var Content = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
+	const dialogRef = (0, vue.shallowRef)();
+	const transformOrigin = (0, vue.shallowRef)("");
+	function onPrepare() {
+		const { mousePosition } = props;
+		(0, vue.nextTick)(() => {
+			if (dialogRef.value) {
+				const elementOffset = require_util.offset(dialogRef.value);
+				transformOrigin.value = mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : "";
+			}
+		});
+	}
+	const animationVisible = (0, vue.shallowRef)(props.visible);
+	(0, vue.watch)(() => props.visible, () => {
+		if (props.visible) animationVisible.value = true;
+	});
+	return () => {
+		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), {
+			"onBeforeEnter": onPrepare,
+			"onAfterEnter": () => onVisibleChanged?.(true),
+			"onAfterLeave": () => {
+				onVisibleChanged?.(false);
+				animationVisible.value = false;
+			}
+		}), { default: () => [visible || !destroyOnHidden ? (0, vue.withDirectives)((0, vue.createVNode)(require_Panel.default, (0, vue.mergeProps)(props, {
+			"animationVisible": animationVisible.value,
+			"title": title,
+			"ariaId": ariaId,
+			"prefixCls": prefixCls,
+			"style": {
+				...style,
+				...contentStyle
+			},
+			"class": [className],
+			"holderRef": (el) => {
+				dialogRef.value = el;
+			}
+		}), slots), [[vue.vShow, visible]]) : null] });
+	};
+}, {
+	props: {
+		motionName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		ariaId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onVisibleChanged: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		holderRef: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		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
+		},
+		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
+		}
+	},
+	name: "Content"
+});
+var Content_default = Content;
+exports.default = Content_default;

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

@@ -0,0 +1,12 @@
+import { PanelProps } from './Panel';
+export type ContentProps = {
+    motionName?: string;
+    ariaId: string;
+    onVisibleChanged: (visible: boolean) => void;
+} & PanelProps;
+declare const Content: import('vue').DefineSetupFnComponent<ContentProps, {}, {}, {
+    motionName?: string;
+    ariaId: string;
+    onVisibleChanged: (visible: boolean) => void;
+} & PanelProps & {}, import('vue').PublicProps>;
+export default Content;