feat(VStepperVertical): create new component (#19524)

packages/api-generator/src/locale/en/Stepper.json

@@ -0,0 +1,27 @@
+{
+  "props": {
+    "altLabels": "Places the labels beneath the step.",
+    "editable": "Marks step as editable.",
+    "hideActions": "Hide actions bar (prev and next buttons).",
+    "itemTitle": "Property on supplied `items` that contains its title.",
+    "itemValue": "Property on supplied `items` that contains its value.",
+    "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.",
+    "nextText": "The text used for the Next button.",
+    "prevText": "The text used for the Prev button.",
+    "nonLinear": "Allow user to jump to any step."
+  },
+  "slots": {
+    "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.",
+    "[`item.${string}`]": "Slot for customizing the content for each step.",
+    "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).",
+    "header": "Slot for customizing the header.",
+    "header-item": "Slot for customizing all header items.",
+    "icon": "Slot for customizing all stepper item icons.",
+    "next": "Slot for customizing the next step functionailty",
+    "prev": "Slot for customizing the prev step functionality"
+  },
+  "exposed": {
+    "next": "Move to the next step.",
+    "prev": "Move to the prev step."
+  }
+}

packages/api-generator/src/locale/en/StepperItem.json

@@ -0,0 +1,12 @@
+{
+  "props": {
+    "complete": "Marks step as complete.",
+    "completeIcon": "Icon to display when step is marked as completed.",
+    "editable": "Marks step as editable.",
+    "editIcon": "Icon to display when step is editable.",
+    "errorIcon": "Icon to display when step has an error.",
+    "error": "Puts the stepper item in a manual error state.",
+    "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
+    "step": "Content to display inside step circle."
+  }
+}

packages/api-generator/src/locale/en/VExpansionPanelTitle.json

@@ -2,6 +2,7 @@
   "props": {
     "collapseIcon": "Icon used when the expansion panel is in a collapsable state.",
     "expandIcon": "Icon used when the expansion panel is in a expandable state.",
-    "hideActions": "Hide the expand icon in the content title."
+    "hideActions": "Hide the expand icon in the content title.",
+    "static": "Remove title size expansion when selected."
   }
 }

packages/api-generator/src/locale/en/VStepper.json

@@ -1,26 +1,6 @@
 {
   "props": {
-    "altLabels": "Places the labels beneath the step.",
-    "editable": "Marks step as editable.",
-    "flat": "Removes the stepper's elevation.",
-    "hideActions": "Hide actions bar (prev and next buttons).",
-    "itemTitle": "Property on supplied `items` that contains its title.",
-    "itemValue": "Property on supplied `items` that contains its value.",
-    "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.",
-    "nextText": "The text used for the Next button.",
-    "prevText": "The text used for the Prev button.",
-    "nonLinear": "Allow user to jump to any step.",
-    "vertical": "Display steps vertically."
-  },
-  "slots": {
-    "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.",
-    "[`item.${string}`]": "Slot for customizing the content for each step.",
-    "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).",
-    "header": "Slot for customizing the header.",
-    "header-item": "Slot for customizing all header items.",
-    "icon": "Slot for customizing all stepper item icons.",
-    "next": "Slot for customizing the next step functionailty",
-    "prev": "Slot for customizing the prev step functionality"
+    "flat": "Removes the stepper's elevation."
   },
   "exposed": {
     "next": "Move to the next step.",

packages/api-generator/src/locale/en/VStepperItem.json

@@ -1,16 +1,7 @@
 {
   "props": {
-    "complete": "Marks step as complete.",
-    "completeIcon": "Icon to display when step is marked as completed.",
-    "editable": "Marks step as editable.",
-    "editIcon": "Icon to display when step is editable.",
-    "errorIcon": "Icon to display when step has an error.",
-    "error": "Puts the stepper item in a manual error state.",
-    "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
-    "step": "Content to display inside step circle."
   },
   "events": {
-    "click": "Emitted when component is clicked."
   },
   "slots": {
     "icon": "Slot for customizing all stepper item icons."

packages/api-generator/src/locale/en/VStepperVerticalActions.json

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "finish": "Changes the Next button to use the finish text.",
+    "finishText": "The text used for the finish button. Shown when using the **finish** prop."
+  },
+  "events": {
+    "click:finish": "Emitted when the clicking the finish button."
+  }
+}

packages/api-generator/src/locale/en/VStepperVerticalItem.json

@@ -0,0 +1,7 @@
+{
+  "events": {
+    "click:finish": "Event emitted when clicking the finish button",
+    "click:next": "Event emitted when clicking the next button",
+    "click:previous": "Event emitted when clicking the previous button"
+  }
+}

packages/docs/src/data/nav.json

@@ -248,6 +248,10 @@
         "title": "snackbar-queue",
         "subfolder": "components"
       },
+      {
+        "title": "vertical-steppers",
+        "subfolder": "components"
+      },
       {
         "title": "time-pickers",
         "subfolder": "components"

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>

packages/docs/src/examples/v-stepper-vertical/usage.vue

@@ -0,0 +1,53 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-container>
+      <v-stepper-vertical :items="items">
+        <template v-slot:item.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>
+
+        <template v-slot:item.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>
+
+        <template v-slot:item.3>
+          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-stepper-vertical>
+    </v-container>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-stepper-vertical'
+  const model = ref('default')
+  const options = []
+
+  const items = [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+  ]
+  const props = computed(() => {
+    return {
+      items: [
+        'Step 1',
+        'Step 2',
+        'Step 3',
+      ],
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<v-stepper-vertical${propsToString(props.value)}>${slots.value}</v-stepper-vertical>`
+  })
+</script>

packages/docs/src/pages/en/components/vertical-steppers.md

@@ -0,0 +1,70 @@
+---
+emphasized: true
+meta:
+  nav: Steppers Vertical
+  title: Vertical Stepper component
+  description: The vertical stepper component is a navigation element that guides users through a sequence of steps.
+  keywords: vertical stepper, vuetify vertical stepper component, vue vertical stepper component
+related:
+  - /components/buttons/
+  - /components/icons/
+  - /styles/transitions/
+features:
+  report: true
+---
+
+# Vertical Steppers
+
+The `v-stepper-vertical` component can be used as a navigation element that guides users through a sequence of steps.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.14](/getting-started/release-notes/?version=v3.5.14)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VStepperVertical } from 'vuetify/labs/VStepperVertical'
+
+export default createVuetify({
+  components: {
+    VStepperVertical,
+  },
+})
+```
+
+## Usage
+
+Vertical steppers allow users to complete a series of actions in step order.
+
+<ExamplesUsage name="v-stepper-vertical" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-stepper-vertical](/api/v-stepper-vertical/) | Primary Component |
+
+<ApiInline hide-links />
+
+### Guide
+
+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" />

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -232,6 +232,11 @@ app.use(vuetify)
 
 - `v-simple-table` has been renamed to `v-table`
 
+### v-stepper (vertical)
+
+- `v-stepper-step` has been renamed to `v-stepper-vertical-item`. Move content into the **title** slot.
+- `v-stepper-content` has been removed. Move content to the default slot of `v-stepper-vertical-item`.
+
 ### v-data-table
 
 - Headers objects:

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx

@@ -124,7 +124,9 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
       )
     })
 
-    return {}
+    return {
+      groupItem,
+    }
   },
 })