GrSteps

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

import { GrButton, GrCard, GrForm, GrFormField, GrInput, GrSteps } from '@feugene/granularity'
import type { GrStep } from '@feugene/granularity'

// Мастер оформления: шаг не отпускает, пока его поля не сойдутся.
const steps = ref<GrStep[]>([
  { value: 'contacts', label: 'Контакты', description: 'Куда писать' },
  { value: 'delivery', label: 'Доставка', description: 'Адрес и срок' },
  { value: 'done', label: 'Готово' },
])

const step = ref('contacts')
const model = ref({ email: '', address: '' })

const rules = {
  email: [{ required: true, message: 'Укажите почту' }, { type: 'email' as const, message: 'Похоже на опечатку' }],
  address: [{ required: true, message: 'Укажите адрес' }],
}

const formRef = useTemplateRef('formRef')
const stepsRef = useTemplateRef('stepsRef')

const fieldsByStep: Record<string, string[]> = {
  contacts: ['email'],
  delivery: ['address'],
  done: [],
}

const isLast = computed(() => step.value === 'done')

/**
 * Гейт перехода. `GrSteps` про форму ничего не знает — проверку ставит
 * приложение, а назад пускает всегда: правка заполненного не должна упираться
 * в валидацию.
 */
async function beforeLeave(from: string, to: string): Promise<boolean> {
  const order = steps.value.map(item => item.value)
  if (order.indexOf(to) < order.indexOf(from))
    return true

  const names = fieldsByStep[from] ?? []
  const results = await Promise.all(names.map(name => formRef.value!.validateField(name)))
  const passed = results.every(Boolean)

  // Шаг с ошибкой помечается явно: вывести это из позиции неоткуда.
  steps.value = steps.value.map(item => (item.value === from
    ? { ...item, status: passed ? ('complete' as const) : ('error' as const) }
    : item))

  return passed
}
</script>

<template>
  <GrCard class="grid gap-5 p-5">
    <GrSteps ref="stepsRef" v-model="step" :steps="steps" :before-leave="beforeLeave" />

    <GrForm ref="formRef" :model="model" :rules="rules">
      <GrFormField v-if="step === 'contacts'" name="email" label="Почта">
        <GrInput v-model="model.email" name="email" type="email" placeholder="you@example.com" />
      </GrFormField>

      <GrFormField v-else-if="step === 'delivery'" name="address" label="Адрес">
        <GrInput v-model="model.address" name="address" placeholder="Город, улица, дом" />
      </GrFormField>

      <p v-else class="text-sm text-[var(--gr-muted-fg)]">
        Заказ готов к отправке: {{ model.email }}, {{ model.address }}.
      </p>
    </GrForm>

    <div class="flex justify-end gap-2">
      <GrButton variant="outline" @click="stepsRef?.back()">
        Назад
      </GrButton>
      <GrButton :disabled="isLast" @click="stepsRef?.next()">
        Далее
      </GrButton>
    </div>
  </GrCard>
</template>

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

import { GrSteps } from '@feugene/granularity'
import type { GrStep } from '@feugene/granularity'

const steps: GrStep[] = [
  { value: 'upload', label: 'Загрузка', description: 'CSV или XLSX' },
  { value: 'map', label: 'Сопоставление', description: 'Колонки к полям' },
  { value: 'preview', label: 'Предпросмотр', status: 'error' },
  { value: 'run', label: 'Запуск' },
]

const current = ref('map')
</script>

<template>
  <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_240px]">
    <GrSteps v-model="current" :steps="steps" aria-label="Импорт данных" />

    <GrSteps
      v-model="current"
      :steps="steps"
      orientation="vertical"
      aria-label="Импорт данных, вертикально"
    />
  </div>
</template>

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

import { GrButton, GrCard, GrSteps } from '@feugene/granularity'
import type { GrStep } from '@feugene/granularity'

// Семь этапов не помещаются в боковую колонку: там лента вырождается в подпись
// с полосой, а не в скроллер, из которого половина шагов не видна.
const steps: GrStep[] = [
  { value: 'a', label: 'Организация' },
  { value: 'b', label: 'Реквизиты' },
  { value: 'c', label: 'Сотрудники' },
  { value: 'd', label: 'Роли' },
  { value: 'e', label: 'Интеграции' },
  { value: 'f', label: 'Уведомления' },
  { value: 'g', label: 'Проверка' },
]

const current = ref('c')
const stepsRef = ref<InstanceType<typeof GrSteps> | null>(null)
</script>

<template>
  <GrCard class="grid max-w-xs gap-4 p-4">
    <GrSteps ref="stepsRef" v-model="current" :steps="steps" variant="compact" />

    <div class="flex gap-2">
      <GrButton size="sm" variant="outline" @click="stepsRef?.back()">
        Назад
      </GrButton>
      <GrButton size="sm" @click="stepsRef?.next()">
        Далее
      </GrButton>
    </div>
  </GrCard>
</template>