Heads up! These docs are still a work in progress.

FlexiTarget

A ‘target’ for widgets, or a dropzone. Stores a series of widget instances in a managed grid layout.

FlexiTarget (component)

Props

Name	Type	Description
header	Snippet<[{ target: FlexiTargetController }]>	The header content of the target, above the grid.
children	Snippet	The child content of the target, which should contain inner FlexiWidget definitions.
footer	Snippet<[{ target: FlexiTargetController }]>	The footer content of the target, below the grid.
containerClass	string	The class names to apply to the target's container element.
class	string	The class names to apply to the target's root element.
config	FlexiTargetConfiguration	The configuration object for the target.
key	string	The unique identifier for the target. Used to identify the target when layouts are imported or exported.
controller	FlexiBoardController (bindable)	The controller for the board.
onfirstcreate	(controller: FlexiBoardController) => void	A callback that fires when the board's controller is first created.

FlexiTargetController

FlexiTargetController uses a controller to manage its state and behaviour. You can access the controller via binding to the controller prop or using the onfirstcreate callback.

The FlexiTargetController allows you to manage the target directly and carry out actions.

Properties

Name	Type	Description
widgets	SvelteSet<FlexiWidgetController>	The widgets currently in this target.
config	FlexiTargetConfiguration	The reactive configuration of the target.
providerWidgetDefaults	FlexiWidgetDefaults \| undefined	The reactive default widget configuration passed through from the provider, if it exists.
prepared	boolean	Whether the target is prepared and ready to render widgets.

Methods

Name	Type	Description
createWidget	(config: FlexiWidgetConfiguration) => FlexiWidgetController \| undefined	Creates a new widget under this target.
deleteWidget	(widget: FlexiWidgetController) => boolean	Deletes the given widget from this target, if it exists.
restorePreGrabSnapshot	() => void	Restores the target to its pre-grab state. This is not intended for external use.
forgetPreGrabSnapshot	() => void	Forgets the pre-grab state of the target. This is not intended for external use.
dropWidget	(widget: FlexiWidgetController) => boolean	Attempts to drop a widget into this target.
grabWidget	(params: WidgetGrabbedParams) => WidgetAction \| null	Grabs a widget.
startResizeWidget	(params: WidgetStartResizeParams) => WidgetAction \| null	Starts resizing a widget.

FlexiTargetConfiguration

The configuration object for the FlexiTarget component, which supports reactivity where specified.

To use reactivity, ensure that the config prop has a reactive source (proxy).

Properties

Name	Type	Description
rowSizing	string \| ({ target, grid }: { target: FlexiTargetController, grid: FlexiGrid }) => string	Allows the specifying of the value inside the `repeat()` function of the `grid-template-rows` CSS property for the target. Defaults to 'minmax(1rem, auto)'. Reactive.
columnSizing	string \| ({ target, grid }: { target: FlexiTargetController, grid: FlexiGrid }) => string	Allows the specifying of the value inside the `repeat()` function of the `grid-template-columns` CSS property for the target. Defaults to 'minmax(0, 1fr)'. Reactive.
baseColumns	number	The base number of columns for the target's grid. Defaults to 1. Not reactive.
baseRows	number	The base number of rows for the target's grid. Defaults to 1. Not reactive.
layout	TargetLayout	The layout algorithm and parameters to use for the target grid. Reactive.
widgetDefaults	FlexiWidgetDefaults	The default configuration for widgets. Reactive.

FlexiWidgetDefaults

The default configuration for widgets.

Properties

Name	Type	Description
draggable	boolean	Whether the widget is draggable. Defaults to true. Reactive.
resizability	'none' \| 'horizontal' \| 'vertical' \| 'both'	The resizability of the widget. Defaults to 'both'. Reactive.
width	number	The width of the widget in units. Defaults to 1. Not reactive.
height	number	The height of the widget in units. Defaults to 1. Not reactive.
snippet	Snippet	The snippet that is rendered by this widget. Reactive.
component	Component	The component that is rendered by this widget. Reactive.
componentProps	Record<string, any>	The props applied to the component rendered, if it has one. Reactive.
className	ClassValue	The class names to apply to this widget. Reactive.