Add unclosable modals (#70)

lib/components/base/Modal.vue

@@ -6,13 +6,13 @@
         noblur: props.noblur,
       }"
       class="modal-overlay"
-      @click="hide"
+      @click="() => (closable ? hide() : {})"
     />
     <div class="modal-container" :class="{ shown: actuallyShown }">
       <div class="modal-body">
         <div v-if="props.header" class="header">
           <h1>{{ props.header }}</h1>
-          <button class="btn icon-only transparent" @click="hide">
+          <button v-if="closable" class="btn icon-only transparent" @click="hide">
             <XIcon />
           </button>
         </div>
@@ -38,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const shown = ref(false)

lib/components/base/ModalConfirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" :header="props.title">
+  <Modal ref="modal" :header="props.title" :noblur="noblur">
     <div class="modal-delete">
       <div class="markdown-body" v-html="renderString(props.description)" />
       <label v-if="props.hasToType" for="confirmation" class="confirmation-label">
@@ -61,6 +61,10 @@ const props = defineProps({
     type: String,
     default: 'Proceed',
   },
+  noblur: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['proceed'])

lib/components/base/ModalReport.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" :header="`Report ${props.itemType}`">
+  <Modal ref="modal" :header="`Report ${props.itemType}`" :noblur="noblur">
     <div class="modal-report">
       <div class="markdown-body">
         <p>
@@ -76,6 +76,10 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  noblur: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const reportType = ref('')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.28",
+  "version": "0.4.29",
   "files": [
     "dist",
     "lib"