Confirmation on deletion of characters.

src/components/utilities/ConfirmationModal.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  confirmHeader: {
+    type: String,
+    default: 'Are you sure?'
+  },
+  confirmFunction: {
+    type: Function
+  },
+  cancelFunction: {
+    type: Function
+  },
+  cancelButtonText: {
+    type: String,
+    default: 'Cancel'
+  },
+  confirmButtonText: {
+    type: String,
+    default: 'Confirm'
+  },
+  modalOpened: {
+    type: Boolean,
+    default: false
+  }
+})
+
+watch(
+  () => props.modalOpened,
+  (val) => {
+    modalOpened.value = val;
+  }
+)
+
+const modalOpened = ref(props.modalOpened);
+</script>
+
+<template>
+  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => modalOpened = !modalOpened" :modal-width="300" :modal-height="190">
+    <template #modalHeader>
+      <div class="text-white">
+        <slot name="modalHeader"></slot>
+      </div>
+    </template>
+    <template #modalBody>
+      <div class="text-white h-full">
+        <div class="flex h-full flex-col justify-between">
+          <span class="p-2">
+            <slot name="modalBody"></slot>
+          </span>
+          <div class="flex justify-between p-2">
+
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
+              {{props.cancelButtonText}}
+            </button>
+
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
+              {{props.confirmButtonText}}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>