@v-c/dialog 0.0.1

package/dist/DialogWrap.js

@@ -0,0 +1,277 @@
+import { useRefProvide } from "./context.js";
+import Dialog_default from "./Dialog/index.js";
+import { createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+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 });
+	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 createVNode(Portal, {
+			"open": !!(visible || forceRender || animatedVisible),
+			"autoDestroy": false,
+			"getContainer": getContainer,
+			"autoLock": !!(visible || animatedVisible)
+		}, { default: () => [createVNode(Dialog_default, mergeProps(props, {
+			"destroyOnHidden": destroyOnHidden,
+			"afterClose": () => {
+				afterClose?.();
+				animatedVisible.value = false;
+			}
+		}), 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
+		}
+	}, {
+		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"
+});
+export { DialogWrap_default as default };

package/dist/IDialogPropTypes.d.ts

@@ -0,0 +1,54 @@
+import { GetContainer } from '@v-c/util/dist/PortalWrapper';
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
+export type ModalClassNames = Partial<Record<SemanticName, string>>;
+export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
+export interface IDialogPropTypes {
+    className?: string;
+    keyboard?: boolean;
+    style?: CSSProperties;
+    rootStyle?: CSSProperties;
+    mask?: boolean;
+    children?: VueNode;
+    afterClose?: () => any;
+    afterOpenChange?: (open: boolean) => void;
+    onClose?: (e: any) => any;
+    closable?: boolean | ({
+        closeIcon?: VueNode;
+        disabled?: boolean;
+    } & Record<string, any>);
+    maskClosable?: boolean;
+    visible?: boolean;
+    destroyOnHidden?: boolean;
+    mousePosition?: {
+        x: number;
+        y: number;
+    } | null;
+    title?: VueNode;
+    footer?: VueNode;
+    transitionName?: string;
+    maskTransitionName?: string;
+    animation?: any;
+    maskAnimation?: any;
+    wrapStyle?: Record<string, any>;
+    bodyStyle?: Record<string, any>;
+    maskStyle?: Record<string, any>;
+    prefixCls?: string;
+    wrapClassName?: string;
+    width?: string | number;
+    height?: string | number;
+    zIndex?: number;
+    bodyProps?: any;
+    maskProps?: any;
+    rootClassName?: string;
+    classNames?: ModalClassNames;
+    styles?: ModalStyles;
+    wrapProps?: any;
+    getContainer?: GetContainer | false;
+    closeIcon?: VueNode;
+    modalRender?: (node: VueNode) => VueNode;
+    forceRender?: boolean;
+    focusTriggerAfterClose?: boolean;
+    panelRef?: any;
+}

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/context.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var RefContext = Symbol("RefContext");
+function useRefProvide() {
+	const panel = (0, vue.shallowRef)();
+	const setPanelRef = (el) => {
+		panel.value = el;
+	};
+	(0, vue.provide)(RefContext, {
+		panel,
+		setPanel(panel$1) {
+			setPanelRef(panel$1);
+		}
+	});
+	return {
+		panel,
+		setPanelRef
+	};
+}
+function useGetRefContext() {
+	return (0, vue.inject)(RefContext, {});
+}
+exports.useGetRefContext = useGetRefContext;
+exports.useRefProvide = useRefProvide;

package/dist/context.d.ts

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

package/dist/context.js

@@ -0,0 +1,22 @@
+import { inject, provide, shallowRef } from "vue";
+var RefContext = Symbol("RefContext");
+function useRefProvide() {
+	const panel = shallowRef();
+	const setPanelRef = (el) => {
+		panel.value = el;
+	};
+	provide(RefContext, {
+		panel,
+		setPanel(panel$1) {
+			setPanelRef(panel$1);
+		}
+	});
+	return {
+		panel,
+		setPanelRef
+	};
+}
+function useGetRefContext() {
+	return inject(RefContext, {});
+}
+export { useGetRefContext, useRefProvide };

package/dist/index.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Panel = require("./Dialog/Content/Panel.cjs");
+const require_DialogWrap = require("./DialogWrap.cjs");
+var src_default = require_DialogWrap.default;
+exports.Panel = require_Panel.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { IDialogPropTypes as DialogProps } from './IDialogPropTypes';
+import { default as Panel } from './Dialog/Content/Panel';
+import { default as DialogWrap } from './DialogWrap';
+export type { DialogProps };
+export { Panel };
+export default DialogWrap;

package/dist/index.js

@@ -0,0 +1,4 @@
+import Panel_default from "./Dialog/Content/Panel.js";
+import DialogWrap_default from "./DialogWrap.js";
+var src_default = DialogWrap_default;
+export { Panel_default as Panel, src_default as default };

package/dist/util.cjs

@@ -0,0 +1,31 @@
+function getMotionName(prefixCls, transitionName, animationName) {
+	let motionName = transitionName;
+	if (!motionName && animationName) motionName = `${prefixCls}-${animationName}`;
+	return motionName;
+}
+function getScroll(w, top) {
+	let ret = w[`page${top ? "Y" : "X"}Offset`];
+	const method = `scroll${top ? "Top" : "Left"}`;
+	if (typeof ret !== "number") {
+		const d = w.document;
+		ret = d.documentElement[method];
+		if (typeof ret !== "number") ret = d.body[method];
+	}
+	return ret;
+}
+function offset(el) {
+	const rect = el.getBoundingClientRect();
+	const pos = {
+		left: rect.left,
+		top: rect.top
+	};
+	const doc = el.ownerDocument;
+	const w = doc.defaultView || doc.parentWindow;
+	if (w) {
+		pos.left += getScroll(w);
+		pos.top += getScroll(w, true);
+	}
+	return pos;
+}
+exports.getMotionName = getMotionName;
+exports.offset = offset;

package/dist/util.d.ts

@@ -0,0 +1,5 @@
+export declare function getMotionName(prefixCls: string, transitionName?: string, animationName?: string): string | undefined;
+export declare function offset(el: Element): {
+    left: number;
+    top: number;
+};

package/dist/util.js

@@ -0,0 +1,30 @@
+function getMotionName(prefixCls, transitionName, animationName) {
+	let motionName = transitionName;
+	if (!motionName && animationName) motionName = `${prefixCls}-${animationName}`;
+	return motionName;
+}
+function getScroll(w, top) {
+	let ret = w[`page${top ? "Y" : "X"}Offset`];
+	const method = `scroll${top ? "Top" : "Left"}`;
+	if (typeof ret !== "number") {
+		const d = w.document;
+		ret = d.documentElement[method];
+		if (typeof ret !== "number") ret = d.body[method];
+	}
+	return ret;
+}
+function offset(el) {
+	const rect = el.getBoundingClientRect();
+	const pos = {
+		left: rect.left,
+		top: rect.top
+	};
+	const doc = el.ownerDocument;
+	const w = doc.defaultView || doc.parentWindow;
+	if (w) {
+		pos.left += getScroll(w);
+		pos.top += getScroll(w, true);
+	}
+	return pos;
+}
+export { getMotionName, offset };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@v-c/dialog",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*.js": "./dist/*.js",
+    "./dist/*.d.ts": "./dist/*.d.ts",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/portal": "^1.0.0",
+    "@v-c/util": "^1.0.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "test": "vitest run",
+    "bump": "bumpp",
+    "bump:patch": "bumpp --release patch"
+  }
+}