-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
demo.vue
68 lines (61 loc) · 1.53 KB
/
demo.vue
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script setup lang="ts">
import { createTemplatePromise } from '.'
type DialogResult = 'ok' | 'cancel'
const TemplatePromise = createTemplatePromise<DialogResult, [string]>({
transition: {
name: 'fade',
appear: true,
},
})
async function open(idx: number) {
console.log(idx, 'Before')
const result = await TemplatePromise.start(`Hello ${idx}`)
console.log(idx, 'After', result)
}
function asyncFn() {
return new Promise<DialogResult>((resolve) => {
setTimeout(() => {
resolve('ok')
}, 1000)
})
}
</script>
<template>
<div class="flex gap-2">
<button @click="open(1)">
Open 1
</button>
<button @click="open(2)">
Open 2
</button>
<button @click="open(1); open(2)">
Open 1 & 2
</button>
</div>
<TemplatePromise v-slot="{ resolve, args, isResolving }">
<div class="fixed inset-0 bg-black/10 flex items-center z-30">
<dialog open class="border-gray/10 shadow rounded ma">
<div>Dialog {{ args[0] }}</div>
<p>Open console to see logs</p>
<div class="flex gap-2 justify-end">
<button class="w-35" @click="resolve('cancel')">
Cancel
</button>
<button class="w-35" :disabled="isResolving" @click="resolve(asyncFn())">
{{ isResolving ? 'Confirming...' : 'OK' }}
</button>
</div>
</dialog>
</div>
</TemplatePromise>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>