first commit

resources/js/composables/useConfirm.ts

@@ -0,0 +1,45 @@
+import { ref } from 'vue';
+
+export interface ConfirmRequest {
+    header: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    /** Drives the icon and the confirm button colour. */
+    severity: 'danger' | 'primary';
+    accept: () => void;
+}
+
+/**
+ * Module level for the same reason as useToast: `ConfirmHost` is mounted once in
+ * the layout and renders whichever request is pending.
+ */
+const request = ref<ConfirmRequest | null>(null);
+const open = ref(false);
+
+export function useConfirm() {
+    function require(options: Partial<ConfirmRequest> & { message: string; accept: () => void }): void {
+        request.value = {
+            header: options.header ?? '',
+            confirmLabel: options.confirmLabel ?? '',
+            cancelLabel: options.cancelLabel ?? '',
+            severity: options.severity ?? 'danger',
+            message: options.message,
+            accept: options.accept,
+        };
+
+        open.value = true;
+    }
+
+    /**
+     * Only lowers the flag. The request itself is kept until the next `require`
+     * so the dialog still has content to render while it closes, and so the
+     * accept callback survives Reka closing the dialog before our click handler
+     * runs.
+     */
+    function close(): void {
+        open.value = false;
+    }
+
+    return { request, open, require, close };
+}