GrSortableList

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

import { GrBadge, GrSortableList } from '@feugene/granularity'

type Step = { id: string, title: string, owner: string }

const steps = ref<Step[]>([
  { id: 'brief', title: 'Бриф и требования', owner: 'Продукт' },
  { id: 'design', title: 'Макет', owner: 'Дизайн' },
  { id: 'build', title: 'Сборка', owner: 'Разработка' },
  { id: 'review', title: 'Ревью и приёмка', owner: 'QA' },
])
</script>

<template>
  <div class="grid gap-4">
    <GrSortableList v-model="steps" item-key="id">
      <template #item="{ item, index }">
        <div class="flex items-center justify-between gap-3">
          <span>
            <GrBadge tone="neutral">{{ index + 1 }}</GrBadge>
            {{ item.title }}
          </span>
          <span class="text-sm text-[var(--gr-muted-fg)]">{{ item.owner }}</span>
        </div>
      </template>
    </GrSortableList>

    <p class="text-sm text-[var(--gr-muted-fg)]">
      Порядок:
      <code>{{ steps.map(step => step.id).join(', ') }}</code>
      — тяните за ручку или доведите фокус до строки и нажмите Space, стрелки, Space.
    </p>
  </div>
</template>

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

import { GrSortableList } from '@feugene/granularity'

type Field = { id: string, title: string }

const fields = ref<Field[]>(Array.from({ length: 14 }, (_, index) => ({
  id: `field-${index + 1}`,
  title: `Поле отчёта № ${index + 1}`,
})))

const lastMove = ref<string>('—')
</script>

<template>
  <div class="grid gap-4">
    <GrSortableList
      v-model="fields"
      item-key="id"
      :max-height="220"
      @move="(from, to) => (lastMove = `${from} на ${to}`)"
    >
      <template #item="{ item }">
        {{ item.title }}
      </template>
    </GrSortableList>

    <p class="text-sm text-[var(--gr-muted-fg)]">
      Последняя перестановка: <code>{{ lastMove }}</code>. У верхнего и нижнего края список
      прокручивается сам, пока держите строку.
    </p>
  </div>
</template>

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

import { GrSortableList } from '@feugene/granularity'

type Column = { id: string, title: string }

const columns = ref<Column[]>([
  { id: 'name', title: 'Название' },
  { id: 'status', title: 'Статус' },
  { id: 'owner', title: 'Ответственный' },
  { id: 'due', title: 'Срок' },
])

const locked = ref(false)
</script>

<template>
  <div class="grid gap-4">
    <label class="flex items-center gap-2 text-sm">
      <input v-model="locked" type="checkbox">
      Запретить перестановку
    </label>

    <GrSortableList
      v-model="columns"
      item-key="id"
      orientation="horizontal"
      :divided="false"
      :disabled="locked"
      aria-label="Порядок колонок"
    >
      <template #item="{ item }">
        {{ item.title }}
      </template>
    </GrSortableList>

    <p class="text-sm text-[var(--gr-muted-fg)]">
      В горизонтальном списке ось клавиатуры тоже горизонтальная: взять — Space, двигать — стрелками влево и вправо.
    </p>
  </div>
</template>