fangguo-component 1.2.3 → 1.2.5
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/{ErrorImage-CFVt1ht_.js → ErrorImage-Ao9kEEUg.js} +2 -2
- package/dist/FgCascader.css +2 -14
- package/dist/{FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js → FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js} +20 -26
- package/dist/{HSelect-DgFjd08Y.js → HSelect-0w2mSrtm.js} +1 -1
- package/dist/{HSelectAll.vue_vue_type_script_setup_true_lang-C6qzdQT-.js → HSelectAll.vue_vue_type_script_setup_true_lang-xHFbYs59.js} +1 -1
- package/dist/{HSelectSJ-DOFUzTZV.js → HSelectSJ-Cm573j6B.js} +1 -1
- package/dist/{ImgViewerHost.vue_vue_type_script_setup_true_lang-DBs42WOq.js → ImgViewerHost.vue_vue_type_script_setup_true_lang-DO9s-b9s.js} +42 -3
- package/dist/{LazyPopover-7ebuh-QG.js → LazyPopover-CcvilJ6U.js} +25 -3
- package/dist/LazyPopover.css +1 -1
- package/dist/{SelectTree-DUH92Iwr.js → SelectTree-BHvvkiQi.js} +1 -1
- package/dist/ViewImg-CLRjYOUN.js +556 -0
- package/dist/ViewImg.css +60 -35
- package/dist/ViewImgPopover-BtFnYval.js +463 -0
- package/dist/ViewImgPopover.css +28 -26
- package/dist/components/cascader/index.js +1 -1
- package/dist/components/errorImage/index.js +2 -2
- package/dist/components/hSelect/index.js +1 -1
- package/dist/components/hSelectAll/index.js +1 -1
- package/dist/components/hSelectSJ/index.js +1 -1
- package/dist/components/imgViewerHost/ImgViewerHost.vue.d.ts +7 -1
- package/dist/components/imgViewerHost/imgViewerAutoHost.d.ts +2 -0
- package/dist/components/imgViewerHost/imgViewerHostRegistry.d.ts +5 -0
- package/dist/components/imgViewerHost/index.js +2 -2
- package/dist/components/index.js +22 -18
- package/dist/components/lazyPopover/LazyPopover.vue.d.ts +2 -0
- package/dist/components/lazyPopover/index.js +1 -1
- package/dist/components/selectTree/index.js +1 -1
- package/dist/components/viewImg/ViewImg.vue.d.ts +44 -19
- package/dist/components/viewImg/ViewImgErrorFallback.vue.d.ts +17 -0
- package/dist/components/viewImg/defaults.d.ts +28 -0
- package/dist/components/viewImg/index.d.ts +3 -0
- package/dist/components/viewImg/index.js +6 -2
- package/dist/components/viewImgPopover/ViewImgPopover.vue.d.ts +207 -99
- package/dist/components/viewImgPopover/index.js +1 -1
- package/dist/components/viewImgPreview/ViewImgPreview.vue.d.ts +6 -6
- package/dist/imgViewerAutoHost-BQVVGop1.js +32 -0
- package/dist/{imgViewerStore-DK3zvGf4.js → imgViewerStore-Ajm-L7R5.js} +7 -0
- package/dist/{index-Qkq7I01c.js → index-DsfY1yqo.js} +6 -1
- package/dist/{index-Ce_edAQB.js → index-wDrpgKQT.js} +17 -13
- package/dist/index.d.ts +8 -3
- package/dist/index.js +58 -49
- package/dist/montageImgUrl-B9ZmJ7TF.js +464 -0
- package/dist/tools/ImageParserUtils/index.d.ts +1 -1
- package/dist/tools/imgUrl/imageUrl.d.ts +246 -0
- package/dist/tools/imgUrl/index.d.ts +2 -0
- package/dist/tools/imgUrl/index.js +13 -8
- package/dist/tools/imgUrl/montageImgUrl.d.ts +11 -5
- package/dist/tools/index.js +19 -14
- package/package.json +2 -2
- package/dist/ViewImg-DXhF20SL.js +0 -254
- package/dist/ViewImgPopover-QblZG0z5.js +0 -343
- package/dist/montageImgUrl-CwgYnB2h.js +0 -204
|
@@ -0,0 +1,463 @@
|
|
|
1
|
+
import './ViewImgPopover.css';var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { ElWatermark } from "element-plus/es";
|
|
33
|
+
import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, Fragment, renderSlot, normalizeProps, mergeProps, createBlock, createElementVNode, createSlots, guardReactiveProps, createCommentVNode, withModifiers } from "vue";
|
|
34
|
+
import { L as LazyPopover } from "./LazyPopover-CcvilJ6U.js";
|
|
35
|
+
import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } from "./ViewImg-CLRjYOUN.js";
|
|
36
|
+
import { h as hasPlatformImageResizeParams, m as montageImgUrl } from "./montageImgUrl-B9ZmJ7TF.js";
|
|
37
|
+
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
|
|
38
|
+
const HOVER_POPOVER_PADDING = 10;
|
|
39
|
+
const HOVER_POPOVER_MAX_HEIGHT = 400;
|
|
40
|
+
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
|
|
41
|
+
inheritAttrs: false
|
|
42
|
+
}), {
|
|
43
|
+
__name: "ViewImgPopover",
|
|
44
|
+
props: {
|
|
45
|
+
src: { default: "" },
|
|
46
|
+
fit: {},
|
|
47
|
+
lazy: { type: Boolean },
|
|
48
|
+
loading: { type: Boolean },
|
|
49
|
+
preview: { type: Boolean },
|
|
50
|
+
previewSrcList: {},
|
|
51
|
+
initialIndex: {},
|
|
52
|
+
defImgPreviewIndex: {},
|
|
53
|
+
infinite: { type: Boolean },
|
|
54
|
+
zIndex: {},
|
|
55
|
+
hideOnClickModal: { type: Boolean },
|
|
56
|
+
closeOnPressEscape: { type: Boolean, default: true },
|
|
57
|
+
previewTeleported: { type: Boolean },
|
|
58
|
+
teleported: { type: Boolean },
|
|
59
|
+
zoomRate: {},
|
|
60
|
+
scale: {},
|
|
61
|
+
minScale: {},
|
|
62
|
+
maxScale: {},
|
|
63
|
+
showProgress: { type: Boolean },
|
|
64
|
+
toolbarBgColor: {},
|
|
65
|
+
backgroundColor: {},
|
|
66
|
+
toolbarIconColor: {},
|
|
67
|
+
simpleExtraTools: {},
|
|
68
|
+
renderExtraTools: {},
|
|
69
|
+
originalToolbar: {},
|
|
70
|
+
fallbackColor: {},
|
|
71
|
+
errorText: {},
|
|
72
|
+
ossProcess: { type: Boolean, default: true },
|
|
73
|
+
ossLinks: {},
|
|
74
|
+
imgSize: {},
|
|
75
|
+
previewStripQuery: { type: Boolean, default: true },
|
|
76
|
+
previewSideNav: { type: [Boolean, String] },
|
|
77
|
+
scrollContainer: { default: null },
|
|
78
|
+
hoverSrc: { default: "" },
|
|
79
|
+
previewSrc: { default: "" },
|
|
80
|
+
hoverImgSize: { default: void 0 },
|
|
81
|
+
hoverPopoverProps: { default: () => ({}) },
|
|
82
|
+
isShowWatermark: { type: Boolean, default: false },
|
|
83
|
+
waterMarkTitle: {},
|
|
84
|
+
showPreviewIcon: { type: Boolean, default: false },
|
|
85
|
+
showHoverOnError: { type: Boolean, default: false },
|
|
86
|
+
loadingIconColor: {}
|
|
87
|
+
},
|
|
88
|
+
emits: ["load", "error", "retry", "show", "close", "switch"],
|
|
89
|
+
setup(__props, { emit: __emit }) {
|
|
90
|
+
const props = __props;
|
|
91
|
+
const emit = __emit;
|
|
92
|
+
const attrs = useAttrs();
|
|
93
|
+
const viewImgRef = ref(null);
|
|
94
|
+
const referenceLoadError = ref(false);
|
|
95
|
+
const viewImgDefaults = useViewImgDefaults();
|
|
96
|
+
const ViewImgDefaultRenderer = defineComponent({
|
|
97
|
+
props: {
|
|
98
|
+
render: {
|
|
99
|
+
type: Function,
|
|
100
|
+
required: true
|
|
101
|
+
},
|
|
102
|
+
payload: {
|
|
103
|
+
type: Object,
|
|
104
|
+
required: true
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
setup(props2) {
|
|
108
|
+
return () => props2.render(props2.payload);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
const resolvedWaterMarkTitle = computed(() => {
|
|
112
|
+
var _a, _b;
|
|
113
|
+
return (_b = (_a = props.waterMarkTitle) != null ? _a : viewImgDefaults.waterMarkTitle) != null ? _b : "";
|
|
114
|
+
});
|
|
115
|
+
const resolvedFallbackColor = computed(
|
|
116
|
+
() => {
|
|
117
|
+
var _a, _b;
|
|
118
|
+
return ((_a = props.fallbackColor) == null ? void 0 : _a.trim()) || ((_b = props.loadingIconColor) == null ? void 0 : _b.trim()) || viewImgDefaults.loadingIconColor || "";
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
const shouldEnableReferencePreview = computed(() => {
|
|
122
|
+
var _a;
|
|
123
|
+
return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
|
|
124
|
+
});
|
|
125
|
+
const viewImgProps = computed(() => {
|
|
126
|
+
const _a = props, {
|
|
127
|
+
hoverSrc: _h,
|
|
128
|
+
previewSrc: _ps,
|
|
129
|
+
hoverImgSize: _hi,
|
|
130
|
+
hoverPopoverProps: _hp,
|
|
131
|
+
isShowWatermark: _w,
|
|
132
|
+
waterMarkTitle: _wt,
|
|
133
|
+
showPreviewIcon: _spi,
|
|
134
|
+
showHoverOnError: _shoe,
|
|
135
|
+
loadingIconColor: _lic,
|
|
136
|
+
fallbackColor: _fc
|
|
137
|
+
} = _a, rest = __objRest(_a, [
|
|
138
|
+
"hoverSrc",
|
|
139
|
+
"previewSrc",
|
|
140
|
+
"hoverImgSize",
|
|
141
|
+
"hoverPopoverProps",
|
|
142
|
+
"isShowWatermark",
|
|
143
|
+
"waterMarkTitle",
|
|
144
|
+
"showPreviewIcon",
|
|
145
|
+
"showHoverOnError",
|
|
146
|
+
"loadingIconColor",
|
|
147
|
+
"fallbackColor"
|
|
148
|
+
]);
|
|
149
|
+
return __spreadProps(__spreadValues({}, rest), {
|
|
150
|
+
fallbackColor: resolvedFallbackColor.value,
|
|
151
|
+
previewSrcList: shouldEnableReferencePreview.value ? resolvePopoverPreviewSrcList() : []
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
const referenceViewImgBind = computed(() => {
|
|
155
|
+
const _a = attrs, { class: _class, style: _style } = _a, rest = __objRest(_a, ["class", "style"]);
|
|
156
|
+
return __spreadValues(__spreadValues({}, rest), viewImgProps.value);
|
|
157
|
+
});
|
|
158
|
+
const handlePreviewIconClick = () => {
|
|
159
|
+
var _a;
|
|
160
|
+
if (isReferenceInvalid.value) return;
|
|
161
|
+
(_a = viewImgRef.value) == null ? void 0 : _a.openPreview(resolvePopoverPreviewSrcList());
|
|
162
|
+
};
|
|
163
|
+
const mergePopperStyle = (base, extra) => {
|
|
164
|
+
if (!extra) return base;
|
|
165
|
+
if (typeof extra === "string") return extra;
|
|
166
|
+
return __spreadValues(__spreadValues({}, base), extra);
|
|
167
|
+
};
|
|
168
|
+
const HOVER_POPOVER_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT}px`;
|
|
169
|
+
const HOVER_IMAGE_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT - HOVER_POPOVER_PADDING * 2}px`;
|
|
170
|
+
const DEFAULT_HOVER_IMG_SIZE = { h: 420 };
|
|
171
|
+
const defaultSlotPayload = computed(() => {
|
|
172
|
+
var _a, _b;
|
|
173
|
+
return {
|
|
174
|
+
src: props.src,
|
|
175
|
+
displaySrc: ((_a = viewImgRef.value) == null ? void 0 : _a.displaySrc) || props.src,
|
|
176
|
+
loading: !!props.loading,
|
|
177
|
+
loadError: referenceLoadError.value,
|
|
178
|
+
errorText: (_b = props.errorText) != null ? _b : "",
|
|
179
|
+
fallbackColor: resolvedFallbackColor.value
|
|
180
|
+
};
|
|
181
|
+
});
|
|
182
|
+
const isReferenceInvalid = computed(() => !props.src.trim() || referenceLoadError.value);
|
|
183
|
+
const isHoverPopoverDisabled = computed(
|
|
184
|
+
() => isReferenceInvalid.value && !props.showHoverOnError
|
|
185
|
+
);
|
|
186
|
+
const canShowPreviewIcon = computed(
|
|
187
|
+
() => props.showPreviewIcon && !isReferenceInvalid.value
|
|
188
|
+
);
|
|
189
|
+
const hoverPopoverPropsMerged = computed(() => {
|
|
190
|
+
var _a;
|
|
191
|
+
const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
|
|
192
|
+
const popperClass = [userPopperClass, "fg-view-img-popover"].filter(Boolean).join(" ");
|
|
193
|
+
return __spreadValues({
|
|
194
|
+
placement: "right",
|
|
195
|
+
trigger: "hover",
|
|
196
|
+
width: 400,
|
|
197
|
+
teleported: true,
|
|
198
|
+
popperClass,
|
|
199
|
+
popperStyle: mergePopperStyle(
|
|
200
|
+
{
|
|
201
|
+
maxHeight: HOVER_POPOVER_MAX_HEIGHT_CSS,
|
|
202
|
+
overflow: "hidden",
|
|
203
|
+
padding: `${HOVER_POPOVER_PADDING}px`,
|
|
204
|
+
boxSizing: "border-box"
|
|
205
|
+
},
|
|
206
|
+
userPopperStyle
|
|
207
|
+
)
|
|
208
|
+
}, restHoverPopoverProps);
|
|
209
|
+
});
|
|
210
|
+
const stripQueryParams = (url) => {
|
|
211
|
+
const index = url.indexOf("?");
|
|
212
|
+
return index === -1 ? url : url.slice(0, index);
|
|
213
|
+
};
|
|
214
|
+
const applyPreviewUrlFallback = (url) => {
|
|
215
|
+
if (!props.previewStripQuery || !url) return url;
|
|
216
|
+
return stripQueryParams(url);
|
|
217
|
+
};
|
|
218
|
+
const resolvePopoverPreviewSrcList = () => {
|
|
219
|
+
var _a;
|
|
220
|
+
if (props.previewSrc) return [props.previewSrc];
|
|
221
|
+
if ((_a = props.previewSrcList) == null ? void 0 : _a.length) {
|
|
222
|
+
return props.previewSrcList.map((url) => applyPreviewUrlFallback(url));
|
|
223
|
+
}
|
|
224
|
+
if (!props.src.trim()) return [];
|
|
225
|
+
return [applyPreviewUrlFallback(props.src)];
|
|
226
|
+
};
|
|
227
|
+
const resolveHoverImgUrl = (url, imgSize) => {
|
|
228
|
+
if (!url.trim()) return "";
|
|
229
|
+
const options = props.ossLinks ? { ossLinks: props.ossLinks } : void 0;
|
|
230
|
+
const hasResizeParams = hasPlatformImageResizeParams(url);
|
|
231
|
+
if (hasResizeParams) {
|
|
232
|
+
return montageImgUrl(url, imgSize, options);
|
|
233
|
+
}
|
|
234
|
+
if (props.ossProcess) {
|
|
235
|
+
return montageImgUrl(url, imgSize, options);
|
|
236
|
+
}
|
|
237
|
+
return url;
|
|
238
|
+
};
|
|
239
|
+
const handleReferenceLoad = (event) => {
|
|
240
|
+
referenceLoadError.value = false;
|
|
241
|
+
emit("load", event);
|
|
242
|
+
};
|
|
243
|
+
const handleReferenceError = (event) => {
|
|
244
|
+
referenceLoadError.value = true;
|
|
245
|
+
emit("error", event);
|
|
246
|
+
};
|
|
247
|
+
const handleReferenceRetry = (payload) => {
|
|
248
|
+
referenceLoadError.value = false;
|
|
249
|
+
emit("retry", payload);
|
|
250
|
+
};
|
|
251
|
+
watch(
|
|
252
|
+
() => props.src,
|
|
253
|
+
() => {
|
|
254
|
+
referenceLoadError.value = false;
|
|
255
|
+
}
|
|
256
|
+
);
|
|
257
|
+
const hoverPreviewSrc = computed(() => {
|
|
258
|
+
var _a;
|
|
259
|
+
const hoverSource = (props.hoverSrc || props.src).trim();
|
|
260
|
+
if (!hoverSource) return "";
|
|
261
|
+
if (props.hoverSrc && props.hoverImgSize == null) return props.hoverSrc;
|
|
262
|
+
return resolveHoverImgUrl(hoverSource, (_a = props.hoverImgSize) != null ? _a : DEFAULT_HOVER_IMG_SIZE);
|
|
263
|
+
});
|
|
264
|
+
const hoverImgStyle = computed(() => ({
|
|
265
|
+
width: "100%",
|
|
266
|
+
height: HOVER_IMAGE_MAX_HEIGHT_CSS
|
|
267
|
+
}));
|
|
268
|
+
return (_ctx, _cache) => {
|
|
269
|
+
const _component_el_watermark = ElWatermark;
|
|
270
|
+
return openBlock(), createElementBlock("div", {
|
|
271
|
+
class: normalizeClass(["fg-view-img-popover__reference", unref(attrs).class]),
|
|
272
|
+
style: normalizeStyle(unref(attrs).style)
|
|
273
|
+
}, [
|
|
274
|
+
createVNode(LazyPopover, {
|
|
275
|
+
class: "fg-view-img-popover__trigger",
|
|
276
|
+
props: hoverPopoverPropsMerged.value,
|
|
277
|
+
disabled: isHoverPopoverDisabled.value
|
|
278
|
+
}, {
|
|
279
|
+
reference: withCtx(() => [
|
|
280
|
+
createVNode(FgViewImg, mergeProps({
|
|
281
|
+
ref_key: "viewImgRef",
|
|
282
|
+
ref: viewImgRef
|
|
283
|
+
}, referenceViewImgBind.value, {
|
|
284
|
+
onLoad: handleReferenceLoad,
|
|
285
|
+
onError: handleReferenceError,
|
|
286
|
+
onRetry: handleReferenceRetry,
|
|
287
|
+
onShow: _cache[0] || (_cache[0] = (p) => emit("show", p)),
|
|
288
|
+
onClose: _cache[1] || (_cache[1] = ($event) => emit("close")),
|
|
289
|
+
onSwitch: _cache[2] || (_cache[2] = (i) => emit("switch", i))
|
|
290
|
+
}), createSlots({
|
|
291
|
+
placeholder: withCtx((slotProps) => [
|
|
292
|
+
renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps(slotProps)), () => [
|
|
293
|
+
unref(viewImgDefaults).placeholder ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
294
|
+
key: 0,
|
|
295
|
+
render: unref(viewImgDefaults).placeholder,
|
|
296
|
+
payload: slotProps
|
|
297
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
298
|
+
key: 1,
|
|
299
|
+
loading: "",
|
|
300
|
+
src: slotProps.src,
|
|
301
|
+
"fallback-color": resolvedFallbackColor.value
|
|
302
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
303
|
+
], true)
|
|
304
|
+
]),
|
|
305
|
+
_: 2
|
|
306
|
+
}, [
|
|
307
|
+
_ctx.$slots.error ? {
|
|
308
|
+
name: "error",
|
|
309
|
+
fn: withCtx((slotProps) => [
|
|
310
|
+
renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
|
|
311
|
+
]),
|
|
312
|
+
key: "0"
|
|
313
|
+
} : void 0
|
|
314
|
+
]), 1040)
|
|
315
|
+
]),
|
|
316
|
+
default: withCtx(() => [
|
|
317
|
+
hoverPreviewSrc.value || __props.showHoverOnError && isReferenceInvalid.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
318
|
+
referenceLoadError.value || !__props.src.trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
319
|
+
!__props.isShowWatermark ? (openBlock(), createElementBlock("div", {
|
|
320
|
+
key: 0,
|
|
321
|
+
class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
|
|
322
|
+
style: normalizeStyle(hoverImgStyle.value)
|
|
323
|
+
}, [
|
|
324
|
+
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
325
|
+
key: 1,
|
|
326
|
+
render: unref(viewImgDefaults).error,
|
|
327
|
+
payload: defaultSlotPayload.value
|
|
328
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
329
|
+
key: 2,
|
|
330
|
+
src: defaultSlotPayload.value.src,
|
|
331
|
+
"error-text": defaultSlotPayload.value.errorText,
|
|
332
|
+
"fallback-color": resolvedFallbackColor.value
|
|
333
|
+
}, null, 8, ["src", "error-text", "fallback-color"]))
|
|
334
|
+
], 4)) : (openBlock(), createBlock(_component_el_watermark, {
|
|
335
|
+
key: 1,
|
|
336
|
+
class: "fg-view-img-popover__watermark",
|
|
337
|
+
content: [resolvedWaterMarkTitle.value],
|
|
338
|
+
gap: [10, 10],
|
|
339
|
+
font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
|
|
340
|
+
}, {
|
|
341
|
+
default: withCtx(() => [
|
|
342
|
+
createElementVNode("div", {
|
|
343
|
+
class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
|
|
344
|
+
style: normalizeStyle(hoverImgStyle.value)
|
|
345
|
+
}, [
|
|
346
|
+
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
347
|
+
key: 1,
|
|
348
|
+
render: unref(viewImgDefaults).error,
|
|
349
|
+
payload: defaultSlotPayload.value
|
|
350
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
351
|
+
key: 2,
|
|
352
|
+
src: defaultSlotPayload.value.src,
|
|
353
|
+
"error-text": defaultSlotPayload.value.errorText,
|
|
354
|
+
"fallback-color": resolvedFallbackColor.value
|
|
355
|
+
}, null, 8, ["src", "error-text", "fallback-color"]))
|
|
356
|
+
], 4)
|
|
357
|
+
]),
|
|
358
|
+
_: 3
|
|
359
|
+
}, 8, ["content"]))
|
|
360
|
+
], 64)) : !__props.isShowWatermark ? (openBlock(), createBlock(FgViewImg, {
|
|
361
|
+
key: 1,
|
|
362
|
+
class: "fg-view-img-popover__hover-image",
|
|
363
|
+
src: hoverPreviewSrc.value,
|
|
364
|
+
style: normalizeStyle(hoverImgStyle.value),
|
|
365
|
+
preview: false,
|
|
366
|
+
"oss-process": false,
|
|
367
|
+
"fallback-color": resolvedFallbackColor.value,
|
|
368
|
+
"error-text": __props.errorText,
|
|
369
|
+
loading: __props.loading,
|
|
370
|
+
fit: "contain"
|
|
371
|
+
}, createSlots({
|
|
372
|
+
placeholder: withCtx((slotProps) => [
|
|
373
|
+
renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps(slotProps)), () => [
|
|
374
|
+
unref(viewImgDefaults).placeholder ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
375
|
+
key: 0,
|
|
376
|
+
render: unref(viewImgDefaults).placeholder,
|
|
377
|
+
payload: slotProps
|
|
378
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
379
|
+
key: 1,
|
|
380
|
+
loading: "",
|
|
381
|
+
src: slotProps.src,
|
|
382
|
+
"fallback-color": resolvedFallbackColor.value
|
|
383
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
384
|
+
], true)
|
|
385
|
+
]),
|
|
386
|
+
_: 2
|
|
387
|
+
}, [
|
|
388
|
+
_ctx.$slots.error ? {
|
|
389
|
+
name: "error",
|
|
390
|
+
fn: withCtx((slotProps) => [
|
|
391
|
+
renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
|
|
392
|
+
]),
|
|
393
|
+
key: "0"
|
|
394
|
+
} : void 0
|
|
395
|
+
]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])) : (openBlock(), createBlock(_component_el_watermark, {
|
|
396
|
+
key: 2,
|
|
397
|
+
class: "fg-view-img-popover__watermark",
|
|
398
|
+
content: [resolvedWaterMarkTitle.value],
|
|
399
|
+
gap: [10, 10],
|
|
400
|
+
font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
|
|
401
|
+
}, {
|
|
402
|
+
default: withCtx(() => [
|
|
403
|
+
createVNode(FgViewImg, {
|
|
404
|
+
class: "fg-view-img-popover__hover-image",
|
|
405
|
+
src: hoverPreviewSrc.value,
|
|
406
|
+
style: normalizeStyle(hoverImgStyle.value),
|
|
407
|
+
preview: false,
|
|
408
|
+
"oss-process": false,
|
|
409
|
+
"fallback-color": resolvedFallbackColor.value,
|
|
410
|
+
"error-text": __props.errorText,
|
|
411
|
+
loading: __props.loading,
|
|
412
|
+
fit: "contain"
|
|
413
|
+
}, createSlots({
|
|
414
|
+
placeholder: withCtx((slotProps) => [
|
|
415
|
+
renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps(slotProps)), () => [
|
|
416
|
+
unref(viewImgDefaults).placeholder ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
417
|
+
key: 0,
|
|
418
|
+
render: unref(viewImgDefaults).placeholder,
|
|
419
|
+
payload: slotProps
|
|
420
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
421
|
+
key: 1,
|
|
422
|
+
loading: "",
|
|
423
|
+
src: slotProps.src,
|
|
424
|
+
"fallback-color": resolvedFallbackColor.value
|
|
425
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
426
|
+
], true)
|
|
427
|
+
]),
|
|
428
|
+
_: 2
|
|
429
|
+
}, [
|
|
430
|
+
_ctx.$slots.error ? {
|
|
431
|
+
name: "error",
|
|
432
|
+
fn: withCtx((slotProps) => [
|
|
433
|
+
renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
|
|
434
|
+
]),
|
|
435
|
+
key: "0"
|
|
436
|
+
} : void 0
|
|
437
|
+
]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])
|
|
438
|
+
]),
|
|
439
|
+
_: 3
|
|
440
|
+
}, 8, ["content"]))
|
|
441
|
+
], 64)) : createCommentVNode("", true)
|
|
442
|
+
]),
|
|
443
|
+
_: 3
|
|
444
|
+
}, 8, ["props", "disabled"]),
|
|
445
|
+
canShowPreviewIcon.value ? (openBlock(), createElementBlock("svg", {
|
|
446
|
+
key: 0,
|
|
447
|
+
class: "fg-view-img-popover__preview-icon",
|
|
448
|
+
viewBox: "0 0 1024 1024",
|
|
449
|
+
onClick: withModifiers(handlePreviewIconClick, ["stop"])
|
|
450
|
+
}, [..._cache[3] || (_cache[3] = [
|
|
451
|
+
createElementVNode("path", {
|
|
452
|
+
d: "M493.487325 0.000427c66.597422 0 131.274995 13.012309 192.155534 38.610292a491.779939 491.779939 0 0 1 156.830316 105.805002 491.609286 491.609286 0 0 1 144.628611 348.98585 491.481296 491.481296 0 0 1-116.726808 318.694903l141.642179 141.770169a41.212754 41.212754 0 0 1 0 58.150087 41.212754 41.212754 0 0 1-58.150087 0L812.310217 870.331888a492.163909 492.163909 0 0 1-318.694902 116.726808 491.481296 491.481296 0 0 1-348.985851-144.628611A491.822602 491.822602 0 0 1 0.000853 493.486898 491.694612 491.694612 0 0 1 144.501474 144.629037 491.822602 491.822602 0 0 1 493.487325 0.000427z m0 82.254855c-227.096783 0-411.274279 184.134833-411.274279 411.274279 0 227.054119 184.177496 411.231616 411.274279 411.231616s411.274279-184.177496 411.274278-411.274279-184.177496-411.274279-411.274278-411.274279z m0 201.029503c22.611553 0 41.127428 18.515875 41.127427 41.127428v127.98992h127.989921c22.611553 0 41.084765 18.473212 41.084765 41.084765s-18.515875 41.127428-41.127428 41.127428h-127.947258v127.989921c0 22.611553-18.515875 41.084765-41.127427 41.084764a41.255418 41.255418 0 0 1-41.127428-41.127428v-127.947257H324.412639a41.255418 41.255418 0 0 1-41.127428-41.127428c0-22.611553 18.515875-41.127428 41.127428-41.127428h127.989921V324.412213c0-22.611553 18.473212-41.127428 41.084765-41.127428z",
|
|
453
|
+
fill: "currentColor"
|
|
454
|
+
}, null, -1)
|
|
455
|
+
])])) : createCommentVNode("", true)
|
|
456
|
+
], 6);
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
}));
|
|
460
|
+
const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe90e338"]]);
|
|
461
|
+
export {
|
|
462
|
+
ViewImgPopover as V
|
|
463
|
+
};
|
package/dist/ViewImgPopover.css
CHANGED
|
@@ -1,33 +1,38 @@
|
|
|
1
|
-
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* :where 降低默认宽高优先级,避免压过外部 Tailwind 等工具类(如 w-[200px]) */
|
|
3
|
+
:where(.fg-view-img-popover__reference[data-v-fe90e338]) {
|
|
2
4
|
position: relative;
|
|
3
5
|
display: block;
|
|
4
6
|
width: 100%;
|
|
5
7
|
height: 100%;
|
|
6
8
|
}
|
|
7
|
-
.fg-view-img-popover__preview-icon[data-v-
|
|
9
|
+
.fg-view-img-popover__preview-icon[data-v-fe90e338] {
|
|
8
10
|
position: absolute;
|
|
9
11
|
top: 4px;
|
|
10
12
|
right: 4px;
|
|
11
13
|
z-index: 1;
|
|
14
|
+
display: block;
|
|
15
|
+
width: 14px;
|
|
16
|
+
height: 14px;
|
|
12
17
|
line-height: 1;
|
|
13
18
|
color: var(--el-text-color-primary);
|
|
14
19
|
cursor: pointer;
|
|
15
20
|
}
|
|
16
|
-
.fg-view-img-popover__preview-icon[data-v-
|
|
21
|
+
.fg-view-img-popover__preview-icon[data-v-fe90e338]:hover {
|
|
17
22
|
color: var(--el-color-primary);
|
|
18
23
|
}
|
|
19
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
24
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] {
|
|
20
25
|
display: block;
|
|
21
26
|
vertical-align: top;
|
|
22
27
|
background: #7f7f7f;
|
|
23
28
|
}
|
|
24
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
29
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__inner {
|
|
25
30
|
width: 100%;
|
|
26
31
|
height: 100%;
|
|
27
32
|
object-fit: contain;
|
|
28
33
|
}
|
|
29
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
30
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
34
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__placeholder,
|
|
35
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__error {
|
|
31
36
|
position: absolute;
|
|
32
37
|
inset: 0;
|
|
33
38
|
display: flex;
|
|
@@ -36,23 +41,7 @@
|
|
|
36
41
|
background: #f5f7fa;
|
|
37
42
|
line-height: 1.4;
|
|
38
43
|
}
|
|
39
|
-
.fg-view-img-popover__hover-
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 100%;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
color: #909399;
|
|
46
|
-
font-size: 13px;
|
|
47
|
-
text-align: center;
|
|
48
|
-
}
|
|
49
|
-
.fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__error-text {
|
|
50
|
-
color: #909399;
|
|
51
|
-
font-size: 13px;
|
|
52
|
-
line-height: 1.4;
|
|
53
|
-
text-align: center;
|
|
54
|
-
}
|
|
55
|
-
.fg-view-img-popover__hover-error[data-v-868c46fb] {
|
|
44
|
+
.fg-view-img-popover__hover-error[data-v-fe90e338] {
|
|
56
45
|
display: flex;
|
|
57
46
|
align-items: center;
|
|
58
47
|
justify-content: center;
|
|
@@ -62,17 +51,30 @@
|
|
|
62
51
|
font-size: 13px;
|
|
63
52
|
line-height: 1.4;
|
|
64
53
|
text-align: center;
|
|
65
|
-
}
|
|
54
|
+
}
|
|
55
|
+
:where(.fg-view-img-popover__reference) {
|
|
56
|
+
display: block;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
max-width: 100%;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
}
|
|
62
|
+
:where(.fg-view-img-popover__trigger),
|
|
63
|
+
:where(.fg-view-img-popover__reference .fg-lazy-popover__trigger) {
|
|
66
64
|
display: block;
|
|
67
65
|
width: 100%;
|
|
68
66
|
height: 100%;
|
|
69
67
|
max-width: 100%;
|
|
68
|
+
box-sizing: border-box;
|
|
70
69
|
}
|
|
71
|
-
|
|
70
|
+
|
|
71
|
+
/* 空 src / 加载失败时错误层绝对定位,内层需撑满已定尺寸的根容器 */
|
|
72
|
+
:where(.fg-view-img-popover__reference .fg-view-img) {
|
|
72
73
|
display: block;
|
|
73
74
|
width: 100%;
|
|
74
75
|
height: 100%;
|
|
75
76
|
max-width: 100%;
|
|
77
|
+
box-sizing: border-box;
|
|
76
78
|
}
|
|
77
79
|
.fg-view-img-popover.el-popper {
|
|
78
80
|
box-sizing: border-box;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** 内部自动挂载标记,业务侧无需传入 */
|
|
3
|
+
autoHost?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
6
|
+
autoHost: boolean;
|
|
7
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
2
8
|
export default _default;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type ImgViewerHostKind = "manual" | "auto";
|
|
2
|
+
export declare function setImgViewerAutoHostCleanup(cleanup: (() => void) | null): void;
|
|
3
|
+
export declare function registerImgViewerHost(kind?: ImgViewerHostKind): void;
|
|
4
|
+
export declare function unregisterImgViewerHost(kind?: ImgViewerHostKind): void;
|
|
5
|
+
export declare function hasImgViewerHost(): boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ } from "../../ImgViewerHost.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { I, P, g, u, a } from "../../imgViewerStore-
|
|
1
|
+
import { _ } from "../../ImgViewerHost.vue_vue_type_script_setup_true_lang-DO9s-b9s.js";
|
|
2
|
+
import { I, P, g, u, a } from "../../imgViewerStore-Ajm-L7R5.js";
|
|
3
3
|
export {
|
|
4
4
|
_ as FgImgViewerHost,
|
|
5
5
|
I as ImgViewerStore,
|