1 files changed, 37 insertions, 39 deletions

diff --git a/front-end/src/bootstrap/components/ConfirmPrompt.vue b/front-end/src/bootstrap/components/ConfirmPrompt.vue
index c67bcfc..3994672 100644
--- a/front-end/src/bootstrap/components/ConfirmPrompt.vue
+++ b/front-end/src/bootstrap/components/ConfirmPrompt.vue
@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { defaultTo, noop } from 'lodash-es'
+import { computed, ref } from 'vue'
+import { Dialog, DialogPanel, DialogTitle, DialogDescription } from '@headlessui/vue'
+import { onClickOutside } from '@vueuse/core'
+import { useConfirm, useEnvSize } from '@vnuge/vnlib.browser'
+
+export interface ConfirmMessage {
+  title: string
+  text: string
+  subtext?: string
+}
+
+const { headerHeight } = useEnvSize()
+//Use component side of confirm
+const { isRevealed, confirm, cancel, onReveal } = useConfirm()
+
+const dialog = ref(null)
+const message = ref<ConfirmMessage>()
+
+//Cancel prompt when user clicks outside of dialog, only when its open
+onClickOutside(dialog, () => isRevealed.value ? cancel() : noop())
+
+//Set message on reveal
+onReveal(m => message.value = defaultTo(m, {}));
+
+const style = computed(() => {
+  return {
+    'height': `calc(100vh - ${headerHeight.value}px)`,
+    'top': `${headerHeight.value}px`
+  }
+})
+
+</script>
 
 <template>
   <div id="confirm-prompt">
@@ -5,15 +39,15 @@
       <div class="modal-content-container">
         <DialogPanel>
           <DialogTitle class="modal-title">
-            {{ message.title ?? 'Confirm' }}
+            {{ message?.title ?? 'Confirm' }}
           </DialogTitle>
 
           <DialogDescription class="modal-description">
-            {{ message.text }}
+            {{ message?.text }}
           </DialogDescription>
 
           <p class="modal-text-secondary">
-            {{ message.subtext }}
+            {{ message?.subtext }}
           </p>
           
           <div class="modal-button-container">
@@ -29,39 +63,3 @@
     </Dialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { defaultTo } from 'lodash-es'
-import { computed, ref } from 'vue'
-
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  DialogDescription,
-} from '@headlessui/vue'
-
-import { onClickOutside } from '@vueuse/core'
-import { useConfirm, useEnvSize } from '@vnuge/vnlib.browser'
-
-const { headerHeight } = useEnvSize()
-//Use component side of confirm
-const { isRevealed, confirm, cancel, onReveal } = useConfirm()
-
-const dialog = ref(null)
-const message = ref({})
-
-//Cancel prompt when user clicks outside of dialog, only when its open
-onClickOutside(dialog, () => isRevealed.value ? cancel() : null)
-
-//Set message on reveal
-onReveal(m => message.value = defaultTo(m, {}));
-
-const style = computed(() => {
-  return {
-    'height': `calc(100vh - ${headerHeight.value}px)`,
-    'top': `${headerHeight.value}px`
-  }
-})
-
-</script>
\ No newline at end of file