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

<!--
bouton Créer
-->

<template>
  <main>
    <v-btn
        v-if="asIcon"
        :elevation="0"
        class="theme-primary"
        :icon="true"
        size="small"
        @click="showDialog=true"
    >
      <v-icon>fas fa-plus</v-icon>
    </v-btn>

    <v-btn
        v-else
        :elevation="2"
        class="theme-x-create-btn"
        @click="showDialog=true"
    >
      <span>{{ $t('create') }}</span>
    </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>
        <!-- TODO: réactiver ce component quand les v-steper seront implémentés dans vuetify 3 -->
        <!-- <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" @updateStep="updateStep" /> -->
        <span>TEMP</span>
      </template>

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

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

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

  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
  }

  const { mdAndDown: asIcon } = useDisplay()

</script>
<style scoped>

</style>