app/pages/poc/new.vue

<template>
  <main>
    <p>New :{{ file }}</p>

    <form @submit.prevent="" class="my-3">
      <input v-model="file.name" type="text" />

      <select v-model="file.status">
        <option value="PENDING">Pending</option>
        <option value="READY">Ready</option>
        <option value="DELETED">Deleted</option>
        <option value="ERROR">Error</option>
      </select>

      <button @click="cancelAndGoBack">Annuler</button>
      <button type="submit" value="Enregistrer" @click="save">Enregistrer</button>
    </form>
  </main>
</template>

<script setup lang="ts">
import {useEntityManager} from "~/composables/data/useEntityManager";
import ApiResource from "~/models/ApiResource";
import File from "~/models/Core/File";

const em = useEntityManager()
//@ts-ignore
let file: ApiResource = reactive(await em.newInstance(File))

const save = async () => {
  //@ts-ignore
  await em.persist(File, file)
  navigateTo('/poc')
}

const cancelAndGoBack = async () => {
  await em.delete(File, file)
  navigateTo('/poc')
}

</script>

<style>
a {
  color: blue;   /* !color! */
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

button {
  border: grey solid 1px;  /* !color! */
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}
button:hover {
  text-decoration: underline;
}
button:focus {
  background-color: lightgrey;  /* !color! */
}

form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
}
</style>