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.
columns	number	The number of columns currently being used in the target grid.
rows	number	The number of rows currently being used in the target grid.

Methods

Name	Type	Description
createWidget	(config: FlexiWidgetConfiguration) => FlexiWidgetController \| undefined	Creates a new widget under this target.

More methods will be added in a future version.

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.
layout	TargetLayout	The layout algorithm and parameters to use for the target grid.
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.
grabTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a grab event on the widget. E.g. a long press.
resizeTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a resize event on the widget. E.g. a long press.
transitionConfig	FlexiWidgetTransitionConfiguration	Gets the transition configuration for this widget.