-
Notifications
You must be signed in to change notification settings - Fork 342
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: implement stepper component (#2906)
* feature: implement stepper component * refactor: rename variables * feat: improve docs, fix: various bugs, refactor: split into several components * refactor: classes, fix: translate button names * fix: migrate stepper docs to nuxt * fix: variable path * fix: docs example, feature: add finish button * refactor: slot data, fix: condition * feat(stepper): made hover a bit rounded * fix(docs): remove old file import for css variables --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
- Loading branch information
1 parent
3483a27
commit 84a1ce2
Showing
21 changed files
with
989 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
packages/docs/page-config/ui-elements/stepper/api-options.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export default defineManualApi({ | ||
| props: { | ||
| steps: { types: '{ label: string, icon?: string, disabled?: boolean }' }, | ||
| }, | ||
| slots: { | ||
| stepButton: { }, | ||
| stepContent: { }, | ||
| controls: { }, | ||
| divider: { }, | ||
| }, | ||
| events: { | ||
| finish: { types: '' } | ||
| }, | ||
| methods: { | ||
| setStep: { types: '`(stepNumber: number) => void`' }, | ||
| nextStep: { types: '`(stepsToSkip: number) => void`' }, | ||
| prevStep: { types: '`(stepsToSkip: number) => void`' }, | ||
| }, | ||
| }) |
118 changes: 118 additions & 0 deletions
118
packages/docs/page-config/ui-elements/stepper/examples/Custom.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| <template> | ||
| <va-stepper | ||
| v-model="step" | ||
| :steps="steps" | ||
| color="danger" | ||
| controlsHidden | ||
| > | ||
| <template #divider> | ||
| <div class="divider gradient" /> | ||
| </template> | ||
|
|
||
| <template | ||
| v-for="step, i in steps" | ||
| :key="step.label" | ||
| #[`step-button-${i}`]="{ setStep, isActive, isCompleted }" | ||
| > | ||
| <div | ||
| class="step-button" | ||
| :class="{ | ||
| 'step-button--active': isActive, | ||
| 'step-button--completed': isCompleted, | ||
| }" | ||
| @click="setStep(i)" | ||
| > | ||
| <va-icon :name="step.icon" /> | ||
| {{ step.label }} | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #step-content-0> | ||
| <ul> | ||
| <li>Select a category</li> | ||
| <li>Browse products</li> | ||
| <li>Add to cart</li> | ||
| </ul> | ||
| </template> | ||
| <template #step-content-1> | ||
| <ul> | ||
| <li>Fill out shipping information</li> | ||
| <li>Choose payment method</li> | ||
| </ul> | ||
| </template> | ||
| <template #step-content-2> | ||
| <ul> | ||
| <li>View order summary</li> | ||
| <li>Edit shipping information</li> | ||
| </ul> | ||
| </template> | ||
| <template #step-content-3> | ||
| <ul> | ||
| <li>Review order details</li> | ||
| <li>Complete payment</li> | ||
| </ul> | ||
| </template> | ||
|
|
||
| <template #controls="{ nextStep, prevStep, setStep }"> | ||
| <va-button @click="prevStep()">Previous</va-button> | ||
| <va-button @click="nextStep()">Next</va-button> | ||
| <va-button @click="setStep(steps.length - 1)">Go to last step</va-button> | ||
| </template> | ||
| </va-stepper> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import VaIcon from 'vuestic-ui/src/components/va-icon/VaIcon.vue' | ||
| const step = ref(0) | ||
| const steps = [ | ||
| { label: 'Choose your product', icon: 'store' }, | ||
| { label: 'Checkout', icon: 'local_shipping' }, | ||
| { label: 'Review order', icon: 'done_all' }, | ||
| { label: 'Confirm and pay', icon: 'payments' }, | ||
| ] | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .gradient { | ||
| background: | ||
| linear-gradient( | ||
| 90deg, | ||
| rgb(131, 58, 180) 0%, | ||
| rgb(253, 29, 29) 50%, | ||
| rgb(241, 170, 48) 100% | ||
| ); | ||
| } | ||
| .divider { | ||
| flex-grow: 1; | ||
| margin: 0 1rem; | ||
| height: 2px; | ||
| width: 2rem; | ||
| border-radius: 1rem; | ||
| } | ||
| .step-button { | ||
| display: flex; | ||
| gap: 1rem; | ||
| color: rgb(241, 170, 48); | ||
| cursor: pointer; | ||
| padding: 1rem; | ||
| transition: all 0.2s; | ||
| } | ||
| .step-button:hover { | ||
| color: rgb(253, 29, 29); | ||
| } | ||
| .step-button--active { | ||
| color: rgba(253, 29, 29); | ||
| } | ||
| .step-button--completed { | ||
| color: rgb(131, 58, 180); | ||
| } | ||
| </style> |
Oops, something went wrong.