designtopack/src/views/ClientBrief.vue

<template>
  <main class="flex flex-col items-stretch | w-full">
    <header class="flex | bg-white | rounded-2xl | p-8 mb-16">
      <router-link :to="'/' + page.parent">
        <h1 class="font-serif | px-8">Retour au projet</h1>
      </router-link>
      <button class="btn | ml-auto">Valider et envoyer le brief</button>
    </header>
    <component :is="stepsComponents[currentStep]" @update:step="changeStep" />
  </main>
</template>
<script setup>
import { ref } from "vue";
import Header from "../components/project/Header.vue";
import Intro from "../components/project/ClientBrief/Intro.vue";
import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
import Images from "../components/project/ClientBrief/Images.vue";
import { usePageStore } from "../stores/page";

const stepsComponents = {
  Intro,
  ModeSelection,
  Images,
};

const { page } = usePageStore();

const currentStep = ref(setInitialStep());

function changeStep(stepName) {
  currentStep.value = stepName;
}

function setInitialStep() {
  const hasPDF = page.content.clientbriefpdf.length !== 0;
  const hasImages = page.content.clientbriefimages.length !== 0;
  const isEmpty = !hasPDF && !hasImages;
  if (isEmpty) return "Intro";
  if (hasPDF) return "PDF";
  if (hasImages) return "Images";
}
</script>