ui/popover.svelte.ts

Popover state class with trigger, content, and container attachments.

Popover manages visibility, positioning, outside-click dismissal, and ARIA attributes. The trigger, content, and container attachments wire up the DOM via Svelte's {@attach} directive.

For the common button + popover pattern, see PopoverButton.

@example

<script lang="ts"> import {Popover} from '@fuzdev/fuz_app/ui/popover.svelte.js'; const popover = new Popover(); </script> <div class="position:relative" {@attach popover.container}> <button type="button" {@attach popover.trigger({position: 'bottom', align: 'center'})}> toggle </button> {#if popover.visible} <div {@attach popover.content({position: 'bottom', align: 'center'})}> <button type="button" onclick={() => popover.hide()}>close</button> </div> {/if} </div>

@example

// programmatic control with callbacks const popover = new Popover({ position: 'right', align: 'start', offset: '8px', disable_outside_click: true, onshow: () => console.log('opened'), onhide: () => console.log('closed'), }); popover.show(); popover.toggle(); popover.hide();

Declarations
#

5 declarations

view source

Popover
#

ui/popover.svelte.ts view source

Class that manages state and provides actions for popovers.

visible

Whether the popover is currently visible.

position

Position of the popover relative to its trigger.

type Position

align

Alignment along the position edge.

type Alignment

offset

Distance from the position.

disable_outside_click

Whether to disable closing when clicking outside.

popover_class

Custom class for the popover.

constructor

type new (params?: PopoverParameters | undefined): Popover

params?
type PopoverParameters | undefined
optional

update

Updates the popover configuration.

type (params: PopoverParameters): void

params
type PopoverParameters
returns void

show

Shows the popover.

type (): void

returns void

hide

Hides the popover.

type (): void

returns void

toggle

Toggles the popover visibility.

type (visible?: boolean): void

visible
type boolean
default !this.visible
returns void

container

Attachment for the container element.

type Attachment<HTMLElement>

trigger

Attachment factory for the trigger element that shows/hides the popover.

content

Attachment factory for the popover content element.

PopoverContentParameters
#

PopoverParameters
#

ui/popover.svelte.ts view source

PopoverParameters

Parameters for configuring the popover.

position

Position of the popover relative to its trigger.

type Position

align

Alignment along the position edge.

type Alignment

offset

Distance from the position.

type string

disable_outside_click

Whether to disable closing when clicking outside.

type boolean

popover_class

Custom class for the popover content.

type string

onshow

Optional callback when popover is shown.

type () => void

onhide

Optional callback when popover is hidden.

type () => void

PopoverTriggerParameters
#

TransitionFunction
#

Depends on
#

Imported by
#