-
Notifications
You must be signed in to change notification settings - Fork 0
/
c-dialog.riot
64 lines (63 loc) · 2.13 KB
/
c-dialog.riot
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
<c-dialog>
<dialog class="
{state.active ? 'active ' : null}
{props?.blur ? 'overlay blur ' : null}
{props?.left ? 'left ' : null}
{props?.right ? 'right ' : null}
{props?.top ? 'top ' : null}
{props?.bottom ? 'bottom ' : null}
{props?.max ? 'max ' : null}
"
>
<h5>{ state.title }</h5>
<div>
{ state.message }
</div>
<nav class="right-align no-space">
<button onclick={ toggleModal } class="transparent link">{ state.cancel }</button>
<button onclick={ validateAction } class="transparent link">{ state.validate }</button>
</nav>
</dialog>
<script>
import events from './events.js'
export default {
state: {
active: false,
title: 'Confirmation',
message: 'Are you sure?',
callbackID : '',
args : true,
validate : 'Validate',
cancel: "Cancel"
},
onMounted() {
events.on('open-modal-validation', this.openModalValidation);
},
onUnmounted() {
events.off('open-modal-validation', this.openModalValidation);
},
validateAction () {
if (this.state.callbackID) {
events.emit(this.state.callbackID, this?.state?.args);
}
this.toggleModal();
},
openModalValidation ({ message, callbackID, args }) {
this.update({
message,
callbackID,
args: args ?? true
})
this.toggleModal();
},
toggleModal() {
this.update({ active: !this.state.active })
if (this.state.active === true) {
console.log("Modal opened.")
} else {
console.log("Modal closed.")
}
}
}
</script>
</c-dialog>