GrDashboardToolbar — Компоненты

Когда брать

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

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

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

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

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

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

Установка

npm i @feugene/granularity-dashboard

Импорт

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

API

API этого компонента ещё не посчитан: генератор витрины пока обходит только ядро. Пока его нет, справочник — в документации пакета.

Примеры 1

Basic

<script setup lang="ts">
import { ref } from 'vue'

const mode = ref<'view' | 'edit'>('view')
const period = ref('week')
const lastReset = ref('—')

const PERIODS = [
  { value: 'day', label: 'День' },
  { value: 'week', label: 'Неделя' },
  { value: 'month', label: 'Месяц' },
]

function onReset(): void {
  lastReset.value = `режим «${mode.value === 'edit' ? 'правка' : 'просмотр'}»`
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <GrDashboardToolbar v-model:mode="mode" resettable @reset="onReset">
      <template #start>
        <div class="flex items-center gap-3">
          <span class="font-600 whitespace-nowrap">Продажи</span>
          <GrSelect v-model="period" :options="PERIODS" size="sm" class="w-32" aria-label="Период" />
        </div>
      </template>

      <template #end>
        <GrButton variant="ghost" size="sm">
          Экспорт
        </GrButton>
      </template>
    </GrDashboardToolbar>

    <p class="text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]">
      Режим: <b>{{ mode === 'edit' ? 'правка' : 'просмотр' }}</b> · период: <b>{{ period }}</b> · сброс: <b>{{ lastReset }}</b>
    </p>

    <GrDashboardToolbar :mode="mode" disabled />
  </div>
</template>

Документация компонента Все компоненты