50 lines
1.4 KiB
Vue
50 lines
1.4 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 mt-32 pb-32">
|
|
<div class="masonry flow pb-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>
|