53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup>
|
|
import PhotoDetail from "components/photos/PhotoDetail.vue";
|
|
import { ref, watch} from "vue";
|
|
|
|
const props = defineProps({
|
|
photos: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
coverPhotoUrl: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
const displayedPhoto = ref(null);
|
|
const openPhotoDetail = ref(false);
|
|
const photoData = ref(null);
|
|
const openDetail = ({photo, idx, allPhotos}) => {
|
|
openPhotoDetail.value = true;
|
|
photoData.value = {photo, idx, allPhotos}
|
|
}
|
|
|
|
watch(() => props.photos, (newVal) => {
|
|
if (newVal.length === 0) return;
|
|
displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
|
|
}, {immediate: true});
|
|
</script>
|
|
|
|
<template>
|
|
<q-carousel
|
|
v-if="photos.length > 0"
|
|
animated
|
|
v-model="displayedPhoto"
|
|
arrows
|
|
swipeable
|
|
height="auto"
|
|
infinite
|
|
>
|
|
<q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
|
|
<q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: photos})"/>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
|
|
<PhotoDetail
|
|
v-if="photoData"
|
|
v-model="openPhotoDetail"
|
|
:photo="photoData.photo"
|
|
:photos="photoData.allPhotos"
|
|
:opened-index="photoData.idx"
|
|
/>
|
|
</template>
|