@v-c/image 1.0.6 → 1.0.8

package/dist/Image.d.ts

@@ -39,8 +39,10 @@ export interface ImageProps extends Partial<Omit<ImageElementProps, 'src'>> {
     preview?: boolean | PreviewConfig;
     onClick?: (e: MouseEvent) => void;
     onError?: (e: Event) => void;
+    onKeydown?: (e: KeyboardEvent) => void;
     width?: string | number;
     height?: string | number;
+    fetchPriority?: HTMLImageElement['fetchPriority'];
 }
 declare const Image: import('vue').DefineSetupFnComponent<ImageProps, {}, {}, ImageProps & {}, import('vue').PublicProps>;
 export default Image;

package/dist/{Image.js → image/src/Image.js}

@@ -1,14 +1,13 @@
-import { getAttrStyleAndClass, getStylePxValue } from "./util/dist/props-util/index.js";
-import { clsx } from "./util/dist/classnames.js";
-import { useMergedState } from "./util/dist/hooks/useMergedState.js";
-import "./util/dist/index.js";
-import { pickAttrs } from "./util/dist/pickAttrs.js";
 import { COMMON_PROPS } from "./common.js";
 import { usePreviewGroupContext } from "./context.js";
+import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
+import { pickAttrs } from "../../util/dist/pickAttrs.js";
+import { getAttrStyleAndClass, getStylePxValue } from "../../util/dist/props-util/index.js";
 import useRegisterImage from "./hooks/useRegisterImage.js";
 import useStatus from "./hooks/useStatus.js";
 import Preview_default from "./Preview/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
 var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const groupContext = usePreviewGroupContext();
 	const prefixCls = computed(() => props.prefixCls ?? "vc-image");
@@ -70,6 +69,24 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	const onImgError = (e) => {
 		props.onError?.(e);
 	};
+	const onPreviewKeyDown = (event) => {
+		props.onKeydown?.(event);
+		if (!canPreview) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			const rect = event.target.getBoundingClientRect();
+			const left = rect.x + rect.width / 2;
+			const top = rect.y + rect.height / 2;
+			if (groupContext) groupContext.onPreview(imageId, src.value || "", left, top);
+			else {
+				mousePosition.value = {
+					x: left,
+					y: top
+				};
+				triggerPreviewOpen(true);
+			}
+		}
+	};
 	return () => {
 		const { width, height } = props;
 		const { className, style: attrStyle, restAttrs } = getAttrStyleAndClass(attrs);
@@ -97,6 +114,10 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 		return createVNode(Fragment, null, [createVNode("div", mergeProps(pickAttrs(restAttrs, false), {
 			"class": rootCls,
 			"onClick": canPreview.value ? onPreview : onInternalClick,
+			"role": canPreview ? "button" : restAttrs.role,
+			"tabindex": canPreview && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
+			"aria-label": canPreview ? restAttrs["aria-label"] ?? restAttrs.alt : restAttrs["aria-label"],
+			"onKeydown": onPreviewKeyDown,
 			"style": rootStyle
 		}), [
 			createVNode("img", mergeProps(imgCommonProps.value, {
@@ -204,6 +225,11 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 			required: false,
 			default: void 0
 		},
+		onKeydown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		width: {
 			type: [String, Number],
 			required: false,
@@ -213,6 +239,10 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 			type: [String, Number],
 			required: false,
 			default: void 0
+		},
+		fetchPriority: {
+			required: false,
+			default: void 0
 		}
 	}, {
 		prefixCls: "vc-image",

package/dist/{Preview → image/src/Preview}/Footer.js

@@ -1,15 +1,17 @@
-import { clsx } from "../util/dist/classnames.js";
-import "../util/dist/index.js";
 import { createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
 var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 	const renderOperation = ({ type, disabled, onClick, icon }) => {
 		const actionCls = `${props.prefixCls}-actions-action`;
-		return createVNode("div", {
+		return createVNode("button", {
+			"type": "button",
 			"key": type,
 			"class": clsx(actionCls, `${actionCls}-${type}`, { [`${actionCls}-disabled`]: !!disabled }),
 			"onClick": () => {
 				if (!disabled) onClick();
-			}
+			},
+			"disabled": !!disabled,
+			"aria-label": type
 		}, [icon]);
 	};
 	return () => {

package/dist/{Preview → image/src/Preview}/PrevNext.js

@@ -1,23 +1,24 @@
-import { clsx } from "../util/dist/classnames.js";
-import "../util/dist/index.js";
 import { Fragment, createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
 var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
 		const { prefixCls, onActive, current, count, icons } = props;
 		const switchCls = `${prefixCls}-switch`;
 		const prevIcon = icons.prev ?? icons.left;
 		const nextIcon = icons.next ?? icons.right;
-		const isPrevDisabled = current === 0;
-		const isNextDisabled = current === count - 1;
-		return createVNode(Fragment, null, [createVNode("div", {
-			"class": clsx(switchCls, `${switchCls}-prev`, { [`${switchCls}-disabled`]: isPrevDisabled }),
+		const prevDisabled = current === 0;
+		const nextDisabled = current === count - 1;
+		return createVNode(Fragment, null, [createVNode("button", {
+			"type": "button",
+			"class": clsx(switchCls, `${switchCls}-prev`, { [`${switchCls}-disabled`]: prevDisabled }),
 			"onClick": () => {
-				if (!isPrevDisabled) onActive(-1);
+				if (!prevDisabled) onActive(-1);
 			}
-		}, [prevIcon]), createVNode("div", {
-			"class": clsx(switchCls, `${switchCls}-next`, { [`${switchCls}-disabled`]: isNextDisabled }),
+		}, [prevIcon]), createVNode("button", {
+			"type": "button",
+			"class": clsx(switchCls, `${switchCls}-next`, { [`${switchCls}-disabled`]: nextDisabled }),
 			"onClick": () => {
-				if (!isNextDisabled) onActive(1);
+				if (!nextDisabled) onActive(1);
 			}
 		}, [nextIcon])]);
 	};

package/dist/{Preview → image/src/Preview}/index.js

@@ -1,11 +1,9 @@
-import { KeyCodeStr } from "../util/dist/KeyCode.js";
-import { clsx } from "../util/dist/classnames.js";
-import "../util/dist/index.js";
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.js";
-import { canUseDom } from "../util/dist/Dom/canUseDom.js";
-import { src_default } from "../portal/dist/index.js";
-import { getTransitionProps } from "../util/dist/utils/transition.js";
+import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
+import { useLockFocus } from "../../../util/dist/Dom/focus.js";
+import { KeyCodeStr } from "../../../util/dist/KeyCode.js";
+import { getTransitionProps } from "../../../util/dist/utils/transition.js";
 import useImageTransform from "../hooks/useImageTransform.js";
 import { BASE_SCALE_RATIO } from "../previewConfig.js";
 import useMouseEvent from "../hooks/useMouseEvent.js";
@@ -14,8 +12,11 @@ import CloseBtn_default from "./CloseBtn.js";
 import Footer_default from "./Footer.js";
 import PrevNext_default from "./PrevNext.js";
 import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch, watchEffect } from "vue";
+import { clsx } from "@v-c/util";
+import Portal from "@v-c/portal";
 var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const imgEl = shallowRef();
+	const wrapperRef = shallowRef(null);
 	const groupContext = usePreviewGroupContext();
 	const showLeftOrRightSwitches = computed(() => !!groupContext && (props.count ?? 1) > 1);
 	const showOperationsProgress = computed(() => !!groupContext && (props.count ?? 1) >= 1);
@@ -113,8 +114,9 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		src: computed(() => props.src),
 		fallback: computed(() => props.fallback)
 	});
+	useLockFocus(portalRender, () => wrapperRef.value);
 	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {} } = props;
+		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {}, movable = true } = props;
 		const bodyStyle = { ...styles.body ?? {} };
 		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
 		const image = {
@@ -150,9 +152,12 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 			...attrs.style
 		};
 		if (zIndex) mergedRootStyle.zIndex = zIndex;
-		const mergedRootCls = clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving.value });
+		const mergedRootCls = clsx(prefixCls, rootClassName, classNames.root, {
+			[`${prefixCls}-movable`]: movable,
+			[`${prefixCls}-moving`]: isMoving.value
+		});
 		const transitionProps = getTransitionProps(motionName);
-		return createVNode(src_default, {
+		return createVNode(Portal, {
 			"open": open || animatedVisible.value || portalRender.value,
 			"getContainer": getContainer,
 			"autoLock": open || animatedVisible.value
@@ -162,8 +167,13 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		}), { default: () => {
 			if (!(portalRender.value && open)) return null;
 			return createVNode("div", {
+				"ref": wrapperRef,
 				"class": mergedRootCls,
-				"style": mergedRootStyle
+				"style": mergedRootStyle,
+				"role": "dialog",
+				"aria-modal": "true",
+				"aria-label": alt,
+				"tabindex": -1
 			}, [
 				createVNode("div", {
 					"class": clsx(`${prefixCls}-mask`, classNames.mask),

package/dist/{PreviewGroup.js → image/src/PreviewGroup.js}

@@ -1,5 +1,5 @@
-import { useMergedState } from "./util/dist/hooks/useMergedState.js";
 import { usePreviewGroupProvider } from "./context.js";
+import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
 import Preview_default from "./Preview/index.js";
 import usePreviewItems from "./hooks/usePreviewItems.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";

package/dist/{common.js → image/src/common.js}

@@ -7,6 +7,7 @@ const COMMON_PROPS = [
 	"sizes",
 	"srcset",
 	"useMap",
-	"alt"
+	"alt",
+	"fetchPriority"
 ];
 export { COMMON_PROPS };

package/dist/{hooks → image/src/hooks}/useImageTransform.js

@@ -1,6 +1,6 @@
-import { raf_default } from "../util/dist/raf.js";
 import { getClientSize } from "../util.js";
-import { isEqual_default } from "../util/dist/isEqual.js";
+import { isEqual_default } from "../../../util/dist/isEqual.js";
+import { raf_default } from "../../../util/dist/raf.js";
 import { ref, shallowRef } from "vue";
 var initialTransform = {
 	x: 0,

package/dist/{hooks → image/src/hooks}/useMouseEvent.js

@@ -1,9 +1,8 @@
-import { warning_default } from "../util/dist/warning.js";
-import "../util/dist/index.js";
-import { canUseDom } from "../util/dist/Dom/canUseDom.js";
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
+import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
 import { shallowRef, watch } from "vue";
+import { warning } from "@v-c/util";
 function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {
 	const isMoving = shallowRef(false);
 	const startPositionInfo = shallowRef({
@@ -69,7 +68,7 @@ function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransf
 				window?.top?.addEventListener("mousemove", onMouseMove, false);
 			}
 		} catch (e) {
-			warning_default(false, `[vc-image] ${e}`);
+			warning(false, `[vc-image] ${e}`);
 		}
 		onCleanup(() => {
 			window.removeEventListener("mouseup", onMouseUp);

package/dist/{hooks → image/src/hooks}/useTouchEvent.js

@@ -1,5 +1,5 @@
-import { canUseDom } from "../util/dist/Dom/canUseDom.js";
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
+import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
 import { shallowRef, watchEffect } from "vue";
 function getDistance(a, b) {
 	const x = a.x - b.x;

package/dist/interface.d.ts

@@ -1,7 +1,7 @@
 /**
  * Used for PreviewGroup passed image data
  */
-export type ImageElementProps = Pick<HTMLImageElement, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcset' | 'useMap' | 'alt'>;
+export type ImageElementProps = Pick<HTMLImageElement, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcset' | 'useMap' | 'alt' | 'fetchPriority'>;
 export interface PreviewImageElementProps {
     data: ImageElementProps;
     canPreview: boolean;

package/dist/util/dist/Dom/focus.js

@@ -0,0 +1,80 @@
+import { isVisible_default } from "./isVisible.js";
+import { watch } from "vue";
+function focusable(node, includePositive = false) {
+	if (isVisible_default(node)) {
+		const nodeName = node.nodeName.toLowerCase();
+		const isFocusableElement = [
+			"input",
+			"select",
+			"textarea",
+			"button"
+		].includes(nodeName) || node.isContentEditable || nodeName === "a" && !!node.getAttribute("href");
+		const tabIndexAttr = node.getAttribute("tabindex");
+		const tabIndexNum = Number(tabIndexAttr);
+		let tabIndex = null;
+		if (tabIndexAttr && !Number.isNaN(tabIndexNum)) tabIndex = tabIndexNum;
+		else if (isFocusableElement && tabIndex === null) tabIndex = 0;
+		if (isFocusableElement && node.disabled) tabIndex = null;
+		return tabIndex !== null && (tabIndex >= 0 || includePositive && tabIndex < 0);
+	}
+	return false;
+}
+function getFocusNodeList(node, includePositive = false) {
+	const res = [...node.querySelectorAll("*")].filter((child) => {
+		return focusable(child, includePositive);
+	});
+	if (focusable(node, includePositive)) res.unshift(node);
+	return res;
+}
+var lastFocusElement = null;
+var focusElements = [];
+function getLastElement() {
+	return focusElements[focusElements.length - 1];
+}
+function hasFocus(element) {
+	const { activeElement } = document;
+	return element === activeElement || element.contains(activeElement);
+}
+function syncFocus() {
+	const lastElement = getLastElement();
+	const { activeElement } = document;
+	if (lastElement && !hasFocus(lastElement)) {
+		const focusableList = getFocusNodeList(lastElement);
+		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
+	} else lastFocusElement = activeElement;
+}
+function onWindowKeyDown(e) {
+	if (e.key === "Tab") {
+		const { activeElement } = document;
+		const focusableList = getFocusNodeList(getLastElement());
+		const last = focusableList[focusableList.length - 1];
+		if (e.shiftKey && activeElement === focusableList[0]) lastFocusElement = last;
+		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
+	}
+}
+function lockFocus(element) {
+	if (element) {
+		focusElements = focusElements.filter((ele) => ele !== element);
+		focusElements.push(element);
+		window.addEventListener("focusin", syncFocus);
+		window.addEventListener("keydown", onWindowKeyDown, true);
+		syncFocus();
+	}
+	return () => {
+		lastFocusElement = null;
+		focusElements = focusElements.filter((ele) => ele !== element);
+		if (focusElements.length === 0) {
+			window.removeEventListener("focusin", syncFocus);
+			window.removeEventListener("keydown", onWindowKeyDown, true);
+		}
+	};
+}
+function useLockFocus(lock, getElement) {
+	watch(lock, (_, _o, onCleanup) => {
+		if (lock.value) {
+			const element = getElement();
+			if (element) onCleanup(lockFocus(element));
+		}
+	});
+}
+export { useLockFocus };

package/dist/util/dist/Dom/isVisible.js

@@ -0,0 +1,16 @@
+var isVisible_default = (element) => {
+	if (!element) return false;
+	if (element instanceof Element) {
+		if (element.offsetParent) return true;
+		if (element.getBBox) {
+			const { width, height } = element.getBBox();
+			if (width || height) return true;
+		}
+		if (element.getBoundingClientRect) {
+			const { width, height } = element.getBoundingClientRect();
+			if (width || height) return true;
+		}
+	}
+	return false;
+};
+export { isVisible_default };

package/dist/util/dist/props-util/index.js

@@ -1,18 +1,5 @@
 import { omit } from "../omit.js";
-import { Comment, Fragment, Text, isVNode, toRef } from "vue";
-function isEmptyElement(c) {
-	return c && (c.type === Comment || c.type === Fragment && c.children.length === 0 || c.type === Text && c.children.trim() === "");
-}
-function filterEmpty(children = []) {
-	if (!Array.isArray(children)) children = [children];
-	const res = [];
-	children.forEach((child) => {
-		if (Array.isArray(child)) res.push(...child);
-		else if (child?.type === Fragment) res.push(...filterEmpty(child.children));
-		else res.push(child);
-	});
-	return res.filter((c) => !isEmptyElement(c));
-}
+import { Fragment, toRef } from "vue";
 var defaultOptions = {
 	class: true,
 	style: true
@@ -42,4 +29,4 @@ function getStylePxValue(value) {
 	}
 	return value;
 }
-export { filterEmpty, getAttrStyleAndClass, getStylePxValue };
+export { getAttrStyleAndClass, getStylePxValue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@v-c/portal": "^1.0.8",
-    "@v-c/util": "^1.0.18"
+    "@v-c/util": "^1.0.19"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"

package/dist/portal/dist/Context.js

@@ -1,11 +0,0 @@
-import { inject, provide } from "vue";
-var QueueContextKey = Symbol("QueueContextKey");
-function useContextProvider(appendFunc) {
-	const queueCreate = appendFunc;
-	provide(QueueContextKey, queueCreate);
-	return queueCreate;
-}
-function useContextState() {
-	return inject(QueueContextKey, void 0);
-}
-export { useContextProvider, useContextState };

package/dist/portal/dist/Portal.js

@@ -1,101 +0,0 @@
-import { filterEmpty } from "../../util/dist/props-util/index.js";
-import { warning_default } from "../../util/dist/warning.js";
-import "../../util/dist/index.js";
-import { useContextProvider } from "./Context.js";
-import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
-import { useDom } from "./useDom.js";
-import { useEscKeyDown } from "./useEscKeyDown.js";
-import { useScrollLocker } from "./useScrollLocker.js";
-import { getDOM } from "../../util/dist/Dom/findDOMNode.js";
-import { Teleport, computed, createVNode, defineComponent, isVNode, mergeDefaults, onMounted, shallowRef, watch } from "vue";
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-function getPortalContainer(getContainer) {
-	if (getContainer === false) return false;
-	if (!canUseDom() || !getContainer) return null;
-	if (typeof getContainer === "string") return document.querySelector(getContainer);
-	if (typeof getContainer === "function") return getDOM(getContainer());
-	return typeof getContainer === "object" ? getDOM(getContainer) : getContainer;
-}
-var Portal_default = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
-	const shouldRender = shallowRef(props.open);
-	const mergedRender = computed(() => shouldRender.value || props.open);
-	if (process.env.NODE_ENV !== "production") warning_default(canUseDom() || !props.open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
-	watch([() => props.open, () => props.autoDestroy], () => {
-		if (props.autoDestroy || props.open) shouldRender.value = props.open;
-	});
-	const innerContainer = shallowRef(getPortalContainer(props.getContainer));
-	onMounted(() => {
-		innerContainer.value = getPortalContainer(props.getContainer) ?? null;
-	});
-	watch(() => props.getContainer, () => {
-		innerContainer.value = getPortalContainer(props.getContainer) ?? null;
-	});
-	const [defaultContainer, queueCreate] = useDom(computed(() => !!(mergedRender.value && !innerContainer.value)), props.debug);
-	useContextProvider(queueCreate);
-	const mergedContainer = computed(() => innerContainer.value ?? defaultContainer);
-	useScrollLocker(computed(() => !!(props.autoLock && props.open && canUseDom() && (mergedContainer.value === defaultContainer || mergedContainer.value === document.body))));
-	useEscKeyDown(computed(() => !!props.open), (...args) => {
-		props.onEsc?.(...args);
-	});
-	const elementEl = shallowRef();
-	const setRef = (el) => {
-		elementEl.value = el;
-	};
-	expose({ elementEl });
-	return () => {
-		if (!mergedRender.value || !canUseDom() || innerContainer.value === void 0) return null;
-		const renderInline = mergedContainer.value === false;
-		const reffedChildren = filterEmpty(slots.default?.() ?? []);
-		if (renderInline) return reffedChildren;
-		else {
-			const child = reffedChildren.length === 1 ? isVNode(reffedChildren[0]) ? createVNode(reffedChildren[0], { ref: setRef }) : reffedChildren[0] : reffedChildren;
-			return createVNode(Teleport, { "to": mergedContainer.value }, _isSlot(child) ? child : { default: () => [child] });
-		}
-	};
-}, {
-	props: /* @__PURE__ */ mergeDefaults({
-		getContainer: {
-			type: [
-				String,
-				Function,
-				Boolean
-			],
-			required: false,
-			skipCheck: true,
-			default: void 0
-		},
-		open: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		autoDestroy: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		autoLock: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		onEsc: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		debug: {
-			type: String,
-			required: false,
-			default: void 0
-		}
-	}, {
-		autoDestroy: true,
-		getContainer: void 0
-	}),
-	name: "Portal",
-	inheritAttrs: false
-});
-export { Portal_default };

package/dist/portal/dist/index.js

@@ -1,3 +0,0 @@
-import { Portal_default } from "./Portal.js";
-var src_default = Portal_default;
-export { src_default };

package/dist/portal/dist/useDom.js

@@ -1,52 +0,0 @@
-import { useContextState } from "./Context.js";
-import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
-import { computed, nextTick, onUnmounted, shallowRef, watch } from "vue";
-var EMPTY_LIST = [];
-function useDom(render, debug) {
-	const eleFun = () => {
-		if (!canUseDom()) return null;
-		const defaultEle = document.createElement("div");
-		if (process.env.NODE_ENV !== "production" && debug) defaultEle.setAttribute("data-debug", debug);
-		return defaultEle;
-	};
-	const ele = eleFun();
-	const appendedRef = shallowRef(false);
-	const queueCreate = useContextState();
-	const queue = shallowRef([]);
-	const mergedQueueCreate = computed(() => queueCreate?.value || (appendedRef.value ? void 0 : (appendFn) => {
-		queue.value = [appendFn, ...queue.value];
-	}));
-	function append() {
-		if (!ele || !canUseDom()) return;
-		if (!ele?.parentElement) document.body.appendChild(ele);
-		appendedRef.value = true;
-	}
-	function cleanup() {
-		if (!ele || !canUseDom()) {
-			appendedRef.value = false;
-			return;
-		}
-		if (ele?.parentElement) ele?.parentElement?.removeChild(ele);
-		else if (appendedRef.value) document.body?.removeChild?.(ele);
-		appendedRef.value = false;
-	}
-	watch(render, () => {
-		if (render.value) if (queueCreate?.value) queueCreate.value(append);
-		else append();
-		else nextTick(() => {
-			cleanup();
-		});
-	}, { immediate: true });
-	onUnmounted(cleanup);
-	watch(queue, () => {
-		if (queue.value.length) {
-			queue.value.forEach((fn) => fn());
-			queue.value = [...EMPTY_LIST];
-		}
-	}, {
-		flush: "post",
-		immediate: true
-	});
-	return [ele, mergedQueueCreate];
-}
-export { useDom };

package/dist/portal/dist/useEscKeyDown.js

@@ -1,54 +0,0 @@
-import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
-import { useId, watch } from "vue";
-var stack = [];
-var IME_LOCK_DURATION = 200;
-var lastCompositionEndTime = 0;
-process.env.NODE_ENV;
-function onGlobalKeyDown(event) {
-	if (event.key === "Escape" && !event.isComposing) {
-		if (Date.now() - lastCompositionEndTime < IME_LOCK_DURATION) return;
-		const len = stack.length;
-		for (let i = len - 1; i >= 0; i -= 1) stack?.[i]?.onEsc?.({
-			top: i === len - 1,
-			event
-		});
-	}
-}
-function onGlobalCompositionEnd() {
-	lastCompositionEndTime = Date.now();
-}
-function attachGlobalEventListeners() {
-	if (!canUseDom()) return;
-	window.addEventListener("keydown", onGlobalKeyDown);
-	window.addEventListener("compositionend", onGlobalCompositionEnd);
-}
-function detachGlobalEventListeners() {
-	if (!canUseDom() || stack.length !== 0) return;
-	window.removeEventListener("keydown", onGlobalKeyDown);
-	window.removeEventListener("compositionend", onGlobalCompositionEnd);
-}
-function useEscKeyDown(open, onEsc = () => {}) {
-	const id = useId();
-	const onEventEsc = onEsc;
-	const ensure = () => {
-		if (!stack.find((item) => item.id === id)) stack.push({
-			id,
-			onEsc: onEventEsc
-		});
-	};
-	const clear = () => {
-		stack = stack.filter((item) => item.id !== id);
-	};
-	watch(open, (_, _o, onCleanup) => {
-		if (!canUseDom()) return;
-		if (open.value) {
-			ensure();
-			attachGlobalEventListeners();
-			onCleanup(() => {
-				clear();
-				detachGlobalEventListeners();
-			});
-		} else if (!open.value) clear();
-	}, { immediate: true });
-}
-export { useEscKeyDown };

package/dist/portal/dist/useScrollLocker.js

@@ -1,28 +0,0 @@
-import { isBodyOverflowing } from "./util.js";
-import { removeCSS, updateCSS } from "../../util/dist/Dom/dynamicCSS.js";
-import { getTargetScrollBarSize } from "../../util/dist/getScrollBarSize.js";
-import { computed, shallowRef, unref, watch } from "vue";
-var UNIQUE_ID = `vc-util-locker-${Date.now()}`;
-var uuid = 0;
-function useScrollLocker(lock) {
-	const mergedLock = computed(() => unref(lock));
-	uuid += 1;
-	const id = shallowRef(`${UNIQUE_ID}_${uuid}`);
-	watch([id, mergedLock], async (_, _o, onCleanup) => {
-		if (mergedLock.value) {
-			const scrollbarSize = getTargetScrollBarSize(document.body).width;
-			updateCSS(`
-html body {
-  overflow-y: hidden;
-  ${isBodyOverflowing() ? `width: calc(100% - ${scrollbarSize}px);` : ""}
-}`, id.value);
-			onCleanup(() => {
-				removeCSS(id.value);
-			});
-		} else removeCSS(id.value);
-	}, {
-		flush: "post",
-		immediate: true
-	});
-}
-export { useScrollLocker };

package/dist/portal/dist/util.js

@@ -1,4 +0,0 @@
-function isBodyOverflowing() {
-	return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
-}
-export { isBodyOverflowing };

package/dist/util/dist/Dom/contains.js

@@ -1,11 +0,0 @@
-function contains(root, n) {
-	if (!root) return false;
-	if (root.contains) return root.contains(n);
-	let node = n;
-	while (node) {
-		if (node === root) return true;
-		node = node.parentNode;
-	}
-	return false;
-}
-export { contains };

package/dist/util/dist/Dom/dynamicCSS.js

@@ -1,79 +0,0 @@
-import { canUseDom } from "./canUseDom.js";
-import { contains } from "./contains.js";
-var APPEND_ORDER = "data-vc-order";
-var APPEND_PRIORITY = "data-vc-priority";
-var MARK_KEY = `vc-util-key`;
-var containerCache = /* @__PURE__ */ new Map();
-function getMark({ mark } = {}) {
-	if (mark) return mark.startsWith("data-") ? mark : `data-${mark}`;
-	return MARK_KEY;
-}
-function getContainer(option) {
-	if (option.attachTo) return option.attachTo;
-	return document.querySelector("head") || document.body;
-}
-function getOrder(prepend) {
-	if (prepend === "queue") return "prependQueue";
-	return prepend ? "prepend" : "append";
-}
-function findStyles(container) {
-	return Array.from((containerCache.get(container) || container).children).filter((node) => node.tagName === "STYLE");
-}
-function injectCSS(css, option = {}) {
-	if (!canUseDom()) return null;
-	const { csp, prepend, priority = 0 } = option;
-	const mergedOrder = getOrder(prepend);
-	const isPrependQueue = mergedOrder === "prependQueue";
-	const styleNode = document.createElement("style");
-	styleNode.setAttribute(APPEND_ORDER, mergedOrder);
-	if (isPrependQueue && priority) styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
-	if (csp?.nonce) styleNode.nonce = csp?.nonce;
-	styleNode.innerHTML = css;
-	const container = getContainer(option);
-	const { firstChild } = container;
-	if (prepend) {
-		if (isPrependQueue) {
-			const existStyle = findStyles(container).filter((node) => {
-				if (!["prepend", "prependQueue"].includes(node.getAttribute(APPEND_ORDER))) return false;
-				return priority >= Number(node.getAttribute(APPEND_PRIORITY) || 0);
-			});
-			if (existStyle.length) {
-				container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
-				return styleNode;
-			}
-		}
-		container.insertBefore(styleNode, firstChild);
-	} else container.appendChild(styleNode);
-	return styleNode;
-}
-function findExistNode(key, option = {}) {
-	return findStyles(getContainer(option)).find((node) => node.getAttribute(getMark(option)) === key);
-}
-function removeCSS(key, option = {}) {
-	if (!canUseDom()) return null;
-	const existNode = findExistNode(key, option);
-	if (existNode) getContainer(option).removeChild(existNode);
-}
-function syncRealContainer(container, option) {
-	const cachedRealContainer = containerCache.get(container);
-	if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
-		const placeholderStyle = injectCSS("", option);
-		const { parentNode } = placeholderStyle;
-		containerCache.set(container, parentNode);
-		container.removeChild(placeholderStyle);
-	}
-}
-function updateCSS(css, key, option = {}) {
-	if (!canUseDom()) return null;
-	syncRealContainer(getContainer(option), option);
-	const existNode = findExistNode(key, option);
-	if (existNode) {
-		if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce) existNode.nonce = option.csp?.nonce;
-		if (existNode.innerHTML !== css) existNode.innerHTML = css;
-		return existNode;
-	}
-	const newNode = injectCSS(css, option);
-	newNode.setAttribute(getMark(option), key);
-	return newNode;
-}
-export { removeCSS, updateCSS };

package/dist/util/dist/Dom/findDOMNode.js

@@ -1,20 +0,0 @@
-import { canUseDom } from "./canUseDom.js";
-import { unref } from "vue";
-function isDOM(node) {
-	return node instanceof HTMLElement || node instanceof SVGElement;
-}
-function getDOM(elementRef) {
-	const unrefElementRef = unref(elementRef);
-	if (!canUseDom()) return unrefElementRef;
-	const dom = findDOMNode(unrefElementRef) || (unrefElementRef && typeof unrefElementRef === "object" ? findDOMNode(unrefElementRef.nativeElement) : null);
-	if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
-	return dom;
-}
-function findDOMNode(_node) {
-	const node = unref(_node);
-	if (!canUseDom()) return node;
-	if (isDOM(node)) return node;
-	else if (node && "$el" in node) return node.$el;
-	return null;
-}
-export { getDOM };

package/dist/util/dist/RenderComponent.js

@@ -1,29 +0,0 @@
-import { filterEmpty } from "./props-util/index.js";
-import { createVNode, defineComponent, isVNode } from "vue";
-function checkIsBaseType(value) {
-	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return true;
-	return typeof value === "undefined" || value === null;
-}
-defineComponent((props, { attrs }) => {
-	return () => {
-		const render$1 = props.render;
-		if (render$1 && typeof render$1 === "function") {
-			const _render = render$1?.();
-			if (Array.isArray(_render)) return filterEmpty(_render).map((v) => {
-				if (isVNode(v)) return createVNode(v, { ...attrs });
-				else return v;
-			});
-			return _render;
-		} else if (Array.isArray(render$1)) return filterEmpty(render$1).map((v) => {
-			if (isVNode(v)) return createVNode(v, { ...attrs });
-			return v;
-		});
-		else if (checkIsBaseType(render$1)) return render$1;
-		if (isVNode(render$1)) return createVNode(render$1, { ...attrs });
-		return render$1;
-	};
-}, {
-	inheritAttrs: false,
-	name: "RenderComponent",
-	props: ["render"]
-});

package/dist/util/dist/classnames.js

@@ -1,35 +0,0 @@
-function toVal(mix) {
-	let str = "";
-	if (typeof mix === "string" || typeof mix === "number") str += mix;
-	else if (typeof mix === "object") {
-		if (Array.isArray(mix)) {
-			for (let k = 0; k < mix.length; k++) if (mix[k]) {
-				const y = toVal(mix[k]);
-				if (y) {
-					str && (str += " ");
-					str += y;
-				}
-			}
-		} else for (const k in mix) if (mix[k]) {
-			str && (str += " ");
-			str += k;
-		}
-	}
-	return str;
-}
-function classNames(...args) {
-	let str = "";
-	for (let i = 0; i < args.length; i++) {
-		const tmp = args[i];
-		if (tmp) {
-			const x = toVal(tmp);
-			if (x) {
-				str && (str += " ");
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-var clsx = classNames;
-export { classNames, clsx };

package/dist/util/dist/getScrollBarSize.js

@@ -1,53 +0,0 @@
-var cached;
-function getScrollBarSize(fresh) {
-	if (typeof document === "undefined") return 0;
-	if (fresh || cached === void 0) {
-		const inner = document.createElement("div");
-		inner.style.width = "100%";
-		inner.style.height = "200px";
-		const outer = document.createElement("div");
-		const outerStyle = outer.style;
-		outerStyle.position = "absolute";
-		outerStyle.top = "0";
-		outerStyle.left = "0";
-		outerStyle.pointerEvents = "none";
-		outerStyle.visibility = "hidden";
-		outerStyle.width = "200px";
-		outerStyle.height = "150px";
-		outerStyle.overflow = "hidden";
-		outer.appendChild(inner);
-		document.body.appendChild(outer);
-		const widthContained = inner.offsetWidth;
-		outer.style.overflow = "scroll";
-		let widthScroll = inner.offsetWidth;
-		if (widthContained === widthScroll) widthScroll = outer.clientWidth;
-		document.body.removeChild(outer);
-		cached = widthContained - widthScroll;
-	}
-	return cached;
-}
-function ensureSize(str) {
-	const match = str.match(/^(.*)px$/);
-	const value = Number(match?.[1]);
-	return Number.isNaN(value) ? getScrollBarSize() : value;
-}
-function getTargetScrollBarSize(target) {
-	if (typeof document === "undefined" || !target || !(target instanceof Element)) return {
-		width: 0,
-		height: 0
-	};
-	if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
-		width: 0,
-		height: 0
-	};
-	let width = "0px";
-	let height = "0px";
-	try {
-		({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
-	} catch {}
-	return {
-		width: ensureSize(width),
-		height: ensureSize(height)
-	};
-}
-export { getTargetScrollBarSize };

package/dist/util/dist/hooks/useControlledState.js

@@ -1 +0,0 @@
-import { nextTick, shallowRef, watch } from "vue";

package/dist/util/dist/hooks/useId.js

@@ -1,5 +0,0 @@
-import { useId } from "vue";
-function getUseId() {
-	return useId;
-}
-getUseId();

package/dist/util/dist/index.js

@@ -1,8 +0,0 @@
-import { raf_default } from "./raf.js";
-import { omit } from "./omit.js";
-import "./RenderComponent.js";
-import { classNames, clsx } from "./classnames.js";
-import "./hooks/useControlledState.js";
-import "./hooks/useId.js";
-import { useMergedState } from "./hooks/useMergedState.js";
-import { warning_default } from "./warning.js";