Steppers

[mahabubhossain]

Is it possible to create steppers like Vuetify Steppers?

For example, i have 3 section and i want them to show as steppers. I searched in the docs, found nothing. I also tried to create through slot component but failed.

[albanm]

At the moment it is not possible in a straightfoward manner. And I don't really know if it can be achieved with slots.

I add this to the roadmap. But I don't know yet when I will be able to implement it.

[scheepers]

I tried and failed with slots. I could get the top level object props to render as the header with stepper steps, but could not figure out how to render subschemas... Just embedding another v-jsf does not seem top work...

<template>
  <v-form v-model="formValid">

    <v-jsonschema-form
      v-if="schema"
      :schema="schema"
      :model="dataObject"
      :options="options"
      :value="dataObject"
      @error="showError"
      @change="showChange"
      @input="showInput"
    >

      <template
        slot="stepper"
      >
        <v-stepper v-model="step">

          <v-stepper-header>
            <div v-for="( key, index ) in Object.keys(schema.properties)" :key="key">
              <v-stepper-step
                :complete="step > index + 1"
                :step="index + 1"
              >
                {{ schema.properties[key].title }}
              </v-stepper-step>
            </div>
          </v-stepper-header>

          <v-stepper-items>
            <div v-for="( key, index ) in Object.keys(schema.properties)" :key="key">
              <v-stepper-content
                :step="index + 1"
              >
                <v-card
                  class="mb-12"
                  color="grey lighten-1"
                >

                  <v-jsonschema-form
                    v-if="schema.properties[key]"
                    :schema="schema.properties[key]"
                    :model="dataObject[key]"
                    :options="options"
                    :value="dataObject[key]"
                    @error="showError"
                    @change="showChange"
                    @input="showInput"
                  ></v-jsonschema-form>

                </v-card>
              </v-stepper-content>
            </div>
          </v-stepper-items>

        </v-stepper>
      </template>
...

[albanm]

Hello,

Sorry for the long delay. If you are still interested, I have started working on stepper support and you can have a look at this example.

[mahabubhossain]

@albanm thanks for your great effort. It looks awesome. Can we jump from one step to another programmatically? For example i want to jump from step 1 to 4 based on a condition using form model value.

[albanm]

Could this be expressed in terms of form validity ? Like maybe an option to automatically go to the last valid step of the stepper.

[albanm]

Closing this for now (I am trying to tidy up the issues), feel free to reply anyway if you want to continue the discussion.

[scheepers]

Yass! This looks great.

Is there an NPM release for the beta? How can I use it in my project?

[albanm]

The functionality is noted as beta in the sense that it is recent and needs maturing, so there might be some breaking changes. But it is released in the recent versions of the library (not specific beta versions).

[scheepers]

Thanks! It looks great and does not serve our use-case unfortunately :\

[ssaenz-a1ws]

Hello, I would like to know if it is possible to put the steppers vertically. Thanks

[albanm]

I just added the "vertical-stepper" display, see the updated example. Available in 1.25.0-beta.4.