43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<Dialog
|
|
id="physical-sample"
|
|
v-model:visible="isOpen"
|
|
modal
|
|
:draggable="false"
|
|
dismissableMask="true"
|
|
class="dialog"
|
|
:closeOnEscape="true"
|
|
:style="'--cover: url('+physicalSample.cover+')'"
|
|
>
|
|
<template #header>
|
|
<h2 class="text-lg font-serif">{{ physicalSample.title }}</h2>
|
|
<time class="font-medium text-sm py-8" :datetime="physicalSample.date">{{ physicalSample.date }}</time>
|
|
<p>{{ physicalSample.description }}</p>
|
|
</template>
|
|
<div class="overflow-y h-full pb-32">
|
|
<div class="masonry flow pt-32">
|
|
<template v-for="(item, index) in physicalSample.files" :key="item.id">
|
|
<img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Dialog from "primevue/dialog";
|
|
import { ref, watch } from "vue";
|
|
import { useDialogStore } from "../../stores/dialog";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { usePageStore } from "../../stores/page.js";
|
|
|
|
// Variables
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const isOpen = ref(true);
|
|
watch(isOpen, (newValue) => {
|
|
router.push({ name: route.name });
|
|
});
|
|
const { page } = usePageStore();
|
|
const physicalSample = page.steps[page.steps.length - 1];
|
|
</script>
|