designtopack/src/components/project/PhysicalSample.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>