@v-c/image 1.0.7 → 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,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";
@@ -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 → image/src/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 → image/src/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 → image/src/Preview}/index.js

@@ -1,8 +1,9 @@
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.js";
-import { canUseDom } from "../util/dist/Dom/canUseDom.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";
@@ -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/{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 { 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/{hooks → image/src/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/{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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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"