46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
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 };
|
|
}
|