36 lines
983 B
Svelte
36 lines
983 B
Svelte
<script lang="ts">
|
|
import Handle from '$lib/components/dashboard/editor/Handle.svelte';
|
|
import { editorStore } from '$lib/stores/editor';
|
|
|
|
export let preview: boolean = false;
|
|
export let handle: boolean = false;
|
|
export let fit: boolean = false;
|
|
export let full: boolean = false;
|
|
export let invisible: boolean = false;
|
|
|
|
$: hasHandle = handle ? $editorStore.editMode : false;
|
|
</script>
|
|
|
|
<div
|
|
class="panel flex-shrink-0 flex"
|
|
class:w-fit={fit}
|
|
class:w-full={full}
|
|
class:visible={!invisible}
|
|
class:widget-preview={preview}>
|
|
{#if hasHandle}
|
|
<Handle pad={true} />
|
|
{/if}
|
|
<div class="panel-content w-full h-fit min-w-0" class:!pl-0={hasHandle} class:-ml-6={hasHandle && invisible}>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.panel.visible {
|
|
@apply bg-widget-fill rounded-3xl border border-widget-stroke backdrop-blur-xl transition-colors text-text-header transform-gpu;
|
|
}
|
|
|
|
.panel.visible .panel-content {
|
|
@apply p-6;
|
|
}
|
|
</style>
|