form data

app.vue

@@ -62,7 +62,8 @@ const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/
 
 const isModalOpen = ref<boolean>(false)
 const toggleModal = () => {
-  isModalOpen.value = !!isModalOpen
+  modal_phone.value = ''
+  isModalOpen.value = !isModalOpen.value
 }
 const modal_phone = ref()
 const model_form = reactive({
@@ -77,7 +78,7 @@ const validateInput = (evt: KeyboardEvent) => {
     return
   }
 }
-const validate = (evt: KeyboardEvent) => {
+const validate = () => {
   const phone_regexp = /\(?\+[0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/
   const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
 
@@ -90,7 +91,11 @@ const validate = (evt: KeyboardEvent) => {
     return
   }
 }
-
+const submit = (e: any) => {
+  console.log(e)
+  modal_phone.value = ''
+  isModalOpen.value = false
+}
 </script>
 <template>
   <div>
@@ -162,8 +167,13 @@ const validate = (evt: KeyboardEvent) => {
     <div v-if="isModalOpen" class="modal-backdrop">
       <div class="modal">
         <h2>Оставьте номер телефона для связи</h2>
+        <form @submit.prevent="submit">
           <input type="phone" v-model="modal_phone" @keypress="validateInput" @keyup="validate" />
-        <button class="button not-prose" :disabled="model_form.disabled">Отправить</button>
+          <div class="flex gap-4">
+            <button class="not-prose" :disabled="model_form.disabled" type="submit">Отправить</button>
+            <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
+          </div>
+        </form>
       </div>
     </div>
   </div>

assets/main.scss

@@ -94,11 +94,15 @@ a[href^="/#"]:not([class*="btn"]) {
 }
 
 .modal {
-    @apply bg-white p-10 border rounded shadow prose flex flex-col gap-4 items-center;
+    @apply bg-white p-10 border rounded shadow prose;
 
     &-backdrop {
         @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center;
     }
+
+    form {
+        @apply flex flex-col gap-4 items-center;
+    }
 }
 
 label {
@@ -111,4 +115,8 @@ input {
 
 button {
     @apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
+
+    &[type="reset"] {
+        @apply bg-neutral hover:bg-neutral-400
+    }
 }

tailwind.config.ts

@@ -9,6 +9,10 @@ export default <Partial<Config>>{
                 primary: {
                     ...colors.blue,
                     DEFAULT: colors.blue[300]
+                },
+                neutral: {
+                    ...colors.gray,
+                    DEFAULT: colors.gray[300]
                 }
             }
         }