designtopack/src/components/ProjectRequestDialog.vue

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="title" placeholder="Nom du projet" required />
    <textarea
      name="details"
      v-model="details"
      cols="30"
      rows="10"
      placeholder="Détails du projet"
      required
    ></textarea>
    <input type="checkbox" v-model="isDTLEnabled" />
    <button type="submit">Soumettre</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import { useApiStore } from "../stores/api";

const title = ref("");
const details = ref("");
const isDTLEnabled = ref(false);
const api = useApiStore();

async function handleSubmit() {
  const formData = {
    title: title.value,
    details: details.value,
    isDTLEnabled: isDTLEnabled.value,
  };

  const response = await api.post(formData, "request-project-creation.json");
  console.log(response);
}
</script>

<style scoped>
form {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: #000;
  color: #fff;
}

button {
  color: #fff;
}

input,
textarea {
  background-color: #fff;
  color: #000;
}

input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}
</style>