xaksis / vue-good-wizard Goto Github PK

When i run production in laravel mix . the uncaught error goes straight to vue-good-wizard.js line 13

Thank you for this usefull library.

Any plans for typescript support?

Thnx

Hello,

Awesome wizard btw! I'm having a challenge changing button text using 'finalStepLabel' from label options in your docs.

Expected Behavior
For the button text in the final step to change from 'save' to Update'

Actual Behavior
The button in the final step shows 'save' instead of 'Update'

Steps to Reproduce the Problem

• Applying finalStepLabel to options in the desired step.
• Applying finalStepLabel to labelOptions in the desired step.
• Applying finalStepLabel as its own data property.

An example:

data() {
  return {
      labelOptions: {
        finalStepLabel: 'Update'
      },
      steps: [
              {
                label: 'Page 1',
                slot: 'page1',
              },
              {
                label: 'Page 2',
                slot: 'page2',
              },
              {
                label: 'Page 3',
                slot: 'page3',
              },
              {
                label: 'Page 4',
                slot: 'page4',
              },
              {
                label: 'Page 5',
                slot: 'page5',
                // options: {
                //   finalStepLabel: 'Update'
                // },
                // labelOptions: {
                //   finalStepLabel: 'Update'
                // },
              },
            ],
  }
}

A kitchen sink example would help me determine how to utilize this feature.

Hello, I am new to Vue2.js and I am happy to find the "VueGoodWizard" here, but I am getting this error while trying to use "VueGoodWizard" in a single html page(haven't tried in a vue project by vue-cli), this is what I've done:
abc.html

Vue.use(VueGoodWizard);
var vmGoodWizard = new Vue(...)

Could you please help me on that? It's good when use VueGoodTable somehow but I am having trouble with this wizard control when applied in html page...

Thank you very much for your help!

Best,
Ran

if wizard in bootstrap modal first render on vgw-mobile class i think this function calculte on wizard-body inline div and bootstrap modal has < 620 pixel maybe we need good catch mobile pixel calculating here

Hi,

I'm unsure, if I'm setting it up work or not, but nomatter what I do, I keep getting the Failed to mount component

After installing it via. npm install vue-good-wizard --save

I'm importing like this:
import VueGoodWizard from 'vue-good-wizard;

In my script, I'm using this

In my template I have this inside of some divs:

What am I doing wrong?

// Steve

Hello,

first, thx for this draft. I missed the possibility to fetch / handle asynchron data with the wizard.
In my opinion, there are a lot of functional pitfalls so i would use this.$emit inside the wizard and let the developer handle the "go or go not to next" explicit. I tried to use your way with a complex multi step form which needs more data in some cases on later steps. I must fetch them later async from api, so i need an "stop go next" for validation and fetching data.

It would be great to have a prop called something like

stepsOrientation: 'vertical|horizontal'

If you have more than 5 steps then it would be great to have the steps vertically.

Thanks again for this amazing plugin!

I get 404...

Would be nice to have a final step, after submission or wizard is done that marks completion and thanking. this step would probably not have any buttons

I am using https://github.com/yudax42/vue-upload-drop-images package. after upload image goto next step .then go back and the uploaded image is gone. so how can i fix this. Thnx in advanced

Hi there,

Thanks for this awesome component.
Is there any way to put a cancel button on a the first step that emits an event "onCancel" or something?

Regards

Hello,

I found out that in IE 10/11, if the content height is greater than panel height, it will overlap the panel and scrollbar is missing too...Could you please take a look at that?

Many thanks,

Would be really helpful to have theme colors that we can easily override in setup (similar to Vuetify)

Replication steps (multiple steps):

1. Start typing in the first text area
2. Hit [Next]
3. BEFORE typing in new text area, go [Back]
4. Start typing in original box.
5. The first textarea is now also populated in the second step (which was previously empty).

It appears the first letter you type it copies over the current text to the previously empty textarea but then more typing binds to the correct step.

Hello, thank you for your nice step wizard and this would be by far the best and clean wizard I've seen. Well in our development we found one issue with how to disable the save button at final step. Usually there would be a post request on the save button so we would like user only click once on the button, then disable the button to prevent duplicate request send to the server, but we have no idea to attach any disable attribute to the final button, is there any suggestion or idea that you could help us?

Thank you very much!
Best

Hi @xaksis , I am just reopening the issue as it's closed last time. The "vue2-goodwizard" is just the folder name that I put "vue-good-wizard.js" and "vue-good-wizard.css" in, I'm sorry about the confusion but you could consider it as, I am using it in a single html page not a vue-cli project...

Error will contain:
Uncaught ReferenceError: VueGoodWizard is not defined at line "Vue.use(VueGoodWizard)"

The vue-good-wizard.js file is what I grabbed from "vue-good-wizard-master\dist" folder, is there something I am missing?

Best

I base on Element UI, could you example with form validation?

Events like onNext onBack are NOT fired.

When I compile the component I receive the following error:
TypeError: [] is not a function

"@rails/webpacker": "^3.5.3"

I've removed all other code and logics and just follow the demo component.

I am using VGW 1.4.1 and maybe this is intended, but the nextDisabled property doesn't actually stop the button from being pressed.

To reproduce here is a minimal example

<template>
  <div>
    <vue-good-wizard name="fakeTour" :steps="steps">
      <div slot="companyInfo">
        company based content
      </div>
      <div slot="teamInfo">
        team based content
      </div>
      <div slot="userInfo">
        user based content
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
export default {
  computed: {
    steps () { // this will be dynamic based on other data properties, so that's why it's computed here
      return [
        {
          label: 'Company Information',
          slot: 'companyInfo',
          options: {
            nextDisabled: true
          }
        },
        {
          label: 'Teams',
          slot: 'teamInfo'
        },
        {
          label: 'Users',
          slot: 'userInfo'
        }
      ]
    }
  }

}
</script>

On the first screen you can see that the next button appears to be disabled and shows a disabled cursor when hovered, but you can still click the button and it will still take you to the next screen. I understand this could be worked around with a custom onNext function, but it seems like the button functionality should actually be disabled if it is visibly disabled.

Regardless of the issue, thanks for maintaining such a useful library, and please ignore the style changes I've made on the screenshot.

Is there any way to specify a starting step? Ie if one of the steps takes you to another page, and then you need to come back and start at the next step?

thanks

Is it going to be a Vue 3 version?
thank you

I'm getting this error using this package.

error during render : /login
/src/app/node_modules/vue-good-wizard/index.js:1
(function (exports, require, module, __filename, __dirname) { import GoodWizard from './components/Wizard.vue';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at r (/src/app/node_modules/vue-server-renderer/build.js:8147:16)
    at Object.<anonymous> (webpack:/external "vue-good-wizard":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 6c96c21018c6d7f6db3e:25:0)
    at Object.<anonymous> (src/app.js:4:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 6c96c21018c6d7f6db3e:25:0)
    at Object.module.exports.Object.defineProperty.value (src/entry-server.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 6c96c21018c6d7f6db3e:25:0)
    at module.exports.module.exports.list (webpack:/webpack/bootstrap 6c96c21018c6d7f6db3e:90:0)
    at Object.<anonymous> (server-bundle.js:95:10)
    at evaluateModule (/src/app/node_modules/vue-server-renderer/build.js:8155:21)
    at /src/app/node_modules/vue-server-renderer/build.js:8213:18
    at new Promise (<anonymous>)
    at /src/app/node_modules/vue-server-renderer/build.js:8205:14

So I guess this should be easily solvable by compiling your lovely component and adding the dist folder with ES5 syntax to the repo.

Could this be done?

I would like to pass a callback any of the forward/backward methods like goTo, goNext, nextClicked, or backClicked so that I can add additional functionality once those methods complete. Is there any way to currently do this? If not, can this functionality be added?

Hello, how can we change what the 'Save' button - last step - triggers? Thanks!