charton

Appearance

charton API

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

Interface: FormDialogOptions ​

Defined in: ui/src/form-dialog.ts:27

Options for createFormDialog: the values to edit, change and action callbacks, custom input renderers, the first section, and modal or panel presentation.

Properties ​

closeLabel? ​

optional closeLabel?: string

Defined in: ui/src/form-dialog.ts:59

Accessible name of the close button. Default dialogClose in the localization's language.

compactWidth? ​

optional compactWidth?: number

Defined in: ui/src/form-dialog.ts:48

Below this width of the host in px, tabs become a select and the sidebar a list. Default 600.

headerControls? ​

optional headerControls?: readonly HTMLElement[]

Defined in: ui/src/form-dialog.ts:57

Extra controls in the header, before the actions with align: 'header' and the close button.

inputs? ​

optional inputs?: Record<string, InputRenderer<never, never>>

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

Renderers for this dialog only, by kind; they win over registerInput.

localization? ​

optional localization?: Localizer

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

The language of the dialog's own text (Ok, Cancel, validation messages and the like), usually chart.localization. Default English.

presentation? ​

optional presentation?: "modal" | "panel"

Defined in: ui/src/form-dialog.ts:55

modal (default): centred over a backdrop that blocks the host. panel: docked to the host's right edge, a bottom sheet in compact mode, with no backdrop or focus trap, so the chart stays usable while the preview updates. Escape and the close button cancel either way.

section? ​

optional section?: string

Defined in: ui/src/form-dialog.ts:46

Section shown first; default the first visible one.

values? ​

optional values?: FormValues

Defined in: ui/src/form-dialog.ts:29

Values to edit; inputs without one start from their default.

Methods ​

onAction()? ​

optional onAction(id, values, dialog): boolean | void

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

Called when an action runs: submit only when the form is valid, cancel after the values were restored. Return false from a submit to keep the dialog open.

Parameters ​

id ​

string

values ​

FormValues

dialog ​

FormDialog

Returns ​

boolean | void

onChange()? ​

optional onChange(values): void

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

Live preview: called with all values after every edit that leaves the form valid, and with the opening values when the dialog is cancelled.

Parameters ​

values ​

FormValues

Returns ​

void

onFieldChange()? ​

optional onFieldChange(id, value, values): void

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

Called after each edit that leaves that input's own value valid.

Parameters ​

id ​

string

value ​

unknown

values ​

FormValues

Returns ​

void