diff --git a/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte b/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte index 91dd003381..68e4e9b7cb 100644 --- a/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte +++ b/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte @@ -17,6 +17,8 @@ defaultOpen?: boolean; /** Controlled open state, for a caller that binds it. */ open?: boolean; + /** Called on every toggle, for a caller that persists the state. */ + ontoggle?: ((open: boolean) => void) | null; /** Extra classes for the chevron, to line it up with a row's own control. */ chevronClass?: string; /** Hide the chevron while expanded, until the trigger is hovered. */ @@ -32,6 +34,7 @@ children, defaultOpen = true, inMenu = false, + ontoggle = null, open = $bindable(defaultOpen), revealChevronOnHover = false, trigger, @@ -39,6 +42,11 @@ triggerPosition = 'top', triggerStyle = '' }: Props = $props(); + + function toggle(): void { + open = !open; + ontoggle?.(open); + } {#snippet chevron()} @@ -65,13 +73,7 @@ > {#snippet child({ props })} -