app/components/Ui/Form/Creation.vue

<template>
  <UiForm v-model="entity" :submit-actions="submitActions">
    <template #form.button>
      <v-btn v-if="goBackRoute" class="theme-neutral mr-3" @click="quit">
        {{ $t('cancel') }}
      </v-btn>
    </template>

    <slot v-bind="{ model, entity }" />
  </UiForm>
</template>

<script setup lang="ts" generic="T extends typeof ApiModel">

import type { RouteLocationRaw } from 'vue-router'
import type ApiModel from '~/models/ApiModel'
import type { AnyJson } from '~/types/data'
import { SUBMIT_TYPE } from '~/types/enum/enums'
import { useEntityManager } from '~/composables/data/useEntityManager'

const props = withDefaults(defineProps<{
  model: T
  /**
   * Route de retour
   */
  goBackRoute?: RouteLocationRaw | null
  /**
   * La validation est en cours
   */
  validationPending?: boolean
  /**
   * Faut-il rafraîchir le profil à la soumission du formulaire ?
   */
  refreshProfile?: boolean
}>(), {
  goBackRoute: null,
  validationPending: false,
  refreshProfile: false
})

const router = useRouter()
const { em } = useEntityManager()

// @ts-expect-error Pour une raison que j'ignore, le type Ref<ApiModel> met en erreur la prop entity de UiForm...
const entity: ApiModel = reactive(em.newInstance(props.model))

const submitActions = computed(() => {
  const actions: AnyJson = {}

  if (props.goBackRoute !== null) {
    actions[SUBMIT_TYPE.SAVE_AND_BACK] = props.goBackRoute
  } else {
    actions[SUBMIT_TYPE.SAVE] = null
  }
  return actions
})

const quit = () => {
  if (!props.goBackRoute) {
    throw new Error('no go back route defined')
  }

  router.push(props.goBackRoute)
}
</script>

<style scoped lang="scss"></style>