designtopack/src/components/project/ProjectStep.vue

<template>
  <section
    class="flex-1"
    aria-labelledby="votre-brief-label"
    :data-status="status"
  >
    <h2 id="votre-brief-label">
      <span data-icon="votre-brief">{{ step.text }}</span>
    </h2>
    <div class="cards | flow">
      <article class="card">
        <hgroup class="order-last">
          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
        </hgroup>
        <div class="card__meta | flex">
          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
            dayjs(step.modified).format("DD MMMM YYYY")
          }}</time>
        </div>
        <router-link :to="'/' + step.uri">
          <figure class="card__images" data-count="13">
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
              alt=""
            />
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
              alt=""
            />
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
              alt=""
            />
          </figure>
        </router-link>
      </article>
    </div>
  </section>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { usePageStore } from "../../stores/page";

const { step } = defineProps({
  step: Object,
});

dayjs.locale("fr");

const { page } = usePageStore();

const steps = [
  "clientBrief",
  "proposal",
  "extended-brief",
  "industrialIdeation",
  "virtualSample",
  "physicalSample",
];

const status = setStatus();

function setStatus() {
  if (page.content.currentstep === step.value) {
    return "in-progress";
  }
  if (steps.indexOf(step.value) < steps.indexOf(page.content.currentstep)) {
    return "completed";
  }
  if (steps.indexOf(step.value) > steps.indexOf(page.content.currentstep)) {
    return "uncompleted";
  }
}
</script>