From 8eae0e9da68f347482c331db96a07fdf30f652db Mon Sep 17 00:00:00 2001
From: Oleg Bogdanov <olegbogdanov86@gmail.com>
Date: Mon, 4 Jul 2016 07:06:46 +0900
Subject: [PATCH 1/3] update html elements

---
 src/fields/fieldNumber.vue | 3 ++-
 src/fields/fieldText.vue   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
index 6a041014..21cb89e4 100644
--- a/src/fields/fieldNumber.vue
+++ b/src/fields/fieldNumber.vue
@@ -1,5 +1,6 @@
 <template lang="jade">
-	input.form-control(type="number", v-model="value", number, :min="schema.min", :max="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="number", v-model="value", number, :min="schema.min", :max="schema.max", :step="schema.step",
+	:readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
diff --git a/src/fields/fieldText.vue b/src/fields/fieldText.vue
index 81730f79..b172eb29 100644
--- a/src/fields/fieldText.vue
+++ b/src/fields/fieldText.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="text", v-model="value", :maxlength="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>

From cbb37d64e1e6decf8210e9f26010c0017fa93292 Mon Sep 17 00:00:00 2001
From: Oleg Bogdanov <olegbogdanov86@gmail.com>
Date: Mon, 4 Jul 2016 09:00:20 +0900
Subject: [PATCH 2/3] add edit mode - added edit/remove fields controls - added
 an item to transfer the edited field of external scripts

---
 dev/app.vue           | 59 ++++++++++++++++++++-------------------
 src/formGenerator.vue | 64 +++++++++++++++++++++++++++++++++----------
 src/index.js          |  4 +++
 3 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/dev/app.vue b/dev/app.vue
index 4528fd22..519239ea 100644
--- a/dev/app.vue
+++ b/dev/app.vue
@@ -1,32 +1,32 @@
 <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
-				.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 }}}   
-
+.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
+        .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", :is-edit-mode="isEditMode")
+
+
+    .col-md-6
+        pre{{editField | json}}
+        pre(v-if='model') {{{ model | prettyJSON }}}
 </template>
 
 <script>
@@ -54,6 +54,9 @@
 
 		data() {
 			return {
+                isEditMode: false,
+                editField: {},
+
 				isNewModel: false, 
 
 				selected: [],
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index ddeff89d..00af9b29 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,17 +1,24 @@
 <template lang="jade">
-	fieldset(v-if="schema != null")
-		.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
-			label {{ field.label }}
-				span.help(v-if="field.help")
-					i.fa.fa-question-circle
-					.helpText {{{field.help}}}
-			.field-wrap
-				component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
-				.buttons(v-if="field.buttons && field.buttons.length > 0")
-					button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
-			.hint(v-if="field.hint") {{ field.hint }}
-			.errors(v-if="field.errors && field.errors.length > 0")
-				span(v-for="error in field.errors", track-by="$index") {{ error }}
+fieldset(v-if="schema != null")
+    .form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
+        label {{ field.label }}
+            span.help(v-if="field.help")
+                i.fa.fa-question-circle
+                .helpText {{{field.help}}}
+        .field-wrap
+            component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
+            .buttons(v-if="field.buttons && field.buttons.length > 0")
+                button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
+        .hint(v-if="field.hint") {{ field.hint }}
+        .errors(v-if="field.errors && field.errors.length > 0")
+            span(v-for="error in field.errors", track-by="$index") {{ error }}
+        .function-controls(v-if="isEditMode")
+            button.btn.btn-xs.btn-default.edit-btn(@click="onEditField(field)")
+                i.fa.fa-pencil
+            button.btn.btn-xs.btn-danger.remove-btn(@click="onRemoveField($index)")
+                i.fa.fa-remove
+pre {{ schema | json }}
+
 </template>
 
 <script>
@@ -36,7 +43,8 @@
 			"options",
 			"model",
 			"multiple",
-			"isNewModel"
+			"isNewModel",
+            "isEditMode"
 		],
 		
 		data () {
@@ -46,6 +54,7 @@
 		},
 
 		computed: {
+            editField: {},// use only in edit mode, also used to transfer data to external scripts
 			fields() {
 				let res = [];
 				if (this.schema) {
@@ -100,6 +109,9 @@
 
 				baseClasses["field-" + field.type] = true;
 
+                if(this.isEditMode)
+                    baseClasses["editable-item"] = true;
+
 				return baseClasses;
 			},
 
@@ -152,7 +164,15 @@
 				each(this.$children, (child) => {
 					child.clearValidationErrors();
 				});				
-			}
+			},
+
+            onEditField(item){
+                this.editField = item;
+            },
+
+            onRemoveField(idx){
+                this.schema.fields.splice(idx, 1);
+            }
 		}
 	};
 	
@@ -163,6 +183,20 @@
 	$errorColor: lighten(#F00, 0%);
 
 	fieldset {
+
+        .editable-item{
+            position: relative;
+        }
+
+        .function-controls{
+            position: absolute;
+            top:0;
+            right:0;
+        }
+
+        .edit-btn{
+            margin-right: 2px;
+        }
 		
 		input, select, textarea {
 			border-radius: 4px;
diff --git a/src/index.js b/src/index.js
index ee454f18..0e4f8cd9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,10 @@ module.exports = {
 	component: require("./formGenerator.vue"),
 	schema: require("./utils/schema.js"),
 	validators: require("./utils/validators.js"),
+
+    get editField() {
+        return module.exports.component.computed.editField;
+    },
 	
 	install(Vue) {
 		Vue.component("VueFormGenerator", module.exports.component);

From a77f3073829f3e25c42a7edc30a7d2b06bd432dc Mon Sep 17 00:00:00 2001
From: Oleg Bogdanov <olegbogdanov86@gmail.com>
Date: Mon, 4 Jul 2016 10:29:01 +0900
Subject: [PATCH 3/3] fix edit control

added events
'fg:setEditField' - set data edit field
'fg:getEditField' - get data edit field

use

get data in instance
```
events: {
            'fg:getEditField'(val){
                this.$set('editField', Vue.util.extend({}, val));
            }
        },
```

set data
```
this.$broadcast('fg:setEditField', jsonData);
```
---
 dev/app.vue           |  6 ++++++
 src/formGenerator.vue | 16 ++++++++++++----
 src/index.js          |  4 ----
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/dev/app.vue b/dev/app.vue
index 519239ea..1386b6a9 100644
--- a/dev/app.vue
+++ b/dev/app.vue
@@ -184,6 +184,12 @@
 
 			 
 		},
+
+        events: {
+            'fg:getEditField'(val){
+                this.$set('editField', Vue.util.extend({}, val));
+            }
+        },
 		
 		ready() {
 			window.app = this;
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index 00af9b29..00c2107a 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -17,7 +17,6 @@ fieldset(v-if="schema != null")
                 i.fa.fa-pencil
             button.btn.btn-xs.btn-danger.remove-btn(@click="onRemoveField($index)")
                 i.fa.fa-remove
-pre {{ schema | json }}
 
 </template>
 
@@ -49,12 +48,12 @@ pre {{ schema | json }}
 		
 		data () {
 			return {
+                editFieldItem: {},// use only in edit mode, also used to transfer data to external scripts
 				errors: [] // Validation errors
 			};
 		},
 
 		computed: {
-            editField: {},// use only in edit mode, also used to transfer data to external scripts
 			fields() {
 				let res = [];
 				if (this.schema) {
@@ -70,7 +69,7 @@ pre {{ schema | json }}
 
 		watch: {
 			// new model loaded
-			model: function(newModel, oldModel) {
+			model(newModel, oldModel) {
 				if (oldModel == newModel) // model got a new property
 					return;
 
@@ -89,6 +88,14 @@ pre {{ schema | json }}
 			else
 				this.clearValidationErrors();
 		},
+
+        ready(){
+            let self = this;
+
+            this.$on('fg:setEditField', (val)=>{
+                self.editFieldItem = val;
+            });
+        },
 	
 		methods: {
 			getFieldRowClasses(field) {
@@ -167,7 +174,8 @@ pre {{ schema | json }}
 			},
 
             onEditField(item){
-                this.editField = item;
+                this.editFieldItem = item;
+                this.$dispatch('fg:getEditField', Vue.util.extend({}, item));
             },
 
             onRemoveField(idx){
diff --git a/src/index.js b/src/index.js
index 0e4f8cd9..419e8f0d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,6 @@ module.exports = {
 	schema: require("./utils/schema.js"),
 	validators: require("./utils/validators.js"),
 
-    get editField() {
-        return module.exports.component.computed.editField;
-    },
-	
 	install(Vue) {
 		Vue.component("VueFormGenerator", module.exports.component);
 	}