Next version for Vue 2

.babelrc

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

.travis.yml

@@ -3,8 +3,7 @@ cache:
   directories:
   - node_modules
 node_js:
+    - "7"
     - "6"
-    - "5"
-    - "4"
 after_success:
   - npm run coverall

README.md

@@ -40,10 +40,18 @@ You can find details about dependencies in [documentation](https://icebob.gitboo
 
 ## 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.
 ```
@@ -140,8 +148,10 @@ npm run build
 ```bash
 npm test
 ```
-
-See: https://github.com/icebob/vue-form-generator/projects/1
+or 
+```bash
+npm run ci
+```
 
 ## 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.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form-generator",
-  "version": "0.6.1",
+  "version": "2.0.0-beta3",
   "homepage": "https://github.com/icebob/vue-form-generator",
   "authors": [
     "Icebob"

dev/app.vue → dev/full/app.vue

@@ -1,37 +1,33 @@
-<template lang="jade">
-	.row
-		.col-md-10.col-md-offset-1
-			data-table(:rows="rows", :selected="selected", :select="selectRow")
-
-	.row(v-show="model")
-		.col-md-5.col-md-offset-1
-			.control-buttons.text-center
-				button.btn.btn-default.new(@click="newModel") 
-					i.fa.fa-plus
-					| New
-				button.btn.btn-primary.save(@click="saveModel") 
-					i.fa.fa-floppy-o
-					| Save
-					i.fa.fa-warning(v-if="showWarning()")
-				button.btn.btn-danger.delete(@click="deleteModel") 
-					i.fa.fa-trash
-					| Delete
-
-			.errors.text-center
-				div.alert.alert-danger(v-for="item in validationErrors", track-by="$index") {{ item.field.label}}: 
-					strong {{ item.error }}
-
-			vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
-
-
-		.col-md-6
-			pre(v-if='model') {{{ model | prettyJSON }}}   
+<template>
+<div>
+  <div class="row">
+    <div class="col-md-10 col-md-offset-1">
+      <data-table :rows="rows" :selected="selected" :select="selectRow"></data-table>
+    </div>
+  </div>
+  <div v-show="model" class="row">
+    <div class="col-md-5 col-md-offset-1">
+      <div class="control-buttons text-center">
+        <button @click="newModel" class="btn btn-default new"> <i class="fa fa-plus"></i>New</button>
+        <button @click="saveModel" class="btn btn-primary save"> <i class="fa fa-floppy-o"></i>Save<i v-if="showWarning()" class="fa fa-warning"></i></button>
+        <button @click="deleteModel" class="btn btn-danger delete"> <i class="fa fa-trash"></i>Delete</button>
+      </div>
+      <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>
+    </div>
+    <div class="col-md-6">
+      <pre v-if="model" v-html="prettyModel"></pre>
+    </div>
+  </div>
+</div>
 
 </template>
 
 <script>
 	import Vue from "vue";
-	import VueFormGenerator from "../src";
+	import VueFormGenerator from "../../src";
 	import DataTable from "./dataTable.vue";
 	import Fakerator from "fakerator";
 
@@ -82,6 +78,9 @@
 					return this.$refs.form.errors;
 
 				return [];
+			},
+			prettyModel(){
+				return filters.prettyJSON(this.model);
 			}
 		},
 
@@ -95,10 +94,12 @@
 			selectRow(event, row, add) {
 				this.isNewModel = false;
 				if ( (add || (event && event.ctrlKey))) {
-					if (this.selected.indexOf(row) != -1)
-						this.selected.$remove(row);
-					else
+					if (this.selected.indexOf(row) != -1){
+						var index = this.selected.indexOf(row);
+						this.selected.splice(index, 1);
+					} else {
 						this.selected.push(row);
+					}
 				} else {
 					this.clearSelection();
 					this.selected.push(row);
@@ -114,12 +115,11 @@
 			generateModel() {
 				if (this.selected.length == 1) {
 					this.model = cloneDeep(this.selected[0]);
-				}
-				else if (this.selected.length > 1) {
+				} else if (this.selected.length > 1) {
 					this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
-				}
-				else
+				} else {
 					this.model = null;				
+				}
 			},
 
 			newModel() {
@@ -146,6 +146,7 @@
 					}
 
 				} else {
+					console.warn("Error saving model...");
 					// Validation error
 				}
 			},
@@ -162,7 +163,8 @@
 			deleteModel() {
 				if (this.selected.length > 0) {
 					each(this.selected, (row) => {
-						this.rows.$remove(row);
+						let index = this.rows.indexOf(row);
+						this.rows.splice(index, 1)
 					})
 					this.clearSelection();
 				}
@@ -180,22 +182,30 @@
 			},
 
 			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;
 			}
 
 
 		},
 
-		ready() {
-			window.app = this;
+		mounted() {
+			this.$nextTick(function () {
+				window.app = this;
 
-			if (users.length > 0) {
-				this.selectRow(null, fakerator.random.arrayElement(users));
-			}
+				if (users.length > 0) {
+					this.selectRow(null, fakerator.random.arrayElement(users));
+				}
 
-			// Localize validate errors
-			VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
-			VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
+				// Localize validate errors
+				// VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
+				// VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
+			})
 		}
 	}
 

dev/data.js → dev/full/data.js

@@ -1,5 +1,5 @@
-import Fakerator from 'fakerator';
-import moment from 'moment';
+import Fakerator from "fakerator";
+import moment from "moment";
 
 let fakerator = new Fakerator();
 
@@ -8,7 +8,7 @@ let roles = [
 	{ id: "moderator", name: "Moderator"},
 	{ id: "user", name: "Registered User"},
 	{ id: "visitor", name: "Visitor"}
-]
+];
 
 let skills = [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ];
 
@@ -19,7 +19,7 @@ module.exports = {
 	users: (function() {
 		let res = [];
 		for (let i = 0; i < 5; i++) {
-			let lang = fakerator.random.arrayElement(['en-US', 'en-GB', 'de', 'fr', 'it']);
+			let lang = fakerator.random.arrayElement(["en-US", "en-GB", "de", "fr", "it"]);
 			let user = fakerator.entity.user();
 			user.id = i + 1;
 			user.type = fakerator.random.arrayElement(["personal", "business"]);
@@ -41,16 +41,17 @@ module.exports = {
 			user.created = fakerator.date.recent(30).valueOf();
 			user.dt = fakerator.date.recent(30).valueOf();
 			user.favoriteColor = "#" + fakerator.internet.color();
+			user.color = "#" + fakerator.internet.color();
 
 			if (user.type == "business")
 				user.company = fakerator.entity.company();
 
 			user.income = [ fakerator.random.number(50000), fakerator.random.number(50000, 100000)];			
 
 			res.push(user);
-			console.log(user);
+			// console.log(user);
 		}
-		//console.log(res);
+		// console.log(res);
 		return res;
 	})()
-}
+};

dev/dataTable.vue → dev/full/dataTable.vue

@@ -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/fieldAwesome.vue → dev/full/fieldAwesome.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-	import VueFormGenerator from "../src";
+	import VueFormGenerator from "../../src";
 
 	export default {
 		mixins: [ VueFormGenerator.abstractField ]

dev/index.html → dev/full/index.html

@@ -3,39 +3,39 @@
   <head>
     <meta charset="utf-8">
     <title>vue-form-generator development</title>
-	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
-	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
-	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
-	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css">
 
 
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
 	<!-- jQuery dependent -->
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
+	<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/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/v1.1.4/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/8.5.1/nouislider.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://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>
 
   </head>
   <body>
     <div class="container-fluid"></div>
-    <app></app>
-  	<script src="/app.js"></script>
+    <div id="app"></div>
+  	<script src="/full.js"></script>
   </body>
 </html>

dev/full/main.js

@@ -0,0 +1,13 @@
+/* global Vue */
+
+// var App = require('./app.vue');
+// $(function() {
+// 	App.$mount('#app');
+// });
+
+import Vue from 'vue';
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');