build version 400

resources/assets/js/components/base/modal/BaseModal.vue

@@ -1,19 +1,22 @@
 <template>
-  <transition name="fade">
-    <div v-if="modalActive" :class="'size-' + modalSize" class="base-modal">
-      <div class="modal-body">
-        <div class="close-icon" @click="closeModal">
-          <font-awesome-icon icon="times" />
+  <div>
+    <sw-modal ref="baseModal" :variant="variant">
+      <template v-slot:header>
+        <div
+          class="absolute flex content-center justify-center w-5 cursor-pointer"
+          style="top: 20px; right: 15px"
+          @click="closeModal"
+        >
+          <x-icon />
         </div>
-        <div class="modal-header p-3">
-          <h5 class="modal-heading">{{ modalTitle }}</h5>
-        </div>
-        <component :is="component" />
-      </div>
-    </div>
-  </transition>
+        <span>{{ modalTitle }}</span>
+      </template>
+      <component :is="component" />
+    </sw-modal>
+  </div>
 </template>
 <script>
+import { XIcon } from '@vue-hero-icons/solid'
 import { mapActions, mapGetters } from 'vuex'
 import TaxTypeModal from './TaxTypeModal'
 import ItemModal from './ItemModal'
@@ -21,9 +24,17 @@ import EstimateTemplate from './EstimateTemplate'
 import InvoiceTemplate from './InvoiceTemplate'
 import CustomerModal from './CustomerModal'
 import CategoryModal from './CategoryModal'
+import BackupModal from './BackupModal'
 import PaymentMode from './PaymentModeModal'
 import ItemUnit from './ItemUnitModal'
 import MailTestModal from './MailTestModal'
+import SendInvoiceModal from './SendInvoiceModal'
+import SendEstimateModal from './SendEstimateModal'
+import SendPaymentModal from './SendPaymentModal'
+import FileDiskModal from './FileDiskModal'
+import SetDefaultDiskModal from './SetDefaultDiskModal'
+import CustomFieldModal from './CustomField/Index'
+import NoteSelectModal from './NoteModal'
 
 export default {
   components: {
@@ -33,14 +44,22 @@ export default {
     InvoiceTemplate,
     CustomerModal,
     CategoryModal,
+    BackupModal,
     PaymentMode,
     ItemUnit,
-    MailTestModal
+    MailTestModal,
+    SendInvoiceModal,
+    SendEstimateModal,
+    SendPaymentModal,
+    XIcon,
+    FileDiskModal,
+    SetDefaultDiskModal,
+    CustomFieldModal,
+    NoteSelectModal,
   },
-  data () {
+  data() {
     return {
       component: '',
-      hasFocus: false
     }
   },
   computed: {
@@ -49,31 +68,28 @@ export default {
       'modalTitle',
       'componentName',
       'modalSize',
-      'modalData'
-    ])
+      'modalData',
+      'variant',
+    ]),
   },
   watch: {
-    componentName (component) {
+    componentName(component) {
       if (!component) {
         return
       }
-
       this.component = component
-    }
+    },
+    modalActive(status) {
+      if (status) {
+        this.$refs.baseModal.open()
+        return true
+      }
+      this.$refs.baseModal.close()
+      return false
+    },
   },
   methods: {
-    ...mapActions('modal', [
-      'openModal',
-      'closeModal'
-    ])
-  }
+    ...mapActions('modal', ['openModal', 'closeModal']),
+  },
 }
 </script>
-<style>
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-</style>