GrDashboardToolbar

dashboard
Дашборд
API · 5 props

Берут, когда дашборд редактируемый.

import { GrDashboardToolbar } from '@feugene/granularity-dashboard/components/GrDashboardToolbar'

Обзор

Когда брать

дашборд редактируемый — пользователю нужен явный вход в режим, иначе ручки переноса либо висят всегда, либо не находятся вовсе;
раскладку можно вернуть — resettable даёт сброс к исходной; без него испорченную раскладку нечем починить, кроме как чистить хранилище;
рядом нужны свои кнопки — слоты #start, #end и содержимое по умолчанию принимают «Добавить виджет», период, фильтр;
режим хранится снаружи — v-model:mode держит родитель, поэтому в него можно войти и из другого места экрана.

Когда взять другое

Нужно	Берите
Просто ряд кнопок над контентом	`GrButtonGroup`
Переключатель двух-трёх режимов сам по себе	`GrSegmented`
Верхняя панель приложения	`GrNavbar`
Каталог виджетов для добавления	`GrDashboardPalette`
Сама сетка	`GrDashboard`

Примеры 2 у каждого — живое демо и его код

Шапка доски магазина
#start выбирает доску, слот по умолчанию держит период, #end — собственную кнопку страницы «Share»; переключатель режима и «Reset» принадлежат панели. «Reset» сам ничего не спрашивает — он эмитит reset, а насколько это разрушительно, решает страница: здесь сначала спрашивает GrConfirmDialog.
Orders
63
Revenue
€4,812
Returns
4
Сохранение раскладки при выходе из правки
Режим живёт снаружи в v-model:mode, и страница на него реагирует: выход из правки сохраняет раскладку, а пока идёт запрос, панель disabled — никто не войдёт в правку поверх незаконченного сохранения. size="sm" вписывает панель в компактную шапку.
Support · my boardSaved
My queue
12 open · 3 waiting on customer
SLA breaches
2 today · both on chat

API порождается из пакета · разойтись не может

Props

Prop	Type	по умолчанию	Описание
`mode`v-model	`GrDashboardMode \| undefined`	`undefined`	Текущий режим. `v-model:mode`. Не задан — берётся у дашборда, если тулбар внутри него.
`size`	`"lg" \| "xs" \| "sm" \| "md" \| undefined`	`undefined`	Ступень размера встроенных кнопок. По умолчанию `md`; берётся из `GrConfigProvider`.
`disabled`	`boolean \| undefined`	`false`	Встроенные кнопки выключены; кнопки из слотов сюда не относятся.
`resettable`	`boolean \| undefined`	`false`	Показывать кнопку сброса раскладки.
`ariaLabel`	`string \| undefined`	—	Имя панели инструментов. Не задано — из локали («Dashboard controls»).

Слоты

Slot	Type	Описание
`start`	`any`	Группа слева, перед растягивающейся серединой.
`default`	`any`	Середина панели: занимает всё свободное место.
`end`	`any`	Хвост справа, после кнопок сброса и режима.

События

Event	Сигнатура	Описание
`reset`	`(event: "reset"): void`	—
`update:mode`	`(event: "update:mode", value: GrDashboardMode): void`	—

Типы

Все экспортируемые типы подпути, по файлам, где они объявлены. Имена, дженерики и тела читаются из файлов деклараций пакета и разойтись не могут.

Импорт

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

Файлdist/types/components/GrDashboardToolbar/config.d.ts

grDashboardToolbarConfigconst

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

Файлdist/types/components/GrDashboardToolbar/defaults.d.ts

GrDashboardToolbarConfigurablePropsinterface

Пропы GrDashboardToolbar, настраиваемые глобально. Только оформление.

interface GrDashboardToolbarConfigurableProps {
    size: GrDashboardToolbarSize;
}

Файлdist/types/components/GrDashboardToolbar/grDashboardToolbarStyles.d.ts

GrDashboardToolbarSizetype

type GrDashboardToolbarSize = GrComponentSize;

Файлdist/types/components/GrDashboardToolbar/safelist.d.ts

grDashboardToolbarSafelistconst

const grDashboardToolbarSafelist: string[];

Файлdist/types/components/GrDashboardToolbar/GrDashboardToolbar.vue.d.ts

GrDashboardToolbarPropsinterface

interface GrDashboardToolbarProps {
    /** Текущий режим. `v-model:mode`. Не задан — берётся у дашборда, если тулбар внутри него. */
    mode?: GrDashboardMode;
    /** Ступень размера встроенных кнопок. По умолчанию `md`; берётся из `GrConfigProvider`. */
    size?: GrDashboardToolbarSize;
    /** Показывать кнопку сброса раскладки. */
    resettable?: boolean;
    /** Встроенные кнопки выключены; кнопки из слотов сюда не относятся. */
    disabled?: boolean;
    /** Имя панели инструментов. Не задано — из локали («Dashboard controls»). */
    ariaLabel?: string;
}

GrDashboardToolbarEmitsinterface

interface GrDashboardToolbarEmits {
    /** Нажата кнопка режима (`v-model:mode`): из `view` в `edit` и обратно. */
    (e: 'update:mode', value: GrDashboardMode): void;
    /** Нажата кнопка сброса раскладки; что считать исходной раскладкой, решает приложение. */
    (e: 'reset'): void;
}

Использование из прозы библиотеки

Сброс подтверждения не спрашивает

Компонент излучает намерение, а применяет его потребитель: только он знает, сохранена ли раскладка на сервере и стоит ли спросить. Диалог внутри тулбара означал бы, что пакет решил за приложение, насколько разрушительна операция.

Спросить нужно — рядом ставят GrConfirmDialog или useDialogService().confirm().