Lets be smarter with modals here...

Author: DaneEveritt

resources/assets/scripts/components/core/Modal.vue

@@ -2,7 +2,7 @@
     <transition name="modal">
         <div class="modal-mask" v-show="show" v-on:click="close">
             <div class="modal-container" @click.stop>
-                <div v-on:click="close">
+                <div v-on:click="close" v-if="dismissable">
                     <Icon name="x"
                           class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
                           aria-label="Close modal"
@@ -27,10 +27,11 @@
             modalName: {type: String, default: 'modal'},
             show: {type: Boolean, default: false},
             closeOnEsc: {type: Boolean, default: true},
+            dismissable: {type: Boolean, default: true},
         },
 
         mounted: function () {
-            if (this.$props.closeOnEsc) {
+            if (this.$props.dismissable && this.$props.closeOnEsc) {
                 document.addEventListener('keydown', e => {
                     if (this.show && e.key === 'Escape') {
                         this.close();
@@ -41,7 +42,9 @@
 
         methods: {
             close: function () {
-                this.$emit('close', this.$props.modalName);
+                if (this.$props.dismissable) {
+                    this.$emit('close', this.$props.modalName);
+                }
             }
         },
     });

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -16,7 +16,7 @@
                     <span class="spinner spinner-xl spinner-thick blue"></span>
                 </div>
             </div>
-            <TransitionGroup class="flex flex-wrap justify-center sm:justify-start" v-else>
+            <TransitionGroup class="flex flex-wrap justify-center sm:justify-start" tag="div" v-else>
                 <ServerBox
                         v-for="(server, index) in servers"
                         :key="index"

resources/assets/scripts/components/server/components/database/DatabaseRow.vue

@@ -31,26 +31,23 @@
                 </button>
             </div>
         </div>
-        <Modal :show="showDeleteModal" v-on:close="showDeleteModal = false">
-            <DeleteDatabaseModal
-                    :database="database"
-                    v-on:close="showDeleteModal = false"
-                    v-if="showDeleteModal"
-            />
-        </modal>
+        <DeleteDatabaseModal
+                :database="database"
+                :show="showDeleteModal"
+                v-on:close="showDeleteModal = false"
+        />
     </div>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
     import Icon from "@/components/core/Icon.vue";
-    import Modal from "@/components/core/Modal.vue";
     import {ServerDatabase} from "@/api/server/types";
     import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal.vue";
 
     export default Vue.extend({
         name: 'DatabaseRow',
-        components: {DeleteDatabaseModal, Modal, Icon},
+        components: {DeleteDatabaseModal, Icon},
         props: {
             database: {
                 type: Object as () => ServerDatabase,

resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue

@@ -1,32 +1,42 @@
 <template>
-    <div>
-        <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
-        <p class="text-neutral-900 text-sm">This action
-            <strong>cannot</strong> be undone. This will permanetly delete the
-            <strong>{{database.name}}</strong> database and remove all associated data.</p>
-        <div class="mt-6">
-            <label class="input-label">Confirm database name</label>
-            <input type="text" class="input" v-model="nameConfirmation"/>
-        </div>
-        <div class="mt-6 text-right">
-            <button class="btn btn-sm btn-secondary mr-2" v-on:click="$emit('close')">Cancel</button>
-            <button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
-                <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
-                <span :class="{ hidden: showSpinner }">
-                        Confirm Deletion
-                    </span>
-            </button>
-        </div>
-    </div>
+    <Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
+        <transition name="modal">
+            <div>
+                <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
+                <p class="text-neutral-900 text-sm">This action
+                    <strong>cannot</strong> be undone. This will permanetly delete the
+                    <strong>{{database.name}}</strong> database and remove all associated data.</p>
+                <div class="mt-6">
+                    <label class="input-label">Confirm database name</label>
+                    <input type="text" class="input" v-model="nameConfirmation"/>
+                </div>
+                <div class="mt-6 text-right">
+                    <button class="btn btn-sm btn-secondary mr-2" v-on:click="closeModal">Cancel</button>
+                    <button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
+                        <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
+                        <span :class="{ hidden: showSpinner }">
+                            Confirm Deletion
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </transition>
+    </Modal>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
     import {ServerDatabase} from "@/api/server/types";
+    import Modal from '@/components/core/Modal.vue';
 
     export default Vue.extend({
         name: 'DeleteDatabaseModal',
+        components: {Modal},
         props: {
+            show: {
+                type: Boolean,
+                default: false,
+            },
             database: {
                 type: Object as () => ServerDatabase,
                 required: true
@@ -84,6 +94,16 @@
                         this.$emit('close');
                     })
             },
+
+            /**
+             * Closes the modal and resets the entry field.
+             */
+            closeModal: function () {
+                this.showSpinner = false;
+                this.nameConfirmation = '';
+
+                this.$emit('close');
+            }
         },
     });
 </script>

resources/assets/styles/components/miscellaneous.css

@@ -76,7 +76,7 @@ code {
     }
 
     & > div {
-        @apply .flex .flex-col .h-full;
+        @apply .flex .flex-col;
         transition: box-shadow 150ms ease-in;
 
         &:hover {
@@ -85,7 +85,7 @@ code {
     }
 
     & > div > .server-card {
-        @apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
+        @apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
         transition: all 100ms ease-in;
 
         & .identifier-icon {