Granularity
⌘K
v0.41.0

GrDashboardToolbar

Package: @feugene/granularity-dashboardcompanionGroup: misc

Machine-translated from the Russian original, not yet reviewed. Read the original

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

NeedTake
Just a row of buttons above the contentGrButtonGroup
A switch of two or three modes on its ownGrSegmented
The top bar of the applicationGrNavbar
A catalogue of widgets to add fromGrDashboardPalette
The grid itselfGrDashboard

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.

Install

npm i @feugene/granularity-dashboard

Import

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

API

The API for this component has not been generated yet: the showcase generator only covers the core so far. Until it does, the reference lives in the package documentation.

Examples 1

Basic

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>

Related

Component documentationAll components