GrList

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

import { GrBadge, GrList, GrListItem } from '@feugene/granularity'

const lastAction = ref('—')

const sections = [
  { id: 'profile', title: 'Профиль', description: 'Имя, аватар, контакты', badge: 'Готово' },
  { id: 'billing', title: 'Оплата', description: 'Карта и счета', badge: '2 счёта' },
  { id: 'audit', title: 'Журнал доступа', description: 'Архивный раздел', disabled: true },
]
</script>

<template>
  <div class="grid gap-3">
    <GrList>
      <!-- Кликабельная строка — сам пункт: обёртка вокруг него рвала бы связку
           role="list" с role="listitem". -->
      <GrListItem
        v-for="section in sections"
        :key="section.id"
        :title="section.title"
        :description="section.description"
        :clickable="!section.disabled"
        :disabled="section.disabled"
        @click="lastAction = section.title"
      >
        <GrBadge v-if="section.badge" size="sm" tone="neutral">
          {{ section.badge }}
        </GrBadge>
      </GrListItem>
    </GrList>

    <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)]">{{ lastAction }}</span>.
      Строки достижимы `Tab`, отключённая — нет.
    </div>
  </div>
</template>

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

import { GrList, GrListItem, GrSwitch } from '@feugene/granularity'

const settings = reactive({
  alerts: true,
  summaries: false,
  approvals: true,
})
</script>

<template>
  <!-- Заголовок пункта переключателю не принадлежит: он живёт рядом, а не в его
       разметке. Без aria-label скринридер объявит просто «переключатель». -->
  <GrList>
    <GrListItem title="Realtime alerts" description="Push incidents to the operations inbox.">
      <GrSwitch v-model="settings.alerts" aria-label="Realtime alerts" />
    </GrListItem>
    <GrListItem title="Weekly summaries" description="Send a digest to workspace owners every Monday.">
      <GrSwitch v-model="settings.summaries" aria-label="Weekly summaries" />
    </GrListItem>
    <GrListItem title="Approval reminders" description="Remind approvers about stale payout requests.">
      <GrSwitch v-model="settings.approvals" aria-label="Approval reminders" />
    </GrListItem>
  </GrList>
</template>

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

const jobs = [
  { title: 'Publish release notes', description: 'Ready for review by marketing', status: 'Ready' },
  { title: 'Re-sync bank accounts', description: 'Waiting for background worker', status: 'Queued' },
  { title: 'Archive invoices', description: 'Needs manual confirmation', status: 'Review' },
]
</script>

<template>
  <GrList>
    <GrListItem
      v-for="job in jobs"
      :key="job.title"
      :title="job.title"
      :description="job.description"
    >
      <div class="flex items-center gap-2">
        <GrBadge size="sm" tone="success">
          {{ job.status }}
        </GrBadge>
        <GrButton size="sm" variant="outline">
          Open
        </GrButton>
      </div>
    </GrListItem>
  </GrList>
</template>

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

import { GrButton, GrList, GrListItem, GrSegmented } from '@feugene/granularity'

type Mode = 'items' | 'empty' | 'loading'

const mode = ref<Mode>('items')

const presets = computed(() => (mode.value === 'items'
  ? [
      { id: 'retention', title: 'Retention policy', description: 'Archive old reports after 90 days.' },
      { id: 'export', title: 'Export history', description: 'Keep downloadable exports for 30 days.' },
    ]
  : []))
</script>

<template>
  <div class="grid gap-3">
    <GrSegmented
      v-model="mode"
      size="sm"
      :options="[
        { value: 'items', label: 'Пункты' },
        { value: 'empty', label: 'Пусто' },
        { value: 'loading', label: 'Загрузка' },
      ]"
    />

    <!-- Ни `v-if` вокруг списка, ни ручного переключения `divided`: пустоту
         список видит по слоту сам. -->
    <GrList :loading="mode === 'loading'">
      <GrListItem
        v-for="preset in presets"
        :key="preset.id"
        :title="preset.title"
        :description="preset.description"
      />

      <template #empty>
        <div class="grid justify-items-center gap-2">
          <span>Ни одного архивного пресета</span>
          <GrButton size="sm" @click="mode = 'items'">
            Показать примеры
          </GrButton>
        </div>
      </template>
    </GrList>
  </div>
</template>

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

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

type Build = { id: number, title: string, description: string, status: string }

const builds: Build[] = Array.from({ length: 5000 }, (_, index) => ({
  id: index + 1,
  title: `Сборка #${index + 1}`,
  description: `Ветка feature/${1000 + index} · 2 мин 14 с`,
  status: index % 7 === 0 ? 'Упала' : 'Успешно',
}))

const list = ref<{ scrollToIndex: (index: number, align?: 'auto' | 'start' | 'center' | 'end') => void } | null>(null)
</script>

<template>
  <div class="grid gap-3">
    <GrButton size="sm" variant="outline" @click="list?.scrollToIndex(2499, 'start')">
      Показать сборку #2500
    </GrButton>

    <!-- `aria` из слота обязателен: в DOM живёт окно, и без setsize/posinset
         диктор объявил бы «12 из 12» вместо «1 из 5000». -->
    <GrList
      ref="list"
      :items="builds"
      item-key="id"
      virtual
      :max-height="320"
    >
      <template #item="{ item, aria }">
        <GrListItem v-bind="aria" :title="item.title" :description="item.description">
          <GrBadge size="sm" :tone="item.status === 'Успешно' ? 'success' : 'danger'">
            {{ item.status }}
          </GrBadge>
        </GrListItem>
      </template>
    </GrList>
  </div>
</template>