Merge branch 'master' into better-accessibility-labels

Author: Duncan Lock

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", "lodash"],
   "comments": false
 }

.eslintrc.js

@@ -5,11 +5,15 @@ module.exports = {
         "commonjs": true,
         "es6": true,
         "jquery": false,
-        mocha: true
+        "mocha": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "sourceType": "module"
+        "sourceType": "module",
+        "ecmaVersion": 6,
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true
+        }
     },
     "plugins": [
         "html"

.gitignore

@@ -7,3 +7,5 @@ selenium-debug.log
 test/unit/coverage
 test/e2e/reports
 stats.json
+typings/
+typings.json

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
-cache:
-  directories:
-  - node_modules
+#cache:
+#  directories:
+#  - node_modules
 node_js:
+    - "7"
     - "6"
-    - "5"
-    - "4"
 after_success:
   - npm run coverall

CHANGELOG.md

@@ -1,5 +1,5 @@
-# vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)
-A schema-based form generator component for Vue.js v1.x.x
+# vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator) ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)
+A schema-based form generator component for Vue.js.
 
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/912039aa815e40de8315032519aa7e6c)](https://www.codacy.com/app/mereg-norbert/vue-form-generator?utm_source=github.com&utm_medium=referral&utm_content=icebob/vue-form-generator&utm_campaign=Badge_Grade)
 [![Build Status](https://travis-ci.org/icebob/vue-form-generator.svg?branch=master)](https://travis-ci.org/icebob/vue-form-generator)
@@ -11,45 +11,74 @@ A schema-based form generator component for Vue.js v1.x.x
 [![devDependency Status](https://david-dm.org/icebob/vue-form-generator/dev-status.svg)](https://david-dm.org/icebob/vue-form-generator#info=devDependencies)
 [![Downloads](https://img.shields.io/npm/dt/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)
 
-**Vue v2.x support is under development!**
-
 ## Demo
 [JSFiddle simple example](https://jsfiddle.net/icebob/0mg1v81e/)
 
 [![Screenshot](https://icebob.gitbooks.io/vueformgenerator/content/assets/vfg-example1.png)](https://jsfiddle.net/icebob/0mg1v81e/)
 
 ## Features
-- multiple objects editing
-- 27 field types
+- reactive forms based on schemas
+- multiple object editing
+- 21 field types
 - built-in validators
+- core & full bundles (11kb and 19kb gzipped)
 - Bootstrap friendly templates
 - customizable styles
+- can be extended easily with custom fields
 - ...etc
 
 ## Documentation
 [Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
 
 ## Dependencies
-vue-form-generator use [Moment.js](http://momentjs.com/) and [lodash](https://lodash.com/) internally.
+vue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.
 
 While built-in fields don't need external dependencies, optional fields may need other libraries.  
-These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.  
-That way, it's your choice to depend on jQuery or not.
+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 [documentation](https://icebob.gitbooks.io/vueformgenerator/content/).
+You can find details about dependencies in the official [documentation](https://icebob.gitbooks.io/vueformgenerator/content/) under each specific component.
 
 ## Installation
 ### NPM
-You can install it via [NPM](http://npmjs.org/).
+You can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).
+
+#### 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 `vue-form-generator.css` and `vue-form-generator.js` file to your project from dist folder.
+Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.
 ```
 https://github.com/icebob/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: 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:
+
+```js
+// the "core" way
+<script>
+  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
+  import "vue-form-generator/dist/vfg-core.css";
+</script>
+```
+
 ## Usage
 ```html
 <template>
@@ -77,33 +106,37 @@ export default {
   
     schema: {
       fields: [{
-        type: "text",
+        type: "input",
+        inputType: "text",
         label: "ID (disabled text field)",
         model: "id",
         readonly: true,         
         disabled: true
       },{
-        type: "text",
+        type: "input",
+        inputType: "text",
         label: "Name",
         model: "name",
         placeholder: "Your name",
         featured: true,
         required: true
       },{
-        type: "password",
+        type: "input",
+        inputType: "password",
         label: "Password",
         model: "password",
         min: 6,
         required: true,
         hint: "Minimum 6 characters",
-        validator: validators.string
+        validator: VueFormGenerator.validators.string
       },{
         type: "select",
-        label: "skills",
-        model: "type",      
+        label: "Skills",
+        model: "skills",      
         values: ["Javascript", "VueJS", "CSS3", "HTML5"]
       },{
-        type: "email",
+        type: "input",
+        inputType: "email",
         label: "E-mail",
         model: "email",
         placeholder: "User's e-mail address"
@@ -124,6 +157,17 @@ export default {
 </script>
 ```
 
+Usage in local components
+```js
+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.
 ```bash
@@ -140,8 +184,19 @@ npm run build
 ```bash
 npm test
 ```
+or 
+```bash
+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`
 
-See: https://github.com/icebob/vue-form-generator/projects/1
+This way, it will be easier for everyone to find it. Thank you !
 
 ## 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.
@@ -151,6 +206,6 @@ vue-form-generator is available under the [MIT license](https://tldrlegal.com/li
 
 ## Contact
 
-Copyright (C) 2016 Icebob
+Copyright (C) 2017 Icebob
 
 [![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi)

README.md

@@ -1,14 +1,14 @@
 {
   "name": "vue-form-generator",
-  "version": "2.0.0-beta1",
+  "version": "2.0.0-beta6",
   "homepage": "https://github.com/icebob/vue-form-generator",
   "authors": [
     "Icebob"
   ],
   "description": "A schema-based form generator component for Vue.js",
   "main": [
-    "dist/vue-form-generator.js",
-    "dist/vue-form-generator.css"
+    "dist/vfg.js",
+    "dist/vfg.css"
   ],
   "moduleType": [
     "amd"

bower.json

@@ -15,7 +15,7 @@
       <div class="errors text-center">
         <div v-for="(item, index) in validationErrors" track-by="index" class="alert alert-danger">{{ item.field.label}}: <strong>{{ item.error }}</strong></div>
       </div>
-      <vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated"></vue-form-generator>
+      <vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated"></vue-form-generator>
     </div>
     <div class="col-md-6">
       <pre v-if="model" v-html="prettyModel"></pre>
@@ -27,14 +27,17 @@
 
 <script>
 	import Vue from "vue";
-	import VueFormGenerator from "../src";
+	import VueFormGenerator from "../../src";
 	import DataTable from "./dataTable.vue";
 	import Fakerator from "fakerator";
 
 	import Schema from "./schema";
 	import { users } from "./data";
 	import { filters } from "./utils";
 
+	import Multiselect from "vue-multiselect"
+	Vue.component("multiselect", Multiselect);	
+
 	// Test custom field
 	import FieldAwesome from "./fieldAwesome.vue";
 	Vue.component("fieldAwesome", FieldAwesome);
@@ -66,7 +69,7 @@
 
 				formOptions: {
 					validateAfterLoad: true,
-					validateAfterChanged: false,
+					validateAfterChanged: true,
 					validateBeforeSave: true
 				}
 			}
@@ -110,7 +113,11 @@
 			clearSelection() {
 				this.selected.splice(0);
 				this.generateModel();
-			},			
+			},	
+
+			onValidated(res, errors) {
+				console.log("VFG validated:", res, errors);
+			},
 
 			generateModel() {
 				if (this.selected.length == 1) {
@@ -182,13 +189,12 @@
 			},
 
 			validate()	{
-				console.log("validate", this.$refs.form, this.$refs.form.validate());
+				//console.log("validate", this.$refs.form, this.$refs.form.validate());
 				return this.$refs.form.validate();
 			},
 
 			modelUpdated(newVal, schema) {
 				console.log("main model has updated", newVal, schema);
-				// this.model[schema] = newVal;
 			}
 
 			 

dev/app.vue renamed to dev/full/app.vue

@@ -1,5 +1,5 @@
 import Fakerator from "fakerator";
-import moment from "moment";
+import fecha from "fecha";
 
 let fakerator = new Fakerator();
 
@@ -26,8 +26,8 @@ module.exports = {
 			user.bio = fakerator.lorem.paragraph();
 			let dob = fakerator.date.past(40, "1998-01-01");
 			user.dob = dob.valueOf();
-			user.time = moment().format("hh:mm:ss");
-			user.age = moment().year() - moment(dob).year();
+			user.time = fecha.format(new Date(), "hh:mm:ss");
+			user.age = fecha.format(new Date().getFullYear() - dob, "YY");
 			user.rank = fakerator.random.number(1, 10);
 			user.role = fakerator.random.arrayElement(roles).id;
 			//user.mobile = fakerator.phone.phoneNumber();

dev/data.js renamed to dev/full/data.js

@@ -1,4 +1,4 @@
-<template lang="jade">
+<template lang="pug">
 	table.table.table-hover.table-bordered
 		thead
 			tr
@@ -25,7 +25,7 @@
 
 <script>
 	import Vue from "vue";
-	import VueFormGenerator from "../src";
+	import VueFormGenerator from "../../src";
 	import Schema from "./schema";
 	import { find } from "lodash";
 	import { users, roles } from "./data";

dev/dataTable.vue renamed to dev/full/dataTable.vue

@@ -1,9 +1,9 @@
-<template lang="jade">
+<template lang="pug">
 	input.form-control(type="text", v-model="value", :maxlength="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
-	import VueFormGenerator from "../src";
+	import VueFormGenerator from "../../src";
 
 	export default {
 		mixins: [ VueFormGenerator.abstractField ]

dev/fieldAwesome.vue renamed to dev/full/fieldAwesome.vue

@@ -20,22 +20,22 @@
 	<!-- jQuery dependent -->
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
 	<!-- Vanilla libs -->
-	<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/2.0/lib/vue-multiselect.min.js"></script>
+	<script type="text/javascript" src="https://unpkg.com/vue-multiselect@2.0.0-beta.13"></script>
 	<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
 	<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>
 	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>
 
   </head>
   <body>
     <div class="container-fluid"></div>
     <div id="app"></div>
-  	<script src="/app.js"></script>
+  	<script src="/full.js"></script>
   </body>
 </html>