Components

Generated from the components' source with vue-component-meta; do not edit by hand. Required props are marked with *.

DriverTour

Renders a driver's tour: the overlay, the stage and the popover, teleported to body (or config.teleportTo) while the tour is active. Place it once in your layout; pass the driver as a prop or install DriverPlugin and omit it to render the shared instance.

Props

Name	Type	Default	Description
driver	Driver | undefined

Events

None.

Slots

Name	Scope	Description
overlay	OverlaySlotProps	Replaces the overlay.
stage	StageSlotProps	Decorates the stage (rendered inside .driver-stage).
popover	TourSlotProps	Replaces the popover body; the positioned wrapper and the arrow remain.
arrow	TourSlotProps
close	TourSlotProps
title	TourSlotProps
description	TourSlotProps
footer	TourSlotProps
progress	TourSlotProps
prev	TourSlotProps
next	TourSlotProps

Exposed

None.

DriverPopover

The default popover: the driver.js DOM, classes and accessibility contract, positioned with Floating UI. Every part is a slot; the whole body can be replaced through the default slot or model.component.

Props

Name	Type	Default	Description
model *	PopoverRenderModel		The resolved popover model from the driver (or hints) state.
anchor	Element | StageRect | undefined	undefined	The element (or rect) the popover points at; ignored when the model is centered.
mode	"tour" | "hint" | undefined	"tour"	Hint popovers render a single dismiss button and no close/progress.
refreshTick	number | undefined	0	Bump to re-position.
scope	Record<string, unknown> | undefined	{}	Extra props merged into every slot's scope (the tour context).
strategy	"fixed" | "absolute" | undefined	"fixed"	Positioning strategy; absolute scrolls natively with the page.
zIndex	number | undefined	10000

Events

Name	Payload	Description
render	[dom: PopoverDOM]
unrender	[dom: PopoverDOM]

Slots

Name	Scope	Description
default	PopoverSlotProps	Replaces the whole body (close button, title, description, footer).
arrow	PopoverSlotProps
close	PopoverSlotProps
title	PopoverSlotProps
description	PopoverSlotProps
footer	PopoverSlotProps
progress	PopoverSlotProps
prev	PopoverSlotProps
next	PopoverSlotProps

Exposed

Name	Type	Description
update	() => void	Re-measure and re-position the popover.
getDom	() => PopoverDOM | undefined	The popover parts, for imperative access.

DriverOverlay

The dimmed page with the stage cut out: a full-screen SVG whose single evenodd path is the dim minus the rounded cutout. Only the path receives pointer events.

Props

Name	Type	Default	Description
stage *	StageRect		The cutout rect, without padding.
animated	boolean | undefined	true	The engine drives the stage rect per frame; ignored by this overlay.
color	string | undefined	"#000"
opacity	number | undefined	0.7
padding	number | undefined	10
radius	number | undefined	5
refreshTick	number | undefined	0	Bump to re-measure the viewport (resize).
transitioning	boolean | undefined	false	The stage is animating between two elements.
zIndex	number | undefined	10000

Events

Name	Payload	Description
click	[event: MouseEvent]

Slots

None.

Exposed

None.

DriverBoxOverlay

An alternative overlay: a box at the stage rect whose huge box-shadow dims the page. With animate: false the cutout moves with a CSS transition, so the highlight box can be animated with any timing function.

Props

Name	Type	Default	Description
stage *	StageRect		The cutout rect, without padding.
animated	boolean | undefined	true	The engine animates the rect per frame; the CSS transition is then disabled.
color	string | undefined	"#000"
opacity	number | undefined	0.7
padding	number | undefined	10
radius	number | undefined	5
refreshTick	number | undefined	0
transitioning	boolean | undefined	false	The stage is animating between two elements.
zIndex	number | undefined	10000

Events

Name	Payload	Description
click	[event: MouseEvent]

Slots

None.

Exposed

None.

DriverStage

An empty, non-interactive box tracking the stage cutout, for decorations. Exposes its rect as --driver-stage-* CSS variables and takes a slot.

Props

Name	Type	Default	Description
stage *	StageRect		The cutout rect, without padding.
padding	number | undefined	10
radius	number | undefined	5
transitioning	boolean | undefined	false	The stage is animating between two elements.
zIndex	number | undefined	10000

Events

None.

Slots

Name	Scope	Description
default	{}

Exposed

None.

DriverHints

Renders a hints instance: the beacons, the optional overlay and the open hint's popover (from driver-vue/hints).

Props

Name	Type	Default	Description
hints *	Hints

Events

None.

Slots

Name	Scope	Description
beacon	HintScope & { entry: MountedHint; }	Content of a beacon button (the button itself stays, positioned and labelled).
popover	HintSlotProps	Replaces the popover body.
arrow	HintSlotProps
title	HintSlotProps
description	HintSlotProps
footer	HintSlotProps
next	HintSlotProps

Exposed

None.

DriverHintBeacon

The default pulsing beacon of a hint.

Props

Name	Type	Default	Description
entry *	MountedHint
originX	number | undefined	0	Document offset of the positioned container the beacon lives in.
originY	number | undefined	0

Events

Name	Payload	Description
click	[]
mounted	[id: string, element: HTMLElement]
unmounted	[id: string]

Slots

Name	Scope	Description
default	{}

Exposed

None.