fix dropdown trigger props, add onClose alias to sidebar
This commit is contained in:
parent
fcc0a884f5
commit
66b03c9108
2 changed files with 16 additions and 5 deletions
|
|
@ -2,8 +2,12 @@
|
||||||
import { DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
import { DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
||||||
import type { Snippet } from 'svelte'
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface TriggerProps {
|
||||||
|
props: Record<string, unknown>
|
||||||
|
}
|
||||||
|
|
||||||
interface DropdownMenuProps {
|
interface DropdownMenuProps {
|
||||||
trigger: Snippet
|
trigger: Snippet<[TriggerProps]>
|
||||||
menu: Snippet
|
menu: Snippet
|
||||||
open?: boolean
|
open?: boolean
|
||||||
}
|
}
|
||||||
|
|
@ -13,7 +17,9 @@
|
||||||
|
|
||||||
<DropdownMenuBase.Root bind:open>
|
<DropdownMenuBase.Root bind:open>
|
||||||
<DropdownMenuBase.Trigger>
|
<DropdownMenuBase.Trigger>
|
||||||
{@render trigger()}
|
{#snippet child({ props })}
|
||||||
|
{@render trigger({ props })}
|
||||||
|
{/snippet}
|
||||||
</DropdownMenuBase.Trigger>
|
</DropdownMenuBase.Trigger>
|
||||||
|
|
||||||
<DropdownMenuBase.Portal>
|
<DropdownMenuBase.Portal>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,9 @@
|
||||||
open?: boolean
|
open?: boolean
|
||||||
/** Title for the sidebar header */
|
/** Title for the sidebar header */
|
||||||
title?: string
|
title?: string
|
||||||
/** Callback when close is requested */
|
/** Callback when close is requested (camelCase preferred) */
|
||||||
|
onClose?: () => void
|
||||||
|
/** Callback when close is requested (lowercase, deprecated - use onClose) */
|
||||||
onclose?: () => void
|
onclose?: () => void
|
||||||
/** Content to render in the sidebar */
|
/** Content to render in the sidebar */
|
||||||
children?: Snippet
|
children?: Snippet
|
||||||
|
|
@ -20,12 +22,15 @@
|
||||||
scrollable?: boolean
|
scrollable?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const { open = false, title, onclose, children, headerActions, scrollable = true }: Props = $props()
|
const { open = false, title, onClose, onclose, children, headerActions, scrollable = true }: Props = $props()
|
||||||
|
|
||||||
|
// Support both onClose (camelCase) and onclose (lowercase) for backward compatibility
|
||||||
|
const handleClose = $derived(onClose ?? onclose)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<aside class="sidebar" class:open style:--sidebar-width={SIDEBAR_WIDTH}>
|
<aside class="sidebar" class:open style:--sidebar-width={SIDEBAR_WIDTH}>
|
||||||
{#if title}
|
{#if title}
|
||||||
<SidebarHeader {title} {onclose} actions={headerActions} />
|
<SidebarHeader {title} onclose={handleClose} actions={headerActions} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="sidebar-content" class:scrollable>
|
<div class="sidebar-content" class:scrollable>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue