charton

Appearance

charton API

charton API / @chart-on/ui / index / PickerSchema

Interface: PickerSchema<T> ​

Defined in: ui/src/picker-dialog.ts:32

What a picker dialog lists and how: its title, item source, categories, single or multiple selection, row actions, paging and search settings.

Type Parameters ​

T ​

T extends PickerItem

Properties ​

allLabel? ​

optional allLabel?: string | false

Defined in: ui/src/picker-dialog.ts:38

Label of the first category, which lists everything; false for none. Default paletteAll ("All").

categories? ​

optional categories?: PickerCategory[]

Defined in: ui/src/picker-dialog.ts:36

Shown as a list beside the results (a select in compact mode), or as chips under the search box with layout: 'palette'.

className? ​

optional className?: string

Defined in: ui/src/picker-dialog.ts:64

Extra classes on the dialog panel.

closeLabel? ​

optional closeLabel?: string

Defined in: ui/src/picker-dialog.ts:72

Accessible name of the close button. Default dialogClose ("Close").

closeOnSelect? ​

optional closeOnSelect?: boolean

Defined in: ui/src/picker-dialog.ts:44

Single select: close after a pick. Default true; false keeps it open to add several in a row.

compactWidth? ​

optional compactWidth?: number

Defined in: ui/src/picker-dialog.ts:62

Below this width of the host in px, the category list becomes a select. Default 600.

debounce? ​

optional debounce?: number

Defined in: ui/src/picker-dialog.ts:49

Wait this long after the last keystroke before searching, in ms. Default 0 for items, 200 for fetch.

emptyText? ​

optional emptyText?: string

Defined in: ui/src/picker-dialog.ts:54

Message when there is nothing to list and no query.

layout? ​

optional layout?: "dialog" | "palette"

Defined in: ui/src/picker-dialog.ts:70

'palette': the search box first, with no title bar or close button (Escape or a press outside closes it), and the categories as a row of chips under it. Default 'dialog'.

listOnQuery? ​

optional listOnQuery?: boolean

Defined in: ui/src/picker-dialog.ts:60

List nothing until a query is typed or a category picked: until then the dialog shows its search box with the categories as a row of chips under it. Default false.

multiple? ​

optional multiple?: boolean

Defined in: ui/src/picker-dialog.ts:40

Pick several items, confirmed with Done. Default single.

pageSize? ​

optional pageSize?: number

Defined in: ui/src/picker-dialog.ts:47

Items per page. Default 50.

placeholder? ​

optional placeholder?: string

Defined in: ui/src/picker-dialog.ts:50

rowActions? ​

optional rowActions?: PickerRowAction<T>[]

Defined in: ui/src/picker-dialog.ts:45

searchLabel? ​

optional searchLabel?: string

Defined in: ui/src/picker-dialog.ts:52

Accessible name of the search box. Default dialogSearch ("Search").

selected? ​

optional selected?: readonly string[]

Defined in: ui/src/picker-dialog.ts:42

Ids picked when the dialog opens (multiple). With a fetch source, Done reports only those that were listed.

source ​

source: PickerSource<T>

Defined in: ui/src/picker-dialog.ts:34

title ​

title: string

Defined in: ui/src/picker-dialog.ts:33

Methods ​

rowEnd()? ​

optional rowEnd(item): Node | null

Defined in: ui/src/picker-dialog.ts:74

Extra content at the end of an item's row, inside the option, e.g. a shortcut.

Parameters ​

item ​

T

Returns ​

Node | null