refactor(Confirm): Converted to composition API

frontend/src/components/modals/Confirm.vue

@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { onBeforeUnmount } from "vue";
+import { useModalState, useModalActions } from "@/vuex_helpers";
+
+const props = defineProps({
+	modalUuid: { type: String, default: "" }
+});
+
+const store = useStore();
+
+const { message } = useModalState("modals/confirm/MODAL_UUID", {
+	modalUuid: props.modalUuid
+});
+
+const { confirm } = useModalActions("modals/confirm/MODAL_UUID", ["confirm"], {
+	modalUuid: props.modalUuid
+});
+const closeCurrentModal = () =>
+	store.dispatch("modalVisibility/closeCurrentModal");
+
+const confirmAction = () => {
+	confirm();
+	closeCurrentModal();
+};
+
+onBeforeUnmount(() => {
+	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+	store.unregisterModule(["modals", "confirm", props.modalUuid]);
+});
+</script>
+
 <template>
 	<div>
 		<modal class="confirm-modal" title="Confirm Action" :size="'slim'">
@@ -15,32 +47,3 @@
 		</modal>
 	</div>
 </template>
-
-<script>
-import { mapActions } from "vuex";
-
-import { mapModalState, mapModalActions } from "@/vuex_helpers";
-
-export default {
-	props: {
-		modalUuid: { type: String, default: "" }
-	},
-	computed: {
-		...mapModalState("modals/confirm/MODAL_UUID", {
-			message: state => state.message
-		})
-	},
-	beforeUnmount() {
-		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-		this.$store.unregisterModule(["modals", "confirm", this.modalUuid]);
-	},
-	methods: {
-		confirmAction() {
-			this.confirm();
-			this.closeCurrentModal();
-		},
-		...mapModalActions("modals/confirm/MODAL_UUID", ["confirm"]),
-		...mapActions("modalVisibility", ["closeCurrentModal"])
-	}
-};
-</script>