2020-02-19 05:51:28 +13:00
|
|
|
<script>
|
2020-02-25 04:00:48 +13:00
|
|
|
import Button from "./Button.svelte"
|
|
|
|
import ActionButton from "./ActionButton.svelte"
|
|
|
|
import ButtonGroup from "./ButtonGroup.svelte"
|
|
|
|
import UIkit from "uikit"
|
|
|
|
|
|
|
|
export let title = ""
|
|
|
|
export let body = ""
|
|
|
|
export let okText = "OK"
|
|
|
|
export let cancelText = "Cancel"
|
|
|
|
export let onOk = () => {}
|
|
|
|
export let onCancel = () => {}
|
|
|
|
|
|
|
|
export const show = () => {
|
2020-03-06 05:14:36 +13:00
|
|
|
uiKitModal.hide()
|
|
|
|
uiKitModal.show()
|
2020-02-25 04:00:48 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
export const hide = () => {
|
2020-03-06 05:14:36 +13:00
|
|
|
uiKitModal.hide()
|
2020-02-25 04:00:48 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
let theModal
|
2020-03-06 05:14:36 +13:00
|
|
|
$: uiKitModal = theModal && UIkit.modal(theModal)
|
2020-02-25 04:00:48 +13:00
|
|
|
|
|
|
|
const cancel = () => {
|
|
|
|
hide()
|
|
|
|
onCancel()
|
|
|
|
}
|
|
|
|
|
|
|
|
const ok = () => {
|
|
|
|
hide()
|
|
|
|
onOk()
|
|
|
|
}
|
2020-02-19 05:51:28 +13:00
|
|
|
</script>
|
|
|
|
|
2020-03-06 05:14:36 +13:00
|
|
|
<div id={title} uk-modal bind:this={theModal}>
|
2020-02-19 05:51:28 +13:00
|
|
|
<div class="uk-modal-dialog">
|
2020-02-25 04:00:48 +13:00
|
|
|
<button class="uk-modal-close-default" type="button" uk-close />
|
2020-02-19 05:51:28 +13:00
|
|
|
<div class="uk-modal-header">
|
2020-02-25 05:41:02 +13:00
|
|
|
<h4 class="budibase__title--4">{title}</h4>
|
2020-02-19 05:51:28 +13:00
|
|
|
</div>
|
2020-02-20 10:38:21 +13:00
|
|
|
<div class="uk-modal-body">
|
|
|
|
<slot>{body}</slot>
|
|
|
|
</div>
|
2020-02-19 05:51:28 +13:00
|
|
|
<div class="uk-modal-footer">
|
|
|
|
<ButtonGroup>
|
2020-03-06 04:21:29 +13:00
|
|
|
<ActionButton primary on:click={ok}>{okText}</ActionButton>
|
|
|
|
<ActionButton alert on:click={cancel}>{cancelText}</ActionButton>
|
2020-02-25 04:00:48 +13:00
|
|
|
</ButtonGroup>
|
2020-02-19 05:51:28 +13:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|