qidian-vue-ui 1.3.3 → 1.3.4
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.
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import './index.css'
|
|
2
|
-
import { defineComponent, mergeDefaults, ref, computed, watch, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, createVNode, createElementVNode, unref,
|
|
3
|
-
import { Menu, MenuItem, Empty } from "tdesign-vue-next";
|
|
2
|
+
import { defineComponent, mergeDefaults, ref, computed, watch, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, Fragment, createVNode, createElementVNode, unref, renderList, createTextVNode, toDisplayString, createCommentVNode, nextTick } from "vue";
|
|
3
|
+
import { Menu, MenuItem, Empty, ImageViewer } from "tdesign-vue-next";
|
|
4
4
|
import { useConfig } from "../config-provider/useConfig.mjs";
|
|
5
5
|
import _sfc_main$1 from "../dialog/index.vue.mjs";
|
|
6
6
|
/* empty css */
|
|
7
7
|
import QdFileViewer from "../file-viewer/index.vue.mjs";
|
|
8
|
+
import { IMAGE_REGEXP } from "../upload/common.mjs";
|
|
8
9
|
import { qdMultiFileViewerWrapperProps, qdMultiFileViewerProps } from "./props.mjs";
|
|
9
10
|
import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
|
|
10
11
|
const _hoisted_1 = {
|
|
@@ -25,7 +26,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
25
26
|
const props = __props;
|
|
26
27
|
const runtimeOverrides = ref({});
|
|
27
28
|
const dialogRef = ref();
|
|
29
|
+
const imageViewerVisible = ref(false);
|
|
30
|
+
const imageViewerIndex = ref(0);
|
|
28
31
|
const { t } = useConfig("multiFileViewer");
|
|
32
|
+
const { t: wrapperT } = useConfig("wrapper");
|
|
29
33
|
const mergedProps = computed(() => ({
|
|
30
34
|
...props,
|
|
31
35
|
...runtimeOverrides.value
|
|
@@ -49,7 +53,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
49
53
|
)
|
|
50
54
|
};
|
|
51
55
|
});
|
|
52
|
-
const
|
|
56
|
+
const allFilesAreImages = computed(() => {
|
|
57
|
+
const files = mergedProps.value.files;
|
|
58
|
+
return !!files?.length && files.every((item) => isImage(item) && !!resolveImageViewerSource(item));
|
|
59
|
+
});
|
|
60
|
+
const imageViewerImages = computed(
|
|
61
|
+
() => (mergedProps.value.files ?? []).map((item) => resolveImageViewerSource(item) ?? "")
|
|
62
|
+
);
|
|
63
|
+
const imageViewerAttach = computed(() => {
|
|
64
|
+
const wrapper = mergedProps.value.wrapper === false ? void 0 : mergedProps.value.wrapper;
|
|
65
|
+
return wrapper?.attach ?? wrapperT("attach") ?? "body";
|
|
66
|
+
});
|
|
67
|
+
const isDialog = computed(() => mergedProps.value.wrapper !== false && !allFilesAreImages.value);
|
|
53
68
|
const dialogProps = computed(() => {
|
|
54
69
|
const wrapper = mergedProps.value.wrapper === false ? void 0 : mergedProps.value.wrapper;
|
|
55
70
|
return {
|
|
@@ -61,6 +76,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
61
76
|
});
|
|
62
77
|
const wrapperTag = computed(() => isDialog.value ? _sfc_main$1 : "div");
|
|
63
78
|
const wrapperBindings = computed(() => isDialog.value ? dialogProps.value : {});
|
|
79
|
+
function resolveFileType(item) {
|
|
80
|
+
const file = item.file;
|
|
81
|
+
if (file && "type" in file && file.type) return file.type;
|
|
82
|
+
if (file && "name" in file && file.name) return file.name;
|
|
83
|
+
return item.src || item.name || "";
|
|
84
|
+
}
|
|
85
|
+
function isImage(item) {
|
|
86
|
+
return IMAGE_REGEXP.test(resolveFileType(item));
|
|
87
|
+
}
|
|
88
|
+
function resolveImageViewerSource(item) {
|
|
89
|
+
if (typeof File !== "undefined" && item.file instanceof File) return item.file;
|
|
90
|
+
if (item.src) return item.src;
|
|
91
|
+
return void 0;
|
|
92
|
+
}
|
|
64
93
|
function normalizeIndex(index, files) {
|
|
65
94
|
if (!files?.length) return 0;
|
|
66
95
|
if (index === void 0 || index < 0 || index >= files.length) return 0;
|
|
@@ -88,10 +117,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
88
117
|
function show(override) {
|
|
89
118
|
runtimeOverrides.value = override ?? {};
|
|
90
119
|
activeIndex.value = normalizeIndex(mergedProps.value.index, mergedProps.value.files);
|
|
120
|
+
if (allFilesAreImages.value) {
|
|
121
|
+
imageViewerIndex.value = activeIndex.value;
|
|
122
|
+
imageViewerVisible.value = true;
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
91
125
|
if (!isDialog.value) return;
|
|
92
126
|
nextTick(() => dialogRef.value?.show());
|
|
93
127
|
}
|
|
94
128
|
function hide() {
|
|
129
|
+
if (imageViewerVisible.value) imageViewerVisible.value = false;
|
|
95
130
|
if (!isDialog.value) return;
|
|
96
131
|
dialogRef.value?.hide();
|
|
97
132
|
}
|
|
@@ -104,42 +139,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
104
139
|
__expose({ show, hide });
|
|
105
140
|
return (_ctx, _cache) => {
|
|
106
141
|
return openBlock(), createBlock(resolveDynamicComponent(wrapperTag.value), mergeProps(wrapperBindings.value, {
|
|
107
|
-
class: "qd-multi-file-viewer",
|
|
142
|
+
class: ["qd-multi-file-viewer", allFilesAreImages.value ? "qd-multi-file-viewer--image" : ""],
|
|
108
143
|
ref_key: "dialogRef",
|
|
109
144
|
ref: dialogRef
|
|
110
145
|
}), {
|
|
111
146
|
default: withCtx(() => [
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
147
|
+
!allFilesAreImages.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
148
|
+
mergedProps.value.files?.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
149
|
+
createVNode(unref(Menu), {
|
|
150
|
+
value: activeIndex.value,
|
|
151
|
+
class: "qd-multi-file-viewer__menu",
|
|
152
|
+
onChange: handleMenuChange
|
|
153
|
+
}, {
|
|
154
|
+
default: withCtx(() => [
|
|
155
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(mergedProps.value.files, (item, index) => {
|
|
156
|
+
return openBlock(), createBlock(unref(MenuItem), {
|
|
157
|
+
key: index,
|
|
158
|
+
value: index
|
|
159
|
+
}, {
|
|
160
|
+
default: withCtx(() => [
|
|
161
|
+
createTextVNode(toDisplayString(deriveName(item, index)), 1)
|
|
162
|
+
]),
|
|
163
|
+
_: 2
|
|
164
|
+
}, 1032, ["value"]);
|
|
165
|
+
}), 128))
|
|
166
|
+
]),
|
|
167
|
+
_: 1
|
|
168
|
+
}, 8, ["value"]),
|
|
169
|
+
createElementVNode("div", _hoisted_2, [
|
|
170
|
+
activeViewerProps.value ? (openBlock(), createBlock(QdFileViewer, mergeProps({ key: activeIndex.value }, activeViewerProps.value), null, 16)) : createCommentVNode("", true)
|
|
171
|
+
])
|
|
172
|
+
])) : (openBlock(), createBlock(unref(Empty), {
|
|
173
|
+
key: 1,
|
|
174
|
+
title: unref(t)("emptyText")
|
|
175
|
+
}, null, 8, ["title"]))
|
|
176
|
+
], 64)) : (openBlock(), createBlock(unref(ImageViewer), {
|
|
137
177
|
key: 1,
|
|
138
|
-
|
|
139
|
-
|
|
178
|
+
visible: imageViewerVisible.value,
|
|
179
|
+
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => imageViewerVisible.value = $event),
|
|
180
|
+
index: imageViewerIndex.value,
|
|
181
|
+
"onUpdate:index": _cache[1] || (_cache[1] = ($event) => imageViewerIndex.value = $event),
|
|
182
|
+
images: imageViewerImages.value,
|
|
183
|
+
attach: imageViewerAttach.value
|
|
184
|
+
}, null, 8, ["visible", "index", "images", "attach"]))
|
|
140
185
|
]),
|
|
141
186
|
_: 1
|
|
142
|
-
}, 16);
|
|
187
|
+
}, 16, ["class"]);
|
|
143
188
|
};
|
|
144
189
|
}
|
|
145
190
|
});
|