BundyUI

Actions

Dock

A draggable, edge-snapping floating group of action buttons.

vue
<UiDock />

Options

One block per prop — what it does, and what it looks like set.

Default side

defaultSide is the edge the group starts snapped to when you let it manage its own position. Drag the pill by its grip — or by any empty space in it — towards another edge of the box and it snaps to whichever is nearest, switching between a horizontal and a vertical layout as it crosses. defaultSide is only the starting point, so it's ignored the moment you pass position.

Drag either pill towards an edge — it snaps to the nearest one

Position

position takes the side away from the component and puts it in your hands. Pass it — with v-model:position if you also want dragging to write back — and the group sits where you say; omit it and the group keeps its own side internally, starting from defaultSide. Useful when the edge has to follow something else on the page, like a panel that opens on the right.

Handle

handle shows the drag grip at the end of the pill. Turning it off doesn't stop the group being dragged — empty space and the buttons themselves still work — it only removes the affordance that says so, which is worth doing when the grip would be the widest thing in a two-button group.

Draggable

draggable is the one that actually pins the group down. Set it to false and the pill stays on the side it was given, grip and all gestures inert — the right setting for a toolbar whose position is part of the layout rather than a preference.

This pill can't be moved

A real drag (movement past a small threshold) suppresses the click that would otherwise fire on release — so dragging a button around doesn't also trigger its @click.

Margin

margin is the distance in pixels kept between the group and the edge of its bounds, whether that's the viewport or a container you named.

Container

container confines the group to one element's box instead of the viewport. Pass a template ref: dragging, snapping and margin are all measured against that element, which is what every preview on this page does — without it the pill would be position: fixed and drag across the whole page.

Bounded to this box — drag it and it never leaves

Without a container prop it's position: fixed and drags across the whole viewport; pass a container element ref to confine it (and switch it to position: absolute, scrolling with that container).

Storage key

storageKey makes the dock remember where the user left it. The edge and how far along it the pill sits are written to localStorage under that key when a drag ends, and read back on the next visit — drag this one somewhere and reload the page. Give every dock its own key, or they'll overwrite each other. The spot along the edge is saved as a fraction, so a dock left in the bottom-right corner of a wide window still lands in that corner on a narrow one.

Drag it somewhere, then reload — it stays put

storageKey writes only when a drag ends and reads only on mount, so changing the key on a mounted dock doesn't reload it. On a controlled dock (position passed) only the spot along the edge is restored — the side is yours to persist through v-model:position.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
defaultSide
"top" | "bottom" | "left" | "right"
'right'
Which viewport edge the group starts snapped to. Ignored once `position` is passed.
position
"top" | "bottom" | "left" | "right"
—
Controls which viewport edge the group is snapped to. Omit this to let the group manage its own position internally (starting from `defaultSide`); pass it to fully control the side yourself.
handle
boolean
true
Shows the drag grip.
draggable
boolean
true
Whether the group can be dragged to a different edge/position at all.
margin
number
16
Distance in pixels kept between the group and the edge of its bounds.
container
HTMLElement | null
undefined (the viewport)
Confines dragging/snapping to this element's box instead of the whole viewport — e.g. pass a template ref to keep the dock inside a specific container.
storageKey
string
undefined (not persisted)
Remembers where the user left the dock — its edge and how far along it — in `localStorage` under this key, and restores it on the next visit. Give each dock on a page its own key. The edge is only restored when `position` isn't passed; a controlled dock persists its side through `v-model`.

Slots

Slot
default

Emits

Event
Payload
Description
update:position
[value: Side]
—

Types

ts
type Side = "top" | "bottom" | "left" | "right";
ts
interface SavedPlacement {
    side: Side;
    offset: number;
}