contextmenu_state.svelte.ts

view source

Declarations
#

17 declarations

contextmenu_attachment
#

contextmenu_state.svelte.ts view source

(params: ContextmenuParams | ContextmenuParams[] | null | undefined): Attachment<HTMLElement | SVGElement> import {contextmenu_attachment} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Creates an attachment that sets up contextmenu behavior on an element.

params

contextmenu parameters or nullish to disable

type ContextmenuParams | ContextmenuParams[] | null | undefined

returns

Attachment<HTMLElement | SVGElement>

contextmenu_check_global_root
#

contextmenu_state.svelte.ts view source

(get_scoped: () => boolean): void import {contextmenu_check_global_root} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Registers a contextmenu root and warns if multiple non-scoped roots are detected. Only active in development mode - DEV is a build-time constant, so production bundles eliminate the check. Automatically handles cleanup on unmount.

get_scoped

getter function that returns the current scoped value

type () => boolean

returns

void

contextmenu_context
#

contextmenu_state.svelte.ts view source

{ get: (error_message?: string | undefined) => () => ContextmenuState; get_maybe: () => (() => ContextmenuState) | undefined; set: (value: () => ContextmenuState) => () => ContextmenuState; } import {contextmenu_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

contextmenu_dimensions_context
#

contextmenu_state.svelte.ts view source

{ get: () => Dimensions; set: (value?: Dimensions | undefined) => Dimensions; } import {contextmenu_dimensions_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

contextmenu_open
#

contextmenu_state.svelte.ts view source

(target: HTMLElement | SVGElement, x: number, y: number, contextmenu: ContextmenuState, options?: ContextmenuOpenOptions | undefined): boolean import {contextmenu_open} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Opens the contextmenu, if appropriate, querying the menu items from the DOM starting at the event target.

target

the leaf element from which to open the contextmenu

type HTMLElement | SVGElement

x

the client (viewport) X coordinate at which to open the contextmenu, typically the mouse clientX - the menu positions with fixed

type number

y

the client (viewport) Y coordinate at which to open the contextmenu, typically the mouse clientY - the menu positions with fixed

type number

contextmenu

the contextmenu state

type ContextmenuState

options?

optional configuration for filtering entries and haptic feedback

type ContextmenuOpenOptions | undefined
optional

returns

boolean

a boolean indicating if the menu was opened or not

contextmenu_submenu_context
#

contextmenu_state.svelte.ts view source

{ get: (error_message?: string | undefined) => SubmenuState; get_maybe: () => SubmenuState | undefined; set: (value: SubmenuState) => SubmenuState; } import {contextmenu_submenu_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

ContextmenuActivateResult
#

ContextmenuItemsState
#

contextmenu_state.svelte.ts view source

import {ContextmenuItemsState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Shared items state for SubmenuState and RootMenuState.

The source of truth is a plain non-reactive array because items register and unregister from component lifecycles that can interleave within a single batch - effect teardowns can observe stale signal values mid-batch, so read-copy-write against the reactive array can lose concurrent registrations (e.g. reopening the menu while it's open). Every mutation publishes an immutable snapshot, preserving the reassignment (not mutation) contract for readers.

add_item

Appends item, publishing a new immutable items.

type (item: ItemState): void

item

type ItemState
returns void

remove_item

Removes item if present, publishing a new immutable items. Safe to call from effect teardown - it reads only the non-reactive source array.

type (item: ItemState): void

item

type ItemState
returns void

items

type readonly ItemState[]

gettersetter

ContextmenuOpenOptions
#

contextmenu_state.svelte.ts view source

ContextmenuOpenOptions import type {ContextmenuOpenOptions} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

link_enabled?

type boolean

text_enabled?

type boolean

separator_enabled?

type boolean

vibrate?

type boolean

ContextmenuParams
#

ContextmenuRun
#

contextmenu_state.svelte.ts view source

ContextmenuRun import type {ContextmenuRun} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

(call)

type (): ContextmenuActivateResult | Promise<ContextmenuActivateResult>

returns ContextmenuActivateResult | Promise<ContextmenuActivateResult>

ContextmenuState
#

contextmenu_state.svelte.ts view source

import {ContextmenuState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Manages contextmenu state. See usage with ContextmenuRoot.svelte and Contextmenu.svelte.

see also

layout

type Dimensions

has_custom_layout

If an initial layout is provided, control is deferred externally. Otherwise the layout syncs to the page dimensions.

type boolean

readonly

opened

type boolean

$state.raw

x

type number

$state.raw

y

type number

$state.raw

params

type ReadonlyArray<ContextmenuParams>

$state.raw

error

type string | undefined

$state.raw

target

The element the menu was opened from, while opened, else undefined. Resolves the popover host when the menu opens inside a modal <dialog> - see contextmenu_resolve_popover_host. Deliberately not reactive - read it in event handlers and attachments, not in templates.

type HTMLElement | SVGElement | undefined

root_menu

type RootMenuState

readonly

selections

type ReadonlyArray<ItemState>

$state.raw

can_collapse

type boolean

$derived

can_expand

type boolean

$derived.by

can_select_sibling

Whether select_next and select_previous can move the selection - the selected menu has more than one item.

type boolean

$derived.by

can_activate

type boolean

$derived.by

constructor

type new (options?: ContextmenuStateOptions): ContextmenuState

options

type ContextmenuStateOptions
default EMPTY_OBJECT

open

type (params: ContextmenuParams[], x: number, y: number, target?: HTMLElement | SVGElement | undefined): void

params

type ContextmenuParams[]

x

type number

y

type number

target?

type HTMLElement | SVGElement | undefined
optional
returns void

close

type (): void

returns void

reset_items

type (items: readonly ItemState[]): void

items

type readonly ItemState[]
returns void

activate

Activates item - expanding submenus, running entries.

type (item: ItemState): boolean | Promise<ContextmenuActivateResult>

item

type ItemState
returns boolean | Promise<ContextmenuActivateResult>

for async runs, the activation promise; for sync runs, false when the activation didn't run (disabled) or failed (a throw or {ok: false}), else true

activate_selected

Activates the selected item, or if none is selected, selects the first. Returns false without activating when the selected item has unregistered out from under the selection (e.g. its component unmounted).

type (): boolean | void | Promise<ContextmenuActivateResult>

returns boolean | void | Promise<ContextmenuActivateResult>

select

Selects item and its ancestor menus, deselecting everything else.

type (item: ItemState): void

item

type ItemState
returns void

collapse_selected

type (): void

returns void

expand_selected

type (): void

returns void

select_next

type (): void

returns void

select_previous

type (): void

returns void

select_first

type (): void

returns void

select_last

type (): void

returns void

add_entry

Used by ContextmenuEntry.svelte and custom entry components.

type (run: () => ContextmenuRun, disabled?: () => boolean): EntryState

run

type () => ContextmenuRun

disabled

type () => boolean
default () => false
returns EntryState

add_submenu

type (): SubmenuState

returns SubmenuState

ContextmenuStateOptions
#

EntryState
#

contextmenu_state.svelte.ts view source

import {EntryState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

is_menu

type false

readonly

menu

type SubmenuState | RootMenuState

readonly

run

type () => ContextmenuRun

readonly

disabled

type () => boolean

readonly

selected

type boolean

$state.raw

pending

type boolean

$state.raw

error_message

type string | null

$state.raw

promise

type Promise<ContextmenuActivateResult> | null

$state.raw

constructor

type new (menu: SubmenuState | RootMenuState, run: () => ContextmenuRun, disabled?: () => boolean): EntryState

menu

type SubmenuState | RootMenuState

run

type () => ContextmenuRun

disabled

type () => boolean
default () => false

ItemState
#

RootMenuState
#

SubmenuState
#

Depends on
#

Imported by
#