@fy-/fws-vue 0.3.52 → 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.
|
@@ -33,11 +33,13 @@ const props = withDefaults(
|
|
|
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>
|
|
@@ -328,9 +347,17 @@ onUnmounted(() => {
|
|
|
328
347
|
<img
|
|
329
348
|
@click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
|
|
330
349
|
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
331
|
-
v-if="i + j - 2 < images.length"
|
|
350
|
+
v-if="i + j - 2 < images.length && imageComponent == 'img'"
|
|
332
351
|
:src="getThumbnailUrl(images[i + j - 2])"
|
|
333
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
|
+
/>
|
|
334
361
|
</div>
|
|
335
362
|
</template>
|
|
336
363
|
</div>
|
|
@@ -340,6 +367,15 @@ onUnmounted(() => {
|
|
|
340
367
|
@click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
|
|
341
368
|
class="h-auto max-w-full rounded-lg cursor-pointer"
|
|
342
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"
|
|
343
379
|
/>
|
|
344
380
|
</div>
|
|
345
381
|
</template>
|