You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
import * as FloatPanel from '$soma/components/float-panel';
|
|
|
|
|
|
import Close from './float-panel-close.svelte';
|
|
|
|
|
|
import Controls from './float-panel-controls.svelte';
|
|
|
|
|
|
import type { FloatPanelHeaderProps } from './types';
|
|
|
|
|
|
|
|
|
|
|
|
let { closable = true, children, ...rest }: FloatPanelHeaderProps = $props();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
`closable` (default true) is the zero-config convenience: it appends a
|
|
|
|
|
|
right-aligned Controls group with a Close button. To compose your OWN header
|
|
|
|
|
|
buttons (custom actions + close, in any order), set `closable={false}` and
|
|
|
|
|
|
render a `<FloatPanel.Controls>` with `<FloatPanel.Action>` / `<FloatPanel.Close>`.
|
|
|
|
|
|
-->
|
|
|
|
|
|
<FloatPanel.Header {...rest}>
|
|
|
|
|
|
{@render children?.()}
|
|
|
|
|
|
{#if closable}
|
|
|
|
|
|
<Controls>
|
|
|
|
|
|
<Close>×</Close>
|
|
|
|
|
|
</Controls>
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
</FloatPanel.Header>
|
