Stepper ​

<script setup lang="ts">
// A setup wizard: finished steps are clickable, and a step can be skipped.
import { computed, ref } from 'vue'
import { Button } from 'frappe-ui'
import { Stepper } from '..'
import type { StepItem } from '..'

const steps = ref<StepItem[]>([
  {
    value: 'account',
    label: 'Account',
    description: 'Name, email and password',
  },
  {
    value: 'workspace',
    label: 'Workspace',
    description: 'Company name and URL',
  },
  { value: 'invite', label: 'Invite team', description: 'Add people by email' },
  {
    value: 'import',
    label: 'Import data',
    description: 'Bring in leads from a CSV',
  },
  {
    value: 'review',
    label: 'Review',
    description: 'Check everything and finish',
  },
])

const current = ref<string | number>('invite')
const index = computed(() =>
  steps.value.findIndex((s) => s.value === current.value),
)
const isLast = computed(() => index.value === steps.value.length - 1)

function next(skip = false) {
  steps.value[index.value].skipped = skip
  if (!isLast.value) current.value = steps.value[index.value + 1].value
}
</script>

<template>
  <div class="flex w-full max-w-lg gap-8">
    <div class="w-56 shrink-0">
      <Stepper v-model="current" :steps="steps" vertical clickable />
    </div>
    <div class="flex flex-1 flex-col justify-between gap-4">
      <p class="text-p-base text-ink-gray-7">{{ steps[index].description }}.</p>
      <div class="flex justify-end gap-2">
        <Button v-if="!isLast" variant="ghost" @click="next(true)">Skip</Button>
        <Button variant="solid" :disabled="isLast" @click="next()"
          >Continue</Button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// The default vertical list with nothing extra: numbers and labels.
import { Stepper } from '..'

const steps = [
  { value: 'account', label: 'Account' },
  { value: 'workspace', label: 'Workspace' },
  { value: 'invite', label: 'Invite team' },
  { value: 'import', label: 'Import data' },
  { value: 'review', label: 'Review' },
]
</script>

<template>
  <div class="w-56">
    <Stepper :steps="steps" model-value="invite" vertical />
  </div>
</template>

<script setup lang="ts">
// A long-running job whose third stage has parts: the one nested example.
import { onBeforeUnmount, ref } from 'vue'
import { Button } from 'frappe-ui'
import { Stepper } from '..'
import type { StepItem } from '..'

const steps: StepItem[] = [
  { value: 'plan', label: 'Resolution planning' },
  { value: 'scope', label: 'Scope alignment' },
  {
    value: 'implement',
    label: 'Implementation',
    children: [
      { value: 'configure', label: 'Configure solution' },
      { value: 'connect', label: 'Connect systems' },
      { value: 'apply', label: 'Apply changes' },
      { value: 'run', label: 'Run workflow' },
      { value: 'output', label: 'Prepare output' },
    ],
  },
  { value: 'verify', label: 'Outcome verification' },
  { value: 'summary', label: 'Final summary' },
]

const order = steps.flatMap((s) => s.children ?? [s]).map((s) => s.value)
const current = ref<string | number>('apply')
const completed = ref(false)
const failed = ref(false)
let timer: ReturnType<typeof setInterval> | undefined

function advance() {
  const i = order.indexOf(current.value)
  if (i < order.length - 1) current.value = order[i + 1]
  else completed.value = true
}

function run() {
  clearInterval(timer)
  current.value = order[0]
  completed.value = false
  failed.value = false
  timer = setInterval(
    () => (completed.value ? clearInterval(timer) : advance()),
    900,
  )
}

onBeforeUnmount(() => clearInterval(timer))
</script>

<template>
  <div class="flex flex-col items-center gap-6">
    <div class="w-72">
      <Stepper
        v-model="current"
        :steps="steps"
        :completed="completed"
        :failed="failed"
        :loading="!completed && !failed"
        vertical
        edge="end"
      />
    </div>
    <div class="flex gap-2">
      <Button @click="run">Run again</Button>
      <Button :disabled="completed" @click="failed = !failed">
        {{ failed ? 'Retry' : 'Fail this step' }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
// The small size for a sidebar or run log, with each step's duration.
import { Stepper } from '..'

const steps = [
  { value: 'fetch', label: 'Fetch sources', meta: '0:42' },
  { value: 'install', label: 'Install dependencies', meta: '1:08' },
  { value: 'build', label: 'Build assets', meta: '0:31' },
  { value: 'migrate', label: 'Migrate database' },
  { value: 'deploy', label: 'Deploy' },
]
</script>

<template>
  <div class="w-64">
    <Stepper :steps="steps" model-value="build" size="sm" vertical loading />
  </div>
</template>

<script setup lang="ts">
// The horizontal default: the stock Progress with one interval per step.
import { Stepper } from '..'

const steps = [
  { value: 'account', label: 'Account' },
  { value: 'workspace', label: 'Workspace' },
  { value: 'invite', label: 'Invite team', skipped: true },
  { value: 'import', label: 'Import data' },
  { value: 'review', label: 'Review' },
]
</script>

<template>
  <div class="w-full max-w-2xl">
    <Stepper :steps="steps" model-value="import" />
  </div>
</template>