feat/fix: reorganization and partial addition of the still incomplete…

… styling of the calendar registration fields, leaving only the final styling and creating their model ✨

components/Section/Calendario/Forms/Form1.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
+const cor = ref('#000000'); // Define o model para a cor
 
 const closeForm = () => {
   $emit('close');
@@ -8,8 +11,6 @@ const nextForm = () => {
   $emit('next');
 };
 
-
-
 const $emit = defineEmits(['close', 'next']);
 </script>
 
@@ -20,44 +21,150 @@ const $emit = defineEmits(['close', 'next']);
         <span>Cadastrar novo calendário</span>
       </h1>
     </div>
-    <div class="flex items-center mb-3">
-  <!-- Texto à esquerda -->
-  <span class="font-bold mr-2">Etapa 1</span>
+    <div class="flex items-center mb-3 mt-4">
+      <span class="font-bold mr-2">Etapa 1</span>
+      <hr class="divider flex-grow m-0" />
+    </div>
+
+    <div class="form-body modal-form">
+      <VVTextField
+        v-model="cor"
+        type="color"
+        label="Cor"
+        placeholder="Selecione a cor"
+        name="nome"
+        class="color-picker-square"
+      />
+
+      <div class="date-fields">
+        <VVTextField
+          v-model="inicio"
+          type="date"
+          label="Início"
+          placeholder="Selecione a data de início"
+          name="inicio"
+        />
+        <VVTextField
+          v-model="fim"
+          type="date"
+          label="Término"
+          placeholder="Selecione a data de término"
+          name="fim"
+        />
+      </div>
+
+      <div class="flex items-center mt-4">
+      <span class="font-bold mr-2">Etapa 2</span>
+      <hr class="divider flex-grow m-0" />
+    </div>
 
-  <!-- Linha à direita -->
-  <hr class="divider flex-grow m-0" />
-</div>
+    <VVTextField
+        v-model="cor"
+        type="color"
+        label="Cor"
+        placeholder="Selecione a cor"
+        name="nome"
+        class="color-picker-square"
+      />
+
+      <div class="date-fields">
+        <VVTextField
+          v-model="inicio"
+          type="date"
+          label="Início"
+          placeholder="Selecione a data de início"
+          name="inicio"
+        />
+        <VVTextField
+          v-model="fim"
+          type="date"
+          label="Término"
+          placeholder="Selecione a data de término"
+          name="fim"
+        />
+      </div>
+
+    <div class="flex items-center mt-4">
+      <span class="font-bold mr-2">Etapa 3</span>
+      <hr class="divider flex-grow m-0" />
+    </div>
 
 
-    <div class="form-body modal-form">
-      <input type="color">
+
+    <VVTextField
+        v-model="cor"
+        type="color"
+        label="Cor"
+        placeholder="Selecione a cor"
+        name="nome"
+        class="color-picker-square"
+      />
+
+      <div class="date-fields">
+        <VVTextField
+          v-model="inicio"
+          type="date"
+          label="Início"
+          placeholder="Selecione a data de início"
+          name="inicio"
+        />
+        <VVTextField
+          v-model="fim"
+          type="date"
+          label="Término"
+          placeholder="Selecione a data de término"
+          name="fim"
+        />
+      </div>
+
+    <div class="flex items-center mt-4">
+      <span class="font-bold mr-2">Etapa 4</span>
+      <hr class="divider flex-grow m-0" />
+    </div>
+
+    <VVTextField
+        v-model="cor"
+        type="color"
+        label="Cor"
+        placeholder="Selecione a cor"
+        name="nome"
+        class="color-picker-square"
+      />
+
+      <div class="date-fields">
+        <VVTextField
+          v-model="inicio"
+          type="date"
+          label="Início"
+          placeholder="Selecione a data de início"
+          name="inicio"
+        />
+        <VVTextField
+          v-model="fim"
+          type="date"
+          label="Término"
+          placeholder="Selecione a data de término"
+          name="fim"
+        />
+      </div>
     </div>
 
     <v-divider />
 
     <div class="form-footer button-group">
-        <div class="form-footer button-group">
       <UIButtonModalCancelButton @click="closeForm" />
       <UIButtonModalAdvancedButton @click="nextForm" />
     </div>
-    </div>
   </v-form>
 </template>
 
-<style scoped>
-/* .form {
-	overflow: hidden;
-}
-
-.form-body {
-	overflow: auto;
-} */
 
+<style scoped>
 .form {
   overflow: auto;
 }
 
-.divider{
+.divider {
   border: 1px solid #9ab69e;
 }
 
@@ -87,19 +194,19 @@ const $emit = defineEmits(['close', 'next']);
   gap: 153px;
 }
 
-.button {
-  font-weight: 700;
-  margin-top: 20px;
-  cursor: pointer;
-  border: none;
+.color-picker-square input[type="color"]::-webkit-color-swatch {
+  width: 50px; /* Largura da barra de cor */
+  height: 50px; /* Altura da barra de cor */
+  border: none; /* Remove borda da barra de cor */
+  background: none; /* Remove fundo da barra de cor */
 }
 
-.v-btn.buttonCancelar,
-.v-btn.buttonCadastro {
-  padding: 6px 20px;
-  border-radius: 8px;
-  height: auto;
-  text-transform: none;
+.color-picker-square input[type="color"] {
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
 }
 
 @media screen and (max-width: 450px) {
@@ -113,4 +220,14 @@ const $emit = defineEmits(['close', 'next']);
     padding: 6px 20px;
   }
 }
-</style>
+
+.date-fields {
+  display: flex; /* Habilita o Flexbox */
+  gap: 20px; /* Espaçamento entre os campos */
+}
+
+.date-fields .v-text-field {
+  flex: 1; /* Faz com que cada campo de data ocupe espaço igual */
+}
+
+</style>