Refaktoring

2023-09-13 10:03:41 +02:00
parent 63ae0fa351
commit e203a7d229
14 changed files with 347 additions and 242 deletions
@@ -0,0 +1,58 @@
+<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
+  },
+  defaultTitle: {
+    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
+    v-bind="$attrs"
+  >
+    <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"
+    :default-title="defaultTitle"
+    :photo="photoData.photo"
+    :photos="photoData.allPhotos"
+    :opened-index="photoData.idx"
+  />
+</template>