@v-c/image 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Image.js +9 -5
- package/dist/Preview/index.js +21 -9
- package/package.json +1 -1
package/dist/Image.js
CHANGED
|
@@ -4,7 +4,7 @@ import useRegisterImage from "./hooks/useRegisterImage.js";
|
|
|
4
4
|
import useStatus from "./hooks/useStatus.js";
|
|
5
5
|
import Preview from "./Preview/index.js";
|
|
6
6
|
import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
|
|
7
|
-
import { clsx } from "@v-c/util";
|
|
7
|
+
import { clsx, omit } from "@v-c/util";
|
|
8
8
|
import useMergedState from "@v-c/util/dist/hooks/useMergedState";
|
|
9
9
|
import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
10
10
|
import { getAttrStyleAndClass, getStylePxValue } from "@v-c/util/dist/props-util";
|
|
@@ -42,7 +42,10 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
42
42
|
const imgCommonProps = computed(() => {
|
|
43
43
|
const obj = {};
|
|
44
44
|
COMMON_PROPS.forEach((prop) => {
|
|
45
|
-
|
|
45
|
+
const fromProps = props[prop];
|
|
46
|
+
const fromAttrs = attrs[prop];
|
|
47
|
+
const val = fromProps !== void 0 ? fromProps : fromAttrs;
|
|
48
|
+
if (val !== void 0) obj[prop] = val;
|
|
46
49
|
});
|
|
47
50
|
return obj;
|
|
48
51
|
});
|
|
@@ -91,6 +94,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
91
94
|
return () => {
|
|
92
95
|
const { width, height } = props;
|
|
93
96
|
const { className, style: attrStyle, restAttrs } = getAttrStyleAndClass(attrs);
|
|
97
|
+
const rootAttrs = pickAttrs(omit(restAttrs, COMMON_PROPS), false);
|
|
94
98
|
const coverPlacement = typeof cover.value === "object" && cover.value && cover.value.placement ? cover.value.placement || "center" : "center";
|
|
95
99
|
const coverNode = slots.cover?.() || (typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value);
|
|
96
100
|
const imgStyle = [
|
|
@@ -112,12 +116,12 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
112
116
|
...info
|
|
113
117
|
}) : mergedPreviewConfig.value.actionsRender;
|
|
114
118
|
const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls, ...restPreviewProps } = mergedPreviewConfig.value;
|
|
115
|
-
return createVNode(Fragment, null, [createVNode("div", mergeProps(
|
|
119
|
+
return createVNode(Fragment, null, [createVNode("div", mergeProps(rootAttrs, {
|
|
116
120
|
"class": rootCls,
|
|
117
121
|
"onClick": canPreview.value ? onPreview : onInternalClick,
|
|
118
122
|
"role": canPreview.value ? "button" : restAttrs.role,
|
|
119
123
|
"tabindex": canPreview.value && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
|
|
120
|
-
"aria-label": canPreview.value ? restAttrs["aria-label"] ??
|
|
124
|
+
"aria-label": canPreview.value ? restAttrs["aria-label"] ?? imgCommonProps.value.alt : restAttrs["aria-label"],
|
|
121
125
|
"onKeydown": onPreviewKeyDown,
|
|
122
126
|
"style": rootStyle
|
|
123
127
|
}), [
|
|
@@ -146,7 +150,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
146
150
|
"onClose": onPreviewClose,
|
|
147
151
|
"mousePosition": mousePosition.value,
|
|
148
152
|
"src": src.value,
|
|
149
|
-
"alt":
|
|
153
|
+
"alt": imgCommonProps.value.alt,
|
|
150
154
|
"imageInfo": {
|
|
151
155
|
width: props.width,
|
|
152
156
|
height: props.height
|
package/dist/Preview/index.js
CHANGED
|
@@ -32,6 +32,22 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
32
32
|
const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(imgEl, computed(() => props.minScale ?? 1), computed(() => props.maxScale ?? 50), (info) => props.onTransform?.(info));
|
|
33
33
|
const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.scaleStep ?? .5), transform, updateTransform, dispatchZoomChange);
|
|
34
34
|
const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.minScale ?? 1), transform, updateTransform, dispatchZoomChange);
|
|
35
|
+
watch(imgEl, (el, _old, onCleanup) => {
|
|
36
|
+
if (!el) return;
|
|
37
|
+
const opts = { passive: true };
|
|
38
|
+
el.addEventListener("wheel", onWheel, opts);
|
|
39
|
+
el.addEventListener("touchstart", onTouchStart, opts);
|
|
40
|
+
el.addEventListener("touchmove", onTouchMove, opts);
|
|
41
|
+
el.addEventListener("touchend", onTouchEnd, opts);
|
|
42
|
+
el.addEventListener("touchcancel", onTouchEnd, opts);
|
|
43
|
+
onCleanup(() => {
|
|
44
|
+
el.removeEventListener("wheel", onWheel);
|
|
45
|
+
el.removeEventListener("touchstart", onTouchStart);
|
|
46
|
+
el.removeEventListener("touchmove", onTouchMove);
|
|
47
|
+
el.removeEventListener("touchend", onTouchEnd);
|
|
48
|
+
el.removeEventListener("touchcancel", onTouchEnd);
|
|
49
|
+
});
|
|
50
|
+
});
|
|
35
51
|
watch(() => props.open, (open) => {
|
|
36
52
|
if (!open) resetTransform("close");
|
|
37
53
|
});
|
|
@@ -121,11 +137,12 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
121
137
|
useLockFocus(computed(() => !!(focusTrap.value && props.open && portalRender.value)), () => wrapperRef.value);
|
|
122
138
|
return () => {
|
|
123
139
|
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, maskClosable = true } = props;
|
|
140
|
+
const mergedAlt = alt ?? imgCommonProps?.alt;
|
|
124
141
|
const bodyStyle = { ...styles.body ?? {} };
|
|
125
142
|
if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
|
|
126
143
|
const image = {
|
|
127
144
|
url: src || "",
|
|
128
|
-
alt:
|
|
145
|
+
alt: mergedAlt || "",
|
|
129
146
|
...imageInfo
|
|
130
147
|
};
|
|
131
148
|
const imgNode = createVNode("img", mergeProps(imgCommonProps, {
|
|
@@ -137,19 +154,14 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
137
154
|
"width": props.width,
|
|
138
155
|
"height": props.height,
|
|
139
156
|
"class": `${prefixCls}-img`,
|
|
140
|
-
"alt":
|
|
157
|
+
"alt": mergedAlt,
|
|
141
158
|
"onLoad": srcAndOnload.value.onLoad,
|
|
142
159
|
"style": {
|
|
143
160
|
transform: `translate3d(${transform.value.x}px, ${transform.value.y}px, 0) scale3d(${transform.value.flipX ? "-" : ""}${transform.value.scale}, ${transform.value.flipY ? "-" : ""}${transform.value.scale}, 1) rotate(${transform.value.rotate}deg)`,
|
|
144
161
|
transitionDuration: !enableTransition.value || isTouching.value ? "0s" : void 0
|
|
145
162
|
},
|
|
146
|
-
"onWheel": onWheel,
|
|
147
163
|
"onMousedown": onMouseDown,
|
|
148
|
-
"onDblclick": onDoubleClick
|
|
149
|
-
"onTouchstart": onTouchStart,
|
|
150
|
-
"onTouchmove": onTouchMove,
|
|
151
|
-
"onTouchend": onTouchEnd,
|
|
152
|
-
"onTouchcancel": onTouchEnd
|
|
164
|
+
"onDblclick": onDoubleClick
|
|
153
165
|
}), null);
|
|
154
166
|
const mergedRootStyle = {
|
|
155
167
|
...styles.root ?? {},
|
|
@@ -179,7 +191,7 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
179
191
|
"style": mergedRootStyle,
|
|
180
192
|
"role": "dialog",
|
|
181
193
|
"aria-modal": "true",
|
|
182
|
-
"aria-label":
|
|
194
|
+
"aria-label": mergedAlt,
|
|
183
195
|
"tabindex": -1
|
|
184
196
|
}, [
|
|
185
197
|
createVNode("div", {
|