Set up a global notification handler & Error view & Modal component

resources/js_vue3/layouts/Modal.vue

@@ -0,0 +1,52 @@
+<script setup>
+    const { notify }  = useNotification()
+
+    const props = defineProps({
+        modelValue: Boolean,
+        closable: {
+            type: Boolean,
+            default: true
+        },
+    })
+
+    const emit = defineEmits(['modalClosed'])
+
+    const isActive = computed({
+        get() {
+            return props.modelValue
+        },
+        set(value) {
+            emit('modalClosed')
+        }
+    })
+
+    function closeModal(event) {
+        if (event) {
+            notify({ clean: true })
+            isActive.value = false
+        }
+    }
+</script>
+
+<template>
+    <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
+        <div class="modal-background" @click.stop="closeModal"></div>
+        <div class="modal-content">
+            <section class="section">
+                <div class="columns is-centered">
+                    <div class="column is-three-quarters">
+                        <div class="modal-slot box has-text-centered is-shadowless">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <div v-if="props.closable" class="fullscreen-footer">
+            <!-- Close button -->
+            <button id="btnClose" class="button is-rounded" :class="{'is-dark' : false}" @click.stop="closeModal">
+                {{ $t('commons.close') }}
+            </button>
+        </div>
+    </div>
+</template>