@v-c/image 1.0.8 → 1.0.9

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

@@ -1,8 +1,8 @@
+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 { 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";

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

@@ -1,9 +1,9 @@
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.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 { 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";

package/dist/{image/src/PreviewGroup.js → 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/{image/src/hooks → hooks}/useImageTransform.js

@@ -1,6 +1,6 @@
 import { getClientSize } from "../util.js";
-import { isEqual_default } from "../../../util/dist/isEqual.js";
-import { raf_default } from "../../../util/dist/raf.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/{image/src/hooks → hooks}/useMouseEvent.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 { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
 import { shallowRef, watch } from "vue";
 import { warning } from "@v-c/util";

package/dist/{image/src/hooks → 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/util/dist/Dom/findDOMNode.js

@@ -0,0 +1,20 @@
+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/Dom/focus.js

@@ -1,3 +1,5 @@
+import { useId_default } from "../hooks/useId.js";
+import { getDOM } from "./findDOMNode.js";
 import { isVisible_default } from "./isVisible.js";
 import { watch } from "vue";
 function focusable(node, includePositive = false) {
@@ -28,9 +30,31 @@ function getFocusNodeList(node, includePositive = false) {
 }
 var lastFocusElement = null;
 var focusElements = [];
+var idToElementMap = /* @__PURE__ */ new Map();
+var ignoredElementMap = /* @__PURE__ */ new Map();
+var allowedElementMap = /* @__PURE__ */ new Map();
 function getLastElement() {
 	return focusElements[focusElements.length - 1];
 }
+function getLastLockId() {
+	const lastElement = getLastElement();
+	if (!lastElement) return void 0;
+	for (const [id, ele] of idToElementMap.entries()) if (ele === lastElement) return id;
+}
+function isIgnoredElement(element) {
+	const lockId = getLastLockId();
+	if (!lockId || !element) return false;
+	const ignoredEle = ignoredElementMap.get(lockId);
+	return !!ignoredEle && (ignoredEle === element || ignoredEle.contains(element));
+}
+function isAllowedElement(element) {
+	const lockId = getLastLockId();
+	if (!lockId || !element) return false;
+	const allowedElements = allowedElementMap.get(lockId);
+	if (!allowedElements?.size) return false;
+	for (const allowedElement of allowedElements) if (allowedElement === element || allowedElement.contains(element)) return true;
+	return false;
+}
 function hasFocus(element) {
 	const { activeElement } = document;
 	return element === activeElement || element.contains(activeElement);
@@ -38,9 +62,10 @@ function hasFocus(element) {
 function syncFocus() {
 	const lastElement = getLastElement();
 	const { activeElement } = document;
+	if (isIgnoredElement(activeElement) || isAllowedElement(activeElement)) return;
 	if (lastElement && !hasFocus(lastElement)) {
 		const focusableList = getFocusNodeList(lastElement);
-		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
+		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus({ preventScroll: true });
 	} else lastFocusElement = activeElement;
 }
 function onWindowKeyDown(e) {
@@ -52,8 +77,9 @@ function onWindowKeyDown(e) {
 		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
 	}
 }
-function lockFocus(element) {
+function lockFocus(element, id) {
 	if (element) {
+		idToElementMap.set(id, element);
 		focusElements = focusElements.filter((ele) => ele !== element);
 		focusElements.push(element);
 		window.addEventListener("focusin", syncFocus);
@@ -63,6 +89,9 @@ function lockFocus(element) {
 	return () => {
 		lastFocusElement = null;
 		focusElements = focusElements.filter((ele) => ele !== element);
+		idToElementMap.delete(id);
+		ignoredElementMap.delete(id);
+		allowedElementMap.delete(id);
 		if (focusElements.length === 0) {
 			window.removeEventListener("focusin", syncFocus);
 			window.removeEventListener("keydown", onWindowKeyDown, true);
@@ -70,11 +99,31 @@ function lockFocus(element) {
 	};
 }
 function useLockFocus(lock, getElement) {
-	watch(lock, (_, _o, onCleanup) => {
-		if (lock.value) {
-			const element = getElement();
-			if (element) onCleanup(lockFocus(element));
-		}
+	const id = useId_default();
+	watch([lock, () => getElement()], ([nextLock, element], _o, onCleanup) => {
+		element = getDOM(element);
+		if (nextLock && element) onCleanup(lockFocus(element, id));
+	}, {
+		flush: "post",
+		immediate: true
 	});
+	const ignoreElement = (ele) => {
+		if (ele) ignoredElementMap.set(id, ele);
+	};
+	const registerAllowedElement = (ele) => {
+		if (!ele) return () => {};
+		let allowedElements = allowedElementMap.get(id);
+		if (!allowedElements) {
+			allowedElements = /* @__PURE__ */ new Set();
+			allowedElementMap.set(id, allowedElements);
+		}
+		allowedElements.add(ele);
+		return () => {
+			const nextAllowedElements = allowedElementMap.get(id);
+			nextAllowedElements?.delete(ele);
+			if (!nextAllowedElements?.size) allowedElementMap.delete(id);
+		};
+	};
+	return [ignoreElement, registerAllowedElement];
 }
 export { useLockFocus };

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

@@ -0,0 +1,12 @@
+import { useId } from "vue";
+function getUseId() {
+	return useId;
+}
+var useOriginalId = getUseId();
+function useId_default(id) {
+	const vueId = useOriginalId();
+	if (id) return id;
+	if (process.env.NODE_ENV === "test") return "test-id";
+	return vueId;
+}
+export { useId_default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "image component",
   "author": "",
   "license": "MIT",