New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(useStepper): new function #1754
Merged
Merged
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
0d07c59
feat(useWizard): new function
innocenzi 2b7eeeb
chore: rename to `useStepper`
innocenzi c0c2437
refactor: remove alias functions
innocenzi 10c39b2
feat: add `nextStep` and `previousStep`
innocenzi a610322
feat: allow arbitrary step types
innocenzi f55a1da
refactor: clean up `nextStep` and `previousStep`
innocenzi febeb2c
refactor: add JSDocs and remove `backTo`
innocenzi 4cd4be2
Merge branch 'main' into feat/use-wizard
innocenzi 6018732
refactor(useStepper): support objects and arrays
innocenzi 71d8ace
feat: support reactive steps
innocenzi ad71d6b
chore: minor cleanup
innocenzi 3fd7bfa
chore: remove comments on example
innocenzi 9d2e175
Merge branch 'main' into feat/use-stepper
antfu 5262bd6
chore: update example with object declaration
innocenzi File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
<script setup lang="ts"> | ||
import { useStepper } from '@vueuse/core' | ||
import { reactive } from 'vue' | ||
|
||
const form = reactive({ | ||
firstName: 'Jon', | ||
lastName: '', | ||
billingAddress: '', | ||
contractAccepted: false, | ||
carbonOffsetting: false, | ||
payment: 'credit-card' as 'paypal' | 'credit-card', | ||
}) | ||
|
||
const stepper = useStepper({ | ||
'user-information': { | ||
title: 'User information', | ||
isValid: () => form.firstName && form.lastName, | ||
}, | ||
'billing-address': { | ||
title: 'Billing address', | ||
isValid: () => form.billingAddress?.trim() !== '', | ||
}, | ||
'terms': { | ||
title: 'Terms', | ||
isValid: () => form.contractAccepted === true, | ||
}, | ||
'payment': { | ||
title: 'Payment', | ||
isValid: () => ['credit-card', 'paypal'].includes(form.payment), | ||
}, | ||
}) | ||
|
||
function submit() { | ||
if (stepper.current.value.isValid()) | ||
stepper.goToNext() | ||
} | ||
|
||
function allStepsBeforeAreValid(index: number): boolean { | ||
return !Array(index) | ||
.fill(null) | ||
.some((_, i) => !stepper.at(i)?.isValid()) | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<div class="flex gap-2 justify-center"> | ||
<div v-for="(step, id, i) in stepper.steps.value" :key="id" class=""> | ||
<button | ||
:disabled="!allStepsBeforeAreValid(i) && stepper.isBefore(id)" | ||
@click="stepper.goTo(id)" | ||
v-text="step.title" | ||
/> | ||
</div> | ||
</div> | ||
|
||
<form class="mt-10" @submit.prevent="submit"> | ||
<span class="text-lg font-bold" v-text="stepper.current.value.title" /> | ||
<div class="flex flex-col justify-center gap-2 mt-2"> | ||
<div> | ||
<div v-if="stepper.isCurrent('user-information')"> | ||
<span>First name:</span> | ||
<input v-model="form.firstName" class="!mt-0.5" type="text"> | ||
<span>Last name:</span> | ||
<input v-model="form.lastName" class="!mt-0.5" type="text"> | ||
</div> | ||
|
||
<div v-if="stepper.isCurrent('billing-address')"> | ||
<input v-model="form.billingAddress" type="text"> | ||
</div> | ||
|
||
<div v-if="stepper.isCurrent('terms')"> | ||
<div> | ||
<input id="carbon-offsetting" v-model="form.carbonOffsetting" type="checkbox" class="mr-2"> | ||
<label for="carbon-offsetting">I accept to deposit a carbon offsetting fee</label> | ||
</div> | ||
<div> | ||
<input id="contract" v-model="form.contractAccepted" type="checkbox" class="mr-2"> | ||
<label for="contract">I accept the terms of the contract</label> | ||
</div> | ||
</div> | ||
|
||
<div v-if="stepper.isCurrent('payment')"> | ||
<div> | ||
<input id="credit-card" v-model="form.payment" type="radio" class="mr-2" value="credit-card"> | ||
<label for="credit-card">Credit card</label> | ||
</div> | ||
<div> | ||
<input id="paypal" v-model="form.payment" type="radio" class="mr-2" value="paypal"> | ||
<label for="paypal">PayPal</label> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div> | ||
<button v-if="!stepper.isLast" :disabled="!stepper.current.value.isValid()"> | ||
Next | ||
</button> | ||
<button v-if="stepper.isLast" :disabled="!stepper.current.value.isValid()"> | ||
Submit | ||
</button> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<div class="flex flex-col gap-4 mt-12"> | ||
<div class="w-full px-4 py-2 rounded border border-main space-y-2 overflow-auto h-full"> | ||
<span class="font-bold">Form</span> | ||
<pre v-text="form" /> | ||
</div> | ||
|
||
<div class="w-full px-4 py-2 rounded border border-main space-y-2 overflow-auto h-full"> | ||
<span class="font-bold">Wizard</span> | ||
<pre v-text="stepper" /> | ||
</div> | ||
</div> | ||
</div> | ||
</template> |
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,37 @@ | ||
--- | ||
category: Utilities | ||
--- | ||
|
||
# useStepper | ||
|
||
Provides helpers for building a multi-step wizard interface. | ||
|
||
## Usage | ||
|
||
```js | ||
import { useStepper } from '@vueuse/core' | ||
|
||
const { | ||
steps, | ||
stepNames, | ||
index, | ||
current, | ||
next, | ||
previous, | ||
isFirst, | ||
isLast, | ||
goTo, | ||
goNext, | ||
goPrevious, | ||
goBackTo, | ||
isNext, | ||
isPrevious, | ||
isCurrent, | ||
isBefore, | ||
isAfter, | ||
} = useStepper([ | ||
'billing-address', | ||
'terms', | ||
'payment', | ||
]) | ||
``` | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we also have a short example of object usage?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added it 👍