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

<template>
  <article class="card">
    <hgroup class="order-last">
      <h3 class="card__title | font-serif | text-lg">
        <router-link :to="uri" class="link-full">{{ step.label }}</router-link>
      </h3>
    </hgroup>
    <DateTime :date="step.modified" />
    <figure
      class="card__images"
      :data-count="images.length"
      :data-plus="images.length > 3 ? images.length - 3 : undefined"
    >
      <template v-for="image in images.slice(0, 3)" :key="image.uuid">
        <img v-if="image.url" :src="image.url" :alt="image.alt" />
        <div v-else class="card__images" data-icon="document"></div>
      </template>
    </figure>
    <footer
      v-if="images[0]?.comments?.length > 0"
      class="order-last | text-sm text-primary font-medium"
    >
      {{ images[0].comments.length }} commentaire{{
        images[0].comments.length > 1 ? "s" : ""
      }}
    </footer>
    <div class="btn btn--xs btn--dtl | mt-16" v-if="isDesignToLightStep(step)" data-icon="leaf" lang="en">Design to Light</div>
  </article>
</template>
<script setup>
import DateTime from "./DateTime.vue";
import { useDesignToLightStore } from "../../../stores/designToLight";

const { images, step, uri } = defineProps({
  images: Array,
  step: Object,
  uri: String,
});

const { isDesignToLightStep } = useDesignToLightStore();
</script>