:clipboard: A schema-based form generator component for Vue.js

Overview

vue-form-generator NPM version VueJS v2.x compatible

A schema-based form generator component for Vue.js.

Codacy Badge Build Status Coverage Status NPMS.io score Package Quality FOSSA Status

Dependency Status devDependency Status Downloads

Demo

JSFiddle simple example

CodePen simple example

Screenshot

Features

  • reactive forms based on schemas
  • multiple object editing
  • 21 field types
  • built-in validators
  • core & full bundles (41kb and 50kb gzipped)
  • Bootstrap friendly templates
  • customizable styles
  • can be extended easily with custom fields
  • ...etc

Documentation

Online documentation on Gitbook

Dependencies

vue-form-generator uses fecha and lodash internally.

While built-in fields don't need external dependencies, optional fields may need other libraries. These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors. In the end, it's your choice to depend on jQuery or not.

You can find details about dependencies in the official documentation under each specific component.

Installation

NPM

You can install it via NPM or yarn.

Latest version for Vue 2.x

$ npm install vue-form-generator

Legacy version for Vue 1.0.x

$ npm install [email protected]

Manual

Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.

https://github.com/vue-generators/vue-form-generator/archive/master.zip

Core vs Full version

VueFormGenerator come in two version : core and full. Core is a more minimal version with only half the fields. Full is core + other fields.

  • Full bundle: 172 kB (gzipped: 50 kB)
  • Core bundle: 146 kB (gzipped: 41 kB)

If you don't know what to choose, don't worry, the full is the default version. If you want the slim down version, here is the changes:

// the "full" way
<script>
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";  // optional full css additions
</script>

// the "core" way
<script>
  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg-core.css";  // optional core css additions
</script>

Usage

<template>
  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</template>

<script>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'

Vue.use(VueFormGenerator)

export default {
  data () {
    return {
      model: {
        id: 1,
        name: 'John Doe',
        password: 'J0hnD03!x4',
        skills: ['Javascript', 'VueJS'],
        email: '[email protected]',
        status: true
      },
      schema: {
        fields: [
          {
            type: 'input',
            inputType: 'text',
            label: 'ID (disabled text field)',
            model: 'id',
            readonly: true,
            disabled: true
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'Name',
            model: 'name',
            placeholder: 'Your name',
            featured: true,
            required: true
          },
          {
            type: 'input',
            inputType: 'password',
            label: 'Password',
            model: 'password',
            min: 6,
            required: true,
            hint: 'Minimum 6 characters',
            validator: VueFormGenerator.validators.string
          },
          {
            type: 'select',
            label: 'Skills',
            model: 'skills',
            values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
          },
          {
            type: 'input',
            inputType: 'email',
            label: 'E-mail',
            model: 'email',
            placeholder: 'User\'s e-mail address'
          },
          {
            type: 'checkbox',
            label: 'Status',
            model: 'status',
            default: true
          }
        ]
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
        validateAsync: true
      }
    }
  }
}
</script>

Usage in local components

import VueFormGenerator from "vue-form-generator";

//component javascript
export default {
	components: {
		"vue-form-generator": VueFormGenerator.component
	}
};

Development

This command will start a webpack-dev-server with content of dev folder.

npm run dev

Build

This command will build a distributable version in the dist directory.

npm run build

Test

npm test

or

npm run ci

More fields new

VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :

  • vfg-field-myfield
  • vfg-field-calendar
  • vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !

Public Custom Fields

  • vue-tel-input - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
  • vfg-field-sourcecode - A source code field for vue-form-generator
  • vfg-field-array - A vue-form-generator field to handle arrays of items of any type.
  • vfg-field-object - A vue-form-generator field to handle objects, with or without schemas.
  • vfg-field-matrix - A matrix field for vue-form-generator.

Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

License

vue-form-generator is available under the MIT license.

Contact

Copyright (C) 2017 Icebob

@icebob @icebob

Comments
  • update docs for v0.4.0

    update docs for v0.4.0

    • [x] vue-multiselect field #20
    • [x] fieldSubmit #26
    • [x] customizable styles #29
    • [x] fieldCleave #31
    • [x] fieldPikaday #31
    • [x] fieldNoUiSlider #31
    • [x] fieldGoogleAddress #33
    • [x] visible & disabled, values schema functions description
    • [x] ES5 examples (change visible(model) {...} to visible: function(model) {...} )
    opened by icebob 64
  • Huge component size

    Huge component size

    Just noticed that the overall component has 400+ kb in size. I must say that's pretty huge for a component that generates fields. After taking a look at the source code I noticed that moment.js is used in several places for very basic functionalities. I think you can get rid of it to save some space.

    Only by removing all moment js dependencies (4) the size shrinked from 400kb to 176kb. There is also one component fieldVueMultiSelect which for some reason uses the whole Vue library. I don't think there is need to bring the whole library just to instantiate that component. There should be another way of doing it. By removing the vue dep the final file further reduces to 126kb.

    Taking down lodash util function brings the file down under 100kb. To sum it up, by removing only external dependencies (moment, vue and lodash) I managed to bring the library down from 400+ kb to 55kb and by removing external components it goes down to 29kb.

    The size here is huge factor for people deciding whether to use such a component or not. I would say we could shrink this one down to 100-150kb very easily and then with some effort it can be brought under 100kb.

    enhancement difficulty: medium 
    opened by cristijora 38
  • Create unit tests for new fields

    Create unit tests for new fields

    • [x] fieldCleave
    • [x] fieldMasked
    • [x] fieldNoUiSlider
    • [x] fieldPikaday
    • [x] fieldSlider
    • [x] fieldSpektrum
    • [x] fieldVueMultiSelect
    • [x] fieldGoogleAddress
    enhancement difficulty: medium 
    opened by icebob 34
  • Vue.js 2.0 support

    Vue.js 2.0 support

    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 ?

    enhancement difficulty: hard in progress 
    opened by lionel-bijaoui 30
  • Update to Webpack 3. Almost all dependency are updated.

    Update to Webpack 3. Almost all dependency are updated.

    Reorganisation of the config files. Now use Prettier, so most files are will need to be updated to validate. This is stil an early WIP.

    Known bugs: validation is broken since rewritten in without "module.exports"

    opened by lionel-bijaoui 27
  • v2.3.0 release

    v2.3.0 release

    This issue is for tracking the discussion related to releasing v2.3.0

    For example, I get the following output when running the v2.3.0 tests, looks like the majority of "errors" are related to fieldSelectEx.vue tests.

    
    > [email protected] pretest ./vue-form-generator
    > npm run lint
    
    
    > [email protected] lint ./vue-form-generator
    > eslint --ext=.js,.vue src test/unit/specs
    
    
    > [email protected] test ./vue-form-generator
    > npm run unit
    
    
    > [email protected] unit ./vue-form-generator
    > cross-env NODE_ENV=test nyc npm run mocha
    
    
    > [email protected] mocha ./vue-form-generator
    > mocha-webpack --webpack-config build/webpack.test.config.js --require test/unit/setup.js test/unit/specs/**/*.spec.js
    
     WEBPACK  Compiling...
    
     WEBPACK  Compiled successfully in 5838ms
    
     MOCHA  Testing...
    
    
    
      abstractField.vue
        check static value
          ✓ should give the model static value
          ✓ should set new value to model if value changed
        check nested value
          ✓ should give the model static value
          ✓ should set new value to model if value changed
        check nested value if not exists
          ✓ should give the model static value
          ✓ should set new value to model if value changed
        check value as get/set function
          - should be called the schema.get function
          ✓ should set new value to model if value changed
        check formatValueToField & formatValueToModel function
          ✓ should return the formatted value
          ✓ should set the formatted value to model
        check schema onChanged event
          ✓ should called once the schema.onChanged
        check validateAfterChanged option
          ✓ should not call validate function after value changed
          ✓ should call validate function after value changed
        check validate function with one validator
          ✓ should call schema validator
        check validate function if field is disabled
          ✓ should not call schema validator
        check validate function if field is readonly
          ✓ should not call schema validator
        check validate function with validator array
          ✓ should call schema validator
        check schema onValidated event
          ✓ should called once the schema.onValidated
        check schema onValidated event
          ✓ should return empty array
          ✓ should not call 'onValidated'
          ✓ should return empty array
        check clearValidationErrors
          ✓ should be undefined
          ✓ should be an empty array
          ✓ should contain one error string
        check getFieldID function
          ✓ should return slugified inputName, if available
          ✓ should return slugified label, if no inputName
          ✓ should return slugified model name, if no inputName or label
        check classes application to fields
          ✓ should have 2 classes ('applied-class' and 'another-class')
    
      FieldCheckbox.vue
        check template
          ✓ should contain a checkbox element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          - model value should be the input value if changed
          ✓ should have 2 classes
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set inputName
        check dynamic html attributes
          check input/wrapper attributes
            ✓ input should have data-* attribute
          check non-specific attributes
            ✓ input should have data-* attribute
    
      fieldChecklist.vue
        check listbox template
          check template with static string array
            ✓ should contain a .listbox element
            ✓ should contain 7 items
            ✓ should checked the values
            test values reactivity to changes
              ✓ listbox value should be the model value after changed
              ✓ model value should be the listbox value if changed
            test 'is-checked' class attribution reactivity to changes
              ✓ .list-row with checked input should have a 'is-checked' class
              ✓ .list-row with checked input should have a 'is-checked' class after model value is changed
              ✓ .list-row with checked input should have a 'is-checked' class after listbox value is changed
          check static values with { value, name } objects (default key name)
            ✓ should contain items
            ✓ should checked the values
            test values reactivity to changes
              ✓ listbox value should be the model value after changed
              ✓ model value should be the listbox value if changed
            test 'is-checked' class attribution reactivity to changes
              ✓ .list-row with checked input should have a 'is-checked' class
              ✓ .list-row with checked input should have a 'is-checked' class after model value is changed
              ✓ .list-row with checked input should have a 'is-checked' class after listbox value is changed
          check static values with { id, label } objects (custom key name with `checklistOptions`)
            ✓ should contain items
            ✓ should checked the values
            test values reactivity to changes
              ✓ listbox value should be the model value after changed
              ✓ model value should be the listbox value if changed
            test 'is-checked' class attribution reactivity to changes
              ✓ .list-row with checked input should have a 'is-checked' class
              ✓ .list-row with checked input should have a 'is-checked' class after model value is changed
              ✓ .list-row with checked input should have a 'is-checked' class after listbox value is changed
          check function values
            ✓ should contain items
            ✓ should checked the values
            ✓ should contain input name field withouth inputName
            ✓ should contain input name field with inputName
            test values reactivity to changes
              ✓ listbox value should be the model value after changed
              ✓ model value should be the listbox value if changed
            test 'is-checked' class attribution reactivity to changes
              ✓ .list-row with checked input should have a 'is-checked' class
              ✓ .list-row with checked input should have a 'is-checked' class after model value is changed
              ✓ .list-row with checked input should have a 'is-checked' class after listbox value is changed
        check combobox template
          check template
            ✓ should contain a .combobox element
            ✓ should contain a .dropList element
            ✓ should contain a .mainRow element
            ✓ should contain 7 checkbox it expanded 
            ✓ should contain input name field withouth inputName
            ✓ should contain input name field with inputName
            ✓ should checked the values
            test values reactivity to changes
              ✓ dropList value should be the model value after changed
              ✓ model value should be the dropList value if changed (add)
              ✓ model value should be the checklist value if changed (remove)
              - model value should be the dropList value if changed (null)
            test 'is-checked' class attribution reactivity to changes
              ✓ .list-row with checked input should have a 'is-checked' class
              ✓ .list-row with checked input should have a 'is-checked' class after model value is changed
              - .list-row with checked input should have a 'is-checked' class after listbox value is changed
        check dynamic html attributes
          check listbox input/wrapper attributes
            ✓ wrapper should have data-* attribute
            ✓ input should have data-* attribute
          check combobox input/wrapper attributes
            ✓ wrapper should have data-* attribute
            - input should have data-* attribute
          check non-specific attributes
            ✓ input should have data-* attribute
    
      fieldCleave.vue
        check template
          ✓ should contain an masked input element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should be formatted data in model
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set readonly
            ✓ should set inputName
    
      fieldDateTimePicker.vue
        check template
    Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!
          ✓ should contain an input text element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
        check YYYYMMDD format
          - should contain the value
    Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!
          ✓ model value should be the formatted input value if changed
    
      fieldGoogleAddress.vue
        check template
    Google Maps API is missing. Please add https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places script in the HTML head section!
          ✓ should contain an input text element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      fieldImage.vue
        check template without preview
          ✓ should contain an input text element
          ✓ should contain a file input element
          ✓ should not visible the preview div
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should not contain a file input element if browse is false
          ✓ should not visible the preview div
          ✓ should not show the link input element if hideInput is true
          ✓ should not show base64 data in input field
          ✓ should clear input if press remove icon
          - should convert image to base64 if file input changed
          check optional attribute on text input
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
          check optional attribute on file input
            ✓ should set disabled
            ✓ should set inputName
    
      fieldInput.vue
        check template
          ✓ should contain an input text element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should have 2 classes
          change type of input
            ✓ should become a text
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
          change type of input
            ✓ should become a password
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
          change type of input
            ✓ should become a number
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
          change type of input
            ✓ should become a email
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
          change type of input
            ✓ should become a url
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
          change type of input
            ✓ should become a tel
            check optional attribute
              ✓ should set autocomplete
              ✓ should set disabled
              ✓ should set placeholder
              ✓ should set readonly
              ✓ should set inputName
        check dynamic html attributes
          check input/wrapper attributes
            ✓ wrapper should have data-toggle attribute
            ✓ input should have data-toggle attribute
          check non-specific attributes
            ✓ input should have data-toggle attribute
    
      fieldLabel.vue
        check template
          ✓ should contain a span element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ should have 2 classes
        check dynamic html attributes
          check label attributes
            ✓ label should have data-* attribute
          check non-specific attributes
            ✓ label should have data-* attribute
    
      fieldMasked.vue
        check template
    JQuery MaskedInput library is missing. Please download from https://github.com/digitalBush/jquery.maskedinput and load the script in the HTML head section!
          ✓ should contain an masked input element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          - should be formatted data in model
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      fieldNoUiSlider.vue
        check template
          ✓ should contain a div element
          ✓ should contain an handle element
          ✓ should contain the value
          ✓ handle value should be the model value after changed
          - model value should be the handle value after changed
          ✓ should set disabled
    
      fieldPikaday.vue
        check template
          ✓ should contain an input text element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          - model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      FieldRadios.vue
        check template with static string array
          ✓ should contain a checkbox element
          ✓ should contain 7 items
          ✓ should checked the values
          ✓ label with checked input should have a 'is-checked' class
          ✓ should have 2 classes
          test values reactivity to changes
            ✓ radioList value should be the model value after changed
            ✓ model value should be the radioList value if changed
          test 'is-checked' class attribution reactivity to changes
            ✓ label with checked input should have a 'is-checked' class after model value is changed
            ✓ label with checked input should have a 'is-checked' class after radioList value is changed
        check static values with { value, name } objects (default key name)
          ✓ should contain a checkbox element
          ✓ should contain 7 items
          ✓ should checked the values
          ✓ label with checked input should have a 'is-checked' class
          test values reactivity to changes
            ✓ radioList value should be the model value after changed
            ✓ model value should be the radioList value if changed
          test 'is-checked' class attribution reactivity to changes
            ✓ label with checked input should have a 'is-checked' class after model value is changed
            ✓ label with checked input should have a 'is-checked' class after radioList value is changed
        check static values with { id, label } objects (custom key name with `radiosOptions`)
          ✓ should contain a checkbox element
          ✓ should contain 7 items
          ✓ should checked the values
          ✓ label with checked input should have a 'is-checked' class
          test values reactivity to changes
            ✓ radioList value should be the model value after changed
            ✓ model value should be the radioList value if changed
          test 'is-checked' class attribution reactivity to changes
            ✓ label with checked input should have a 'is-checked' class after model value is changed
            ✓ label with checked input should have a 'is-checked' class after radioList value is changed
    
      fieldRangeSlider.vue
        check template
    ion.rangeSlider library is missing. Please download from https://github.com/IonDen/ion.rangeSlider and load the script and CSS in the HTML head section!
          ✓ should contain an input text element
          - should contain the value
          - input value should be the model value after changed
          - model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      fieldSelect.vue
        check template
          ✓ should contain a select element
          ✓ should contain option elements
          ✓ should contain a <non selected> element
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should contain a disabled <non selected> element if required
          ✓ should show the customized <non selected> text
          ✓ should hide the customized <non selected> text
          check optional attribute
            ✓ should set disabled
            ✓ should set inputName
        check static values with { id, name } objects
          ✓ should contain option elements
          ✓ should contain optgroup elements
          ✓ should contain option elements in optgroup
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
        check function values
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should have 2 classes
        check dynamic html attributes
          check input/wrapper attributes
            ✓ input should have data-toggle attribute
          check non-specific attributes
            ✓ input should have data-toggle attribute
    
      fieldSelectEx.vue
        check template
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
          ✓ should contain a select element
          ✓ should contain option elements
          ✓ should contain a <non selected> element
          ✓ should contain the value
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:77:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:77:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ input value should be the model value after changed (54ms)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:84:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:84:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ model value should be the input value if changed
          - should not be multiple
          check optional attribute
            ✓ should set disabled
            ✓ should set multiSelect
            ✓ should set inputName
        check static values with { id, name } objects
          - should contain option elements
          - should contain the value
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:140:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:140:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ input value should be the model value after changed
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:147:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:147:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ model value should be the input value if changed
        check function values
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:171:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Hook.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:317:10)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:171:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Hook.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:317:10)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          - should contain the value
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:67:1)
        at Array.<anonymous> (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:180:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:180:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ input value should be the model value after changed
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:186:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
    TypeError: Cannot read property 'selectpicker' of undefined
        at VueComponent.model (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/fieldSelectEx.vue:61:1)
        at Watcher.run (./vue-form-generator/node_modules/vue/dist/vue.runtime.common.js:3231:19)
        at ./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4040:15
        at Array.forEach (<anonymous>)
        at VueComponent.update (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:4039:20)
        at Wrapper.trigger (./vue-form-generator/node_modules/@vue/test-utils/dist/vue-test-utils.js:1422:8)
        at Context.<anonymous> (./vue-form-generator/.tmp/mocha-webpack/1530108416672/webpack:/test/unit/specs/fields/fieldSelectEx.spec.js:186:1)
        at callFn (./vue-form-generator/node_modules/mocha/lib/runnable.js:372:21)
        at Test.Runnable.run (./vue-form-generator/node_modules/mocha/lib/runnable.js:364:7)
        at Runner.runTest (./vue-form-generator/node_modules/mocha/lib/runner.js:455:10)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:573:12
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:369:14)
        at ./vue-form-generator/node_modules/mocha/lib/runner.js:379:7
        at next (./vue-form-generator/node_modules/mocha/lib/runner.js:303:14)
        at Immediate.<anonymous> (./vue-form-generator/node_modules/mocha/lib/runner.js:347:5)
        at runCallback (timers.js:810:20)
        at tryOnImmediate (timers.js:768:5)
        at processImmediate [as _immediateCallback] (timers.js:745:5)
          ✓ model value should be the input value if changed
    
      fieldSpectrum.vue
        check template
    Spectrum color library is missing. Please download from http://bgrins.github.io/spectrum/ and load the script and CSS in the HTML head section!
          ✓ should contain an input color element
          - should contain the value
          - input value should be the model value after changed
          - model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      fieldStaticMap.vue
        check template
          ✓ should contain an img element
    
      fieldSubmit.vue
        check template
          ✓ should contain an input submit element
          ✓ should have 2 classes
          valid form
            - should not call validate if validateBeforeSubmit is false
            - should call validate if validateBeforeSubmit is true
          invalid form
            - should not call onSubmit if validateBeforeSubmit is true
          check optional attribute
            ✓ should set inputName
    
      FieldSwitch.vue
        check template
          ✓ should contain a checkbox element
          ✓ should contain the value
          ✓ should contain the default On/Off texts
          ✓ should set disabled
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          check optional attribute
            ✓ should set autocomplete
            ✓ should set disabled
            ✓ should set inputName
        check template with custom On/Off texts
          ✓ check attributes
        check template with custom On/Off values
          ✓ check input value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
    
      fieldTextArea.vue
        check template
          ✓ should contain a textarea element
          ✓ should change rows to 4
          ✓ should contain the value
          ✓ input value should be the model value after changed
          ✓ model value should be the input value if changed
          ✓ should have 2 classes
          check optional attribute
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set inputName
    
      fieldUpload.vue
        check template
          ✓ should contain an input text element
          check optional attribute
            ✓ should set disabled
            ✓ should set placeholder
            ✓ should set readonly
            ✓ should set name
            ✓ should set required
            ✓ should set multiple
            ✓ should set accept
    
      fieldVueMultiSelect.vue
        check template
          ✓ should contain a select element
          ✓ should contain option elements
          ✓ should set disabled
          ✓ input value should be the model value after changed
          ✓ input value should be the model value after changed (multiselection)
          ✓ model value should be the input value if changed
          with objects
            ✓ model value should work with objects
            ✓ options should contain only text specified in label
            ✓ options should contain custom text specified in customLabel
    
      SchemaUtils
        test createDefaultObject function
          ✓ create default object by schema
        test getMultipleFields function
          ✓ collect fields from schema where multi is true
        test mergeMultiObjectFields function
          ✓ create merged model from multiple objects #1
          ✓ create merged model from multiple objects #2
          ✓ create merged model from cloned objects
    
      Validators
        test Validators.required
          ✓ should NOT give error if value is null, but field is NOT required
          ✓ should give error if value is null, but field is required
        test Validators.number
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is smaller than min
          ✓ should give error if value is greater than max
          ✓ should not give error
          ✓ should give error if value is string
          ✓ should not give error if value is null and  field is not required
        test Validators.integer
          ✓ should give error if value is not integer
          ✓ should not give error if value is integer
        test Validators.double
          ✓ should give error if value is not double
          ✓ should not give error if value is double
        test Validators.string
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is smaller than min
          ✓ should give error if value is greater than max
          ✓ should give error if value is not string
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.array
          ✓ should give error if value is null, but field is required
          ✓ should give error if count of items is smaller than min
          ✓ should give error if count of items is greater than max
          ✓ should give error if value is not array
          ✓ should not give error
          ✓ should not give error if value is null and field is not required
          ✓ should give error if count of item is smaller than minimum and field is not required
        test Validators.date
          ✓ should give error if value is null, but field is required
          ✓ should not give error
          ✓ should give error if value is smaller than min
          ✓ should give error if value is greater than max
          ✓ should give error if value is not a date
          ✓ should not give error if value is null and  field is not required
        test Validators.regexp
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not matched the pattern
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.email
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not matched the pattern
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.url
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not matched the pattern
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.creditCard
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not matched the pattern
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.alpha
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not alpha
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test Validators.alphaNumeric
          ✓ should give error if value is null, but field is required
          ✓ should give error if value is not alphaNumeric
          ✓ should not give error
          ✓ should not give error if value is null and  field is not required
        test localized error messages
          ✓ should give the default error message
          ✓ should give the localized error message
        test local custom error messages
          ✓ should give the custom error message
          ✓ should give the default error message
    
    
      381 passing (1s)
      23 pending
    
     MOCHA  Tests completed successfully
    
    -------------------------------------|----------|----------|----------|----------|-------------------|
    File                                 |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
    -------------------------------------|----------|----------|----------|----------|-------------------|
    All files                            |    73.74 |    63.82 |    76.09 |    73.53 |                   |
     fields                              |       85 |    72.13 |     87.5 |    84.85 |                   |
      abstractField.js                   |       85 |    72.13 |     87.5 |    84.85 |... 39,140,145,167 |
     fields/core/src/fields/core         |    65.28 |     57.6 |    33.33 |    65.28 |                   |
      fieldChecklist.vue                 |    91.43 |    90.91 |      100 |    91.43 |          66,81,95 |
      fieldInput.vue                     |    27.27 |     7.69 |        0 |    27.27 |... 30,132,140,146 |
      fieldRadios.vue                    |    86.36 |    83.33 |      100 |    86.36 |          20,39,54 |
      fieldSelect.vue                    |    87.18 |    78.13 |      100 |    87.18 |96,102,108,119,124 |
      fieldSubmit.vue                    |        0 |        0 |        0 |        0 |... 27,28,30,32,35 |
      fieldUpload.vue                    |        0 |        0 |      100 |        0 |             25,27 |
     fields/optional/src/fields/optional |    53.54 |    43.43 |    66.67 |    53.37 |                   |
      fieldCleave.vue                    |    53.85 |       50 |      100 |    53.85 | 54,57,64,69,70,71 |
      fieldDateTimePicker.vue            |    58.33 |    42.86 |       50 |    54.55 |    31,32,39,50,51 |
      fieldGoogleAddress.vue             |    18.18 |     12.5 |       50 |    18.18 |... 8,89,90,95,100 |
      fieldImage.vue                     |    70.59 |    66.67 |        0 |    68.75 |    57,58,59,62,63 |
      fieldMasked.vue                    |       60 |    33.33 |      100 |       60 |             15,27 |
      fieldNoUiSlider.vue                |    57.69 |    51.61 |      100 |    57.69 |... 55,61,64,88,96 |
      fieldPikaday.vue                   |    63.64 |       50 |       50 |       70 |          34,40,46 |
      fieldRangeSlider.vue               |       20 |       10 |       50 |       20 |... 54,55,57,62,72 |
      fieldSelectEx.vue                  |    70.83 |       50 |      100 |    70.83 |... 45,50,68,72,80 |
      fieldSpectrum.vue                  |    30.77 |     12.5 |       50 |    33.33 |... 27,34,44,48,56 |
      fieldStaticMap.vue                 |      100 |       70 |      100 |      100 |          14,16,35 |
      fieldSwitch.vue                    |    85.71 |     87.5 |      100 |    83.33 |                24 |
      fieldVueMultiSelect.vue            |    52.94 |    53.33 |      100 |    52.94 |... 5,89,90,91,110 |
     utils                               |    97.14 |    91.61 |      100 |    98.14 |                   |
      dateFieldHelper.js                 |       90 |       75 |      100 |       90 |                10 |
      schema.js                          |    97.22 |       84 |      100 |    97.14 |                59 |
      validators.js                      |    97.67 |    94.26 |      100 |    99.14 |               153 |
    -------------------------------------|----------|----------|----------|----------|-------------------|
    
    need investigate in progress 
    opened by zoul0813 26
  • create native HTML5 fields

    create native HTML5 fields

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

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

    Available types

    • [x] date
    • [x] datetime
    • [x] datetime-local
    • [x] time
    • [x] month
    • [x] week

    Other HTML5 types

    • [x] url
    • [x] tel
    • [x] radio

    Set this inputType to the field type attributes:

    input( :type="schema.inputType")
    
    enhancement difficulty: medium in progress 
    opened by icebob 26
  • Update docs & readme

    Update docs & readme

    After #120 we need to update docs & readme

    • Update docs on gitbook
      • [ ] rewrite examples
      • [ ] refresh "Install" & "Usage" section (how to use full & core bundle)
      • [ ] refresh "Features" section
      • [ ] add info about bundle sizes
      • [ ] refresh dependencies (remove momentjs)

    • Update readme
      • [ ] rewrite examples
      • [ ] refresh "Install" & "Usage" section (how to use full & core bundle)
      • [ ] refresh "Features" section
      • [ ] add info about bundle sizes
      • [ ] refresh dependencies (remove momentjs)
    enhancement difficulty: medium documentation in progress 
    opened by icebob 25
  • Grouping fields

    Grouping fields

    This PR add two new features to vfg by @dflock & @jmverges.

    1. add ID prefix for fields
    2. support to grouping fields of schema Syntax:
    schema: {
        groups:[{
            legend: "Contact Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "Name",
                    model: "name"
                },
                {
                    type: "input",
                    inputType: "email",
                    label: "Email",
                    model: "email"
                }
            ]
        },{
            legend: "Other Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "More",
                    model: "others.more"
                },
                {
                    type: "input",
                    inputType: "text",
                    label: "Things",
                    model: "others.things"
                }
            ]
        }],
        fields: [
            {
                type: "input",
                inputType: "text",
                label: "Single field (without group)",
                model: "single"
            }
        ]
    }
    

    Dev example: http://localhost:8080/grouping/

    enhancement difficulty: medium in progress 
    opened by icebob 22
  • Dynamic Rows

    Dynamic Rows

    #226

    Feel free to suggest any changes, this is definitely WIP and a start for dynamic rows in VFG.

    Example Code for how it works:

              fields: [{
                type: 'dynamic',
                model: 'rows',
                schema: {
                  fields: [{
                    type: 'input',
                    inputType: 'text',
                    model: 'firstName',
                    placeholder: 'First Name',
                  }, {
                    type: 'input',
                    inputType: 'text',
                    model: 'lastName',
                    placeholder: 'Last Name',
                  }]
                }
              }]
    

    GIF of how it works: 2017-10-17_14-33-06

    Needs to be cleaned up, as you can see from the GIF it doesn't work well with groups, but I'm not sure how to do it.

    opened by lukeramsden 21
  • Entering date with keyboard does not work ($50 bounty to fix)

    Entering date with keyboard does not work ($50 bounty to fix)

    I have a fiddle here: https://jsfiddle.net/sjordan/r81k8240/5/

    When I try to enter a date using just the keyboard (tab and number pad) it does not work.

    Repro steps:

    1. Load fiddle at URL in Chrome
    2. Place mouse over "mm" in input field and type 10 (the month 10 is entered and auto tabs to "dd")
    3. Type 31 (the day 31 is entered and auto tabs to "yyyy")
    4. Attempt to type 2017

    I expect to get 10/31/2017; however, in my case I get 10/31/1907

    However, doing the above steps with default HTML5 works; for example, perform the above steps with W3Schools test form: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

    NOTE: I have placed a $50 bounty to get this fixed urgently: https://www.bountysource.com/issues/46214782-entering-date-with-keyboard-does-not-work

    bug wontfix difficulty: medium good first issue Hacktoberfest 
    opened by sjordan1975 20
  • Bump express from 4.16.3 to 4.18.2

    Bump express from 4.16.3 to 4.18.2

    Bumps express from 4.16.3 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.3.2 to 6.3.3

    Bump qs from 6.3.2 to 6.3.3

    Bumps qs from 6.3.2 to 6.3.3.

    Changelog

    Sourced from qs's changelog.

    6.3.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] use safer-buffer instead of Buffer constructor
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • ff235b4 v6.3.3
    • 4310742 [Fix] parse: ignore __proto__ keys (#428)
    • da1eee0 [Dev Deps] backport from main
    • 2c103b6 [actions] backport actions from main
    • aa4580e [Robustness] stringify: avoid relying on a global undefined (#427)
    • f8510a1 [meta] fix README.md (#399)
    • 4c036ce [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 180bfa5 [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • e0b2c4b [Tests] use safer-buffer instead of Buffer constructor
    • f7139bf [Fix] utils.merge: avoid a crash with a null target and an array source
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 0.2.17 to 1.4.2

    Bump loader-utils from 0.2.17 to 1.4.2

    Bumps loader-utils from 0.2.17 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimatch from 0.3.0 to 3.0.3

    Bump minimatch from 0.3.0 to 3.0.3

    Bumps minimatch from 0.3.0 to 3.0.3.

    Commits
    • eed8949 v3.0.3
    • ecabc57 Do not throw on unfinished !( extglob patterns
    • 81edb7c v3.0.2
    • 6944abf Handle extremely long and terrible patterns more gracefully
    • 8ac560e v3.0.1
    • 4f3a8bc update tap
    • 9cf2d88 Remove mentions of cache from readme
    • 7df236f Use svg instead of png to get better image quality
    • 361f803 Fixes spelling mistake from "instanting" to "instantiating"
    • ea0c690 update travis
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for minimatch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump bootstrap from 3.3.7 to 3.4.1

    Bump bootstrap from 3.3.7 to 3.4.1

    Bumps bootstrap from 3.3.7 to 3.4.1.

    Release notes

    Sourced from bootstrap's releases.

    v3.4.1

    • Security: Fixed an XSS vulnerability (CVE-2019-8331) in our tooltip and popover plugins by implementing a new HTML sanitizer
    • Handle bad selectors (#) in data-target for Dropdowns
    • Clarified tooltip selector documentation
    • Added support for NuGet contentFiles

    v3.4.0

    • New: Added a .row-no-gutters class.
    • New: Added docs searching via Algolia.
    • Fixed: Resolved an XSS issue in Alert, Carousel, Collapse, Dropdown, Modal, and Tab components. See https://snyk.io/vuln/npm:bootstrap:20160627 for details.
    • Fixed: Added padding to .navbar-fixed-* on modal open
    • Fixed: Removed the double border on <abbr> elements.
    • Removed Gist creation in web-based Customizer since anonymous gists were disabled long ago by GitHub.
    • Removed drag and drop support from Customizer since it didn't work anymore.
    • Added a dropdown to the docs nav for newer and previous versions.
    • Update the docs to use a new baseurl, /docs/3.4/, to version the v3.x documentation like we do with v4.
    • Reorganized the v3 docs CSS to use Less.
    • Switched to BrowserStack for tests.
    • Updated links to always use https and fix broken URLs.
    • Replaced ZeroClipboard with clipboard.js
    Commits
    Maintainer changes

    This version was pushed to npm by xhmikosr, a new releaser for bootstrap since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.3.4)
  • v2.3.4(Feb 9, 2019)

    v2.3.4 (2019-02-07) #469 - fixes example in README, tested with a fresh vue-cli project (b0037c9) #551 - added "is-disabled" class to the radios label (1e9db8e), closes #551 Add vfg-field-matrix into the readme (a898201) added optional field property debounceValidateTime which works at the field level, allowing indivi (d98fa50) Ref #563 - return unique validation errors (prevents multiple validators from returning "this field (f9c699b), closes #563 single-quotes fix (5756317) Update validators.js (a282933) updated abstractField test, seems the field.formOptions wasn't being updated, the `this.$parent.op (8c1f462) updated package-lock with latest deps (f7d7c71)

    Source code(tar.gz)
    Source code(zip)
  • v2.3.3(Dec 14, 2018)

    • #535, #526 - reversed "deep property path" fix (da32bde), closes #535 #526
    • added "item.disabled" logic, supporting both boolean values and a function that is passed a referenc (b227eb4)
    • added "options" to VFG install function, appending custom "validators" to the validators object that (892469e)
    • added "type" attribute to inside buttons schema, defaults to "button" when one is not provided (3306893)
    • added an optional "unique" flag to "getFieldID" that appends lodash "uniqueId" to the ID when true. (ab1daeb), closes #468
    • added newline (5813f0a)
    • Codacy (guard-for-in) fix (4e81d2d)
    • code fix (b3a1010)
    • Fix required number input does not require a value (f95b38c)
    • fixed code structure (3b750b3)
    • fixed single-quotes (dfee175)
    • fixes #480 - dates are always passed to "date" and "datetime-local" elements using the standard form (db3413f), closes #480
    • fixes an issue with fieldPikaday modifying the field schema and attaching this.$el to it, the pika (2024204)
    • listen for model-updated from fields, and fix debounceFormatFunction property to match fieldInpu (7ad1fca)
    • migrated VFG docs to newer GitBooks, created GitHub Repo for Docs to allow for easier maintenance, u (d372f5b)
    • feat: add maxElements slot to fieldVueMultiSelect (2e91a2f)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Oct 29, 2018)

    • Export dist (9912b5e)
    • Fix deep property path not working (fb02f26)
    • Fix fieldSubmit not calling validate method (c82c44b)
    • Fix Rawgit shut down (34e08a6)
    • docs: replace duplicated 2.3.0 with 2.3.1 (69bbfce)
    • feat(fields): add required attribute to checkbox component (2b3c7e5)
    • feat(fields): add required attribute to radios component (8d04252)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Oct 4, 2018)

  • 3.0.0-beta.4(Oct 3, 2018)

  • 3.0.0-beta.3(Oct 3, 2018)

    This is the first version of the v3 that work It is a major version with lot's of breaking changes (and more to come during the beta phase) Here is a mini migration guide if you want to test it for yourself.

    Breaking changes

    Schema

    Read changes here #481 TL;DR Top keys are restricted to this list :

    const allowedKeys = [
        // Minimal
        "type",
        "model",
        // Identity
        "id",
        "inputName",
        // Texts
        "label",
        "placeholder",
        "hint",
        "help",
        // Modifiers
        "featured",
        "visible",
        "disabled",
        "required",
        "readonly",
        "validator",
        // Other options
        "styleClasses",
        "labelClasses",
        "fieldClasses",
        "fieldOptions",
        "values",
        "buttons",
        "attributes",
        // Getter/Setter
        "get",
        "set",
        // Events
        "onChanged",
        "onValidated"
    ];
    

    fieldOptions was created to replace ***Options (e.g. radiosOptions, selectOptions, pikadayOptions). This mean that any option not in the list must go under this key.

    inputName, placeholder, disabled, required, readonly, fieldClasses, fieldOptions and values are directly available to field (schema.readonly become readonly). They can also all be defined with a function that return their value if needed.

    Lot's of test where updated to reflect the changes.

    Groups

    #484 TL;DR A group is a special type of field.

    {
        type: "group",
        legend: "My new group",
        styleClasses: "nice-group",
        tag: "section",
        fields: [...]
    }
    

    Group don't validate.

    form-group is now form-element and form-group is a recursive component that allow for the flexibility enabled by this new system. So update your CSS if you customized VFG.

    New validation system (internal)

    Still from #484 Manual validation return a promise and is asynchronous. Since everything communication through the event bus (and by event), there is no way to fall back toward synchronous validation for the whole form. It doesn't change the way single validator works as far as I know.

    <vue-form-generator ... ref="form"><vue-form-generator>
    
    /* Old way */
    myManualValidation() {
        let errors = this.$refs.form.validate();
        if(errors.length > 0) {
            // Validation error
            console.warn("Error during validation", error);
        } else {
            // No validation errors
            // ...
    
        }
    }
    /* New way */
    myManualValidation() {
        this.$refs.form.validate().then(
            () => {
                // No validation errors
                // ...
            },
            (error) => {
                // Validation error
                console.warn("Error during validation", error);
            }
        );
    }
    

    Custom label, help, hint and errors block

    #493 Label, help, hint, and errors template can be changed with slot (respectively label, help, hint, and errors).

    Possibility to use scoped-slot to customize fully how label, help, hint and errors are build.

    Expose field object and getValueFromOption function. For errors, errors object is also exposed.

    Exemple (taken from "custom" dev project)

    <vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">
    
        <template slot="label" slot-scope="{ field, getValueFromOption }">
            <h3><i :class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
        </template>
    
        <template slot="help" slot-scope="{ field }">
            <span v-if='field.help' class="help">
                <span @click.prevent="testClick(field.help, $event)">Need help</span>
                <i class="fa fa-question"></i>
                <vue-markdown class="helpText" :source="field.help"></vue-markdown>
            </span>
        </template>
    
        <template slot="hint" slot-scope="{ field, getValueFromOption }">
            <div class="hint hint--info">
                <i class="fa fa-info-circle"></i>
                <span v-html="getValueFromOption(field, 'hint', undefined)"></span>
            </div>
        </template>
    
        <template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
            <span>Custom errors</span>
            <table class="errors help-block">
                <tbody>
                    <thead>
                        <tr>
                            <th scope="col" id="">Index</th>
                            <th scope="col" id="">Error</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(error, index) in errors" :key="index">
                            <td>{{index}}</td>
                            <td v-html="error"></td>
                        </tr>
                    </tbody>
                </tbody>
            </table>
        </template>
    
    </vue-form-generator>
    

    Better validation states

    #495 TL;DR Add "clean" when the value is not manually changed or validated.

    If changed or validated, loose the clean state and is either 'valid" or "error".

    Class name can be customised with "validationCleanClass".

    Project updated to vue-cli 3

    #500 That shouldn't concern you since this is internal, but for contributors it will make things easier.

    Future version will be easier to update and work with.

    Main changes for contributors: npm run dev become npm run serve

    Source code(tar.gz)
    Source code(zip)
  • 3.0.0-beta.2(Oct 3, 2018)

  • 3.0.0-beta.1(Oct 3, 2018)

  • v2.3.0(Sep 24, 2018)

    • Fixed issue with SCSS variables being referenced incorrectly (#449)
    • Updated README to include new third-party VFG Fields
    • Rework of formGenerator use a component
    • Allow HTML for Field Label and Hints
    • Updated package.json URL's for VFG
    • Added a "noResult" slot to FieldVueMultiSelect
    • Include a reference to the VFG instance that triggered a "validated" event (3rd param)
    • Fixed a number parsing bug in IE/Edge with FieldInput
    • Added support for Bootstrap CSS Classes (form-group will not set width on col-* elements)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Apr 26, 2018)

    • Fix NaN with value 0 on input type number/range.
    • Fix bug in fieldUpload that threw error due to $event not being defined
    • Added $event to onValidationError in fieldSubmit
    • Fixed bug with validationErrorClass and validationSuccessClass depending on each
    • Made DEBOUNCE_FORMAT_MS configurable in fieldInput, just pass debounceFormatTimeout: TIME_IN_MS in field schema
    • $event.preventDefault() called when using async validation with fieldSubmit to prevent unwanted form submissions
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Jan 21, 2018)

    • add console.log (fa779bd)
    • add console.log to debug (d05818e)
    • add indent (026439a)
    • add unscape html for error message. (20b8d9d)
    • added "getLabelClasses" and unit test, using the fieldClasses unit test as an example (8c01307)
    • added labelClasses support (acdbb6c)
    • added missing "id" attributes to checkbox, checklist, radios and submit (09d44c1)
    • added missing comma that failed in Travis (32c7627)
    • added styleClasses support to groups (8b6801b)
    • addeds "styleClasses" to group schemas, reimplements #339 (8e4b43d)
    • bumped vue version to 2.5.3 (7d7c0c4)
    • change the judgement (d4bc27a)
    • check if field.type is undefined before appending the "field-undefined" class (9993550)
    • commit the built bundle (45e1436)
    • commit the built dist (12b3cf7)
    • commit without console.log (79a77bd)
    • delete console.log (ed853a2)
    • don't render labels when no label text is provided, proposed option 1 from #347 (8ecc851)
    • fix bower.json validation (2afb4ac)
    • fixed null check (7842b92)
    • fixed Vue version (624ed92)
    • fixes #340 - "none" value set to null, formatValueToField checks for isNil(value) and returns `n (5b42807), closes #340
    • fixes #341 - introduced debounce functionality into formatValueToModel (a46fe31), closes #341
    • fixes #345 - declare debouncedValidateFunc and set it when debouncedValidate() is called... vue 2.2. (ee684f0), closes #345
    • fixes #358 - support "validateBeforeSubmit" with async validators (5a26ef1), closes #358
    • fixes #361 - use $event.target.valueAsNumber for number/range inputs, debounce formatValueToModel (d1a8bcf), closes #361
    • fixes #362 - integer validator now calls number validator, and returns `invalidIntegerl: "The va (8d436be), closes #362
    • Groupped fields "tag" param fixed. (9275a26)
    • moved unit test to formGenerator, as labels are managed by formGenerator and not the field component (f102967)
    • remove garbage (17eeae5)
    • remove the errorUnescaped property, add v-html on the error part (ecd2ca5)
    • remove uniqueId import (c86d7dc)
    • removed commented out console.log statements (e9bf285)
    • removed console.log and fixed quotes (025b541)
    • removed indentation (49f57b8)
    • requested by @icebob (2724809)
    • reverted back to schema.required for "none selected" disabled state, per @icebob (f562d7f)
    • reverting back to original test (4ba3d4a)
    • Update badges (705c6a7)
    • Update formGenerator.vue (3208446)
    • update node-sass (e3eee64)
    • Update README.md (f57faba)
    • Update README.md (1092e01)
    • Update README.md (9d9701b)
    • updated tests for modified label logic (f0c2281)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 20, 2017)

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jun 30, 2017)

  • v2.0.0-beta7(May 31, 2017)

    New

    Accessibility #201

    Now every field has an id property which is the id of input .If not set, will be auto-generated from the slugified version of either: schema.inputName, schema.label or schema.model, in that order. If the fieldIdPrefix option is set, it's value will be prepended to both manual & auto-generated ids.

    Grouping fields #209

    This PR add two new features to vfg by @dflock & @jmverges.

    1. add ID prefix for fields
    2. support to grouping fields of schema Syntax:
    schema: {
        groups:[{
            legend: "Contact Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "Name",
                    model: "name"
                },
                {
                    type: "input",
                    inputType: "email",
                    label: "Email",
                    model: "email"
                }
            ]
        },{
            legend: "Other Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "More",
                    model: "others.more"
                },
                {
                    type: "input",
                    inputType: "text",
                    label: "Things",
                    model: "others.things"
                }
            ]
        }],
        fields: [
            {
                type: "input",
                inputType: "text",
                label: "Single field (without group)",
                model: "single"
            }
        ]
    }
    

    Dev example: http://localhost:8080/grouping/

    Support bootstrap columns on fields #180

    This would allow styleClasses:'col-xs-6' for example if you want to have multiple fields in one row.

    Support custom validation classes #183

    Usage:

    formOptions: {
      validationErrorClass: "has-error",
      validationSuccessClass: "has-success"
    }
    

    Add a props to change the main tag #198

    I have a first solution to make it a little more flexible with the is attribute.

    // vfg.vue
    <template>
        <div :is="tag">VFG</div>
    </template>
    
    <script>
    export default {
        props: {
            tag: {
                type: String,
                default: 'fieldset'
            }
        }
    };
    </script>
    
    basic usage
    <vfg></vfg>
    config usage
    <vfg tag="section"></vfg>
    
    basic usage rendered
    <fieldset>VFG</fieldset>
    config usage rendered
    <section>VFG</section>
    

    Commits

    • :package: build (71e9eb4)
    • :package: build (908100e)
    • :package: build (5105f39)
    • [BUGFIX] Fieldset in proper place un puq template (79c0852)
    • [BUGFIX] vue-form-gerenator class in wrapper div (b5d58ac)
    • [FEATURE] Groups (613e831)
    • Add a props to change the main tag (90b0767)
    • Add support for schema.legend & field id prefixes (a6165c8)
    • Add unit test for vueFormGenerator.fieldTypeHasLabel (c61b941)
    • Added props validation for "tag" and unit test for it. (c728597)
    • Added tests for abstractField.getFieldID() (492514d)
    • bump version (5a30f87)
    • fix checklist validation bug #194 (bea085f), closes #194
    • fix lints (890ed44)
    • fix schema.fields error (d2b67e0)
    • fix tests & layout for fields (ee5ed30)
    • fixed indentation (425faa2)
    • Implement #199 (547ea2e)
    • Make fieldTypeHasLabel test actually work & test default path (d618958)
    • remove .sync (d008869)
    • remove tag from groups (b4dc972)
    • rename options to formOptions because conflicted with vueMultiSelect property (2f29943)
    • rename example & improve code (caa4124)
    • Support bootstrap columns on fields (fc2d47a)
    • Support custom validation classes (378a2a7)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta6(Apr 4, 2017)

    New

    Support async validators #171

    let customAsyncValidator = function(value) {
    	return new Promise((resolve, reject) => {
    		setTimeout(() => {
    			if (value)
    				resolve();
    			else
    				resolve([ "Invalid value from async validator" ]);
    		}, 1000);
    	});
    };
    

    Schema:

    {
    	type: "input",
    	inputType: "url",
    	label: "URL",
    	model: "website",
    	validator: customAsyncValidator
    }
    

    Custom messages for validators #169

    You can add custom validator messages for fields in schema. Every validator function has a method locale. Parameter is an object of custom messages.

    Example:

    let schema = {
    	fields: [
    		{
    			type: "input",
    			inputType: "password",
    			label: "Password",
    			model: "password",
    			min: 6,
    			required: true,
    
    			// String validator with custom error messages
    			validator: validators.string.locale({ 
    				fieldIsRequired: "The password is required!",
    				textTooSmall: "Password must be at least {1} characters"
    			})
    		}
    	]
    }
    

    Result: image

    Ability to use string as name of validator by jmverges #167

    You can set validator as string instead of Function.

    {
    	type: "input",
    	inputType: "text",
    	label: "Name",
    	model: "name",
    	min: 3,
    	validator: "string"
    }
    

    This is a shorthand for VueFormGenerator.validators.string. It can be an Array of Strings too.

    Fixes

    • fixed vue-multiselect customLabel handling by cristijora #159
    • fixed "TypeError: this.value.push is not a function" in checklist by lionel-bijaoui #156
    • ... other minor fixes.

    Commits

    • :package: build (dd33ea0)
    • #159 Fix customLabel function from multi-select field to work with object values (84d3e41)
    • #172 Sync model value with files from file upload input (4ac96e4)
    • checklist field now support array of string or array of objects (with name and value propertie (be09146)
    • radios field now support array of string or array of objects (with name and value properties) (0f48c30)
    • add .locale method to every validator (1dc7fb7)
    • Add a is-checked class to element where the input is checked to ease customisation. Add checklist (3facc08)
    • add example to dev (267073c)
    • add test for async validator (e9463c2)
    • bump version (8ced4af)
    • change input event to change on checlist field (e6a2b9a)
    • Change onChange trigger event from change to input for checklist (67a3659)
    • fix #174 (d939c95), closes #174
    • Fix a problem with value define but not an Array (190f67a)
    • fix double validator (7c6d658)
    • Fix error "TypeError: this.value.push is not a function" in checklist (c66b0e9)
    • fix lint (1f99ab6)
    • fix parameters of validators (d97c917)
    • Fix test to reflect changes (6126f25)
    • fix usage example in readme (596b302)
    • Fix validator messages interpolation (6b44e39)
    • Improve readme file. (846cf15)
    • Move some dependency to devDependency (b00e4bb)
    • Provides ability to use strings as validators (36c7829)
    • remove only from test (560d234)
    • simplify code (cd922ee)
    • support async (promised) validators #170 (d50a756)
    • update code language in readme (3ee0865)
    • Update the unit test to reflect the changes and test for the new behavior. Fix lint error. (1f6150f)
    • Update unit test for checklist (24eb17f)
    • Update unit test for radios (8a94e81)
    • Use this.$set instead of a direct assignation (4b7e118)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta5(Mar 1, 2017)

    Break changes

    Removed deprecated fields. #121

    If you are using text, number, color, email, password or range field type in schema, please change it to input and set the type into inputType property. Example:

    Old way

        {
            type: "text"
        },
        {
            type: "number"
        }
    

    New way

        {
            type: "input"
            inputType: "text"
        },
        {
            type: "input"
            inputType: "number"
        }
    

    Created two separated & renamed bundle file: full and core #121

    Core is a more minimal version with only half the fields. Full is core + other fields.

    • Full bundle: 75 kB (gzipped: 19 kB)
    • Core bundle: 39 kB (gzipped: 11 kB)

    If you don't know what to choose, don't worry, the full is the default version.
    If you want the slim down version, here is the changes:

    // the "core" way
    <script>
      import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
      import "vue-form-generator/dist/vfg-core.css";
    </script>
    

    Validation error handling changed #128 #109

    1. VFG component emits a validated event, if validation executed. Event parameters: isValid: boolean, errors: Array

    Example:

    <vue-form-generator @validated="onValidated" />
    
    ...
    
    methods:{
      onValidated(isValid, errors) {
       console.log("Validation result: ", isValid, ", Errors:", errors);
      }
    }
    
    
    1. Fields validation schema.errors issue is fixed. Now errors in the local data. The communication with parent is event-based (similar @validated solution)
    2. Fix this in schema functions. Now this is always the instance of vfg. Parameters: model, fieldSchema, vfg

    Other important updates

    • removed unneccessary dependencies #112
    • removed momentjs dependency and switch to fecha (more lightweight) #117
    • upgrade from jade to pug #132
    • improve validation error handling & events #129
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta4(Feb 15, 2017)

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta3(Feb 10, 2017)

  • v2.0.0-beta2(Jan 30, 2017)

    • :bug: fix examples (b8c82c0)
    • :bug: fix examples (86d2ef4)
    • :package: Build beta2 (ab562bd)
    • Add support for readonly and featured field functions (065d0a7)
    • Allow form fields required state to be controlled with a function, (e08dbbb)
    • bump version to 2.0.0-beta2 (94347e7)
    • fix checkbox tests (593307b)
    • Fix some CSS visual bugs (7a786f7)
    • fix some errors (8d3ca97)
    • Fix vue version in examples (ebfc4b0)
    • fix vue-multiselect test errors (2aacb57)
    • remove console.log (454fa0e)
    • remove v4 from travis (bbdcc0f)
    • reorganize dev codes (386fa3f)
    • update deps (f4e5709)
    • update readme (eb6328c)
    • Update README.md (ea91365)
    • update travis. Remove v5, add v7 (1d85539)
    • update yarn lock (e57725c)
    • update yarn lock (df5aca0)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta1(Dec 12, 2016)

    • :bug: fix $index (80ecf31)
    • :bug: fix examples (8ab6894)
    • :package: first build for Vue 2.x (393461b)
    • [wip] modification to work with vuejs 2.0. (0b1df2c)
    • Fix a bug with v-model and dynamic type on input. (1d090df)
    • fix validator error (d671057)
    • Update README.md (acd1e22)
    • Update vuejs version to 2.1.3, and made change accordingly (added vue-template-compiler). Update vue (61b76c1)
    • test: fix checklist tests (f3202fa)
    • test: fix fieldCleave tests (caae630)
    • test: fix selectEx tests (b240183)
    • test: fix test cases (8044f9e)
    • fix: aligned with issue #84 (5d6c0c7)
    • fix: rewrite in jade and commenting problematic fields (35be49e)
    Source code(tar.gz)
    Source code(zip)
  • v0.6.1(Nov 28, 2016)

  • v0.6.0(Nov 14, 2016)

    • :bug: Fix options prop default #91 (3d2e821), closes #91
    • :package: build (51abcca)
    • :package: Build (ce72dc4)
    • :package: bump version & build (d56f93c)
    • add bower (ce44822)
    • add number prop to input field (a40e23c)
    • add step attribute to number field #92 (ce64c4e)
    • Fix #82 (7a83777), closes #82
    • Fix #84 (2c36001), closes #84
    • Fix #84 (58093c7), closes #84
    • fix lints (1f8f3d9)
    • Implement #78 (f92b193)
    • quick fix for #85 (cad76da), closes #85
    • remote customLabel prop from multiselect because give errors (5dfc5bb)
    • remove commit message package (682c6ab)
    • Update README.md (8128a52)
    • docs: fix npms.io badge url (475eb91)
    • test: add attr checker to switch field (2ed434e)
    • test: add file input attr test (352fb20)
    • test: add test to #82 (aefdbac)
    • test: attr test to submit field (1627c71)
    • test: lock multiselect version (5b0a4d0)
    • fix: customLabel return a basic function when undefined instead of null (9b3d51d)
    • bug: fix quotes (13d6e0f)
    • new: add form POST example (08412c7)
    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(Sep 28, 2016)

    Break changes

    • dateTime field renamed to dateTimePicker #50
    • slider field renamed to rangeSlider #50
    • sliderOptions property renamed to noUiSliderOptions

    New fields

    • input #50
    • radios #80

    Commits

    • :bug: fix: Fixed #75 (f8db7b0), closes #75
    • :package: build (af75ebc)
    • :package: Build v.0.5.0 (b67ada9)
    • Add dynamic class to help styling of the noUiSlider field (2ce1938)
    • add test for radios field and update schema (07605c1)
    • Bump version to v0.5.0 (14b34be)
    • code maintenance (307e903)
    • creation of two computed value to avoid a warning from Vue in noUiSlider field (6f5b71d)
    • fix #71 format value to properly interact with model and other fields (b48c7f1), closes #71
    • fix linting (4bc0601)
    • format date related fields values (cf2f577)
    • hideInput prop in dev schema (b68f94f)
    • rename dateTime to dateTimePicker and slider to rangeSlider (5830e85)
    • rename field html5 to input (323968e)
    • rename sliderOptions to noUiSliderOptions to follow schema logic (7f4afa9)
    • update dependencies #79 (7298080)
    • Update README.md (f70b5e8)
    • Update README.md (7d89746)
    • Update README.md (a8ec66e)
    • update schema (bce9070)
    • Update schema and data for dev (4c76f21)
    • update schema and fix a test (b97c6bd)
    • fix: check value correspond to selected value (b00e777)
    • fix: fix Codacy issues (deb50b6)
    • fix: forgot the new method getStartValue() (13b74e3)
    • fix: missing closing bracket (42c42b0)
    • fix: moment import (ebf7484)
    • fix: remove console.log (7cf484a)
    • new: hideInput prop in fieldImage #77 (deb4ec5)
    • new: new "radios" field (7106394)
    • new: new field html5 input (5189b99)
    • docs: commenting methods (0d7848e)
    • docs: commenting methods (dc17006)
    • docs: remove TODOS from readme (76aeb52)
    • test: deactivate a unit test. Add a better check to avoid "undefined" warning on a condition. (4afccd3)
    • enhancement: staticMap updated with more options for more flexibility. Test updated to reflect chang (65c8ac2)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(Sep 8, 2016)

    Commits

    • :arrow_up: change fontawesome help icon to img #61 (70baca6)
    • :bug: bug: "Invalid date" message in pikaday field. Change dev schema for a simple one. Delete defau (a45188a)
    • :package: build (60dda5f)
    • :package: build (2e94d52)
    • :package: Build v0.4.1 (9fee72a)
    • :white_check_mark: test: add test to custom field (80d1025)
    • Bump version to v0.4.1 (4e0e031)
    • support custom fields & example #62 (e61824a)
    • fix: change test depending on changes (c645cea)
    • fix: re-added placeholder in field password and number (and corresponding test) (79bfee6)
    • fix: remove comment, trailing space and duplicate from tests (e618253)
    • fix: remove readonly attribute on select element (2e5e16b)
    • fix: remove useless attributes (5745318)
    • fix: update of attributes of Checklist, Text and Textarea fields. (ce3a91c)
    • test: update to many test to check optional attributes (ebf3f01)
    • dev: remove console log (3ffeef1)
    • enhancement: add minlength attribute to textarea (a7e39d9)
    • enhancement: add missing "autocomplete", "placeholder" and "readonly" attr to input fields. Ordered (f5af70c)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Aug 30, 2016)

    Break changes

    • Minimized bundle file is removed.
    • Default styles is expanded to vue-form-generator.css. There is no more scoped styles. You can create your custom styles. Example

    New fields

    • Cleave
    • noUiSlider
    • Pikaday
    • Vue-multiselect
    • googleAddress
    • submit button

    Commits

    • noUISlider: minor changes (1f22d80)
    • :arrow_up: Fixed #37 (f4f1f18), closes #37
    • :bug: fix: eslint warning (65b4d59)
    • :bug: fix: remove jQuery code (d0a32cd)
    • :bug: test: Fix noUiSlider test #46 (7bfffb1), closes #46
    • :new: new: add fieldGoogleAddress #33 (91f9317)
    • :new: new: new field type: Cleave. Reorganization of dev index file. (c6e3f5e)
    • :new: new: new field type: noUiSlider (9abf3e2)
    • :new: new: new field type: Pikaday. (b0e3e96)
    • :new: new: new field type: Vue Multiselect (cef52cb)
    • :package: build (3ab09df)
    • :package: build (def5d7d)
    • :package: build (d7c225a)
    • :package: build (1228b64)
    • :package: build (fe76993)
    • :package: Build (81073bc)
    • :package: Build v0.4.0 (320bacf)
    • :pencil: docs: fix typo (ae02461)
    • :pencil: docs: update readme (236e9d0)
    • :pencil: update README (09f1acf)
    • :pencil2: docs: update readme (06f55ac)
    • :pencil2: docs: update readme (6c84c69)
    • :star: webpack: add stats plugin to webpack (031f9b0)
    • :up: dep: update dependencies (4ab7a8e)
    • :up: fix lint errors (f84be2b)
    • :up: improve new fields (d8e5a8e)
    • :white_check_mark: fix selectex unit test (d908f39)
    • :white_check_mark: test: add fieldCleave & fieldPikaday tests (22d98b4)
    • :white_check_mark: test: add fieldMasked unit test (19f5d98)
    • :white_check_mark: test: fix fieldDateTime test (14c0602)
    • :white_check_mark: test: improve multiselect test (9a26911)
    • [package] update package.json (c5b6f33)
    • Add all remainning props and some events (onNewTag & onSearch) from multiselect and update dev s (dba3ed7)
    • add every component to the body (8e528b4)
    • add extracted css to package.json (31a578d)
    • add fieldSubmit.vue (9a149d3)
    • added most options from vue-multiselect (9df5b5e)
    • change to fix versions (8c45e38)
    • create test for fieldSubmit (7b575c3)
    • downgrade mocha (f808219)
    • fix pikaday unit test (23f5a90)
    • improve code quality (cd7029f)
    • improve code quality (2d2a819)
    • Remove dependency from vue-multiselect. Make it optional and check if loaded. Add it to dev files. (7e3472d)
    • remove minimized version. #41 (1867165)
    • remove node v0.12 because eslint doesn't support it (314c412)
    • remove submit field from dev sample (66d201d)
    • Small changes to fieldSwitch to allow easier customization of the width of the switch. (5a4769e)
    • update dependencies (72d862b)
    • Update README.md (f4e7a5b)
    • Update README.md (2eae985)
    • test: add external libs to karma (776f6c4)
    • test: basic unit testing (f870dae)
    • test: fix pikaday expect error (60a0868)
    • test: improve karma debug page (8a094c8)
    • test: improve testing of noUiSlider (59d5036)
    • test: improve testing of noUiSlider (42c9ea9)
    • test: improve testing of VueMultiSelect (09a41f0)
    • test: improve unit testing of vueMultiSelect (1b24293)
    • test: improve unit testing of vueMultiSelect (1c09c30)
    • test: progress on noUiSlider (dea27a2)
    • test: progress on noUiSlider (2e7380f)
    • test: querySelector instead of querySelectorAll (00bfbda)
    • test: querySelector instead of querySelectorAll (136b112)
    • test: unit test for field slider (bb9410d)
    • test: unit test for fieldCleave (012ee91)
    • test: unit test for fieldGoogleAddress (63d47aa)
    • test: unit test for fieldSpectrum (0b65bdb)
    • style: add box-sizing (841f20d)
    • style: image remove button change to inline img (92cea99)
    • dev: add a basic color field for testing (49e8d43)
    • dev: add another port to karma watch, so that it raise no warning when both commands (test and ci) r (04a71a0)
    • dev: noUiSlider with scale (e1b4126)
    • dev: noUiSlider with scale (dfef1f1)
    • fix: add a .jsbeautify to help with linting (acfa264)
    • fix: add disabled option to noUiSlider field (c169cb3)
    • fix: add disabled option to noUiSlider field (6d10687)
    • fix: added missing options for VueMultiselect. Removed min from dev schema (not used). (a9bb8ae)
    • fix: better selector for the main component and added latest build (b2fcef1)
    • fix: buttonText instead of caption (d4b25a9)
    • fix: buttonText instead of caption for unit test file (f47f704)
    • fix: Cleavejs better mask definition (34a6401)
    • fix: Cleavejs better mask definition (e338e6d)
    • fix: Fixed fragment instances #28 (0f9863c), closes #28
    • fix: fragment instance warning (f9915e6)
    • fix: handle disabled and max props of VueMultiSelect better (e59bcc1)
    • fix: handle disabled and max props of VueMultiSelect better (9a6fc4b)
    • fix: handle missing library better (99b6a4d)
    • fix: handle missing library better (ec93745)
    • fix: lint error (a2665dd)
    • fix: lint error and warning (24c49d9)
    • fix: lint error and warning (54a3502)
    • fix: package version for extract-text-webpack-plugin (778a9ff)
    • fix: remove jQuery from eslint (74cc91d)
    • fix: small bug with quotes (71ae504)
    • example: change font settings (6061d4e)
    • improve: simple example is more simple (da5d8cc)
    • styles: add bootstrap styles to .form-control and buttons (3e7dfc9)
    • styles: default input width 100%, fieldColor is changed to fix width (9fc302d)
    • styles: fix .wrapper styles (49d122e)
    • styles: fix checkbox style (8e5bb9d)
    • styles: fix fieldLabel style selector (b910b3d)
    • styles: fix half-width style in dev app (977d12d)
    • styles: fix styles of field (03fd9d2)
    • styles: remove shadow from fieldSwitch (e0ea478)
    • styles: some minor changed (8204f59)
    • enhancement: add global class .vue-form-generator. Rewriting of most selector for a more encapsula (e864d10)
    • enhancement: extract styles to a vue-form-generator.css file. (21c8876)
    • enhenhancement: remove scoped styles (1c46aef)
    • enhenhancement: remove scoped styles (4a4641c)
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jul 7, 2016)

  • v0.2.0(Jun 16, 2016)

    0.2.0 (2016-06-16)

    • :bug: fix: validation bugs (a403971)
    • :bug: fix: checkbox readonly (a3d330e)
    • :bug: fix: Handle non selected lists (1714776)
    • :bug: test: fix datetime bugs (3c132e3)
    • :new: new: multiple fields in a row (da4f766)
    • :new: new: new field type: Switch (534c384)
    • :package: bump version to v0.2.0 (e7b5130)
    • :pencil: Update readme example (0b1c36f)
    • :pencil2: docs (4940592)
    • :pencil2: docs (30ff08d)
    • :pencil2: docs (3bb625f)
    • :pencil2: docs: Add docs link to readme (ca1b180)
    • :pencil2: docs: Remove from project (5f70de9)
    • :rocket: breaking: change form layout (57f690b)
    • :star: new: change slider to ion.rangeSlider (059cde5)
    • :start: new: add validator for array (f0d4c4e)
    • :white_check_mark: test: abstractField.vue covered 100% (d0be50b)
    • :white_check_mark: test: Add field test cases (adb4f88)
    • :white_check_mark: test: add tests to dateTime field (4cd7bc6)
    • :white_check_mark: test: Cover 100% the VueFormGenerator.vue (6a6299e)
    • :white_check_mark: test: cover 94% (8bede7f)
    • :white_check_mark: test: cover all source files (1d4d898)
    • :white_check_mark: test: improve fieldImage tests (a5d714d)
    • :white_check_mark: test: Make abstractField test cases (564963f)
    • :white_check_mark: test: More fields test cases (4496149)
    • :white_check_mark: test: More fields test cases (c1c57be)
    • :white_check_mark: test: remove dep. warning (f04f59d)
    • :white_check_mark: test: schema test cases (540eb63)
    • :white_check_mark: test: validator tests (8847b26)
    • :zap: Impove example (1193b8f)
    • add TODO (5674df0)
    • Build v0.2.0 (023b342)
    • improve styles for multiple fields in a row (d57f829)
    • Minor changes (28ee7a8)
    • Modify examples (ad2c359)
    • Update babel dependencies (87738f5)
    • Update README.md (03d9d1b)
    • Update README.md (ba41387)
    • docs: fix typo in readme (5530c99)
    • docs: Update changelog (77b92b6)
    • docs: update readme (b66f9a9)
    • test: cover fieldSwitch (e31c4ba)
    • test: Fix sinon imports (81531fe)
    • fix: Fix schema in dev example (b6f9f57)
    • fix: lint warnings (564c0e5)
    • fix: remove describe.only (9bd87a9)
    • improve: sass variable for width in switch field (e01b816)
    • chore(package): update conventional-github-releaser to version 1.1.3 (25477c9)
    • chore(package): update eslint to version 2.12.0 (11d00cc)
    • chore(package): update gitbook-cli to version 2.3.0 (83238cc)
    • chore(package): update joi to version 8.4.2 (2bc58c5)
    • chore(package): update vue to version 1.0.24 (adc2a15)
    • new: change faker.js to fakerator (3184fa4)
    • build: new dist files (932a20d)
    • config: add coverall script to npm (bee378f)
    • config: modify coverage scripts (ec86030)
    Source code(tar.gz)
    Source code(zip)
Owner
VueJS Generators
Generator components for VueJS
VueJS Generators
:fire::fire::fire: 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.

form-create form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions thr

xaboy 4.6k Jan 3, 2023
✅ Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Abdelrahman Awad 9.4k Dec 26, 2022
📝 Minimalistic Vue-powered static site generator

VuePress 2 is coming! Please check out vuepress-next. Documentation Check out our docs at https://vuepress.vuejs.org/. Showcase Awesome VuePress vuepr

vuejs 21.1k Jan 4, 2023
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
A API documentation generator for Vue3 single file component.

doc-vue A API documentation generator for Vue3 single file component. Table of Contents Installation Write API Description Command Line Usage Programm

annnhan 36 Oct 20, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Jan 3, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Jan 6, 2023