@fy-/fws-vue 0.3.51 → 0.3.53
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.
|
@@ -26,18 +26,20 @@ const props = withDefaults(
|
|
|
26
26
|
onClose?: Function;
|
|
27
27
|
closeIcon?: Object;
|
|
28
28
|
gridHeight?: number;
|
|
29
|
-
mode: "mason" | "grid" | "button" | "hidden";
|
|
29
|
+
mode: "mason" | "grid" | "button" | "hidden" | "custom";
|
|
30
30
|
paging?: APIPaging | undefined;
|
|
31
31
|
buttonText?: string;
|
|
32
32
|
buttonType?: string;
|
|
33
33
|
modelValue: number;
|
|
34
34
|
borderColor?: Function;
|
|
35
35
|
imageLoader: string;
|
|
36
|
-
videoComponent?: Component;
|
|
36
|
+
videoComponent?: Component | string;
|
|
37
|
+
imageComponent?: Component | string;
|
|
37
38
|
isVideo?: Function;
|
|
38
39
|
}>(),
|
|
39
40
|
{
|
|
40
41
|
modelValue: 0,
|
|
42
|
+
imageComponent: "img",
|
|
41
43
|
mode: "grid",
|
|
42
44
|
gridHeight: 4,
|
|
43
45
|
closeIcon: () => h(XCircleIcon),
|
|
@@ -232,10 +234,18 @@ onUnmounted(() => {
|
|
|
232
234
|
<img
|
|
233
235
|
class="shadow max-w-full h-auto object-contain max-h-[85vh]"
|
|
234
236
|
:src="modelValueSrc"
|
|
235
|
-
v-if="modelValueSrc"
|
|
237
|
+
v-if="modelValueSrc && imageComponent == 'img'"
|
|
236
238
|
@touchstart="touchStart"
|
|
237
239
|
@touchend="touchEnd"
|
|
238
240
|
/>
|
|
241
|
+
<component
|
|
242
|
+
v-else-if="modelValueSrc && imageComponent"
|
|
243
|
+
:is="imageComponent"
|
|
244
|
+
:image="images[modelValue].image"
|
|
245
|
+
:variant="images[modelValue].variant"
|
|
246
|
+
:alt="images[modelValue].alt"
|
|
247
|
+
class="shadow max-w-full h-auto object-contain max-h-[85vh]"
|
|
248
|
+
/>
|
|
239
249
|
</template>
|
|
240
250
|
</div>
|
|
241
251
|
<div class="flex-0 py-2 flex items-center justify-center">
|
|
@@ -299,6 +309,15 @@ onUnmounted(() => {
|
|
|
299
309
|
images[i - 1],
|
|
300
310
|
)}`"
|
|
301
311
|
:src="getThumbnailUrl(images[i - 1])"
|
|
312
|
+
v-if="imageComponent == 'img'"
|
|
313
|
+
/>
|
|
314
|
+
<component
|
|
315
|
+
v-else
|
|
316
|
+
:is="imageComponent"
|
|
317
|
+
:image="images[i - 1].image"
|
|
318
|
+
:variant="images[i - 1].variant"
|
|
319
|
+
:alt="images[i - 1].alt"
|
|
320
|
+
class="h-auto max-w-full rounded-lg cursor-pointer shadow"
|
|
302
321
|
/>
|
|
303
322
|
</div>
|
|
304
323
|
</div>
|
|
@@ -307,12 +326,14 @@ onUnmounted(() => {
|
|
|
307
326
|
</DialogPanel>
|
|
308
327
|
</Dialog>
|
|
309
328
|
</TransitionRoot>
|
|
310
|
-
<template v-if="mode == 'grid' || mode == 'mason'">
|
|
329
|
+
<template v-if="mode == 'grid' || mode == 'mason' || mode == 'custom'">
|
|
311
330
|
<div
|
|
312
|
-
class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4"
|
|
313
331
|
:class="{
|
|
314
|
-
'
|
|
315
|
-
|
|
332
|
+
'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
|
|
333
|
+
mode == 'mason',
|
|
334
|
+
'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
|
|
335
|
+
mode == 'grid',
|
|
336
|
+
'custom-grid': mode == 'custom',
|
|
316
337
|
}"
|
|
317
338
|
>
|
|
318
339
|
<template v-for="i in images.length" :key="`g_${id}_${i}`">
|
|
@@ -326,9 +347,17 @@ onUnmounted(() => {
|
|
|
326
347
|
<img
|
|
327
348
|
@click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
|
|
328
349
|
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
329
|
-
v-if="i + j - 2 < images.length"
|
|
350
|
+
v-if="i + j - 2 < images.length && imageComponent == 'img'"
|
|
330
351
|
:src="getThumbnailUrl(images[i + j - 2])"
|
|
331
352
|
/>
|
|
353
|
+
<component
|
|
354
|
+
v-else-if="i + j - 2 < images.length"
|
|
355
|
+
:is="imageComponent"
|
|
356
|
+
:image="images[i + j - 2].image"
|
|
357
|
+
:variant="images[i + j - 2].variant"
|
|
358
|
+
:alt="images[i + j - 2].alt"
|
|
359
|
+
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
360
|
+
/>
|
|
332
361
|
</div>
|
|
333
362
|
</template>
|
|
334
363
|
</div>
|
|
@@ -338,6 +367,15 @@ onUnmounted(() => {
|
|
|
338
367
|
@click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
|
|
339
368
|
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
340
369
|
:src="getThumbnailUrl(images[i - 1])"
|
|
370
|
+
v-if="imageComponent == 'img'"
|
|
371
|
+
/>
|
|
372
|
+
<component
|
|
373
|
+
v-else-if="imageComponent"
|
|
374
|
+
:is="imageComponent"
|
|
375
|
+
:image="images[i - 1].image"
|
|
376
|
+
:variant="images[i - 1].variant"
|
|
377
|
+
:alt="images[i - 1].alt"
|
|
378
|
+
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
341
379
|
/>
|
|
342
380
|
</div>
|
|
343
381
|
</template>
|