designtopack/src/components/project/cards/Document.vue

<template>
  <article class="card">
    <hgroup class="order-last">
      <h3 class="card__title | font-serif | text-lg">
        <router-link :to="uri" class="link-full">
          {{ pdf.label.length ? pdf.label : pdf.name.replace(".pdf", "") }}
        </router-link>
      </h3>
    </hgroup>

    <DateTime :date="pdf.modified" />

    <template v-if="hasImage">
      <figure
        v-if="pdf.cover"
        class="card__images pdf-cover"
        style="aspect-ratio: unset"
      >
        <img :src="pdf.cover" alt="" />
      </figure>
      <div v-else class="card__images" data-icon="document"></div>
    </template>

    <footer
      v-if="pdf.comments?.length > 0"
      class="order-last | text-sm text-primary font-medium"
    >
      <router-link :to="'/' + step.uri + '&comments=true'">
        {{ pdf.comments.length }} commentaire{{
          pdf.comments.length > 1 ? "s" : ""
        }}
      </router-link>
    </footer>
  </article>
</template>
<script setup>
import DateTime from "./DateTime.vue";

const { step, pdf, index } = defineProps({
  step: Object,
  pdf: Object,
  index: Number,
  hasImage: {
    default: true,
    type: Boolean,
  },
});

const uri =
  location.pathname + "?dialog=" + step.slug + "&fileIndex=" + getIndex();

function getIndex() {
  if (index) return index;
  return step.files.findIndex((file) => file.type === "document");
}
</script>