: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 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
  • l want to make drop menu depend on another in my form l used vue form generator and don't know how l can make this like cities and countries

    l want to make drop menu depend on another in my form l used vue form generator and don't know how l can make this like cities and countries

    l want to make drop menu depend on anther in my form l used vue form generator and don't know how l can make this like cities and countries l use vue form generator to generate all form l used but l cannot make two this fields to communicate with each other

    opened by dahshourt 0
  • Bump moment from 2.22.2 to 2.29.4

    Bump moment from 2.22.2 to 2.29.4

    Bumps moment from 2.22.2 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    ... (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 jsdom from 11.11.0 to 16.5.0

    Bump jsdom from 11.11.0 to 16.5.0

    Bumps jsdom from 11.11.0 to 16.5.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    Version 16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    Version 16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    Version 16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.
    • Fixed various issues where updating selectEl.value would not invalidate properties such as selectEl.selectedOptions. (ExE-Boss)
    • Fixed <input>'s src property, and <ins>/<del>'s cite property, to properly reflect as URLs.
    • Fixed window.addEventLister, window.removeEventListener, and window.dispatchEvent to properly be inherited from EventTarget, instead of being distinct functions. (ExE-Boss)
    • Fixed errors that would occur if attempting to use a DOM object, such as a custom element, as an argument to addEventListener.

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.

    ... (truncated)

    Commits
    • 2d82763 Version 16.5.0
    • 9741311 Fix loading of subresources with Unicode filenames
    • 5e46553 Use domenic's ESLint config as the base
    • 19b35da Fix the URL of about:blank iframes
    • 017568e Support inputType on InputEvent
    • 29f4fdf Upgrade dependencies
    • e2f7639 Refactor create‑event‑accessor.js to remove code duplication
    • ff69a75 Convert JSDOM to use callback functions
    • 19df6bc Update links in contributing guidelines
    • 1e34ff5 Test triage
    • 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
  • Is there a searchable option in the select field?

    Is there a searchable option in the select field?

    • I'm submitting a ...
      • [x] feature request
    • Do you want to request a feature or report a bug?

    Does the select field have a searchable options like multiple-selection?

    螢幕快照 2021-07-05 下午12 28 32

    • Please tell us about your environment:

      • Version: 2.3.0
      • Browser: Chrome 91.0.4472.114
      • Language: all
    opened by a35205905 0
  • Bump set-getter from 0.1.0 to 0.1.1

    Bump set-getter from 0.1.0 to 0.1.1

    Bumps set-getter from 0.1.0 to 0.1.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
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
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Laravel Enso 119 Mar 9, 2022
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

Anton Reshetov 124 Sep 6, 2022
This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework

Vue Form Components This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework. There are a variety of components th

George Hanson 31 Feb 4, 2022
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

EMPLA GROUP, LLP 10 Jul 21, 2022
a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

null 46 Feb 8, 2021
Vue dynamic nested form component, support nested Object/Hashmap/Array.

Introduction vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(referen

QuincyChen 264 Sep 12, 2022
a comprehensive vue.js form component

Vue Formular Note: Users of Vus.js version 2 please use this package instead This vue.js package offers a comperhensive solution for HTML form managem

Matanya 45 Dec 10, 2019
Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

John Raymon 0 Jul 12, 2022
A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.

A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.

Glenn Gijsberts 0 Apr 12, 2019
A Vuejs component to display Form validation errors

vue-form-error A simple Vuejs component that can be used to display form validation errors on inputs. Demo https://codesandbox.io/s/vue-form-error-kwj

Ziad Adeela 2 Mar 31, 2022
Tailwind checkout form built with vue.js

tailwind-vue-checkout-form Result: or: Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for pr

Shane Kolkoto 12 Sep 8, 2022
Vue JSON form - 基于vue 通过 json 呈现视图

Vue JSON form 通过 JSON 呈现任何组件与定义脚本的实现 使用任何 Vue 组件或 html 元素构建视图 开发 vue 项目时,可能会遇到以下需求场景 界面以及交互行为需要通过配置动态呈现 定义的配置需要进行存储和读取 配置需要通过可视化界面进行编辑 普通 JSON 数据虽然可以描

yuanliang feng 87 Sep 14, 2022
Library that help to submit form and handle validation in Laravel Vue Application

vue-js-form-helper This is a small library that makes form submit and validation easier to use. Installation npm i vue-js-form-helper Code Example The

Philip van Tonder 1 Sep 9, 2020
A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap

vue-formly-bootstrap A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap. Version 2 Note that this is version 2 of

FormlyJS 51 Dec 31, 2020
System76 form Vue components including buttons, inputs, and labels. It also holds client side validation logic

@system76/forms System76 Vue components for forms This repository contains all the System76 form Vue components including buttons, inputs, and labels.

System76 0 Mar 24, 2021
A form library for vue, inspired by Formik for react

vue-simpleform A form library for vue, inspired by Formik for react Is it really simple? I think it is, but really I couldn't think of a better name B

null 40 Aug 9, 2022
Create a dynamic form usign a set of custom Vue.js components

Create a dynamic form usign a set of custom Vue.js components

Alan Dell'Onze 0 Nov 24, 2017
Vue application with login form for be included in a single-spa application as registered app.

This is a Vue application example used as NPM package in single-spa-login-example-with-npm-modules in order to register an application. See the installation instructions there.

Juan Manuel López Pazos 6 Mar 4, 2022