vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.69k stars 6.95k forks source link

[Feature Request] v-stepper feature parity with v-expansion-panels #5338

Open CameronMcNair opened 5 years ago

CameronMcNair commented 5 years ago

What problem does this feature solve?

There is currently not an easy way to collapse non-linear stepper steps without opening another step. This is primarily an issue for vertical steppers, where collapsing the active step would be useful in order to see the steps below it.

What is your proposed solution?

I've gotten around this by clearing the model value in the stepper-step @click.native event. See here and get the desired functionality by clicking the step header of the active step. This workaround is not perfect. The click logic should only happen if the step is active. Also, when you reopen a step after they are all collapsed, the open animation doesn't start immediately. I'm assuming that's because the stepper assumes another step is collapsing. I don't think there's a way for me to override that but please let me know if I'm wrong.

I think this collapse feature should be default behavior for vertical non-linear steppers, but it may not make as much sense for horizontal ones so it may be better to add this as a prop

johnleider commented 5 years ago

Due to time constraints all stepper changes are being moved to a future minor release in v2.x . Thank you for your patience.

If you have any additional questions, please reach out to us in our Discord community.

johnleider commented 3 years ago

After discussion with the team, the vertical/horizontal steppers will be broken up into separate components. The functionality that exists within v-stepper is basically the same as v-expansion-panels.

v-stepper and v-vertical-stepper

Toyed around with a different workaround: https://codepen.io/johnjleider/pen/zYByxvy?editors=1010