Skip to content

Commit

Permalink
feat(VStepperVertical): create new component (#19524)
Browse files Browse the repository at this point in the history
  • Loading branch information
johnleider authored May 10, 2024
1 parent a6340ac commit 1bc66cd
Show file tree
Hide file tree
Showing 24 changed files with 792 additions and 42 deletions.
27 changes: 27 additions & 0 deletions packages/api-generator/src/locale/en/Stepper.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
12 changes: 12 additions & 0 deletions packages/api-generator/src/locale/en/StepperItem.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
}
22 changes: 1 addition & 21 deletions packages/api-generator/src/locale/en/VStepper.json
Original file line number Diff line number Diff line change
@@ -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.",
Expand Down
9 changes: 0 additions & 9 deletions packages/api-generator/src/locale/en/VStepperItem.json
Original file line number Diff line number Diff line change
@@ -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."
Expand Down
Original file line number Diff line number Diff line change
@@ -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."
}
}
Original file line number Diff line number Diff line change
@@ -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"
}
}
4 changes: 4 additions & 0 deletions packages/docs/src/data/nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,10 @@
"title": "snackbar-queue",
"subfolder": "components"
},
{
"title": "vertical-steppers",
"subfolder": "components"
},
{
"title": "time-pickers",
"subfolder": "components"
Expand Down
84 changes: 84 additions & 0 deletions packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
Original file line number Diff line number Diff line change
@@ -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>
53 changes: 53 additions & 0 deletions packages/docs/src/examples/v-stepper-vertical/usage.vue
Original file line number Diff line number Diff line change
@@ -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>
70 changes: 70 additions & 0 deletions packages/docs/src/pages/en/components/vertical-steppers.md
Original file line number Diff line number Diff line change
@@ -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" />
5 changes: 5 additions & 0 deletions packages/docs/src/pages/en/getting-started/upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,9 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
)
})

return {}
return {
groupItem,
}
},
})

Expand Down
Loading

0 comments on commit 1bc66cd

Please sign in to comment.