Adding Vue-Multiselect

[lionel-bijaoui]

Hello,

This is my first ever contribution to an open source project, so please forgive me if I make mistakes.

Since you talked about adding vue-multiselect #18, I went ahead and begun to work on that.
I'm well aware this is not ready for pull request yet, but I wanted some guidance on were to go and what to change.

Obviously, I need to update the doc, but I would also like to talk about exporting some events from vue-multiselect to be exploitable in the schema definition. For example, update is the same as onChanged, but search-change or tag don't have equivalent. Should we expose them ?

Anyway, I tried to implement all basic options (props) from multiselectMixin.js, but I need to do the same for Multiselect.vue and pointerMixin.js.

I would also like to point a larger issues: i18n & styling. Should I create separate issues, or could we talk about it here ?

• I don't have a clear idea on how to make all strings i18n compatible.
• I would like to remove most of the styling in composant, so that customisation is easier and don't require very specific selector or use of important.
  I can see the benefits of having a ready to work version but maybe this vision of a css-less plugin should be exploited in a "lite" version of the plugin (vue-form-generator-lite) ?

Anyway thank for your help, I really need to make this plugin the best I can !

[coveralls]

Coverage decreased (-2.9%) to 85.974% when pulling 24c49d9 on lionel-bijaoui:LB_vue_multiselect into 236e9d0 on icebob:master.

[icebob]

Thanks! I will check your PR ASAP.

[icebob]

Firstly, I think it is an optional field. So please remove it from dependencies in package.json. Instead load as an external component in the HTML like bootstrap-select or ionRangeSlider fields. In field ready function, please check the neccessary lib is loaded like here: https://github.com/icebob/vue-form-generator/blob/master/src/fields/fieldSlider.vue#L30
In dev example please load multiselect like here: https://github.com/icebob/vue-form-generator/blob/master/dev/index.html#L22

If PR is merged, I will update the docs, after I released a new version. Instead of docs, please make a test file for this multiselect field. Use the fieldSelectEx.spec.js as a boilerplate.

You could write tests continuously with npm run ci
If test file ready, run npm test and check the coverate report in test/unit/coverage folder.

More comments I will add for your commits.

Thanks for you work!

For your two other questions:

1. i18n. there are strings only in validator. It solved in this issue: localization validator #15
2. I plan to extract CSS styles to a separated css file. After it, if someone want to styling the fields, don't load this vue-form-generator.css file and no need to use the !important. I created a ticket for this task: remove scoped styles #20

[icebob]

Please add an onNewTag event handler to the selectOptions:

selectOptions {
  ...
  onNewTag: function(...) { console.log(...); },
  ...
}

[lionel-bijaoui]

I'm also adding onSearch (from onSearchChange) since it is a very useful function (to create dynamics option list for country and all kind of filtering).

[icebob]

OK, great!

[lionel-bijaoui]

I will start the test later today, and also I will fix the linting

[icebob]

Great thank you!

[icebob]

@lionel-bijaoui when could you finish this PR?

[lionel-bijaoui]

I'm working on it, but face a problem. I need vue-multiselect for the test to work, but I don't know how to add them for the test. I can't find in the other test a good example (only fieldSpectrum is close to this, but there a TODO).
I mean, if vue-multiselect is not loaded, pretty much nothing happen except a console.warn.
What should I do ?

[icebob]

Hmm, yes it's not easy. In this case, skip the unit test. If the main code is ready, commits and I merge it. After it I will try to make tests.

[lionel-bijaoui]

The .jsbeautify is useful for my beautifier (it doesn't understand .eslintrc files). I have added a basic unit test and I hope the test will work (they worked locally).

[coveralls]

Coverage decreased (-1.9%) to 87.013% when pulling 54a3502 on lionel-bijaoui:LB_vue_multiselect into 236e9d0 on icebob:master.

[icebob]

Thanks, Travis is green. 👍

[lionel-bijaoui]

I'm so happy right now 😄
Can i help with the CSS extraction ?

[icebob]

Yes, it would be very good. Further conversation from css extraction here: #20