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" loading="lazy">
        <div v-else class="card__images" data-icon="document"></div>
      </template>
    </figure>
    <footer
      v-if="commentsCount > 0"
      class="order-last | text-sm text-primary font-medium"
    >
      {{ commentsCount }} commentaire{{ commentsCount > 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';
import { computed } from 'vue';

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

const { isDesignToLightStep } = useDesignToLightStore();

const commentsCount = computed(() => {
  let count = 0;

  if (Array.isArray(step.files)) {
    for (const file of step.files) {
      count += file?.comments?.length || 0;
    }
  } else {
    if (step.files?.dynamic) {
      for (const track of step.files.dynamic) {
        for (const file of track.files) {
          count += file?.comments?.length || 0;
        }
      }
    }

    if (step.files?.static) {
      for (const element of Object.values(step.files.static)) {
        count += element?.comments?.length || 0;
      }
    }
  }

  return count;
});
</script>