@v-c/dialog 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Dialog/Content/Panel.cjs

@@ -0,0 +1,369 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+var sentinelStyle = {
+	width: 0,
+	height: 0,
+	overflow: "hidden",
+	outline: "none"
+};
+var entityStyle = { outline: "none" };
+var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
+	const { setPanel } = require_context.useGetRefContext();
+	const mergedRef = (0, vue.shallowRef)();
+	const mergeRefFun = (el) => {
+		mergedRef.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 });
+		}
+	});
+	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 ? (0, vue.createVNode)("div", {
+			"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),
+			"style": { ...modalStyles?.header }
+		}, [title]) : null;
+		const closableFun = () => {
+			if (typeof closable === "object" && closable !== null) return closable;
+			if (closable) return { closeIcon: closeIcon ?? (0, vue.createVNode)("span", { "class": `${prefixCls}-close-x` }, null) };
+			return {};
+		};
+		const closableObj = closableFun();
+		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",
+			"onClick": onClose,
+			"aria-label": "Close"
+		}, ariaProps, {
+			"class": `${prefixCls}-close`,
+			"disabled": closeBtnIsDisabled
+		}), [closableObj.closeIcon]) : null;
+		const content = (0, vue.createVNode)("div", {
+			"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),
+				"style": {
+					...bodyStyle,
+					...modalStyles?.body
+				}
+			}, bodyProps), [slots?.default?.()]),
+			footerNode
+		]);
+		const renderContent = () => {
+			if (!animationVisible && forceRender) return null;
+			return modalRender ? modalRender(content) : content;
+		};
+		return (0, vue.createVNode)("div", (0, vue.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
+		}), [(0, vue.createVNode)("div", {
+			"ref": sentinelStartRef,
+			"tabindex": 0,
+			"style": entityStyle
+		}, [renderContent()]), (0, vue.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
+});
+var Panel_default = Panel;
+exports.default = Panel_default;

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

@@ -0,0 +1,19 @@
+import { MouseEventHandler } from '@v-c/util/dist/EventInterface';
+import { IDialogPropTypes } from '../../IDialogPropTypes';
+export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
+    prefixCls: string;
+    ariaId?: string;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseUp?: MouseEventHandler;
+    holderRef?: (el: HTMLDivElement) => void;
+}
+export interface ContentRef {
+    focus: () => void;
+    changeActive: (next: boolean) => void;
+}
+declare const Panel: import('vue').DefineSetupFnComponent<PanelProps & {
+    animationVisible: boolean;
+}, {}, {}, PanelProps & {
+    animationVisible: boolean;
+} & {}, import('vue').PublicProps>;
+export default Panel;