studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

add style and interactions on ProjectRequestDialog

Browse source
This commit is contained in:
Timothée Goguely 2025-01-27 16:28:12 +01:00
parent 3913c8b93e
commit 30b00ed643
3 changed files with 103 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/components/ProjectRequestDialog.vue
View file

@ -1,20 +1,64 @@
<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>
<Dialog
id="project-request-dialog"
v-model:visible="isOpen"
modal
:draggable="false"
dismissableMask="true"
header="Demander la création d’un projet"
class="dialog"
:closeOnEscape="true"
>
<template #header>
<h2 class="font-serif text-lg">Demander la création d’un projet</h2>
</template>
<form @submit.prevent="handleSubmit" class="w-full h-full p-16 flex flex-col" style="--row-gap: 1rem">
<label for="project-title" class="sr-only">Nom du projet</label>
<input
type="text"
v-model="title"
id="project-title"
placeholder="Nom du projet"
class="w-full rounded-md border border-grey-200 px-16 py-12"
required
>
<label for="project-details" class="sr-only">Détails du projet</label>
<textarea
id="project-details"
name="details"
v-model="details"
cols="30"
rows="10"
placeholder="Détails du projet"
class="w-full h-full rounded-md border border-grey-200 px-16 py-12"
required
></textarea>
<div id="project-dtl" class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12" style="align-self: flex-start">
<input id="dtl" type="checkbox" v-model="isDTLEnabled">
<label for="dtl" class="flex font-medium mt-4" style="--column-gap: var(--space-4)">
Créer avec <span class="flex justify-center text-sm" data-icon="leaf">Design to Light</span>
</label>
<p class="text-sm mt-8 mb-4">
Découvrez la note environnementale de votre projet et allégez l’impact de votre projet grâce à nos expertises d’optimisation du poids de flacon.
</p>
<router-link to="/design-to-light" class="text-sm font-medium">En savoir plus</router-link>
</div>
<footer class="flex-columns w-full mt-auto" style="column-gap: .5rem">
<button class="btn btn--black-10" @click="emits('close')">Annuler</button>
<button class="btn" type="submit">Soumettre</button>
</footer>
</form>
</Dialog>
</template>
<script setup>
import Dialog from "primevue/dialog";
import { ref } from "vue";
import { useApiStore } from "../stores/api";
@ -22,6 +66,8 @@ const title = ref("");
const details = ref("");
const isDTLEnabled = ref(false);
const api = useApiStore();
const isOpen = ref(true);
const emits = defineEmits("close");
async function handleSubmit() {
const formData = {
@ -34,29 +80,3 @@ async function handleSubmit() {
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>