implementing modal component

resources/js/Pages/Superuser/Menu/Index.vue

@@ -9,6 +9,7 @@ import axios from 'axios'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
 import Nested from './Nested.vue'
+import Modal from '@/Components/Modal.vue'
 
 const self = getCurrentInstance()
 const { permissions, routes, icons } = defineProps({
@@ -160,20 +161,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     </Card>
   </DashboardLayout>
 
-  <transition
-    enterActiveClass="transition-all duration-500"
-    leaveActiveClass="transition-all duration-500"
-    enterFromClass="opacity-0"
-    leaveToClass="opacity-0">
-    <div v-if="open || icon" class="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-80 overflow-auto z-20 blur-3xl"></div>
-  </transition>
-
-  <transition
-    enterActiveClass="transition-all duration-150"
-    leaveActiveClass="transition-all duration-150"
-    enterFromClass="-translate-y-full opacity-0"
-    leaveToClass="-translate-y-full opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-screen flex justify-center z-20 p-10 overflow-auto">
+  <Modal :show="open">
     <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl rounded-md shadow-xl">
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
@@ -281,15 +269,9 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </template>
       </Card>
     </form>
-    </div>
-  </transition>
+  </Modal>
 
-  <transition
-    enterActiveClass="transition-all duration-150"
-    leaveActiveClass="transition-all duration-150"
-    enterFromClass="-translate-y-full opacity-0"
-    leaveToClass="-translate-y-full opacity-0">
-    <div v-if="icon" class="fixed top-0 left-0 w-full h-screen flex justify-center overflow-auto z-20 p-10">
+  <Modal :show="icon">
     <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 w-full max-w-xl sm:max-w-5xl max-h-96 overflow-auto">
       <template #header>
         <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800 sticky top-0 left-0">
@@ -304,6 +286,5 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </div>
       </template>
     </Card>
-    </div>
-  </transition>
+  </Modal>
 </template>

resources/js/Pages/Superuser/Permission/Index.vue

@@ -7,6 +7,7 @@ import DashboardLayout from '@/Layouts/DashboardLayout.vue'
 import Card from '@/Components/Card.vue'
 import Icon from '@/Components/Icon.vue'
 import { Inertia } from '@inertiajs/inertia'
+import Modal from '@/Components/Modal.vue'
 
 const self = getCurrentInstance()
 const permissions = ref([])
@@ -136,20 +137,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     </Card>
   </DashboardLayout>
   
-  <transition
-    enterActiveClass="transition-all duration-500"
-    leaveActiveClass="transition-all duration-500"
-    enterFromClass="opacity-0"
-    leaveToClass="opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-80 z-20 overflow-hidden blur-3xl"></div>
-  </transition>
-
-  <transition
-    enterActiveClass="transition-all duration-150"
-    leaveActiveClass="transition-all duration-150"
-    enterFromClass="-translate-y-full opacity-0"
-    leaveToClass="-translate-y-full opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-screen flex justify-center overflow-auto z-20 p-10">
+  <Modal :show="open">
     <form @submit.prevent="submit" class="w-full max-w-xl shadow-xl">
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border dark:border-gray-700">
         <template #header>
@@ -185,6 +173,5 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </template>
       </Card>
     </form>
-    </div>
-  </transition>
+  </Modal>
 </template>

resources/js/Pages/Superuser/Role/Index.vue

@@ -9,6 +9,7 @@ import Builder from '@/Components/DataTable/Builder.vue'
 import Th from '@/Components/DataTable/Th.vue'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
+import Modal from '@/Components/Modal.vue'
 
 const self = getCurrentInstance()
 const { permissions } = defineProps({
@@ -31,7 +32,6 @@ const show = () => {
 const close = () => {
   open.value = false
   form.reset()
-  tableRefresh.value && tableRefresh.value()
 }
 
 const detach = async (role, permission, refresh) => {
@@ -190,20 +190,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     </Card>
   </DashboardLayout>
 
-  <transition
-    enterActiveClass="transition-all duration-500"
-    leaveActiveClass="transition-all duration-500"
-    enterFromClass="opacity-0"
-    leaveToClass="opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 z-20 overflow-hidden blur-3xl"></div>
-  </transition>
-
-  <transition
-    enterActiveClass="transition-all duration-150"
-    leaveActiveClass="transition-all duration-150"
-    enterFromClass="-translate-y-full opacity-0"
-    leaveToClass="-translate-y-full opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-full flex justify-center overflow-auto z-20 p-10">
+  <Modal :show="open">
     <form @submit.prevent="submit" class="w-full max-w-xl shadow-xl">
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
@@ -257,6 +244,5 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </template>
       </Card>
     </form>
-    </div>
-  </transition>
+  </Modal>
 </template>

resources/js/Pages/Superuser/User/Index.vue

@@ -9,6 +9,7 @@ import Builder from '@/Components/DataTable/Builder.vue'
 import Th from '@/Components/DataTable/Th.vue'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
+import Modal from '@/Components/Modal.vue'
 
 const self = getCurrentInstance()
 const { permissions, roles } = defineProps({
@@ -38,7 +39,6 @@ const close = () => {
   open.value = false
   form.reset()
   form.clearErrors()
-  tableRefresh.value && tableRefresh.value()
 }
 
 const store = () => {
@@ -256,12 +256,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <div v-if="open" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 z-20 overflow-hidden blur-3xl"></div>
   </transition>
 
-  <transition
-    enterActiveClass="transition-all duration-150"
-    leaveActiveClass="transition-all duration-150"
-    enterFromClass="-translate-y-full opacity-0"
-    leaveToClass="-translate-y-full opacity-0">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-full flex justify-center overflow-auto z-20 p-10">
+  <Modal :show="open">
     <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl shadow-xl">
       <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
         <template #header>
@@ -370,6 +365,5 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </template>
       </Card>
     </form>
-    </div>
-  </transition>
+  </Modal>
 </template>