Vue2

.babelrc

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

dev/app.vue

@@ -1,31 +1,27 @@
-<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 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>
 
@@ -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/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/master/lib/vue-multiselect.min.js"></script>
+	<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://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>
+    <div id="app"></div>
   	<script src="/app.js"></script>
   </body>
 </html>

dev/main.js

@@ -1,11 +1,13 @@
 /* global Vue */
-$(function() {
-	let App = require("./App.vue");
 
-	let app = new Vue({
-		el: "body",
-		components: {
-			App
-		}
-	});
-});
+// var App = require('./app.vue');
+// $(function() {
+// 	App.$mount('#app');
+// });
+
+import Vue from 'vue';
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');

dev/schema.js

@@ -158,55 +158,48 @@ module.exports = {
     label: "Search USELESS",
     model: "search",
     placeholder: "Entrez un mot-clef",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 {
     type: "input",
     inputType: "radio",
     label: "radio USELESS",
     model: "radio",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 {
     type: "input",
     inputType: "file",
     label: "File USELESS",
-    model: "file",
-    visible(model){return model.checkbox} 
+    model: "file"
 },
 {
     type: "input",
     inputType: "image",
     label: "Image USELESS",
     model: "image",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 {
     type: "input",
     inputType: "button",
     label: "Button USELESS",
     model: "button",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 {
     type: "input",
     inputType: "reset",
     label: "Reset USELESS",
     model: "reset",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 {
     type: "input",
     inputType: "submit",
     label: "Submit USELESS",
     model: "submit",
-    styleClasses: "half-width",
-    visible(model){return model.checkbox} 
+    styleClasses: "half-width"
 },
 
 /**************/
@@ -415,7 +408,7 @@ module.exports = {
 	styleClasses: ["half-width", "first"],
 	validator: validators.required
 },
-{
+/*{
 	type: "selectEx",
 	label: "Country (selectEx field)",
 	model: "address.country",
@@ -432,8 +425,8 @@ module.exports = {
 	},
 	styleClasses: "half-width",
 	validator: validators.required
-}, 
-{
+}, */
+/*{
 	type: "selectEx",
 	label: "Skills (selectEx field)",
 	model: "skills",
@@ -460,7 +453,7 @@ module.exports = {
 	min: 2,
 	max: 4,
 	validator: validators.array
-},
+},*/
 {
 	type: "rangeSlider",
 	label: "Rank (rangeSlider field)",
@@ -565,7 +558,7 @@ module.exports = {
 	required: true,
 	disabled: false,
 	noUiSliderOptions: {
-		connect: "lower",	// "lower", "upper", true, false
+		connect: [true, false],	// "lower", "upper", true, false
 		// margin: 2 //number
 		// limit: 2 //number
 		step:1,
@@ -596,7 +589,7 @@ module.exports = {
 	disabled: false,
 	noUiSliderOptions: {
 		double:true,
-		connect: true,	// "lower", "upper", true, false
+		connect: [false, true, false],	// "lower", "upper", true, false
 		// margin: 2 //number
 		// limit: 2 //number
 		step: 1000,