feat(Stepper): new component

docs/components/content/examples/StepperExampleBasic.vue

@@ -0,0 +1,14 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2',
+  disabled: true
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" />
+</template>

docs/components/content/examples/StepperExampleChange.vue

@@ -0,0 +1,19 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UStepper :items="items" @change="onChange" />
+</template>

docs/components/content/examples/StepperExampleCustomIcons.vue

@@ -0,0 +1,18 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper
+    :items="items"
+    completed-icon="i-heroicons-check-circle"
+    active-icon="i-heroicons-stop-circle-solid"
+    pending-icon="i-heroicons-information-circle"
+  />
+</template>

docs/components/content/examples/StepperExampleHideDivider.vue

@@ -0,0 +1,13 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" :display-divider="false" />
+</template>

docs/components/content/examples/StepperExampleIndex.vue

@@ -0,0 +1,13 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" :default-index="2" />
+</template>

docs/content/5.navigation/5.stepper.md

@@ -0,0 +1,140 @@
+---
+description: Layout indicator for the steps in a workflow.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Stepper.vue
+navigation:
+  badge: New
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Stepper component. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `disabled` - Determines whether the item is disabled or not.
+- `to`- Redirects to the specific url.
+
+::component-example
+#default
+:stepper-example-basic{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2',
+  disabled: true
+}, {
+  label: 'Step3',
+  to: '#step-3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" />
+</template>
+```
+::
+
+### Default index
+
+You can set the default index of the stepper by setting the `default-index` prop.
+
+::component-example
+#default
+:stepper-example-index{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper :items="items" :default-index="2" />
+</template>
+```
+::
+
+### Custom icons
+
+You can set the custom icons of the stepper by setting the `completed-icon`, `active-icon` and `pending-icon` props.
+
+::component-example
+#default
+:stepper-example-custom-icons{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper
+    :items="items"
+    completed-icon="i-heroicons-check-circle"
+    active-icon="i-heroicons-stop-circle-solid"
+    pending-icon="i-heroicons-information-circle"
+  />
+</template>
+```
+::
+
+### Hide divider
+
+You can hide the divider of the stepper by setting the `display-divider` prop to `false`.
+
+::component-example
+#default
+:stepper-example-hide-divider{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper :items="items" :display-divider="false" />
+</template>
+```
+::
+
+### Listen to changes
+
+You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
+
+::component-example
+#default
+:stepper-example-change{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UStepper :items="items" @change="onChange" />
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

src/runtime/components/navigation/Stepper.vue

@@ -0,0 +1,153 @@
+<template>
+  <ol
+    :class="wrapperClass"
+    v-bind="attrs"
+  >
+    <li
+      v-for="(item, index) of items"
+      :key="index"
+      ref="itemRefs"
+      :class="[ui.base]"
+    >
+      <div
+        v-if="displayDivider"
+        :class="[index > 0 ? 'visible' : 'invisible', ui.step.divider]"
+      />
+      <UButton
+        color="white"
+        variant="ghost"
+        :disabled="item.disabled"
+        :class="[
+          ui.step.base,
+          ui.step.background,
+          ui.step.padding,
+          ui.step.size,
+          ui.step.font,
+          selectedIndex === index ? ui.step.active : ui.step.inactive,
+        ]"
+        @click="onChange(index)"
+        :to="item.to"
+      >
+        <div :class="[ui.step.leading.wrapper]">
+          <UIcon
+            v-if="(selectedIndex > index && completedIcon)"
+            :name="completedIcon"
+            :class="[ui.step.leading.icon]"
+          />
+          <UIcon
+            v-else-if="(selectedIndex === index && activeIcon)"
+            :name="activeIcon"
+            :class="[ui.step.leading.icon]"
+          />
+          <UIcon
+            v-else-if="(selectedIndex < index && pendingIcon)"
+            :name="pendingIcon"
+            :class="[ui.step.leading.icon]"
+          />
+          <UAvatar
+            v-else
+            :alt="(index + 1).toString()"
+            :size="ui.step.leading.size"
+          />
+        </div>
+        {{ item?.label }}
+      </UButton>
+      <div
+        v-if="displayDivider"
+        :class="[index + 1 < items.length ? 'visible' : 'invisible', ui.step.divider]"
+      />
+    </li>
+  </ol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
+import { omit } from './runtime/utils/lodash'
+import { twMerge } from 'tailwind-merge'
+import { defuTwMerge } from '../../utils'
+import type { StepperItem } from '../../types/stepper'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Number,
+      default: undefined
+    },
+    defaultIndex: {
+      type: Number,
+      default: 0
+    },
+    items: {
+      type: Array as PropType<StepperItem[]>,
+      default: () => []
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.stepper>>,
+      default: () => ({})
+    },
+    completedIcon: {
+      type: String,
+      default: null
+    },
+    activeIcon: {
+      type: String,
+      default: null
+    },
+    pendingIcon: {
+      type: String,
+      default: null
+    },
+    displayDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup (props, { attrs, emit }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.stepper>>(() => twMerge(props.ui, appConfig.ui.stepper))
+
+    const selectedIndex = ref(props.modelValue || props.defaultIndex)
+
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
+    // Methods
+
+    function onChange (index: number) {
+      selectedIndex.value = index
+
+      emit('change', index)
+
+      if (props.modelValue !== undefined) {
+        emit('update:modelValue', index)
+      }
+    }
+
+    return {
+      attrs: computed(() => omit(attrs, ['class'])),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      selectedIndex,
+      onChange,
+      wrapperClass
+    }
+  }
+})
+</script>

src/runtime/types/index.d.ts

@@ -16,6 +16,7 @@ export * from './link'
 export * from './meter'
 export * from './notification'
 export * from './popper'
+export * from './stepper'
 export * from './progress'
 export * from './range'
 export * from './select'

src/runtime/types/stepper.d.ts

@@ -0,0 +1,6 @@
+export interface StepperItem {
+    label?: string
+    disabled?: boolean
+    content?: string
+    to?: string
+}