Heads up! These docs are still a work in progress.
FlexiWidget
A widget is a component (such as a tile) that is stored within a target (dropzone). Widgets can be moved around within a target or between targets.
FlexiWidget (component)
Props
| Name | Type | Description |
|---|---|---|
| class | string | The class names to apply to this widget. |
| children | Snippet<[{ widget: FlexiWidgetController, component?: Component, componentProps?: Record<string, any> }]> | The content rendered within the widget. |
| draggable | boolean | Whether the widget is draggable. |
| resizability | 'none' | 'horizontal' | 'vertical' | 'both' | The resizability of the widget. |
| width | number | The width of the widget in units. |
| height | number | The height of the widget in units. |
| component | Component<T> | The component rendered within the widget. |
| componentProps | T | The props applied to the component rendered, if it has one. |
| controller | FlexiWidgetController (bindable) | The controller for this widget. |
| onfirstcreate | (controller: FlexiWidgetController) => void | A callback that fires when the widget's controller is first created. |
FlexiWidgetController
FlexiWidgetController 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 FlexiWidgetController allows you to manage the widget directly and carry out actions.
Properties
| Name | Type | Description |
|---|---|---|
| target | FlexiTargetController | undefined | The target this widget is under, if any. |
| adder | FlexiAddController | undefined | The adder this widget is currently being created under, if any. |
| ref | HTMLElement | undefined | The DOM element bound to this widget. |
| config | FlexiWidgetDerivedConfiguration | The reactive configuration of the widget. |
| isShadow | boolean | Whether this widget is a shadow dropzone widget. |
| isGrabbed | boolean | Whether this widget is grabbed. |
| isResizing | boolean | Whether this widget is being resized. |
| style | string | The styling to apply to the widget. |
| currentAction | WidgetAction | null | The current action being performed on the widget. |
| draggable | boolean | Whether the widget is draggable. |
| resizability | 'none' | 'horizontal' | 'vertical' | 'both' | The resizability of the widget. |
| width | number | The width of the widget in units. |
| height | number | The height of the widget in units. |
| component | Component | undefined | The component rendered within the widget. |
| componentProps | Record<string, any> | undefined | The props applied to the component rendered, if it has one. |
| snippet | Snippet<[{ widget: FlexiWidgetController, component?: Component, componentProps?: Record<string, any> }]> | undefined | The content rendered within the widget. |
| className | ClassValue | undefined | The class name that is applied to this widget. |
| x | number | The column (x-coordinate) of the widget. |
| y | number | The row (y-coordinate) of the widget. |
| metadata | Record<string, any> | undefined | The metadata associated with this widget, if any. |
Methods
| Name | Type | Description |
|---|---|---|
| onpointerdown | (event: PointerEvent) => void | Event handler for when the widget receives a pointerdown event. |
| ongrabberpointerdown | (event: PointerEvent) => void | Event handler for when one of the widget's grabbers receives a pointerdown event. |
| onresizerpointerdown | (event: PointerEvent) => void | Event handler for when one of the widget's resizers receives a pointerdown event. |
| setBounds | (x: number, y: number, width: number, height: number) => void | Sets the bounds of the widget. This is not intended for use externally. |
| addGrabber | () => { onpointerdown: (event: PointerEvent) => void } | Registers a grabber to the widget and returns an object with an `onpointerdown` event handler. |
| removeGrabber | () => void | Unregisters a grabber from the widget. |
| addResizer | () => { onpointerdown: (event: PointerEvent) => void } | Registers a resizer to the widget and returns an object with an `onpointerdown` event handler. |
| removeResizer | () => void | Unregisters a resizer from the widget. |
| delete | () => void | Deletes this widget from its target and board. |
FlexiWidgetConfiguration
The configuration object for the FlexiWidget component. This is not reactive when invoked as props on the component, so to mutate it reactively you will need to mutate properties on the controller.
Properties
| Name | Type | Description |
|---|---|---|
| draggable | boolean | Whether the widget is draggable. Defaults to true. Reactive property. |
| resizability | 'none' | 'horizontal' | 'vertical' | 'both' | The resizability of the widget. Defaults to 'both'. Reactive property. |
| 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 property. |
| component | Component | The component that is rendered by this widget. Reactive property. |
| componentProps | Record<string, any> | The props applied to the component rendered, if it has one. Reactive property. |
| className | ClassValue | The class names to apply to this widget. Reactive property. |
| x | number | The column (x-coordinate) of the widget. Not reactive. |
| y | number | The row (y-coordinate) of the widget. Not reactive. |
| metadata | Record<string, any> | The metadata associated with this widget, if any. Reactive property. |