pinafore/routes/_components/dialog/components/ConfirmationDialog.html

82 lines
1.7 KiB
HTML
Raw Normal View History

2018-04-05 03:33:17 +00:00
<ModalDialog
:id
2018-04-05 03:33:17 +00:00
:label
background="var(--main-bg)"
2018-04-05 03:33:17 +00:00
>
2018-02-05 17:43:45 +00:00
<form class="confirmation-dialog-form">
<p>
{{text}}
</p>
<div class="confirmation-dialog-form-flex">
<button type="button" on:click="onPositive()">
{{positiveText || 'OK'}}
</button>
<button type="button" on:click="onNegative()">
{{negativeText || 'Cancel'}}
</button>
</div>
</form>
</ModalDialog>
<style>
.confirmation-dialog-form-flex {
2018-02-06 17:09:47 +00:00
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px 20px;
2018-02-05 17:43:45 +00:00
}
.confirmation-dialog-form-flex button {
2018-02-06 17:09:47 +00:00
min-width: 125px;
2018-02-05 17:43:45 +00:00
}
.confirmation-dialog-form p {
font-size: 1.3em;
padding: 40px 20px;
}
</style>
<script>
import ModalDialog from './ModalDialog.html'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { on } from '../../../_utils/eventBus'
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
2018-02-05 17:43:45 +00:00
export default {
oncreate() {
on('destroyDialog', this, this.onDestroyDialog)
onCreateDialog.call(this)
2018-02-05 17:43:45 +00:00
},
methods: {
show,
close,
onDestroyDialog(thisId) {
let {
id,
positiveResult,
onPositive,
onNegative
} = this.get()
if (thisId !== id) {
return
}
if (positiveResult) {
if (onPositive) {
onPositive()
2018-02-05 17:43:45 +00:00
}
} else {
if (onNegative) {
onNegative()
2018-02-05 17:43:45 +00:00
}
}
},
onPositive() {
this.set({positiveResult: true})
this.close()
2018-02-05 17:43:45 +00:00
},
onNegative() {
this.close()
2018-02-05 17:43:45 +00:00
}
},
components: {
ModalDialog
2018-02-05 17:43:45 +00:00
}
}
</script>