app/components/Layout/Header/UniversalCreation/CreateButton.vue

<!--
bouton Créer
-->

<template>
  <main>
    <v-btn
      elevation="2"
      color="ot-warning text-ot-white"
      @click="showDialog=true"
    >
      {{ $t('create') }}
    </v-btn>

    <LayoutDialog :show="showDialog" >
      <template #dialogType>{{ $t('creative_assistant') }}</template>

      <template #dialogTitle>
        <span v-if="type === 'home'">{{ $t('what_do_you_want_to_create') }}</span>
        <span v-else-if="type === 'access'">{{ $t('universal_create_title_access') }}</span>
        <span v-else-if="type === 'event'">{{ $t('universal_create_title_event') }}</span>
        <span v-else-if="type === 'message'">{{ $t('universal_create_title_message') }}</span>
      </template>

      <template #dialogText>
        <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" @updateStep="updateStep" />
      </template>

      <template #dialogBtn>
        <div class="text-center">
          <v-btn
            color="ot-super-light-grey"
            @click="showDialog=false; step=1; type='home'"
          >
            {{ $t('cancel') }}
          </v-btn>

          <v-btn
            v-if="step > 1"
            color="ot-super_light_grey"
            @click="step=1; type='home'"
          >
            {{ $t('previous') }}
          </v-btn>
        </div>
      </template>
    </LayoutDialog>
  </main>
</template>

<script setup lang="ts">
  import {Ref, ref} from "@vue/reactivity";

  const showDialog: Ref<Boolean> = ref(false);
  const step: Ref<Number> = ref(1);
  const type: Ref<String> = ref('home');

  const updateStep = ({stepChoice, typeChoice}: any) =>{
    step.value = stepChoice
    type.value = typeChoice
  }
</script>
<style scoped>

</style>