From 30881248cef9d0db13c6fc4222727d536d531e38 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 May 2024 14:28:38 -0500
Subject: [PATCH] docs(VStepperVertical): add slot example

---
 .../v-stepper-vertical/slot-actions.vue       | 84 +++++++++++++++++++
 .../pages/en/components/vertical-steppers.md  | 12 ++-
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/src/examples/v-stepper-vertical/slot-actions.vue

diff --git a/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
new file mode 100644
index 00000000000..8b9b45cc840
--- /dev/null
+++ b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-stepper-vertical>
+    <template v-slot:default="{ step }">
+      <v-stepper-vertical-item
+        :complete="step > 1"
+        subtitle="Personal details"
+        title="Step one"
+        value="1"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev></template>
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item
+        :complete="step > 2"
+        subtitle="Contact Details"
+        title="Step two"
+        value="2"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev="{ prev }">
+          <v-btn variant="plain" @click="prev"></v-btn>
+        </template>
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item
+        subtitle="Confirmation"
+        title="Step three"
+        value="3"
+        @click:next="onClickFinish"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" text="Finish" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev="{ prev }">
+          <v-btn v-if="!finished" variant="plain" @click="prev"></v-btn>
+
+          <v-btn v-else text="Reset" variant="plain" @click="finished = false"></v-btn>
+        </template>
+      </v-stepper-vertical-item>
+    </template>
+  </v-stepper-vertical>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const finished = shallowRef(false)
+
+  function onClickFinish () {
+    finished.value = true
+
+    alert('Finished')
+  }
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      finished: false,
+    }),
+
+    methods: {
+      onClickFinish () {
+        this.finished = true
+
+        alert('Finished')
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/pages/en/components/vertical-steppers.md b/packages/docs/src/pages/en/components/vertical-steppers.md
index 87e16e0cec1..f7852a3c159 100644
--- a/packages/docs/src/pages/en/components/vertical-steppers.md
+++ b/packages/docs/src/pages/en/components/vertical-steppers.md
@@ -57,4 +57,14 @@ Vertical steppers allow users to complete a series of actions in step order.
 
 ### Guide
 
-Coming soon.
+The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/steppers/) component. It also extends functionality of [v-expansion-panels](/components/expansion-panels/).
+
+#### Slots
+
+The `v-stepper-vertical` component has several slots for customization.
+
+##### Actions
+
+Customize the flow of your stepper by hooking into the available **prev** and **next** slots.
+
+<ExamplesExample file="v-stepper-vertical/slot-actions" />