GrDashboardToolbar — Components

Overview

When to take it

the dashboard is editable — the user needs an explicit way into the mode, otherwise the drag handles either hang there always or are not found at all;
the layout can be brought back — resettable gives a reset to the original; without it a spoiled layout cannot be fixed other than by clearing the storage;
buttons of your own are needed beside it — the #start and #end slots and the default content accept “Add a widget”, a period, a filter;
the mode is stored outside — v-model:mode is held by the parent, so it can be entered from another place on the screen as well.

When to take something else

Need	Take
Just a row of buttons above the content	`GrButtonGroup`
A switch of two or three modes on its own	`GrSegmented`
The top bar of the application	`GrNavbar`
A catalogue of widgets to add from	`GrDashboardPalette`
The grid itself	`GrDashboard`

Examples 2 each with a live demo and its code

The header of a store board
#start picks the board, the default slot holds the period, #end the page’s own «Share»; the mode switch and «Reset» belong to the toolbar. «Reset» does not ask by itself — it emits reset, and the page decides how destructive that is: here a GrConfirmDialog asks first.
Orders
63
Revenue
€4,812
Returns
4
Saving the layout on leaving edit mode
The mode lives outside in v-model:mode, so the page reacts to it: leaving edit mode saves the layout, and while the request runs the toolbar is disabled — nobody re-enters editing on top of an unfinished save. size="sm" fits the compact header.
Support · my boardSaved
My queue
12 open · 3 waiting on customer
SLA breaches
2 today · both on chat

API generated from the package · cannot drift

Props

Prop	Type	default	Description
`mode`v-model	`GrDashboardMode \| undefined`	`undefined`	Current mode. `v-model:mode`. Not set — taken from the dashboard if the toolbar is inside one.
`size`	`"lg" \| "xs" \| "sm" \| "md" \| undefined`	`undefined`	The size step of the built-in buttons. `md` by default; taken from `GrConfigProvider`.
`disabled`	`boolean \| undefined`	`false`	The built-in buttons are disabled; buttons from the slots are not affected.
`resettable`	`boolean \| undefined`	`false`	Show the layout reset button.
`ariaLabel`	`string \| undefined`	—	The name of the toolbar. Not set — from the locale ("Dashboard controls").

Slots

Slot	Type	Description
`start`	`any`	The group on the left, before the stretching middle.
`default`	`any`	The middle of the toolbar: it takes up all the free space.
`end`	`any`	The tail on the right, after the reset and mode buttons.

Events

Event	Signature	Description
`reset`	`(event: "reset"): void`	—
`update:mode`	`(event: "update:mode", value: GrDashboardMode): void`	—

Types

Every exported type of the subpath, grouped by the file it lives in. Names, generics and bodies come from the package’s declaration files and cannot drift.

Import

import type { GrDashboardToolbarConfigurableProps, GrDashboardToolbarSize, GrDashboardToolbarProps } from '@feugene/granularity-dashboard/components/GrDashboardToolbar'

Filedist/types/components/GrDashboardToolbar/config.d.ts

grDashboardToolbarConfigconst

const grDashboardToolbarConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrDashboardToolbar">;

Filedist/types/components/GrDashboardToolbar/defaults.d.ts

GrDashboardToolbarConfigurablePropsinterface

interface GrDashboardToolbarConfigurableProps {
    size: GrDashboardToolbarSize;
}

Filedist/types/components/GrDashboardToolbar/grDashboardToolbarStyles.d.ts

GrDashboardToolbarSizetype

type GrDashboardToolbarSize = GrComponentSize;

Filedist/types/components/GrDashboardToolbar/safelist.d.ts

grDashboardToolbarSafelistconst

const grDashboardToolbarSafelist: string[];

Filedist/types/components/GrDashboardToolbar/GrDashboardToolbar.vue.d.ts

GrDashboardToolbarPropsinterface

interface GrDashboardToolbarProps {
    mode?: GrDashboardMode;
    size?: GrDashboardToolbarSize;
    resettable?: boolean;
    disabled?: boolean;
    ariaLabel?: string;
}

GrDashboardToolbarEmitsinterface

interface GrDashboardToolbarEmits {
    (e: 'update:mode', value: GrDashboardMode): void;
    (e: 'reset'): void;
}

Usage from the library prose

The reset asks no confirmation

The component emits the intent, and the consumer applies it: only they know whether the layout is saved on the server and whether it is worth asking. A dialog inside the toolbar would mean the package decided on the application’s behalf how destructive the operation is.

If asking is needed, a GrConfirmDialog or a useDialogService().confirm() is put beside it.