GrButtonGroup

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

import { GrBadge, GrButton, GrButtonGroup } from '@feugene/granularity'

const currentView = ref('board')

const views = [
  { label: 'Board', value: 'board' },
  { label: 'List', value: 'list' },
  { label: 'Calendar', value: 'calendar' },
]
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <GrButtonGroup aria-label="View switcher">
        <GrButton
          v-for="view in views"
          :key="view.value"
          size="sm"
          :variant="currentView === view.value ? 'primary' : 'outline'"
          @click="currentView = view.value"
        >
          {{ view.label }}
        </GrButton>
      </GrButtonGroup>

      <GrBadge size="sm" tone="primary">
        Active: {{ currentView }}
      </GrBadge>
    </div>

    <div class="rounded-xl border border-[var(--gr-brd)] bg-[var(--gr-bg)] p-4 text-sm text-[var(--gr-muted-fg)]">
      Используйте группу, когда несколько action-кнопок переключают один контекст и должны восприниматься как единый control cluster.
    </div>
  </div>
</template>

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

import { GrBadge, GrButton, GrButtonGroup, GrCard } from '@feugene/granularity'

const activeTools = ref(['bold', 'underline'])

const tools = [
  { label: 'B', value: 'bold' },
  { label: 'I', value: 'italic' },
  { label: 'U', value: 'underline' },
]

function toggleTool(tool: string) {
  if (activeTools.value.includes(tool)) {
    activeTools.value = activeTools.value.filter(value => value !== tool)
    return
  }

  activeTools.value = [...activeTools.value, tool]
}
</script>

<template>
  <GrCard class="grid gap-4 p-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <GrButtonGroup aria-label="Formatting toolbar">
        <GrButton
          v-for="tool in tools"
          :key="tool.value"
          size="sm"
          :variant="activeTools.includes(tool.value) ? 'primary' : 'outline'"
          @click="toggleTool(tool.value)"
        >
          {{ tool.label }}
        </GrButton>
      </GrButtonGroup>

      <div class="flex flex-wrap gap-2">
        <GrBadge
          v-for="tool in activeTools"
          :key="tool"
          size="sm"
          tone="neutral"
        >
          {{ tool }}
        </GrBadge>
      </div>
    </div>

    <p class="text-sm text-[var(--gr-fg)]">
      Release note title
    </p>
    <p class="text-sm text-[var(--gr-muted-fg)]">
      Button groups удобно использовать в компактных toolbars, где важна предсказуемая ширина и визуальная связность соседних действий.
    </p>
  </GrCard>
</template>

<script setup lang="ts">
import { GrButton, GrButtonGroup, GrTooltip } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-4">
    <!-- Оформление задаётся один раз на группе, а не повторяется на каждой кнопке. -->
    <GrButtonGroup aria-label="Период отчёта" size="sm" variant="outline" tone="neutral">
      <GrButton>День</GrButton>
      <GrButton>Неделя</GrButton>
      <GrButton tone="primary">
        Месяц
      </GrButton>
    </GrButtonGroup>

    <!-- Обёртка вокруг кнопки не разрывает ряд: склейка считает звенья, а не прямых потомков. -->
    <GrButtonGroup aria-label="Действия над документом" variant="outline">
      <GrButton>Открыть</GrButton>
      <GrTooltip text="Копия появится рядом с оригиналом">
        <GrButton>Дублировать</GrButton>
      </GrTooltip>
      <GrButton>Архивировать</GrButton>
    </GrButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { GrButton, GrButtonGroup } from '@feugene/granularity'
</script>

<template>
  <div class="flex flex-wrap items-start gap-8">
    <GrButtonGroup aria-label="Слои карты" orientation="vertical" variant="outline">
      <GrButton>Схема</GrButton>
      <GrButton>Спутник</GrButton>
      <GrButton>Гибрид</GrButton>
    </GrButtonGroup>

    <!-- `attached: false` — тот же ряд, но без склейки: каждая кнопка со своими радиусами. -->
    <GrButtonGroup aria-label="Экспорт" :attached="false" variant="ghost">
      <GrButton>CSV</GrButton>
      <GrButton>XLSX</GrButton>
      <GrButton>PDF</GrButton>
    </GrButtonGroup>
  </div>
</template>

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

import { GrBadge, GrButton, GrButtonGroup, GrCard } from '@feugene/granularity'

const currentFilter = ref('all')

const filters = [
  { label: 'All', value: 'all', count: 24 },
  { label: 'Drafts', value: 'drafts', count: 6 },
  { label: 'Scheduled', value: 'scheduled', count: 8 },
  { label: 'Failed', value: 'failed', count: 2 },
]
</script>

<template>
  <div class="grid gap-4">
    <GrButtonGroup aria-label="Content filters">
      <GrButton
        v-for="filter in filters"
        :key="filter.value"
        size="sm"
        :variant="currentFilter === filter.value ? 'primary' : 'outline'"
        @click="currentFilter = filter.value"
      >
        {{ filter.label }}
      </GrButton>
    </GrButtonGroup>

    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      <GrCard
        v-for="filter in filters"
        :key="filter.value"
        class="flex items-center justify-between gap-3 p-4"
      >
        <div>
          <div class="text-sm font-600 text-[var(--gr-fg)]">
            {{ filter.label }}
          </div>
          <div class="text-xs text-[var(--gr-muted-fg)]">
            Queue segment
          </div>
        </div>

        <GrBadge :tone="currentFilter === filter.value ? 'primary' : 'neutral'">
          {{ filter.count }}
        </GrBadge>
      </GrCard>
    </div>
  </div>
</template>