1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { ref } from 'vue'
export interface ConfirmDialogExpose {
open: (title: string, message: string) => Promise<boolean>
}
export const ConfirmDialog = () => {
let
resolver: ((value: boolean) => void) | null = null
const
visible = ref<boolean>(false),
title = ref<string>(''),
message = ref<string>(''),
open = (t: string, m: string) => {
title.value = t
message.value = m
visible.value = true
return new Promise<boolean>((resolve) => {
resolver = resolve
})
},
close = (result: boolean) => {
visible.value = false
resolver?.(result)
resolver = null
},
confirm = () => close(true),
cancel = () => close(false)
vineExpose({ open })
return vine`
<dialog :open="visible" @click="cancel()">
<article @click.stop>
<h3>{{ title }}</h3>
<p>{{ message }}</p>
<footer>
<button @click="cancel()">Cancel</button>
<button class="contrast" @click="confirm()">Confirm</button>
</footer>
</article>
</dialog>
`
}