@v-c/dialog 0.0.4 → 1.0.1

package/dist/Dialog/index.js

@@ -1,7 +1,7 @@
 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 { createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onUnmounted, shallowRef, useId, watch } from "vue";
 import { warning } from "@v-c/util";
 import contains from "@v-c/util/dist/Dom/contains";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
@@ -20,6 +20,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 	const wrapperRef = shallowRef();
 	const contentRef = shallowRef();
 	const animatedVisible = shallowRef(props.visible);
+	const isFixedPos = shallowRef(false);
 	const ariaId = useId();
 	function saveLastOutSideActiveElementRef() {
 		if (!contains(wrapperRef.value, document.activeElement)) lastOutSideActiveElementRef.value = document.activeElement;
@@ -67,6 +68,10 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 		if (props.visible) {
 			animatedVisible.value = true;
 			saveLastOutSideActiveElementRef();
+			nextTick(() => {
+				const wrapEl = wrapperRef.value;
+				if (wrapEl) isFixedPos.value = getComputedStyle(wrapEl).position === "fixed";
+			});
 		}
 	}, { immediate: true });
 	onUnmounted(() => {
@@ -113,6 +118,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent((props, { expose, slots })
 			"ariaId": ariaId,
 			"prefixCls": prefixCls,
 			"visible": !!visible,
+			"isFixedPos": isFixedPos.value,
 			"motionName": getMotionName(prefixCls, transitionName, animation)
 		}), slots)])]);
 	};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@v-c/dialog",
   "type": "module",
-  "version": "0.0.4",
+  "version": "1.0.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*.js": "./dist/*.js",
     "./dist/*.d.ts": "./dist/*.d.ts",
@@ -25,8 +25,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.3",
-    "@v-c/util": "^1.0.8"
+    "@v-c/portal": "^1.0.7",
+    "@v-c/util": "^1.0.12"
   },
   "scripts": {
     "build": "vite build",

package/dist/Dialog/Content/Panel.cjs

@@ -1,366 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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);
-let _v_c_util_dist_Dom_focus = require("@v-c/util/dist/Dom/focus");
-let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
-	const { setPanel } = require_context.useGetRefContext();
-	const internalRef = (0, vue.shallowRef)();
-	const mergeRefFun = (el) => {
-		internalRef.value = el;
-		setPanel?.(el);
-		props?.holderRef?.(el);
-	};
-	(0, _v_c_util_dist_Dom_focus.useLockFocus)((0, vue.computed)(() => !!props.visible && !!props.isFixedPos && props.focusTrap !== false), () => internalRef.value);
-	expose({ focus: () => {
-		internalRef.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 = (0, _v_c_util_dist_props_util.getStylePxValue)(width);
-		if (height !== void 0) contentStyle.height = (0, _v_c_util_dist_props_util.getStylePxValue)(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 }
-		}, [(0, vue.createVNode)("div", {
-			"class": (0, _v_c_util.clsx)(`${prefixCls}-title`, modalClassNames?.title),
-			"id": ariaId,
-			"style": { ...modalStyles?.title }
-		}, [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,
-			"tabindex": -1
-		}), [renderContent()]);
-	};
-}, {
-	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
-		},
-		isFixedPos: {
-			type: Boolean,
-			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
-		},
-		focusTrap: {
-			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;