40 lines
No EOL
1.1 KiB
Svelte
40 lines
No EOL
1.1 KiB
Svelte
<script lang="ts" module>
|
|
export type DropdownAlignment = {
|
|
vertical?: 'top' | 'bottom';
|
|
horizontal?: 'left' | 'right';
|
|
content?: 'start' | 'center' | 'end';
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
type Props = {
|
|
alignment?: DropdownAlignment;
|
|
children: Snippet;
|
|
hover?: boolean;
|
|
open?: boolean;
|
|
title: Snippet;
|
|
};
|
|
|
|
let { alignment, children, hover, open, title }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="dropdown"
|
|
class:dropdown-start={alignment?.content === 'start'}
|
|
class:dropdown-center={alignment?.content === 'center'}
|
|
class:dropdown-end={alignment?.content === 'end'}
|
|
class:dropdown-top={alignment?.vertical === 'top'}
|
|
class:dropdown-bottom={alignment?.vertical === 'bottom'}
|
|
class:dropdown-left={alignment?.horizontal === 'left'}
|
|
class:dropdown-right={alignment?.horizontal === 'right'}
|
|
class:dropdown-hover={hover}
|
|
class:dropdown-open={open}
|
|
>
|
|
<div tabindex="0" role="button" class="btn m-1">{@render title()}</div>
|
|
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
<div tabindex="0" class="dropdown-content z-0">
|
|
{@render children?.()}
|
|
</div>
|
|
</div> |