Components
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
Headless building blocks. GridCanvas measures itself and wires input; GridItem positions one item and exposes drag and resize handle attributes through its default slot; GridPreviewOutline shows where the active item will land.
import { GRID_DATA, GridCanvas, GridItem, GridPreviewOutline } from 'gridla/vue'
import type { GridCanvasEmits, GridCanvasProps, GridItemProps, GridItemSlotProps, GridPreviewOutlineProps } from 'gridla/vue'
Constants
GRID_DATA
const · interaction/attributes.ts:6
Data attributes the pointer gesture looks for on pointer down. Adapters emit
them on their elements: item carries the item id, dragHandle marks a
surface that starts a move, resizeHandle plus edge mark a resize handle.
export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }
GridCanvas
const · vue/components.ts:55
The element items are positioned in. Measures itself, feeds the size to the
provider, and wires pointer and keyboard handling through
createPointerGesture. Renders a div with position: relative; give it a
height (or let it follow the layout with :responsive="false").
export const GridCanvas: DefineComponent<ExtractPropTypes<{ enabled: { type: BooleanConstructor; default: boolean; }; }>, () => VNode<RendererNode, RendererElement, { [key: string]: any; }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { itemClick: (_itemId: string) => true; deleteKey: (_itemId: string) => true; }, string, PublicProps, ToResolvedProps<ExtractPropTypes<{ enabled: { type: BooleanConstructor; default: boolean; }; }>, { itemClick: (_itemId: string) => true; deleteKey: (_itemId: string) => true; }>, { enabled: boolean; }, SlotsType<{ default?: () => VNode[]; }>, {}, {}, string, ComponentProvideOptions, true, {}, any>
GridItem
const · vue/components.ts:191
Positions one item inside GridCanvas. Headless: it renders a div with
geometry styles and data attributes and leaves appearance to you. The
default slot receives GridItemSlotProps.
export const GridItem: DefineComponent<ExtractPropTypes<{ id: { type: StringConstructor; required: true; }; draggable: { type: BooleanConstructor; default: boolean; }; resizeEdges: { type: PropType<readonly GridResizeEdge[]>; default: undefined; }; resizeHandleClass: { type: StringConstructor; default: undefined; }; positioning: { type: PropType<Positioning>; default: string; }; followPointer: { type: BooleanConstructor; default: boolean; }; }>, () => VNode<RendererNode, RendererElement, { [key: string]: any; }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{ id: { type: StringConstructor; required: true; }; draggable: { type: BooleanConstructor; default: boolean; }; resizeEdges: { type: PropType<readonly GridResizeEdge[]>; default: undefined; }; resizeHandleClass: { type: StringConstructor; default: undefined; }; positioning: { type: PropType<Positioning>; default: string; }; followPointer: { type: BooleanConstructor; default: boolean; }; }>, {}>, { draggable: boolean; resizeEdges: ReadonlyArray<GridResizeEdge>; positioning: Positioning; followPointer: boolean; resizeHandleClass: string; }, SlotsType<{ default?: (props: GridItemSlotProps) => VNode[]; }>, {}, {}, string, ComponentProvideOptions, true, {}, any>
GridPreviewOutline
const · vue/components.ts:276
Renders a box where the active item will land when released. Renders
nothing when no gesture is in progress.
export const GridPreviewOutline: DefineComponent<ExtractPropTypes<{ positioning: { type: PropType<Positioning>; default: string; }; }>, () => VNode<RendererNode, RendererElement, { [key: string]: any; }> | null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{ positioning: { type: PropType<Positioning>; default: string; }; }>, {}>, { positioning: Positioning; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>
Types
GridCanvasEmits
type · vue/components.ts:44
Events emitted by GridCanvas: itemClick for a press that did not turn
into a drag, deleteKey when Delete or Backspace is pressed with an item
selected.
export type GridCanvasEmits = {
itemClick: (itemId: string) => void
deleteKey: (itemId: string) => void
}
GridCanvasProps
type · vue/components.ts:34
Props of GridCanvas. Any other attribute (class, style, tabindex,
listeners) falls through to the rendered div.
export type GridCanvasProps = {
/** Set `false` to disable pointer-driven gestures. Default `true`. */
enabled?: boolean
}
GridItemProps
type · vue/components.ts:165
Props of GridItem. id selects the item; the rest control drag surfaces,
built-in resize handles, and how the element is positioned. Other
attributes fall through to the rendered div.
export type GridItemProps = {
/** Id of the item in the layout. */
id: string
/**
* `true` (default): the whole element is a drag surface. `false`: only
* elements bound with `dragHandleProps` start a move.
*/
draggable?: boolean
/** Edges to render built-in resize handles for. Default: none. */
resizeEdges?: readonly GridResizeEdge[]
/** Class for built-in resize handles. */
resizeHandleClass?: string
/**
* Position the element with `transform` (default) or with `left`/`top`.
* Transform keeps layout work off the main thread during gestures.
*/
positioning?: Positioning
/** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
followPointer?: boolean
}
GridItemSlotProps
type · vue/components.ts:150
Passed to the GridItem default slot: the item's GridItemView plus
attribute objects for drag and resize handles (spread them with v-bind).
export type GridItemSlotProps = GridItemView & {
/** Bind on the element that starts a move. */
dragHandleProps: { [GRID_DATA.dragHandle]: string }
/** Attributes for a resize handle on the given edge. */
getResizeHandleProps: (edge: GridResizeEdge) => {
[GRID_DATA.resizeHandle]: string
[GRID_DATA.edge]: GridResizeEdge
}
}
GridPreviewOutlineProps
type · vue/components.ts:268
Props of GridPreviewOutline: the positioning mode (transform by
default). Other attributes fall through to the rendered div.
export type GridPreviewOutlineProps = {
positioning?: Positioning
}