budibase/packages/materialdesign-components/src/Dialog/Dialog.svelte

45 lines
1.0 KiB
Svelte

<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
import { MDCDialog } from "@material/dialog"
import ClassBuilder from "../ClassBuilder.js"
let dialog
let dialogSurface
let instance
export let _bb
// TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side
export let open = true
onMount(() => {
instance = new MDCDialog(dialog)
return () => {
instance && instance.destroy()
}
})
$: dialogSurface && _bb.attachChildren(dialogSurface)
$: {
if (open) {
instance && instance.open()
} else {
instance && instance.close()
}
}
</script>
<div bind:this={dialog} class="mdc-dialog">
<div class="mdc-dialog__container">
<div
bind:this={dialogSurface}
class="mdc-dialog__surface"
role="alertdialog"
aria-modal="true"
aria-labelledby="my-dialog-title"
aria-describedby="my-dialog-content" />
</div>
<div class="mdc-dialog__scrim" on:click={() => (open = false)} />
</div>