-
- ![]()
-
-
-
-
-
- {{ $t('Download file') }}
-
+
+
+
+ ![]()
+
+
+
+ {{ $t('Download file') }}
+
+
+
@@ -74,8 +79,10 @@ const props = defineProps({
const trueContentType = ref(null);
onMounted(async () => {
- // try to get HEAD request
- try {
+ // try to get HEAD request (single url only). For arrays we just guess by extension.
+ if (!url.value) return;
+ if (Array.isArray(url.value)) return;
+ try {
const response = await fetch(url.value, {
method: 'HEAD',
mode: 'cors',
@@ -101,6 +108,11 @@ const url = computed(() => {
return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
});
+const urls = computed(() => {
+ if (!url.value) return [];
+ return Array.isArray(url.value) ? url.value : [url.value];
+});
+
const maxWidth = computed(() => {
const isShowPage = route.path.includes('/show/');
const width = isShowPage
@@ -124,6 +136,7 @@ const guessedContentType = computed(() => {
if (!url.value) {
return null;
}
+ if (Array.isArray(url.value)) return null;
const u = new URL(url.value, url.value.startsWith('http') ? undefined : location.origin);
return guessContentType(u.pathname);
});
@@ -141,6 +154,15 @@ function guessContentType(url) {
}
}
+function guessContentTypeFromUrl(u) {
+ if (!u) return null;
+ try {
+ const parsed = new URL(u, u.startsWith('http') ? undefined : location.origin);
+ return guessContentType(parsed.pathname);
+ } catch (e) {
+ return guessContentType(u);
+ }
+}
watch([contentType], async ([contentType]) => {
// since content type might change after true guessing (HEAD request might be slow) we need to try initializing zoom again
@@ -148,12 +170,19 @@ watch([contentType], async ([contentType]) => {
zoom.value.detach();
}
await nextTick();
- if (contentType?.startsWith('image')) {
- zoom.value = mediumZoom(img.value, {
- margin: 24,
- });
+ // For arrays we use click-to-open per image, for single we keep existing behavior.
+ if (contentType?.startsWith('image') && !Array.isArray(url.value)) {
+ zoom.value = mediumZoom(img.value, { margin: 24 });
}
}, { immediate: true });
+function openZoom(index) {
+ if (!urls.value?.length) return;
+ const el = Array.isArray(img.value) ? img.value[index] : img.value;
+ if (!el) return;
+ const z = mediumZoom(el, { margin: 24 });
+ z.open();
+}
+
\ No newline at end of file
diff --git a/custom/tsconfig.json b/custom/tsconfig.json
index d313f46..32a1325 100644
--- a/custom/tsconfig.json
+++ b/custom/tsconfig.json
@@ -1,19 +1,27 @@
{
"compilerOptions": {
- "baseUrl": ".", // This should point to your project root
+ "baseUrl": ".",
"paths": {
"@/*": [
- // "node_modules/adminforth/dist/spa/src/*"
- "../../../spa/src/*"
+ "../../../adminforth/spa/src/*"
],
"*": [
- // "node_modules/adminforth/dist/spa/node_modules/*"
- "../../../spa/node_modules/*"
+ "../../../adminforth/spa/node_modules/*"
],
"@@/*": [
- // "node_modules/adminforth/dist/spa/src/*"
"."
]
}
- }
+ },
+ "include": [
+ "./**/*.ts",
+ "./**/*.tsx",
+ "./**/*.vue",
+ "../**/*.ts",
+ "../**/*.tsx",
+ "../**/*.vue",
+ "../*.vue",
+ "../*.ts",
+ "../*.tsx"
+ ]
}
\ No newline at end of file
diff --git a/custom/uploader.vue b/custom/uploader.vue
index e787d0e..0f49273 100644
--- a/custom/uploader.vue
+++ b/custom/uploader.vue
@@ -24,7 +24,7 @@
}"
>
- ![]()
+ ![]()