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

<!--
  Bouton Créer du header de l'application
-->

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

    <v-btn
        v-else
        :elevation="2"
        height="30"
        class="theme-x-create-btn"
        @click="show"
    >
      <span>{{ $t('create') }}</span>
    </v-btn>

    <LayoutDialog :show="showing" :max-width="850" >
      <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('what_type_of_contact_do_you_want_to_create') }}</span>
        <span v-else-if="type === 'event'">{{ $t('what_do_you_want_to_add_to_your_planning') }}</span>
        <span v-else-if="type === 'message'">{{ $t('what_do_you_want_to_send') }}</span>
      </template>

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

      <template #dialogBtn>
        <div class="text-center">
          <v-btn class="theme-neutral-soft" @click="close" >
            {{ $t('cancel') }}
          </v-btn>

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

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

  const showing: 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 reset = () => {
    step.value = 1
    type.value = 'home'
  }

  const show = () => {
    reset()
    showing.value = true
  }

  const close = () => {
    showing.value = false
  }

  const { mdAndDown: asIcon } = useDisplay()

</script>

<style scoped lang="scss">
:deep(.v-btn .v-icon) {
  font-size: 16px !important;
}
:deep(.v-btn) {
  text-transform: none !important;
  font-weight: 600;
}
</style>