bahadirsofuoglu/form-wizard-vue3

A form wizard/stepper component made with Vue

Form Wizard Vue3

Form Wizard Vue 3 is a simple stepper/wizard component. It can be easily customized, has no dependencies, works in harmony with your components.

Documentation

Complete documentation and examples will be available soon.

• Documentation
• Live Demo

Install

yarn add form-wizard-vue3

# or use npm

npm install form-wizard-vue3

Then, import component globally:

import Wizard from 'form-wizard-vue3'

export default {
  install(app) {
    app.component('Wizard', Wizard)
  }
}

Or import component directly:

import 'form-wizard-vue3/dist/form-wizard-vue3.css'
import Wizard from 'form-wizard-vue3'

The component itself does not include any CSS. You'll need to include it separately:

import 'form-wizard-vue3/dist/form-wizard-vue3.css'

License

MIT

form-wizard-vue3's Issues

Next step

Hello!

Is there any event for next and back buttons?

change colors

Hello, when I change the color variables in the "_variables.scss" file, the colors do not change. Is there a solution to change the colors? thank you!

Typescript issues

Could not find a declaration file for module 'form-wizard-vue3'.

Is there any typescript version or "@types" to be installed?
What do you recommend here?

Didn`t find nothing about it

Thanks!

How can I block buttons programatically

I could't find how to block buttons, I have to block the next button until some condition is filed

Add a prop to overwrite default class

I think that a prop for overwriting the default class on the <ul/> would be handy.
So using js to overwrite wouldn't be needed.

 let form = document.getElementById("form_wiz");
 form?.children[0].classList.add("nav", "nav-pills", "nav-fill");

<FormWizard ulClass="class-1 abc primary">
   _...some code_
</FormWizard>

vue 2?

Hello, thanks for component, very good.

But one question: How to use in Vue 2? Or have alternative this component for Vue 2?

Thanks

Cannot show icons in the custom tabs

Hi! In the documentation is written that the component is using Prime Icons. I installed the package and included the css-file, but the icons are now shown. Can you write, please, a short example?
It is also written that customization is possible. Can I use another icons (for example fontawsome)? Can I add any image?

no such file or directory, open 'D:/systems/surveyapp/node_modules/vue-step-wizard/dist/vue-step-wizard.common.js'

no such file or directory, open 'D:/systems/surveyapp/node_modules/vue-step-wizard/dist/vue-step-wizard.common.js'

I can't modify the styles

Hi! I'm trying to use the form wizard, but I'm facing trouble modifying the styles. For example, I want to change the border color of the tabs (.form-wizard-vue .fw-step-checked) but even with !important, the browser doesn't read them. The funny thing is that when i tried my code in the live demo it worked as a charm. Can you tell me how can i fix that?

Should the title slot be a scoped slot?

Does using the title slot mean that all titles have to be the same? How can I make them different? Should the title slot be a scoped slot?

Access to next and previus buttons events

Hi, I can't use emit change it's not working when I want to change the tab with emit.
trigerNextClick() { let newTabIndex = this.currentTabIndex + 1; let oldTabIndex = this.currentTabIndex; // this.onChangeCurrentTab(newTabIndex, oldTabIndex); this.$emit("change", newTabIndex, oldTabIndex); // this.$refs.wizard; },

Creating tabs dynamically?

Is it possible to dynamically create tabs? I have a wizard in Backbone I am moving to Vue 3 and need to create tabs on the fly depending upon the path the user selects.

Possibility of loading or disabling the buttons

Hi, I'm using the component in a project so I'm going to open some issues/feature requests, if it makes sense for the project, I'd be happy to have these features.

The first one is the possibility of disabling the DONE button or putting the wizard in loading mode, because usually at the end of the form an api call is made to save the data...

Cannot disable Next button

Hello,

I found a bug in form-wizard-vue3.
I would like to disable the button if all the mandatory fields are not filled up.
I disabled the next-button option but the button is still active.
I have a look at your source code, src/components/Button.vue, and found that :disabled=options.disabled.
But you cannot disable the button with this code as a button tag only takes "disabled" option, it does not matter if it were true or false.
Could you check it and fix the bug if possible?

Slot names and data

Hello, thank you for your work on this package.

I'd like to make some customizations on the Vertical Tabs to have a title and subtitle on the right of the icon instead of below it.

From the docs, i should be able to use slots to customize the ui.
Can you point me to the names of the slots available and a sample code on how to implement ?

How to reset

When I complete all the steps, how do I reset data and go back to the first step?

Hide Buttons

Is it possible to hide the Next and back buttons? I just want the stepper content.

[Not an Issue] Come back to First Tab after completion

After completion can we come back to first tab, I tried assigning the currentTabIndex to 0 in the oncomplete() function but it broke the wizard.

How to add action on Done?

How to put function on done?

Change the "disabled" option of a button dynamically

Hi, it would be great if you could disable a by default and enable it, when e.g. a specific condition is satisfied. So you could implement a kind of validation.

I tried it in the following way, but it didn't worked:
:next-button="disableNextButton ? {text: 'Weiter', hideIcon: 'true', disabled: true} : {text: 'Weiter', hideIcon: 'true'}"
And here the function that should change the options:
function disableNextButton() { return ((currentTabIndex === 0 && !(selectedPresentation === null)) || (currentTabIndex === 1 && !(selectedFields.length < 2))); }

I am pretty new to vue, so if i made a mistake here and the requested feature works already i would be happy getting an explanation of how.

Prevent change on invalid state

Hello, first I wanted to thank you for the component, it's getting very good!

I'm using vuelidate to validate my steps form, I'm trying in the change event not to let it go to the next step if it's invalid, in fact the form doesn't leave the first step, but the steps keep changing anyway.

As you can see in the video.

Screen.Recording.2022-08-30.at.11.02.00.mp4

[HELP] Prevent tab change

Hi there, is there a way to prevent the tab change if there are conditions not met.

I.e. I'm trying to use the onTabBeforeChange event to check parameters and prevent the change, but nothing I try appears to work.

const onTabBeforeChange = (index, oldIndex) => {
    switch (currentTabIndex)
    {
        case 0:
            if (selectedUtility.value == undefined && selectedBuilding.value == undefined)
                //Prevent the change

            break;
    }
};

Thanks.

Move back and next buttons on top

Hi! I need to spare some place on the screen. I found that it is very useful if I put the button back and next on the top and between them are placed the steps. I modified the class '.form-wizard-vue .fw-footer', but the buttons cannot keep the same position on the different views. What is the best way to reach the goal?