GrCard

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

import { GrButton, GrCard, GrDropdownMenu, GrDropdownMenuItem } from '@feugene/granularity'

const lastAction = ref('—')
</script>

<template>
  <!--
    Заголовок остаётся заголовком карточки — настоящим `h3` со своим уровнем и
    отступами, — а кнопка живёт в `#actions` справа от него. До этого слота
    карточке с действием приходилось забирать `#header` целиком и переписывать
    заголовок вручную.
  -->
  <GrCard title="Продажи за неделю" description="Обновлено 5 минут назад" :heading-level="3" padding="md">
    <template #actions>
      <GrButton size="xs" variant="ghost" @click="lastAction = 'Обновить'">
        Обновить
      </GrButton>

      <GrDropdownMenu placement="bottom-end">
        <template #trigger="{ triggerProps }">
          <GrButton v-bind="triggerProps" size="xs" variant="ghost" square aria-label="Ещё">
            ⋯
          </GrButton>
        </template>

        <GrDropdownMenuItem @click="lastAction = 'Экспорт'">
          Экспорт в CSV
        </GrDropdownMenuItem>
        <GrDropdownMenuItem @click="lastAction = 'Настройки'">
          Настроить период
        </GrDropdownMenuItem>
      </GrDropdownMenu>
    </template>

    <p class="text-sm text-[var(--gr-muted-fg)]">
      Последнее действие: <strong>{{ lastAction }}</strong>
    </p>
  </GrCard>
</template>

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

import { GrCard } from '@feugene/granularity'

const opened = ref('—')
</script>

<template>
  <div class="grid gap-4">
    <div class="grid gap-3 md:grid-cols-3">
      <GrCard padding="md" body-class="grid gap-1">
        <div class="text-sm font-semibold text-[var(--gr-fg)]">
          elevated
        </div>
        <div class="text-sm text-[var(--gr-muted-fg)]">
          Рамка, фон и тень — вид по умолчанию.
        </div>
      </GrCard>

      <GrCard padding="md" variant="outlined" body-class="grid gap-1">
        <div class="text-sm font-semibold text-[var(--gr-fg)]">
          outlined
        </div>
        <div class="text-sm text-[var(--gr-muted-fg)]">
          Без тени: плотные сетки не рябят.
        </div>
      </GrCard>

      <GrCard padding="md" variant="ghost" body-class="grid gap-1">
        <div class="text-sm font-semibold text-[var(--gr-fg)]">
          ghost
        </div>
        <div class="text-sm text-[var(--gr-muted-fg)]">
          Без рамки: карточка внутри карточки.
        </div>
      </GrCard>
    </div>

    <!-- Внутри кликабельной карточки не должно быть кнопок и ссылок:
         интерактив внутри интерактива ломает и клавиатуру, и скринридер. -->
    <GrCard clickable padding="md" body-class="grid gap-1" @click="opened = 'Отчёт за июль'">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Отчёт за июль
      </div>
      <div class="text-sm text-[var(--gr-muted-fg)]">
        Вся поверхность кликабельна и достижима `Tab`.
      </div>
    </GrCard>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      Открыто: <span class="font-semibold text-[var(--gr-fg)]">{{ opened }}</span>
    </div>
  </div>
</template>

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

<template>
  <!-- Отступ и раскладка тела — пропами карточки, а не `class` снаружи. -->
  <GrCard padding="md" body-class="grid gap-4">
    <div>
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Basic card
      </div>
      <div class="mt-1 text-sm text-[var(--gr-muted-fg)]">
        Карточка задаёт поверхность и отступы сама — потребителю остаётся содержимое.
      </div>
    </div>

    <div class="flex flex-wrap gap-2">
      <GrButton size="sm">
        Primary action
      </GrButton>
      <GrButton size="sm" variant="outline">
        Secondary
      </GrButton>
    </div>
  </GrCard>
</template>

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

const metrics = [
  { id: 'budget', label: 'Error budget', value: '98.4%', tone: 'success', badge: 'Healthy' },
  { id: 'reviews', label: 'Pending reviews', value: '7', tone: 'warning', badge: 'Attention' },
  { id: 'pipelines', label: 'Blocked pipelines', value: '2', tone: 'danger', badge: 'Escalate' },
] as const
</script>

<template>
  <div class="grid gap-4 md:grid-cols-3">
    <GrCard
      v-for="metric in metrics"
      :key="metric.id"
      padding="sm"
      variant="outlined"
      body-class="grid gap-2"
    >
      <div class="text-sm text-[var(--gr-muted-fg)]">
        {{ metric.label }}
      </div>
      <div class="text-2xl font-semibold text-[var(--gr-fg)]">
        {{ metric.value }}
      </div>
      <GrBadge size="sm" :tone="metric.tone" radius="semi">
        {{ metric.badge }}
      </GrBadge>
    </GrCard>
  </div>
</template>

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

const items = [
  { label: 'Gross', value: '$26,100' },
  { label: 'Refunds', value: '$1,355' },
  { label: 'Net', value: '$24,745' },
]
</script>

<template>
  <div class="grid gap-4">
    <!--
      `title` печатается настоящим `h2`…`h6`, а не жирной строкой: отчёт из
      нескольких карточек иначе нечем обойти по структуре — после `h1` страницы
      заголовков в нём нет.
    -->
    <GrCard
      title="Revenue by channel"
      description="August 2026, excluding refunds"
      :heading-level="3"
      variant="outlined"
      padding="md"
    >
      <GrDescriptionList :items="items" label-width="7rem" />
    </GrCard>

    <!--
      Типовая карточка отчёта: `padding` оставлен дефолтным, чтобы содержимое
      шло край в край, — и шапка всё равно с отступом. Она принадлежит самой
      карточке, а не содержимому, и прижатой к рамке быть не должна.
    -->
    <GrCard title="Documents" variant="outlined">
      <GrDescriptionList :items="items" layout="flow" class="px-4 py-3" />
    </GrCard>

    <!-- `#header` сильнее пропов: нестандартная шапка остаётся за потребителем. -->
    <GrCard variant="outlined" padding="md">
      <template #header>
        <div class="flex items-center justify-between gap-2">
          <h3 class="m-0 text-[length:var(--gr-text-sm)] font-600">
            Custom header
          </h3>
          <span class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">updated 2 min ago</span>
        </div>
      </template>

      Слот занят — `title` и `description` не рендерятся вовсе.
    </GrCard>
  </div>
</template>

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

<template>
  <GrCard padding="md" body-class="grid gap-2">
    <template #header>
      <div class="flex flex-wrap items-center gap-2">
        <h3 class="m-0 text-sm font-semibold text-[var(--gr-fg)]">
          Release checklist
        </h3>
        <GrBadge size="sm" tone="info" radius="semi">
          2 blockers
        </GrBadge>
      </div>
    </template>

    <div class="text-sm text-[var(--gr-muted-fg)]">
      Шапка и подвал — слоты карточки: разделители и отступы она расставляет сама.
    </div>

    <template #footer>
      <div class="flex flex-wrap justify-end gap-2">
        <GrButton size="sm" variant="outline">
          Open runbook
        </GrButton>
        <GrButton size="sm">
          Resolve blockers
        </GrButton>
      </div>
    </template>
  </GrCard>
</template>