60 lines
1.2 KiB
Svelte
60 lines
1.2 KiB
Svelte
<script>
|
|
import UIkit from "uikit"
|
|
import ActionButton from "../common/ActionButton.svelte"
|
|
|
|
export let isOpen = false
|
|
export let onClosed
|
|
export let id = ""
|
|
export let title
|
|
|
|
let ukModal
|
|
let listenerAdded = false
|
|
|
|
$: {
|
|
if (ukModal && !listenerAdded) {
|
|
listenerAdded = true
|
|
ukModal.addEventListener("hidden", onClosed)
|
|
}
|
|
|
|
if (ukModal) {
|
|
if (isOpen) {
|
|
UIkit.modal(ukModal).show()
|
|
} else {
|
|
UIkit.modal(ukModal).hide()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div bind:this={ukModal} uk-modal {id}>
|
|
{#if isOpen}
|
|
<div class="uk-modal-dialog" uk-overflow-auto>
|
|
{#if title}
|
|
<div class="uk-modal-header">
|
|
<h4 class="budibase__title--4">{title}</h4>
|
|
</div>
|
|
{/if}
|
|
<div class="uk-modal-body">
|
|
{#if onClosed}
|
|
<button class="uk-modal-close-default" type="button" uk-close />
|
|
{/if}
|
|
<slot />
|
|
</div>
|
|
<div class="uk-modal-footer">
|
|
<slot name="footer" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.uk-modal-dialog {
|
|
border-radius: 0.3rem;
|
|
width: 520px;
|
|
height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 40px;
|
|
}
|
|
</style>
|