@v-c/image 1.0.10 → 1.0.11
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 +4 -3
- 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
|
@@ -121,11 +121,12 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
121
121
|
useLockFocus(computed(() => !!(focusTrap.value && props.open && portalRender.value)), () => wrapperRef.value);
|
|
122
122
|
return () => {
|
|
123
123
|
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;
|
|
124
|
+
const mergedAlt = alt ?? imgCommonProps?.alt;
|
|
124
125
|
const bodyStyle = { ...styles.body ?? {} };
|
|
125
126
|
if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
|
|
126
127
|
const image = {
|
|
127
128
|
url: src || "",
|
|
128
|
-
alt:
|
|
129
|
+
alt: mergedAlt || "",
|
|
129
130
|
...imageInfo
|
|
130
131
|
};
|
|
131
132
|
const imgNode = createVNode("img", mergeProps(imgCommonProps, {
|
|
@@ -137,7 +138,7 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
137
138
|
"width": props.width,
|
|
138
139
|
"height": props.height,
|
|
139
140
|
"class": `${prefixCls}-img`,
|
|
140
|
-
"alt":
|
|
141
|
+
"alt": mergedAlt,
|
|
141
142
|
"onLoad": srcAndOnload.value.onLoad,
|
|
142
143
|
"style": {
|
|
143
144
|
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)`,
|
|
@@ -179,7 +180,7 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
|
|
|
179
180
|
"style": mergedRootStyle,
|
|
180
181
|
"role": "dialog",
|
|
181
182
|
"aria-modal": "true",
|
|
182
|
-
"aria-label":
|
|
183
|
+
"aria-label": mergedAlt,
|
|
183
184
|
"tabindex": -1
|
|
184
185
|
}, [
|
|
185
186
|
createVNode("div", {
|