@v-c/image 1.0.7 → 1.0.9

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

@@ -69,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);
@@ -96,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, {
@@ -203,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,
@@ -212,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/Footer.js

@@ -3,12 +3,15 @@ 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/PrevNext.js

@@ -6,17 +6,19 @@ var PrevNext_default = /* @__PURE__ */ defineComponent((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/index.js

@@ -1,6 +1,7 @@
 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 useImageTransform from "../hooks/useImageTransform.js";
@@ -15,6 +16,7 @@ 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);
@@ -112,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 = {
@@ -149,7 +152,10 @@ 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(Portal, {
 			"open": open || animatedVisible.value || portalRender.value,
@@ -161,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/common.js

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

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/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

@@ -0,0 +1,129 @@
+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) {
+	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 = [];
+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);
+}
+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({ preventScroll: true });
+	} 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, id) {
+	if (element) {
+		idToElementMap.set(id, 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);
+		idToElementMap.delete(id);
+		ignoredElementMap.delete(id);
+		allowedElementMap.delete(id);
+		if (focusElements.length === 0) {
+			window.removeEventListener("focusin", syncFocus);
+			window.removeEventListener("keydown", onWindowKeyDown, true);
+		}
+	};
+}
+function useLockFocus(lock, getElement) {
+	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/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/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.7",
+  "version": "1.0.9",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.19",
-    "@v-c/portal": "^1.0.8"
+    "@v-c/portal": "^1.0.8",
+    "@v-c/util": "^1.0.19"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"