vue-generators / vue-form-generator Goto Github PK

• autocomplete attr #63
• custom fields example #65

• fieldCleave
• fieldMasked
• fieldNoUiSlider
• fieldPikaday
• fieldSlider
• fieldSpektrum
• fieldVueMultiSelect
• fieldGoogleAddress

Currently getting the error in the title.

Full error:

vue.common.js?4a36:1137[Vue warn]: <div v-for="field in fields" v-if="fieldVisible(field)">: Using v-if and v-for on the same element is not recommended - consider filtering the source Array instead. (found in component: <vue-form-generator>)

Am I doing something wrong?

I am not sure why this is happening, but my code is fairly simple:

schema: {
                    fields: [{
                        type: "image",
                        label: "Avatar",
                        model: "avatar",
                        required: true
                    }]
                },

When I use a pikaday field with no special options, I get "Invalid date" in the field.
I can see the good value for a fraction of a second but then it get replaced by this message.
This problem don't appear with the dev environment, and I suspect it has something to do with Moment.js (or the lack of it to be precise).
I experimented a bit with format, but nothing change that.
For now I will send a PR which don't add any default values (except field) in pikadayOptions.

I'm using vfg in another project with webpack. And vfg is marked as a fragment instance. I don't get it...
Same Vue version as the one use in the dev example.

Hi!

Is there a way to access the validation results?

The intention is to enable the disabled submit button once all validation requirements are met.
I know that there's the onValidated method for every field, but I can't access anything other than the model, the errors and the field itself and nothing from the parent component.

Is there a way to do this without hacking on the model?

And on that note... How to trigger the form validation?

it has something to do with multiSelect option set to true.
@icebob can you explain to me how multiple work again ?

Because currently there is no vanilla datetime picker. Pickaday is only date selector.

• create new field common type which has a "inputType" property. (break changes)
• rename datetime field to datetimePicker (break changes)
• rename slider field to rangeSlider (break changes)
• update docs (add new radio values description)

Available types

• date
• datetime
• datetime-local
• time
• month
• week

Other HTML5 types

• url
• tel
• radio

Set this inputType to the field type attributes:

input( :type="schema.inputType")

There is a few problem with noUiSlider:

• It can't dynamically add or remove an handle. It can't wait for the value from the model to know if this is a double handle or not. So we need an option to explicitly tell if this is double or not (like with rangeSlider). EDIT: done in #72
• When using a single handle, noUiSlider format the data like this [Number, null]. It expect us to use slider.noUiSlider.get(). So, much like with date input, we need a formatValueToField and formatValueToModel to properly format data back and forth.

I'm on both issue and I will do a PR in the next days.

Same as "readonly". Add to every field which contains input element.
Example schema:

        let schema = {
            type: "text",
            label: "E-mail",
            model: "email",
            readonly: false,
            autocomplete: true,
            placeholder: "Field placeholder"
        };

Example template of field:

    input.form-control(type="email", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder", :autocomplete="schema.autocomplete")

At once image selected on localhost text/placeholder of input changing to
Is possible to hide input with filename or just show filename?
https://jsfiddle.net/0mg1v81e/10/

I would like to create two select fields which affect each other, basically the possible values should change depending on the other field.
Is there a way to do this?

I've read the documentation on the field's general onChanged property but I could not figure out a way to access the schema.

I don't get it, nothing seem to change when I use the option.

show this help if mouse hover the question icon before the caption of field. You can use HTML elements too.

What question mark ? How do I use HTML elements ?
Thank you for your help.

While doing the documentation for pikaday field, I noticed that the following callback are not available.

• onSelect: callback function for when a date is selected
• onOpen: callback function for when the picker becomes visible
• onClose: callback function for when the picker is hidden
• onDraw: callback function for when the picker draws a new month

They should be added, no ?

• vue-multiselect field #20
• fieldSubmit #26
• customizable styles #29
• fieldCleave #31
• fieldPikaday #31
• fieldNoUiSlider #31
• fieldGoogleAddress #33
• visible & disabled, values schema functions description
• ES5 examples (change visible(model) {...} to visible: function(model) {...} )

Because with it, we can generate native submittable form too. With submit button, this named fields can be send to server side with POST. Spec

• add name attributes from schema.inputName property to input, select, textarea fields
• create example. POST data to https://httpbin.org/post
• cover with tests
• update docs

I removed custom-label property from multiselect because give errors.
If it props doesn't exist in schema, multiselect try to call and gives error.

• Extract styles to a vue-form-generator.css file. #27
• remove scoped from styles
• create fiddle with an alternate style
• Update examples, fiddle
• Update docs

A very modularized version of the app would be a plus.
My goal is:

• a simple, all in one (except for CSS of course) bundled JS.
  The user only need to include the lib with a script tag and it work as expected (like today build).
• a commonjs version with dependency and the possibility to load individual fields or not (some fields have dependency that other don't so it could save some space in the end).
  This is close to Vue.js approach of the problem (vue.js vs vue.common.js)

I have not tested if it work. It should, but better safe than sorry.
http://refreshless.com/nouislider/pips/

I see some changes in your code from github (breaked form layout, ...) but no new release out in the tags so npm refuse to fetch the last code. Is the new code trustable?
BTW thanks for this package and keep up the good work!

I get this error when I try to use the VueFormGenerator component without passing in an options property. For example,

<template>
    <vue-form-generator :schema="schema" :model="model"></vue-form-generator>
</template>

<script>
import { component as VueFormGenerator } from 'vue-form-generator';

export default {
    components: {
        VueFormGenerator,
    },

    data() {
        return {
            schema: {
                fields: [
                    { model: 'foo', type: 'number' },
                ],
            },
            model: {
                foo: 3.14,
            },
        },
    },
};
</script>

The bug is in the watch method in src/formGenerator.vue, where the library does not check if this.options is truthy before checking if this.options.validateAfterLoad is true. Reference.

There are two potential solutions to this problem: either set default values for the options property or add an additional check for this.options before access this.options.validateAfterLoad.

To set a default value, the library could define its props as:

<script>
export default {
    props: {
        schema: Object,
        options: {
            type: Object,
            default: {
                validateAfterLoad: false,
            },
        },
        // etc
    },
};
</script>

To just add the extra check, the code would need to change from:

// Model changed!
if (this.options.validateAfterLoad === true && this.isNewModel !== true)
    this.validate();
else
    this.clearValidationErrors();

to:

// Model changed!
if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true)
    this.validate();
else
    this.clearValidationErrors();

so that it matches the line later in the same file: Reference:

// First load, running validation if neccessary
if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true)
    this.validate();
else
    this.clearValidationErrors();

In the doc, it say that custom fields are "coming soon". It is something very interesting.

Can you share your progress on that feature ?
Can I help you on that ?

Currently in these types the result is true or false.
Need to add onValue, offValue options to fieldSwitch and add trueValue and falseValue to fieldCheckbox. After it the fields can toggle 0/1, or "yes"/"no" values too

Add:

• new field fieldSwitch
• new screenshot about new layout

This is another mental note to implement a graceful destruction of component that initialize event listening.
Concerned component:

• noUiSlider .off( eventName )
• cleave.js cleave.destroy()
• pikaday picker.destroy()

Maybe also:

• dateTime $(this.$el).data("DateTimePicker").destroy()
• masked $(this.$el).mask("destroy") ?
• selectEx .selectpicker("destroy")
• ionRangeSlider slider.destroy()
• spectrum .spectrum("destroy")

Create fields with vanilla libs which have no jQuery and Bootstrap dependencies.

• Select field -> vue-multiselect
• DateTime field -> Pikaday
• Masked input field -> VanillaMasker or cleave.js
• Slider field -> noUiSlider

For these developments I created an independent branch. Every PR needs to add to this branch.

https://github.com/icebob/vue-form-generator/tree/independent

https://travis-ci.org/icebob/vue-form-generator/jobs/165632420

TOTAL: 3 FAILED, 370 SUCCESS
1) should contain option elements
     fieldVueMultiSelect.vue check template
     expected '' to equal 'Paris'
AssertionError
assert
assertEqual
2) input value should be the model value after changed
     fieldVueMultiSelect.vue check template
     AssertionError: expected '' to equal 'Rome' (undefined:111)
3) input value should be the model value after changed (multiselection)
     fieldVueMultiSelect.vue check template
     AssertionError: expected '' to equal 'Paris' (undefined:111)

Hi,

i found your very usefull library, but unfortunatelly i cant found a way to implement a simple submit button, or prevent the default event.

I use for now a form tag which is wrapping the vue-form-generator component, and inside i create manually a submit button.

But i think it would be cool if we can add a new type "submit" in the schema, but maybe there is reasons if this not exists...

Thanks, and sorry for the mystakes.

Like the dev example with all supported fields.

[12:50:41] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module '!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-c65c5786&scoped=true!./../../node_modules/sass-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./fieldCheckbox.vue' from '/node_modules/vue-form-generator/dist'

https://github.com/text-mask/text-mask

Since featured is entirely visual (as far as I understand), and that styleClasses exist, featured is a bit useless, no ?
This is a bit of nitpicking I guess, sorry if it bother you.

@lionel-bijaoui could you check this problem?

Reproduction:

1. npm run dev
2. Press New button
3. check console messages. It has 4 error messages, and fieldVueMultiSelect dropdown is empty.
   

Fields description should have a "default" column.
Concerned fields:

• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/field_properties.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/inside_buttons.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/checklist.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/email.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/image.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/number.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/password.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/range.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/submit.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/select.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/switch.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/text.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/textarea.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/datetime.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/masked.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/selectex.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/slider.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/spectrum.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/googleaddress.md
• https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/vuemultiselect.md

Some field component have multiple top-level elements. This will create fragment instance that should be avoided.
Concerned fields:

• fieldChecklist
• fieldColor
• fieldRange

#73

4afccd3

staticMap don't work in the dev example because geo data is defined with latitude and longitude properties.
Maybe it need a staticMapOptions with properties to map to the good value:

{
    type: "staticMap",
    label: "Map",
    model: "address.geo",
    staticMapOptions: {
        lat: "latitude",
        lng: "longitude",
        sizeX:600,
        sizeY:300
    }
}

edit: size param too

How can I transfer localization for a validator in the component?

Let's not forget about this, the web is for everybody.
I don't have experience with this, it could be nice to have someone who know about these stuff on board to help.
We could start with labels.

Documentation and information:

• https://www.w3.org/WAI/tutorials/forms/
• https://www.w3.org/standards/webdesign/accessibility

Hello,

I was wandering if it could be possible to use less dependency or smaller, more focused one. For example, what is the use of jQuery ? Why Bootstrap ?
It is something that is actually stopping me from using this component, because I don't want to bloat my web app with jQuery and Bootstrap. It's a shame really because I really need the functionality provided by your component.

Also, I could be awesome if we could choose the kind of input in a more modular way.
For example, if I don't use range slider fields, I could avoid ion.rangeSlider. If I want to use noUiSlider instead, I could create a new submodule easily. It seem to be already possible, but I wanted to be sure.

I'm ready to help, if you think this is technically possible.
Thank you for your hard work.

It would be great to have conditional fields. The value of one field influence others visibility (and maybe more ?).
For example, I check a checkbox field, and it show another field.
It could allow for very dynamic forms.
The field would need some sort of meta information about them, for example:

/*schema.js*/
fields: [{
    type: "switch",
    label: "Add a packaging ?",
    model: "packet"
}, {
    type: "select",
    label: "packet type",
    model: "packet_type",
    required: true,
    values: [
            { id: "standard", name: "Standard" },
            { id: "present", name: "Present" }
        ]
    // Only appear if packet value is true
    dependOn: [{ model: "packet", value: true }]
}, {
    type: "text",
    label: "message to write on the note",
    model: "present_note",
    // Only appear if packet_type selected value of "id" field is "present" AND if packet value is true
    dependOn: [{ model: "packet_type", field: "id", value: "present" }, { model: "packet", value: true }]
}]

They could be option for "not this value" and "multiple good values".
Internally, it could use v-show on a computed value that we could add in abstractField.js.
That's just some first ideas and thoughts, please tell me what are you think about that.

I guess it going to be hard to do, but this is something necessary.
2.0 changes

No more .sync

My first analysis point to one real problem, the disappearance of .sync.
so instead of:

:model.sync="model", :schema.sync="field"

We should do:

:model="model", :schema="field", @model-updated="modelUpdated", @schema-updated="schemaUpdated"

and inside the fields (abstractField.js)

props: ["model", "schema"],
watch: {
    model(newVal) {
        this.$emit('model-updated', newValue)
    },
    schema(newVal) {
        this.$emit('schema-updated', newValue)
    }
}

Also change formGenerator.vue:

watch: {
    // new model loaded
    model: function(newModel, oldModel) {
        if (oldModel == newModel) // model got a new property
            return;

        //console.log("Model changed!");
        if (this.options.validateAfterLoad === true && this.isNewModel !== true)
            this.validate();
        else
            this.clearValidationErrors();
    }
}

to

methods: {
    modelUpdated: function(newModel){
        if (this.model == newModel) // model got a new property
            return;

        //console.log("Model changed!");
        if (this.options.validateAfterLoad === true && this.isNewModel !== true)
            this.validate();
        else
            this.clearValidationErrors();
    }
}

This need to be tested.

Change in hook

Another thing could be related to ready becoming mounted. There's no longer the guarantee to be in-document and could break most js dependent fields.
We should test if the component is in document ourself now. I have no idea how to do that.
Maybe check if vm.$el have a parent ? And if not use a small setTimeout to lauch the test again soon ?

I'm sure I'm missing a lot of problem, but this seem achievable.
What are your thought ?

Github: https://github.com/gocanto/google-autocomplete
Demo: https://gocanto.github.io/google-autocomplete/

When I create a select box, it will put this inside it:

<Not selected>

Why is this exactly? I would like it to see that it will add my placeholder to the element. Also, languagewise this is conflicting with me, I am dutch and thus anther language would be nice. (Maybe optional when adding such a field)

I was checking attributes in the doc and unit test when I realized that.