FlexiTarget
A target, or dropzone, for widgets. It holds widget instances in a managed grid layout.
FlexiTarget (component)
| Name | Description |
|---|---|
controller Optional Bindable FlexiTargetController | undefined | The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
onfirstcreate Optional ((instance: FlexiTargetController) => void) | undefined | Fires when the component's controller is first created. |
header Optional Snippet<[{ target: FlexiTargetController }]> | The header content of the target, above the grid. |
children Optional Snippet | The child content of the target, which should contain inner FlexiWidget definitions. |
footer Optional Snippet<[{ target: FlexiTargetController }]> | The footer content of the target, below the grid. |
containerClass Optional string | The class names to apply to the target's container element. |
class Optional string | The class names to apply to the target's grid element. |
config Optional FlexiTargetPartialConfiguration<ClassValue> | The configuration object for the target. |
key Optional string | The unique identifier for the target. Used to identify the target when layouts are imported or exported. |
Each target is identified by its key, and the header and footer snippets let you render content around the target’s grid, receiving the target controller as a parameter.
<script lang="ts">
import { FlexiTarget, FlexiWidget } from '@flexiboards/svelte';
</script>
<FlexiTarget key="main" containerClass="rounded-xl border" class="gap-2">
{#snippet header({ target })}
<h5>Main ({target.widgets.size})</h5>
{/snippet}
<FlexiWidget>A widget</FlexiWidget>
</FlexiTarget>FlexiTargetController
You can access the controller via binding to the controller prop or using the onfirstcreate callback.
| Name | Description |
|---|---|
key Readonly string | The stable target identifier used in exported layouts and drop callbacks. |
config FlexiTargetConfiguration | The reactive configuration of the target. |
providerWidgetDefaults FlexiWidgetDefaults | The reactive default widget configuration passed through from the provider, if it exists. |
prepared Readonly boolean | Whether the target is prepared and ready to render widgets. |
dropRejected Readonly boolean | Whether a widget is currently being grabbed or resized over this target at a position where it cannot be placed. Use it to signal that the drop will be rejected. |
columns Readonly number | The number of columns currently being used in the target grid. This value is readonly. |
rows Readonly number | The number of rows currently being used in the target grid. This value is readonly. |
widgets Readonly ReactiveSet<FlexiWidgetController> | The widgets currently in this target. |
| Name | Description |
|---|---|
createWidget (config: FlexiWidgetConfiguration) => FlexiWidgetController | undefined | Creates a new widget under this target. |
clear () => void | Deletes every widget in this target. Fires `onWidgetDelete` per widget. |
Call createWidget() to add a widget through the grid’s placement rules, or clear() to remove the target’s widgets.
FlexiTargetConfiguration
FlexiTarget accepts these options through config. Omitted values come from the board’s targetDefaults. See Configuration reactivity for update behavior.
For reactivity, give the config prop a reactive source (a proxy).
| Name | Description |
|---|---|
rowSizing Optional (string | (({ target, grid }: { target: FlexiTargetController; grid: FlexiGrid }) => string)) | The value inside the target's `grid-template-rows` `repeat()` function. |
columnSizing Optional (string | (({ target, grid }: { target: FlexiTargetController; grid: FlexiGrid }) => string)) | The value inside the target's `grid-template-columns` `repeat()` function. |
layout Optional TargetLayout | The layout algorithm and parameters to use for the target grid. |
canDrop Optional ((check: FlexiDropCheck) => boolean) | undefined | See FlexiTargetConfiguration.canDrop. |
widgetDefaults Optional FlexiWidgetDefaults<ClassValue> | undefined | The default configuration for widgets within this target. |
FlexiWidgetDefaults
The default configuration for widgets.
| Name | Description |
|---|---|
draggability Optional 'none' | 'movable' | 'full' | undefined | The draggability of the widget. Default: |
resizability Optional 'none' | 'horizontal' | 'vertical' | 'both' | undefined | The resizability of the widget. Default: |
snippet Optional (Snippet<[{ widget: FlexiWidgetController }]>) | The render function used for this widget's content. |
component Optional (Component) | The component that is rendered by this widget. |
componentProps Optional Record<string, any> | undefined | The props applied to the component rendered, if it has one. |
className Optional (ClassValue | ((widget: FlexiWidgetController) => ClassValue)) | undefined | The class names to apply to this widget. |
transition Optional FlexiWidgetTransitionConfiguration | undefined | The transition configuration for this widget. |
grabTrigger Optional FlexiWidgetTriggerConfiguration | undefined | The configuration for how pointer events should trigger a grab event on the widget. E.g. a long press. |
resizeTrigger Optional FlexiWidgetTriggerConfiguration | undefined | The configuration for how pointer events should trigger a resize event on the widget. E.g. a long press. |
minWidth Optional number | undefined | The minimum width of the widget in units. Defaults to 1, cannot be less than 1. |
minHeight Optional number | undefined | The minimum height of the widget in units. Defaults to 1, cannot be less than 1. |
maxWidth Optional number | undefined | The maximum width of the widget in units. Defaults to Infinity, cannot be less than 1. |
maxHeight Optional number | undefined | The maximum height of the widget in units. Defaults to Infinity, cannot be less than 1. |
FlowTargetLayout
The layout object for a flow grid. Set type: 'flow'.
| Name | Description |
|---|---|
type Required 'flow' | |
placementStrategy Required 'append' | 'prepend' | Specifies how widgets should be added when no coordinates are specified. - "append" will add a widget after the last widget in the grid. - "prepend" will add a widget before the first widget in the grid. |
disallowInsert Optional boolean | When set to true, the grid will ignore coordinates provided when adding widgets and instead default to the placement strategy's behaviour. |
flowAxis Required 'row' | 'column' | The axis that widgets are placed along. - When set to "row", widgets are added along the columns of a row before wrapping to the next row. - When set to "column", widgets are added along the rows of a column before wrapping to the next column. |
maxFlowAxis Optional number | The maximum number of rows or columns that can be used depending on what the flow axis is set to. - When flowAxis is set to "row", the grid will not allow more rows than this value. - When flowAxis is set to "column", the grid will not allow more columns than this value. |
rows Optional number | The number of rows that the grid should have. |
columns Optional number | The number of columns that the grid should have. |
FreeFormTargetLayout
The layout object for a free-form grid. Set type: 'free'.
| Name | Description |
|---|---|
type Required 'free' | |
minRows Optional number | The minimum number of rows the grid should have. The grid never shrinks below this. Default: |
minColumns Optional number | The minimum number of columns the grid should have. The grid never shrinks below this. Default: |
maxRows Optional number | The maximum number of rows the grid may expand to. Set equal to `minRows` to fix the row count. Default: |
maxColumns Optional number | The maximum number of columns the grid may expand to, capped at 32. Set equal to `minColumns` to fix the column count. Default: |
collapsibility Optional 'none' | 'leading' | 'trailing' | 'endings' | 'any' | Whether the grid collapses to remove empty rows and columns, and where. - "none" never collapses. - "leading" collapses empty rows/columns at the start of the grid. - "trailing" collapses empty rows/columns at the end of the grid. - "endings" collapses at either end. - "any" collapses any empty row/column. Default: |
packing Optional 'none' | 'horizontal' | 'vertical' | Whether widgets are packed towards an edge after each change, closing gaps. - "none" leaves widgets where they were placed. - "horizontal" slides widgets left as far as they can go, left-most first. - "vertical" slides widgets up as far as they can go, top-most first. Default: |
Accessibility
The target renders its grid as role="grid" with aria-colcount and aria-rowcount, so assistive technology can report the board’s size. Keyboard interaction happens on widgets and handles, not on the target; see Accessibility for the key map.