# FlexiTarget

> A target, or dropzone, for widgets. It holds widget instances in a managed grid layout.

Source: https://www.flexiboards.dev/docs/components/target

Framework: Svelte

## FlexiTarget (component)

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `FlexiTargetController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: FlexiTargetController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `header` | `Snippet<[{ target: FlexiTargetController }]>` | Optional. The header content of the target, above the grid. |
| `children` | `Snippet` | Optional. The child content of the target, which should contain inner FlexiWidget definitions. |
| `footer` | `Snippet<[{ target: FlexiTargetController }]>` | Optional. The footer content of the target, below the grid. |
| `containerClass` | `string` | Optional. The class names to apply to the target's container element. |
| `class` | `string` | Optional. The class names to apply to the target's grid element. |
| `config` | `FlexiTargetPartialConfiguration<ClassValue>` | Optional. The configuration object for the target. |
| `key` | `string` | Optional. 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.

```svelte
<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.

**Properties**

| Name | Type | 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. |

**Methods**

| Name | Type | 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](https://www.flexiboards.dev/docs/configuration#reactivity) for update behavior.

For reactivity, give the `config` prop a reactive source (a proxy).

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `rowSizing` | `(string \| (({ target, grid }: { target: FlexiTargetController; grid: FlexiGrid }) => string))` | Optional. The value inside the target's `grid-template-rows` `repeat()` function. |
| `columnSizing` | `(string \| (({ target, grid }: { target: FlexiTargetController; grid: FlexiGrid }) => string))` | Optional. The value inside the target's `grid-template-columns` `repeat()` function. |
| `layout` | `TargetLayout` | Optional. The layout algorithm and parameters to use for the target grid. |
| `canDrop` | `((check: FlexiDropCheck) => boolean) \| undefined` | Optional. See FlexiTargetConfiguration.canDrop. |
| `widgetDefaults` | `FlexiWidgetDefaults<ClassValue> \| undefined` | Optional. The default configuration for widgets within this target. |

### FlexiWidgetDefaults

The default configuration for widgets.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `draggability` | `'none' \| 'movable' \| 'full' \| undefined` | Optional. The draggability of the widget. Default: `full`. |
| `resizability` | `'none' \| 'horizontal' \| 'vertical' \| 'both' \| undefined` | Optional. The resizability of the widget. Default: `none`. |
| `snippet` | `(Snippet<[{ widget: FlexiWidgetController }]>)` | Optional. The render function used for this widget's content. |
| `component` | `(Component)` | Optional. The component that is rendered by this widget. |
| `componentProps` | `Record<string, any> \| undefined` | Optional. The props applied to the component rendered, if it has one. |
| `className` | `(ClassValue \| ((widget: FlexiWidgetController) => ClassValue)) \| undefined` | Optional. The class names to apply to this widget. |
| `transition` | `FlexiWidgetTransitionConfiguration \| undefined` | Optional. The transition configuration for this widget. |
| `grabTrigger` | `FlexiWidgetTriggerConfiguration \| undefined` | Optional. The configuration for how pointer events should trigger a grab event on the widget. E.g. a long press. |
| `resizeTrigger` | `FlexiWidgetTriggerConfiguration \| undefined` | Optional. The configuration for how pointer events should trigger a resize event on the widget. E.g. a long press. |
| `minWidth` | `number \| undefined` | Optional. The minimum width of the widget in units. Defaults to 1, cannot be less than 1. |
| `minHeight` | `number \| undefined` | Optional. The minimum height of the widget in units. Defaults to 1, cannot be less than 1. |
| `maxWidth` | `number \| undefined` | Optional. The maximum width of the widget in units. Defaults to Infinity, cannot be less than 1. |
| `maxHeight` | `number \| undefined` | Optional. The maximum height of the widget in units. Defaults to Infinity, cannot be less than 1. |

### FlowTargetLayout

The `layout` object for a [flow grid](https://www.flexiboards.dev/docs/flow-grids). Set `type: 'flow'`.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `type` | `'flow'` | Required. |
| `placementStrategy` | `'append' \| 'prepend'` | Required. 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` | `boolean` | Optional. When set to true, the grid will ignore coordinates provided when adding widgets and instead default to the placement strategy's behaviour. |
| `flowAxis` | `'row' \| 'column'` | Required. 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` | `number` | Optional. 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` | `number` | Optional. The number of rows that the grid should have. |
| `columns` | `number` | Optional. The number of columns that the grid should have. |

### FreeFormTargetLayout

The `layout` object for a [free-form grid](https://www.flexiboards.dev/docs/free-form-grids). Set `type: 'free'`.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `type` | `'free'` | Required. |
| `minRows` | `number` | Optional. The minimum number of rows the grid should have. The grid never shrinks below this. Default: `1`. |
| `minColumns` | `number` | Optional. The minimum number of columns the grid should have. The grid never shrinks below this. Default: `1`. |
| `maxRows` | `number` | Optional. The maximum number of rows the grid may expand to. Set equal to `minRows` to fix the row count. Default: `Infinity`. |
| `maxColumns` | `number` | Optional. The maximum number of columns the grid may expand to, capped at 32. Set equal to `minColumns` to fix the column count. Default: `Infinity`. |
| `collapsibility` | `'none' \| 'leading' \| 'trailing' \| 'endings' \| 'any'` | Optional. 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: `"none"`. |
| `packing` | `'none' \| 'horizontal' \| 'vertical'` | Optional. 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: `"none"`. |

## 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](https://www.flexiboards.dev/docs/accessibility) for the key map.