updating how modals are done

src/resources/js/Components/Modals/Cofnirm.vue

@@ -16,26 +16,19 @@ const props = defineProps({
   },
 })
 
-// computed properties
-
-// watchers
-
-// lifecycle hooks
-
 // methods
-function close() {
+const close = (() {
   emit('close')
-}
+})
-
 </script>
 
 <template>
-    <modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
                 <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                     </svg>
                 </div>
 
@@ -52,8 +45,7 @@ function close() {
         </div>
 
         <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
-            <slot name="footer">
+            <slot name="footer"></slot>
-            </slot>
         </div>
-    </modal>
+    </Modal>
 </template>

src/resources/js/Components/Modals/ConfirmPassword.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { reactive, ref } from 'vue'
+import DialogModal from './DialogModal.vue'
+import InputElm from '@/Components/Input.vue'
+import InputError from '@/Components/Input.vue'
 
 const emit = defineEmits(['confirmed'])
 
@@ -21,14 +24,8 @@ let form = {
   error: '',
 }
 
-// computed properties
-
-// watchers
-
-// lifecycle hooks
-
 // methods
-function startConfirmingPassword() {
+const startConfirmingPassword = (() {
   axios.get(route('password.confirmation')).then(resp => {
     if (resp.data.confirmed) {
       emit('confirmed')
@@ -37,10 +34,10 @@ function startConfirmingPassword() {
       setTimeout(() => $refs.password.focus(), 250)
     }
   })
-}
+})
 
-function confirmPassword() {
+const confirmPassword = (() => {
-  form.processing = true;
+  form.processing = true
 
   axios.post(route('password.confirm'), {
     password: form.password,
@@ -53,49 +50,44 @@ function confirmPassword() {
     form.error = erro.response.data.errors.password[0]
     $refs.password.focus()
   })
-}
+})
 
-function closeModal() {
+const closeModal = (() => {
   confirmingPassword = false
   form.password = ''
   form.error = ''
-}
+})
-
 </script>
 
 <template>
     <div>
         <span @click="startConfirmingPassword">
-            <slot />
+            <slot></slot>
         </span>
 
-        <jet-dialog-modal :show="confirmingPassword" @close="closeModal">
+        <DialogModal :show="confirmingPassword" @close="closeModal">
-            <template #title>
+            <template #title>{{ title }}</template>
-                {{ title }}
-            </template>
 
             <template #content>
                 {{ content }}
 
                 <div class="mt-4">
-                    <jet-input type="password" class="mt-1 block w-3/4" placeholder="Password"
+                    <InputElm type="password" class="mt-1 block w-3/4" placeholder="Password"
                                 ref="password"
                                 v-model="form.password"
-                                @keyup.enter="confirmPassword" />
+                                @keyup.enter="confirmPassword"></InputElm>
 
-                    <jet-input-error :message="form.error" class="mt-2" />
+                    <InputError :message="form.error" class="mt-2"></InputError>
                 </div>
             </template>
 
             <template #footer>
-                <jet-secondary-button @click="closeModal">
+                <button type="button" class="button button-gradient-secondary" @click="closeModal">Cancel</button>
-                    Cancel
-                </jet-secondary-button>
 
-                <jet-button class="ml-3" @click="confirmPassword" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <button class="button button-gradient-primary ml-3" @click="confirmPassword" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     {{ button }}
-                </jet-button>
+                </button>
             </template>
-        </jet-dialog-modal>
+        </DialogModal>
     </div>
 </template>

src/resources/js/Components/Modals/DialogModal.vue

@@ -16,21 +16,14 @@ const props = defineProps({
   },
 })
 
-// computed properties
-
-// watchers
-
-// lifecycle hooks
-
 // methods
-function close() {
+const close = (() {
   emit('close')
-}
+})
-
 </script>
 
 <template>
-    <modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
         <div class="px-6 py-4">
             <div class="text-lg">
                 <slot name="title"></slot>
@@ -44,5 +37,5 @@ function close() {
         <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
             <slot name="footer"></slot>
         </div>
-    </modal>
+    </Modal>
 </template>

src/resources/js/Components/Modals/Modal.vue

@@ -34,13 +34,6 @@ watch(() => props.show, (newShow) => {
     document.body.style.overflow = null
   }
 })
-/*watch(props.show, (newShow) => {
-  if (newShow) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = null
-  }
-})*/
 
 // lifecycle hooks
 onBeforeMount(() => {
@@ -53,18 +46,17 @@ onMounted(() => {
 })
 
 // methods
-function close() {
+const close = (() => {
   if (props.closeable) {
     emit('close')
   }
-}
+})
 
-function closeOnEscape(e) {
+const closeOnEscape = ((event) => {
-  if (e.key === 'Escape' && props.show) {
+  if (event.key === 'Escape' && props.show) {
     close()
   }
-}
+})
-
 </script>
 
 <template>