Stepper

<script setup lang="ts">
const items = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide-house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide-truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
  },
]
</script>

<template>
  <NStepper :items />
</template>

<script setup lang="ts">
const items = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide-house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide-truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
    icon: 'i-lucide-check',
  },
]

const options = [
  { label: 'Horizontal', value: 'horizontal' as const },
  { label: 'Vertical', value: 'vertical' as const },
]

const radioValue = ref<'horizontal' | 'vertical'>('vertical')
</script>

<template>
  <div class="flex flex-col flex-wrap gap-8">
    <NRadioGroup
      v-model="radioValue"
      :items="options"
    />
    <NStepper
      :items="items"
      :orientation="radioValue"
    />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide-house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide-truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
    icon: 'i-lucide-check',
  },
]
</script>

<template>
  <div class="flex flex-col gap-6">
    <NStepper :items stepper="solid-black" />

    <NStepper :items stepper="solid-indigo" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    title: 'Address',
    icon: 'i-lucide-house',
  },
  {
    title: 'Shipping',
    icon: 'i-lucide-truck',
  },
  {
    title: 'Checkout',
  },
]
</script>

<template>
  <NStepper :items size="xl" />
</template>

<script setup lang="ts">
const items = [
  {
    title: 'Your details',
    description: 'Provide your name and email',
  },
  {
    title: 'Company details',
    description: 'A few details about your company',
  },
  {
    title: 'Invite your team',
    description: 'Start collaborating with your team',
  },
]

const stepper = useTemplateRef('stepper')
</script>

<template>
  <NStepper ref="stepper" :items="items">
    <template #content="{ item }">
      <NAspectRatio
        :ratio="16 / 4"
        class="mx-auto max-w-2xl"
      >
        <div class="h-full flex flex-col items-center justify-center p-2 sm:p-4">
          <p>{{ item.title }}</p>
        </div>
      </NAspectRatio>
    </template>
  </NStepper>
  <div class="mx-auto mt-4 max-w-2xl flex justify-between gap-2">
    <NButton label="prev" leading="i-lucide-arrow-left" @click="stepper?.prevStep()" />
    <NButton label="next" trailing="i-lucide-arrow-right" @click="stepper?.nextStep()" />
  </div>
</template>

<script setup lang="ts">
import type { NStepperItemProps } from '@una-ui/nuxt/runtime/types/stepper.js'

const items: Partial<NStepperItemProps>[] = [
  {
    title: 'Address',
    description: 'Add your address here',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
  },
]
</script>

<template>
  <NStepper>
    <NStepperWrapper>
      <NStepperItem v-for="(item, idx) in items" :key="idx" :step="idx">
        <NStepperContainer>
          <NStepperTrigger>
            <NStepperIndicator>
              <NIcon v-if="item.icon" :name="item.icon" />
              <template v-else>
                {{ idx + 1 }}
              </template>
            </NStepperIndicator>
          </NStepperTrigger>
          <NStepperSeparator v-if="items && idx < items.length - 1" />
        </NStepperContainer>
        <NStepperHeader>
          <NStepperTitle>{{ item.title }}</NStepperTitle>
          <NStepperDescription>{{ item.description }}</NStepperDescription>
        </NStepperHeader>
      </NStepperItem>
    </NStepperWrapper>
  </NStepper>
</template>

<script lang="ts" setup generic="T extends Partial<NStepperItemProps>">
import type { ComputedRef } from 'vue'
import type { NStepperEmits, NStepperItemProps, NStepperProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperRoot, useForwardPropsEmits } from 'reka-ui'
import { computed, useTemplateRef } from 'vue'
import { cn } from '../../utils'
import Icon from '../elements/Icon.vue'
import StepperContainer from './StepperContainer.vue'
import StepperDescription from './StepperDescription.vue'
import StepperHeader from './StepperHeader.vue'
import StepperIndicator from './StepperIndicator.vue'
import StepperItem from './StepperItem.vue'
import StepperSeparator from './StepperSeparator.vue'
import StepperTitle from './StepperTitle.vue'
import StepperTrigger from './StepperTrigger.vue'
import StepperWrapper from './StepperWrapper.vue'

const props = withDefaults(defineProps<NStepperProps<T>>(), {
  orientation: 'horizontal',
  stepper: 'solid-primary',
})
const emits = defineEmits<NStepperEmits<T>>()

const modelValue = defineModel<string | number>()

const delegatedProps = reactiveOmit(props, [
  'class',
  'una',
])
const forwarded = useForwardPropsEmits(delegatedProps, emits)

const stepper = useTemplateRef<InstanceType<typeof StepperRoot>>('stepper')

const currentStepIndex = computed({
  get() {
    const value = modelValue.value ?? props.defaultValue
    return ((typeof value === 'string')
      ? props.items?.findIndex(item => item.value === value)
      : value) ?? 0
  },
  set(value) {
    modelValue.value = props.items?.[value]?.value ?? value
  },
})
const currentStep = computed(() => props.items?.[currentStepIndex.value]) as ComputedRef<T>
const isEveryItemHasStep = computed(() => props.items?.every(item => item.step))

const hasNextStep = computed(() => currentStepIndex.value < props.items!.length - 1)
const hasPrevStep = computed(() => currentStepIndex.value > 0)

defineExpose({
  goToStep: (step: number) => {
    currentStepIndex.value = step
    stepper.value?.goToStep(step)
  },
  nextStep: () => {
    if (!hasNextStep.value)
      return
    currentStepIndex.value += 1
    stepper.value?.nextStep()
    emits('next', currentStep.value)
  },
  prevStep: () => {
    if (!hasPrevStep.value)
      return
    currentStepIndex.value -= 1
    stepper.value?.prevStep()
    emits('prev', currentStep.value)
  },
  hasNext: () => stepper.value?.hasNext(),
  hasPrev: () => stepper.value?.hasPrev(),
})
</script>

<template>
  <StepperRoot
    ref="stepper"
    v-slot="slotProps"
    v-bind="forwarded"
    v-model="currentStepIndex"
    :class="cn(
      'stepper',
      orientation === 'horizontal' && 'stepper-horizontal',
      props.class,
    )"
    :una
  >
    <slot v-bind="slotProps">
      <StepperWrapper :una v-bind="props._stepperWrapper" :orientation>
        <slot name="wrapper" :items>
          <StepperItem
            v-for="(item, idx) in items"
            :key="isEveryItemHasStep ? item.step : idx"
            :step="isEveryItemHasStep ? item.step! : idx"
            :disabled="item.disabled ?? props.disabled"
            :una
            v-bind="props._stepperItem"
            :orientation
          >
            <slot name="item" :item="item" :step="isEveryItemHasStep ? item.step! : idx">
              <StepperContainer :orientation :una v-bind="props._stepperContainer">
                <StepperTrigger v-bind="props._stepperTrigger" :una :stepper="props.stepper" :size="size ?? item.size">
                  <slot name="trigger" :item="item">
                    <StepperIndicator
                      v-slot="{ step }"
                      v-bind="props._stepperIndicator"
                      :una
                      :size="size ?? item.size"
                      :stepper="props.stepper"
                    >
                      <slot name="indicator" :item :step>
                        <Icon v-if="item.icon" :name="item.icon" :size="size ?? item.size" />
                        <template v-else>
                          {{ idx + 1 }}
                        </template>
                      </slot>
                    </StepperIndicator>
                  </slot>
                </StepperTrigger>
                <StepperSeparator
                  v-if="items && idx < items.length - 1"
                  v-bind="props._stepperSeparator"
                  :una
                  :stepper="props.stepper"
                  :orientation
                />
              </StepperContainer>
              <StepperHeader :una v-bind="props._stepperHeader" :orientation>
                <slot name="header" :item="item">
                  <StepperTitle v-if="item.title" :una v-bind="props._stepperTitle" :size="size ?? item.size">
                    <slot name="title" :item="item">
                      {{ item.title }}
                    </slot>
                  </StepperTitle>
                  <StepperDescription v-if="item.description" :una v-bind="props._stepperDescription" :size="size ?? item.size">
                    <slot name="description" :item="item">
                      {{ item.description }}
                    </slot>
                  </StepperDescription>
                </slot>
              </StepperHeader>
            </slot>
          </StepperItem>
        </slot>
      </StepperWrapper>
      <slot
        v-if="!!$slots.content || currentStep?.slot"
        :name="currentStep?.slot ?? 'content'"
        :item="currentStep"
      />
    </slot>
  </StepperRoot>
</template>

<script setup lang="ts">
import type { NStepperContainerProps } from '../../types'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperContainerProps>(), {
  orientation: 'horizontal',
})
</script>

<template>
  <div
    :class="cn(
      'stepper-container',
      orientation === 'horizontal' && 'stepper-container-horizontal',
      props.class,
      props.una?.stepperContainer,
    )"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import type { NStepperDescriptionProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperDescription, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = defineProps<NStepperDescriptionProps>()

const delegatedProps = reactiveOmit(props, 'class', 'una')
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperDescription
    v-slot="slotProps"
    v-bind="forwarded"
    :class="cn(
      'stepper-description',
      props.class,
      props.una?.stepperDescription,
    )"
  >
    <slot v-bind="slotProps" />
  </StepperDescription>
</template>

<script setup lang="ts">
import type { NStepperHeaderProps } from '../../types'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperHeaderProps>(), {
  orientation: 'horizontal',
})
</script>

<template>
  <div
    :class="cn(
      'stepper-header',
      orientation === 'horizontal' && 'stepper-header-horizontal',
      props.class,
      props.una?.stepperHeader,
    )"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import type { NStepperIndicatorProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperIndicator, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperIndicatorProps>(), {
  stepper: 'solid-primary',
})

const delegatedProps = reactiveOmit(props, [
  'class',
  'una',
  'stepper',
])

const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperIndicator
    v-slot="slotProps"
    v-bind="forwarded"
    :class="cn(
      'stepper-indicator',
      props.class,
      props.una?.stepperIndicator,
    )"
    :stepper
  >
    <slot v-bind="slotProps" />
  </StepperIndicator>
</template>

<script lang="ts" setup>
import type { NStepperItemProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperItem, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperItemProps>(), {
  orientation: 'horizontal',
})

const delegatedProps = reactiveOmit(props, [
  'class',
  'una',
  'title',
  'description',
  'slot',
])
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperItem
    v-slot="slotProps"
    v-bind="forwarded"
    :class="cn(
      'group stepper-item',
      orientation === 'vertical' && 'stepper-item-vertical',
      props.class,
      props.una?.stepperItem,
    )"
  >
    <slot v-bind="slotProps" />
  </StepperItem>
</template>

<script lang="ts" setup>
import type { NStepperSeparatorProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperSeparator, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperSeparatorProps>(), {
  stepper: 'solid-primary',
  orientation: 'horizontal',
})

const delegatedProps = reactiveOmit(props, 'class', 'una')
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperSeparator
    v-bind="forwarded"
    :class="cn(
      'stepper-separator',
      orientation === 'vertical' ? 'stepper-separator-vertical' : 'stepper-separator-horizontal',
      props.class,
      props.una?.stepperSeparator,
    )"
    :stepper
  />
</template>

<script lang="ts" setup>
import type { NStepperTitleProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperTitle, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = defineProps<NStepperTitleProps>()

const delegatedProps = reactiveOmit(props, 'class', 'una')
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperTitle
    v-bind="forwarded"
    :class="cn(
      'stepper-title',
      props.class,
      props.una?.stepperTitle,
    )"
  >
    <slot />
  </StepperTitle>
</template>

<script lang="ts" setup>
import type { NStepperTriggerProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { StepperTrigger, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperTriggerProps>(), {
  stepper: 'solid-primary',
})

const delegatedProps = reactiveOmit(props, 'class', 'una')
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <StepperTrigger
    v-bind="forwarded"
    :class="cn(
      'stepper-trigger',
      props.class,
      props.una?.stepperTrigger,
    )"
    :stepper
  >
    <slot />
  </StepperTrigger>
</template>

<script setup lang="ts">
import type { NStepperWrapperProps } from '../../types'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NStepperWrapperProps>(), {
  orientation: 'horizontal',
})
</script>

<template>
  <div
    :class="cn(
      'stepper-wrapper',
      orientation === 'vertical' && 'stepper-wrapper-vertical',
      props.class,
      props.una?.stepperWrapper,
    )"
  >
    <slot />
  </div>
</template>