GrChipGroup

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

import { GrCard, GrChip, GrChipGroup } from '@feugene/granularity'

const statuses = [
  { value: 'open', label: 'Открытые' },
  { value: 'review', label: 'На ревью' },
  { value: 'blocked', label: 'Заблокированные' },
  { value: 'done', label: 'Готовые' },
]

const selected = ref<string[]>(['open', 'review'])

const summary = computed(() => (selected.value.length
  ? statuses.filter(status => selected.value.includes(status.value)).map(s => s.label).join(', ')
  : 'любой статус'))
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
    <GrChipGroup v-model="selected" aria-label="Статус задачи">
      <GrChip
        v-for="status in statuses"
        :key="status.value"
        :value="status.value"
        :label="status.label"
        tone="primary"
      />
    </GrChipGroup>

    <GrCard class="p-4 text-sm text-[var(--gr-muted-fg)]">
      Показываем: <span class="font-semibold text-[var(--gr-fg)]">{{ summary }}</span>
    </GrCard>
  </div>
</template>

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

import { GrCard, GrChip, GrChipGroup } from '@feugene/granularity'

const periods = [
  { value: 'day', label: 'День' },
  { value: 'week', label: 'Неделя' },
  { value: 'month', label: 'Месяц' },
  { value: 'quarter', label: 'Квартал' },
]

// Повторное нажатие на выбранный чип сбрасывает период в «любой».
const period = ref<string | null>('week')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
    <GrChipGroup v-model="period" selection="single" tone="info" aria-label="Период отчёта">
      <GrChip
        v-for="item in periods"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </GrChipGroup>

    <GrCard class="p-4 text-sm text-[var(--gr-muted-fg)]">
      Период: <span class="font-semibold text-[var(--gr-fg)]">{{ period ?? 'весь' }}</span>
    </GrCard>
  </div>
</template>

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

import type { GrChipValue } from '@feugene/granularity'
import { GrChip, GrChipGroup } from '@feugene/granularity'

// Метки можно и выбирать, и снимать: выбор ведёт группа, состав — приложение.
const labels = ref(['срочно', 'бэкенд', 'регресс', 'релиз 0.25'])
const active = ref<string[]>(['срочно'])

function drop(value: GrChipValue): void {
  const label = String(value)
  labels.value = labels.value.filter(item => item !== label)
  active.value = active.value.filter(item => item !== label)
}
</script>

<template>
  <div class="grid gap-3">
    <GrChipGroup v-model="active" closable aria-label="Метки записи" @remove="drop">
      <GrChip
        v-for="label in labels"
        :key="label"
        :value="label"
        :label="label"
        tone="warning"
      />
    </GrChipGroup>

    <p class="text-sm text-[var(--gr-muted-fg)]">
      Стрелки водят фокус по набору, Delete снимает метку под фокусом.
    </p>
  </div>
</template>