The form that I'm building requires that the users cannot go back to a previous step. I used a little trick to remove the "Back" button: <template slot="prev"></template>. However, I couldn't find a way to disable the nav pills (i.e. the circle steps at the top) from allowing the user to navigate back. How can I approach this?

P.S. On a side note, I used <tab-content title="" icon="-"> to remove the title and the icon. icon="" alone does not seem to work. Is there a better way? I'm using the basic demo example.

Hey I have been playing around with your wizard, and I would love to update the number of tab-contents on the fly (managed by an array) depending on user preference the wizard would lengthen or shorten.

Here is a fiddle with what I would like to do. The remove first item button, though doesnt seem to remove the corresponding tab-content as I'd expect.

https://jsfiddle.net/bt5dhqtf/482/

Please let me know if this is the expected behaviour.

When we use slots for the navigation buttons, we cannot style them with bootstrap classes.

https://jsfiddle.net/genesluna/30v2q7uc/5/

Repro steps:

1. use Fiddle
2. enter data in all fields of step 1, this will unlock step 2
3. enter data in all fields of step 2, this will unlock step 3
4. go back to step 2, clear any mandatory field
5. go to step 1
6. See that step 3 is accessible while step 2 does not validate.

Hello,

I just wanted to ask the best way of loading the form with disabled fields and next step button and have an 'edit' button to enable all the fields?

The scenario is that if multiple users have opened the same record at a time one user should be able to edit the record and fires off an event to notify the others that the record is currently on edit mode.

Thanks!

I've tried implementing this and i'm wondering if the expected behavior of pressing the empty space between back and the next button should trigger a back button?

Hey,

I am new to Vue.

I try to refactor your forms example:
https://jsfiddle.net/CristiJ/bt5dhqtf/286/

How can I get the wizard steps into separate components? Do I need to pass the model and formOptions as props?

Thank you!

Is there a way to enable to jump between steps?

I'd like to jump from the first to the last one?
I know can do it if I pass all the step with the "Next" button or setting the :start-index="lastIndex" but i'd like having without restrictions

Hi,

When I use v-for to generate the steps I end up with the steps mixed up. The generated ones are always the last.

        <tab-content  title="Hello" icon="fa fa-key"></tab-content>
          <tab-content
            v-for="(item, index) in pages"
            v-bind:item="item"
            v-bind:index="index"
            v-bind:key="item.id"
            :title="item.title" icon="fa fa-check">
         </tab-content>
        <tab-content title="Bye" icon="fa fa-upload"></tab-content>

The generated steps in order:

• Hello
• Bye
• Step1
• Step2

Did I miss something?

I am gettting this error: .../node_modules/vue-form-wizard/dist/vue-form-wizard.min.css Unexpected token (14:83)
You may need an appropriate loader to handle this file type.

Do you know which loader is needed?

Hello.
Is there any plans for adding keyboard and/ or WAI-ARIA support for this wizard?
Or is there a way I can already add them via some template I don't know yet?

Hi,

I was wondering what's the best way to skip a tab and jump directly to a specific tab of your choice.

My use case is the following:

we have 4 tab contents, you make a payment on tab 2 which gets validated before you can go to tab 3. However in the case of the form right now, you're able to press on the tabs and go back to them. If you go back to tab 2, it will always try to validate and send to tab 3, is there any way to send it to tab 4 from tab 2?

Thanks,

Hi all,

I was using the wizard component but stumbled on a issue. I have the wizard with multiple steps. Each step is presented in a separate component. This component is responsible for the validation, followed by making a post request to the server. I capture the tab change event with the before-change handler, here is the issue. The before-change handler returns the result of the validation, however in my case the child component does this. A child can only communicate with its parent using events. But if I create an event handler for this 'validation' event, then this will be a separate method which cannot communicate with the before change handler.

I thought of several (bad) ideas (eg. using a setInterval to wait until the validation event handler marks a variable in the parent component, did not really see how Promises could help but maybe they can?), but I just could not think of a solution. I do not want to put all the logic in the parent component, as this would make it very unmaintainable.

Here are some conceptual snippets:

In the parent component

<form-wizard @on-complete="onComplete"
                                 shape="tab"
                                 title=""
                                 subtitle=""
                                 :validateOnBack="true"
                                 color="#9b59b6">
                        <tab-content title="Basic details"
                                     icon="fa fa-info" :before-change="submitFirstStep">
                            <first-step :step="step" @stepCompleted="stepCompleted" @created="storeSurroundingId"></first-step>
                        </tab-content>
...

The submitFirstStep method just changes the step property. The first-step component watches this property and handles upon a change.

The watch method in the first-step component:

watch: {
    step(value){
        //Check if value is OK

       //Perform validation

       //Store at server

       //Emit stepCompleted  if succeeded or if error occured
    }
}

And finally:

submitFirstStep(data){
    this.step = //Change accordingly

    // The child should start now, but I am not sure when it has finished ...

    //return value based on the child here
}

stepCompleted(data){
     //Validation and error data is received here...
}

Hopefully anyone can help. Really love the package, but this is a little hard out of the box :(

Edit 1: Fixed some Markdown issue.

Hi this may have been answered elsewhere, but I cant find where.
I have a security system implemented in my app where certain tabs are disabled if users cant access them.
How I have set this up is with v-if statements inside the tab-content items.
Technically, this works, however the problem is that its messing with the navigation item size.

For example:
I have 3 total tabs
Tab 1 is wide open
Tab 2 is secured by permission ID
Tab 3 is secured by permission ID

If I dont have permissions for tab 2&3 when I load the page, I would expect to just have the Finish button, but I get the next button instead and I have to still click it multiple times to get the finish button.

I hope this makes sense.

Hi everyone,

I struggle figuring out how I can keep the toggled tab at the same position. Take a look at this fiddle:
https://jsfiddle.net/bt5dhqtf/747/

As you can see, when you press "Log Out Toggle" the toggled tab's position will change to before the last tab.

Any help would be greatly appreciated!

Chris

Is there way to call navigateToTab method from the parent component? Basically so you dont have to use any buttons but call it when I get a call back (say from when stripe or my server says they have created an account). This way when I get success response it moves to the next step.

Thanks!!

Hi there, this is my first post on Github, i apologise in advance if this is the wrong place,

I have checked the documentation, but is there any function to reset the wizard back to start (the first point)?

My issue is that when a user clicks into an "item", he is presented with the wizard. IF he goes through a couple steps and goes back to a different "item", the last stage they were at remains. Ideally every time I go into an "item", the wizard should be back at the start.

I hope this makes sense,

Thanks

Hi there,

I am struggling to figure out how to use activeTabIndex outside of the form-wizard component. Is there any simple example on how to access it outside of that scope? Sorry, if this is a silly questions, I just can't come up with an answer without modifying the source code...

Chris

For forms contain many fields and field groups, it would be nice to be able to create vertical progress tabs.
An example can be seen here

Problem:
when you visit the page via a vue-router route, the right component is shown, but the active highlighted tab is still the first tab.

so "activeTabIndex" isn't updating when changing tabs trough a URL, only when changing tab with the "next" and "previous" button or directly clicking on a tab step (the icons) on top.

Reproduce:
this is the example in the docs: https://jsfiddle.net/bt5dhqtf/267/ when opening local (not in a fiddle) try navigating directly to a route that isn't the first step. you'll notice that the right component is shown but the wrong tab step icon thingy is highlighted.

excuse me for my english..

btw, I want to help if needed :)

See Picture: the route is /user, that's the second step. the right component is shown but the first tab is highlighted

Looking at the docs, there is very little outlining how this directive works. What does it run through and what alters its outcome? Hence:

**Template**
  <form-wizard @on-complete="onComplete"
                  @on-loading="setLoading"
                  @on-validate="handleValidation"

**Methods**
        handleValidation: function(isValid, tabIndex){
           console.log('Tab: '+tabIndex+ ' valid: '+isValid)
        },

Would always yield "isValid" as true.

Reference: https://cristijora.github.io/vue-form-wizard/#/?id=async-validation

Clicking the finish button fires my ajax request from my onComplete function
but pressing enter key just submits the form normally

Hi!

Has anyone used vue-form-wizard with route params such as :id?

Unfortunately to see the problem you have to run locally https://jsfiddle.net/6st2jybr/ but maybe somebody has already solved the problem.

I try to pass :id as routeparam front of :id/first, :id/second in
<tab-content title="Additional Info" route=":id/second" icon="ti-settings">

Now if I start my app with localhost:8080/{someId}/first it will be changed to ":id/first" and thats it.

Does anyone have solution?

This is just a suggestion, but i would only include the sass (or css file) needed to make this work and not the whole bootstrap css file. A lot of developers do not use bootstrap and use just mixins since bootstrap is pretty bloated and you need to overwrite a ton so when I added this component it wrecked havoc on my layouts since it included the whole bootstrap css file. You cloud maybe too just add the css to the vue component and make it scoped so it only effects that component.

From the looks of it, Themify icons are used. However, for users that want to support material icons or font awesome, there doesn't seem to be a way to do that (yet).

I would like to request a way to cancel out of the wizard.

Maybe in addition to Next and Back there Is a Cancel Button.

I see only the on-validate method hook will pass the index of the current tab. But What if I want to know where the user is going so I can later do a server side validation?

The before-change does not pass any of this information but would seen is the correct hook for this information.

Is it possible to know the source and the destination tab index's from any other methods?

Problem
The current z-index values used for the default styles are seemingly arbitrary - see here, here, and here.

As far as I can tell, removing these z-index values has absolutely no impact on the appearance of the navigation and header. I'm wondering if there is a good reason for these values? Otherwise I'd be more than happy to submit a PR with the relevant changes.

Re,

I am rendering a wizard within a component that receives props:

<wizard :data='....'></wizard>

Inside the component, I am using your sample router integration code:

<tab-content title="First Step" route="/first_step">
</tab-content>
....

first_step is mapped to another component:

const first_step = Vue.component('first_step', require('./first_step.vue'));
const router = new VueRouter({
  routes: [
    { path: '/first_step', component: first_step }
  ]
});

Question: how do I pass data received by the wizard component to the component loaded inside the tab (other than using this.$parent.$parent.data inside the first_step component)?

Thanks.

I am currently using the form wizard in a modal and trying to conform to material design guidelines. I would like to have a 'Cancel' button next to the 'next' and 'finish' button. However, there is currently no control on placing extra buttons next to the default ones.

check your sample:

https://jsfiddle.net/CristiJ/bt5dhqtf/286/

you cannot go back on the second screen, since vaildation block this.

How can I prevent this?

hi,

is it possible to retrieve the following params in the :before-change methods.

• prevIndex
• nextIndex

because i want show for each tab-content an info pannel outside the vue-form component and i dont know how can i retrieve the current and the intendend tab-content-index.

thanks for helping
matthias

Sorry, I'm poor English.
Your library is awesome 👍.
By the way, I'm using bulma.css and your library, but themify-icons style shifted to the top like this.

Maybe .icon class is appreciated with bulma.css.
How can I fix it? plz help me.

My site needs to be able to run on the mobile，At this time the top navigation icon is too big.

I want to hide the navigation，but keep tap-content and button.

Hello.
I'm trying to load my step-templates only when they are clicked.
Some of my steps have to load some data through ajax after loaded.

Right now, every steps is getting the data in the "created" life cycle of vue.

But I would like them to get the data only when the step becomes active. I there a way to do that. I haven't found anything in the documentation

Thanks for this fantastic component!

For this it seems that there is no property to control the size of the step indicators, unless one overrides them with CSS.
A "size" attribute with values like "xs, sm, md and lg" that would resize the circles and the icons inside, would go a long way to remedy this and also allow for quite the flexibility.

I've attached some images to illustrate what I mean (these are just examplary values)

Extra small

(Size of each step is 40x40, font-size: 1rem)

Small

(Size of each step is 50x50, font-size 1.4rem)

Medium

As it is today.

Large

(Size of each step is 70x70, font-size 2rem)

I followed the guide, pretty straight forward but I am getting many errors.
[Vue warn]: Error when rendering component at C:\work\vue-tab-wizard\src\components\FormWizard.vue:

I dont even have a C:\work folder ???

And:
Uncaught TypeError: Cannot set property 'active' of undefined

I used the npm and tried straight download, both show the same errors.

Global and local registration.

Sidenote:
The docs state import 'vue-formwizard/dist/vue-form-wizard.min.css'
where it should be import 'vue-form-wizard/dist/vue-form-wizard.min.css', missing the dash between formwizard

Hi

I'm just hacking around with an example from jsfiddle [1] and am getting "Unknown custom element: - did you register the component correctly?" error messages in the console.

I can't locate el-form, el-form-item and el-button components anywhere.

My template and script looks like this:

<template>
  <div>
    <form-wizard @on-complete="onComplete" shape="circle" color="#20a0ff" error-color="#ff4949">
      <tab-content title="Personal details" icon="ti-user" :before-change="validateFirstStep">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" ref="ruleForm">
          <el-form-item label="Approved by" prop="user">
            <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
          </el-form-item>
          <el-form-item label="Activity zone" prop="region">
            <el-select v-model="formInline.region" placeholder="Activity zone">
              <el-option label="Zone one" value="shanghai"></el-option>
              <el-option label="Zone two" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </tab-content>
      <tab-content title="Additional Info" icon="ti-settings">
        Second tab
      </tab-content>
      <tab-content title="Last step" icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
      <el-button type="primary" slot="prev">Back</el-button>
      <el-button type="primary" slot="next">Next</el-button>
      <el-button type="primary" slot="finish">Finish</el-button>
    </form-wizard>
  </div>
</template>
<script>
  import {VueFormWizard, TabContent} from 'vue-form-wizard'
  export default {
    data: function () {
      return {
        formInline: {
          user: '',
          region: ''
        },
        rules: {
          user: [{
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur'
          }, {
            min: 3,
            max: 5,
            message: 'Length should be 3 to 5',
            trigger: 'blur'
          }],
          region: [{
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change'
          }],
        }
      }
    },    components: {VueFormWizard, TabContent},
    methods: {
      onComplete: function () {
        alert('Yay. Done!');
      },
      validateFirstStep() {
        return new Promise((resolve, reject) => {
          this.$refs.ruleForm.validate((valid) => {
            resolve(valid);
          });
        })
      }
    }
  }
</script>

[1] https://jsfiddle.net/bt5dhqtf/409/

How to integrate Element UI?

Hi!

I am struggling to figure out how to use transitions. I was thinking about using a simple bounce-out-left transition and from the docs I can see

  transition: {
    type: String,
    default: '' //name of the transition when transition between steps
  },

How exactly do I implement it into my Vue app?

Is this a working example?

Vue.use(VueFormWizard, {
    props: {
        transition: {
            type: String,
            default: '' //name of the transition when transition between steps
        }
    }
});

I can't find any documentation on this and how it functions. If I define default, do I define it with the CSS class name for the transition?

Is there any way you could provide a working example of a transition? I would appreciate that so much!

Last but not least, I do have one more question. Haha

Has anyone tried to accomplish tab animations? Just simple fade in and out animations of the actual .wizard-tab-content ?

I think those would look great! :-)

Basic case in point:

• User follows the form wizard to complete an article.
• After the form has completed, the user is presented a selection of actions, one of which is to create another article.
• User clicks "Create another article" is sent back to the first step of the form vue wizard.

I really like the vue-form-wizard component, great works!

I would like to enable the nav-pills for the tabs to be always clickable and users can go to any step by clicking on any nav-pill.

The current behavior is when a user visits some tabs only then the previous nav-pills become clickable.

Please shed some lights on this.

Thanks in advance

I want to write callback function next button.How can i proceed

For instance, the last tab contains a summary of the previous tabs and if user sees something and would like to edit it, I'd like to have a button on the summary tab that allows the user to go to the correct tab rather than traverse back.

Hi, I'm trying vue-route example.
https://jsfiddle.net/bt5dhqtf/267/
First, I press next button, Next I press browser back button, then It does not show anymore.
How can it show first page when going back to top?

Is there any way I can do async validation? vue-form-generator recently added promise based validators but I can't get it working with beforeChange.
The validator works, but since beforeChange is not receiving false, i can go to the next step without restriction.

By the way, thanks for the repo, saved me a lot of time.