Provider
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
GridProvider owns layout and gesture state for one canvas. It takes every SolveOptions field as a prop, works controlled (v-model:layout) or uncontrolled (default-layout), and provides the store, actions, and controller to its descendants.
import { GRID_CONTEXT_KEY, GridProvider, TRANSFER_SCOPE_KEY, useGridContext, useTransferScope } from 'gridla/vue'
import type { GridContextValue, GridProviderEmits, GridProviderProps } from 'gridla/vue'
Hooks
useGridContext
hook · vue/context.ts:41
Read the nearest GridProvider context. Throws when called outside a
provider. Call it during setup().
export function useGridContext<TData = unknown>(): GridContextValue<TData>
useTransferScope
hook · vue/context.ts:50
The nearest GridTransferScope's scope, or null when there is none. Call it during setup().
export function useTransferScope(): TransferScope | null
Constants
GRID_CONTEXT_KEY
const · vue/context.ts:32
Injection key under which GridProvider provides its GridContextValue.
export const GRID_CONTEXT_KEY: InjectionKey<GridContextValue<unknown>>
GridProvider
const · vue/provider.ts:68
Owns layout and gesture state for one canvas. Place a GridCanvas inside
it. Controlled with v-model:layout (or :layout plus @update:layout),
uncontrolled with default-layout. A binding over createGridController
from gridla/interaction; renders only its default slot.
export const GridProvider: DefineComponent<ExtractPropTypes<{ layout: { type: PropType<GridLayout>; default: undefined; }; defaultLayout: { type: PropType<GridLayout>; default: undefined; }; config: { type: PropType<Partial<GridProviderConfig>>; default: undefined; }; acceptTransfers: { type: PropType<boolean | ((item: GridItem<never>, sourceId: string) => boolean)>; default: undefined; }; responsive: { type: BooleanConstructor; default: undefined; }; dragThreshold: { type: NumberConstructor; default: undefined; }; keyboardStep: { type: NumberConstructor; default: undefined; }; selectedId: { type: PropType<string | null>; default: undefined; }; gap: { type: NumberConstructor; default: undefined; }; snapDistance: { type: NumberConstructor; default: undefined; }; snap: { type: BooleanConstructor; default: undefined; }; onTrace: { type: PropType<TraceCallback>; default: undefined; }; }>, () => Array<VNode<RendererNode, RendererElement, { [key: string]: any; }>> | null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { 'update:layout': (_layout: GridLayout<never>) => true; layoutChange: (_layout: GridLayout<never>, _detail: GridChangeDetail) => true; commit: (_detail: GridChangeDetail) => true; 'update:selectedId': (_itemId: string | null) => true; transferIn: (_item: GridItem<never>, _sourceId: string) => true; transferOut: (_itemId: string, _targetId: string) => true; }, string, PublicProps, ToResolvedProps<ExtractPropTypes<{ layout: { type: PropType<GridLayout>; default: undefined; }; defaultLayout: { type: PropType<GridLayout>; default: undefined; }; config: { type: PropType<Partial<GridProviderConfig>>; default: undefined; }; acceptTransfers: { type: PropType<boolean | ((item: GridItem<never>, sourceId: string) => boolean)>; default: undefined; }; responsive: { type: BooleanConstructor; default: undefined; }; dragThreshold: { type: NumberConstructor; default: undefined; }; keyboardStep: { type: NumberConstructor; default: undefined; }; selectedId: { type: PropType<string | null>; default: undefined; }; gap: { type: NumberConstructor; default: undefined; }; snapDistance: { type: NumberConstructor; default: undefined; }; snap: { type: BooleanConstructor; default: undefined; }; onTrace: { type: PropType<TraceCallback>; default: undefined; }; }>, { 'update:layout': (_layout: GridLayout<never>) => true; layoutChange: (_layout: GridLayout<never>, _detail: GridChangeDetail) => true; commit: (_detail: GridChangeDetail) => true; 'update:selectedId': (_itemId: string | null) => true; transferIn: (_item: GridItem<never>, _sourceId: string) => true; transferOut: (_itemId: string, _targetId: string) => true; }>, { snap: boolean; gap: number; snapDistance: number; onTrace: TraceCallback; responsive: boolean; dragThreshold: number; keyboardStep: number; layout: GridLayout; defaultLayout: GridLayout; config: Partial<GridControllerConfig>; acceptTransfers: boolean | ((item: GridItem<never>, sourceId: string) => boolean); selectedId: string | null; }, SlotsType<{ default?: () => VNode[]; }>, {}, {}, string, ComponentProvideOptions, true, {}, any>
TRANSFER_SCOPE_KEY
const · vue/context.ts:35
Injection key under which GridTransferScope provides its TransferScope.
export const TRANSFER_SCOPE_KEY: InjectionKey<TransferScope>
Types
GridContextValue
type · vue/context.ts:18
Value provided by GridProvider to its descendants: its id, the state
store, the imperative actions, the resolved config (reactive), the internal
gesture API, and the underlying GridController from gridla/interaction.
export type GridContextValue<TData = unknown> = {
/** Unique id of this provider. Used by transfer scopes. */
id: string
store: GridStore<GridState<TData>>
actions: GridActions<TData>
/** Resolved configuration; follows the provider's props. */
config: ComputedRef<GridControllerConfig>
/** Internal gesture API used by `GridCanvas`. */
gesture: GridGestureApi<TData>
/** The controller the provider is built on. */
controller: GridController<TData>
}
GridProviderEmits
type · vue/provider.ts:53
Events emitted by GridProvider. update:layout and update:selectedId
back v-model:layout and v-model:selectedId; layoutChange carries the
GridChangeDetail as well; commit fires on every accepted interactive
commit; transferIn and transferOut report moves between canvases.
export type GridProviderEmits<TData = unknown> = {
'update:layout': (layout: GridLayout<TData>) => void
layoutChange: (layout: GridLayout<TData>, detail: GridChangeDetail) => void
commit: (detail: GridChangeDetail) => void
'update:selectedId': (itemId: string | null) => void
transferIn: (item: GridItem<TData>, sourceId: string) => void
transferOut: (itemId: string, targetId: string) => void
}
GridProviderProps
type · vue/provider.ts:28
Props of GridProvider. Every SolveOptions field is a prop; config
bundles them (and responsive, dragThreshold, keyboardStep) as one
object, with individual props taking precedence.
export type GridProviderProps<TData = unknown> = SolveOptions & {
/** Controlled layout. Pair with `v-model:layout` or `@update:layout`. */
layout?: GridLayout<TData>
/** Initial layout for uncontrolled use. */
defaultLayout?: GridLayout<TData>
/** Solve options and settings as one object. Individual props win. */
config?: Partial<GridProviderConfig>
/** Whether items from other canvases may be dropped here. Default `true`. */
acceptTransfers?: boolean | ((item: GridItem<TData>, sourceId: string) => boolean)
/** Project the layout onto the measured canvas size. Default `true`. */
responsive?: boolean
/** Minimum pointer travel before a press becomes a drag. Default `4`. */
dragThreshold?: number
/** Pixels moved per arrow key press. Default `8`. */
keyboardStep?: number
/** Controlled selection. Pair with `v-model:selectedId`. */
selectedId?: string | null
}