1
0
Fork 0
mirror of synced 2024-09-13 07:53:31 +12:00
budibase/packages/bbui/src/Drawer/Drawer.svelte
2021-03-31 10:59:07 +01:00

88 lines
1.6 KiB
Svelte

<script>
import { slide } from "svelte/transition"
import Portal from "svelte-portal"
import clickOutside from "../Actions/click_outside"
export let title
let visible = false
export function show() {
if (visible) {
return
}
visible = true
}
export function hide() {
if (!visible) {
return
}
visible = false
}
function handleKey(e) {
if (visible && e.key === "Escape") {
hide()
}
}
</script>
<svelte:window on:keydown={handleKey} />
{#if visible}
<Portal>
<section class="drawer" transition:slide>
<header>
<div class="text">
<div class="title">{title}</div>
<slot name="description" />
</div>
<div class="controls">
<slot name="buttons" />
<i class="ri-close-fill close" on:click={hide} />
</div>
</header>
<slot name="body" />
</section>
</Portal>
{/if}
<style>
.drawer {
position: absolute;
bottom: 0;
left: 260px;
width: calc(100% - 520px);
background: var(--background);
border: var(--border-light);
z-index: 2;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border-light);
padding: var(--spacing-m);
}
.controls {
display: grid;
grid-auto-flow: column;
grid-gap: var(--spacing-m);
align-items: center;
}
.close {
font-size: var(--font-size-xl);
cursor: pointer;
}
.title {
font-weight: bold;
margin-right: var(--spacing-m);
}
.text {
display: flex;
}
</style>