vue-generators · icebob · Oct 6, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/dev/schema.js b/dev/schema.js
@@ -20,7 +20,8 @@ module.exports = {
     type: "input",
     inputType: "hidden",
     label: "Hidden",
-    model: "id"
+    model: "id",
+    inputName: "hiddenField"
 },
 {
     type: "input",
@@ -57,6 +58,7 @@ module.exports = {
     label: "URL",
     model: "website",
     placeholder: "Enter your website",
+    inputName: "website",
     validator: validators.url
 },
 {
@@ -257,6 +259,7 @@ module.exports = {
 	required: true,
 	browse: true,
 	hideInput: false,
+	inputName: "photo",
 	validator: validators.required
 },
 {

diff --git a/dist/vue-form-generator.css b/dist/vue-form-generator.css
diff --git a/dist/vue-form-generator.js b/dist/vue-form-generator.js
diff --git a/examples/post-form/index.html b/examples/post-form/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta charset="utf-8">
+  <title>Demo of vue-form-generator</title>
+  <link rel="stylesheet" type="text/css" href="../../dist/vue-form-generator.css">
+
+  <style>
+      html {
+        font-family: Tahoma;
+        font-size: 14px;
+      }
+
+      body {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        line-height: 1.42857143;
+        color: #333;
+      }      
+
+      pre {
+        overflow: auto;
+      }
+        pre .string { color: #885800; }
+        pre .number { color: blue; }
+        pre .boolean { color: magenta; }
+        pre .null { color: red; }
+        pre .key { color: green; }    
+
+      .container {
+        max-width: 970px;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;        
+      }
+
+      h1 {
+        text-align: center;
+        font-size: 36px;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        font-weight: 500;
+      }
+
+      fieldset {
+        border: 0;
+      }
+
+      .panel {
+        margin-bottom: 20px;
+        background-color: #fff;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+        border-color: #ddd;
+      }
+
+      .panel-heading {
+        color: #333;
+        background-color: #f5f5f5;
+        border-color: #ddd;
+
+        padding: 10px 15px;
+        border-bottom: 1px solid transparent;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;        
+      }
+
+      .panel-body {
+        padding: 15px;
+      }
+
+  </style>
+</head>
+
+<body>
+  <h1 class="text-center">Submit the form</h1>
+  <div class="container" id="app">
+    <div class="panel panel-default">
+      <div class="panel-heading">Form</div>
+      <div class="panel-body">
+        <form action="https://httpbin.org/post" method="POST" enctype="application/x-www-form-urlencoded">
+          <vue-form-generator :schema="schema", :model="model", :options="formOptions"></vue-form-generator>
+        </form>
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">Model</div>
+      <div class="panel-body">
+        <pre v-if="model">{{{ model | prettyJSON }}}</pre>
+      </div>
+    </div>
+
+  </div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
+  <script type="text/javascript" src="../../dist/vue-form-generator.js"></script>
+  <script type="text/javascript" src="./main.js"></script>
+</body>
+</html>
diff --git a/examples/post-form/main.js b/examples/post-form/main.js
@@ -0,0 +1,126 @@
+var VueFormGenerator = window.VueFormGenerator;
+
+var vm = new Vue({
+	el: "#app",
+	components: {
+		"vue-form-generator": VueFormGenerator.component
+	},
+
+	filters: {
+		prettyJSON: function(json) {
+			if (json) {
+				json = JSON.stringify(json, undefined, 4);
+				json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+					var cls = "number";
+					if (/^"/.test(match)) {
+						if (/:$/.test(match)) {
+							cls = "key";
+						} else {
+							cls = "string";
+						}
+					} else if (/true|false/.test(match)) {
+						cls = "boolean";
+					} else if (/null/.test(match)) {
+						cls = "null";
+					}
+					return "<span class=\"" + cls + "\">" + match + "</span>";
+				});
+			}
+		}
+	},
+
+	data: {
+		model: {
+			id: 1,
+			name: "John Doe",
+			password: "J0hnD03!x4",
+			skills: "Javascript",
+			email: "[email protected]",
+			status: true
+		},
+		schema: {
+			fields: [
+				{
+					type: "text",
+					label: "ID",
+					model: "id",
+					inputName: "id",
+					readonly: true,
+					featured: false,
+					disabled: true
+				},
+				{
+					type: "text",
+					label: "Name",
+					model: "name",
+					inputName: "name",
+					readonly: false,
+					featured: true,
+					required: true,
+					disabled: false,
+					placeholder: "User's name",
+					validator: VueFormGenerator.validators.string
+				},
+				{
+					type: "password",
+					label: "Password",
+					model: "password",
+					inputName: "password",
+					min: 6,
+					required: true,
+					hint: "Minimum 6 characters",
+					validator: VueFormGenerator.validators.string
+				},	
+				{
+					type: "email",
+					label: "E-mail",
+					model: "email",
+					inputName: "email",
+					placeholder: "User's e-mail address",
+					validator: VueFormGenerator.validators.email
+				},					
+				{
+					type: "select",
+					label: "Skills",
+					model: "skills",
+					inputName: "skills",
+					required: true,
+					values: [
+						"HTML5",
+						"Javascript",
+						"CSS3",
+						"CoffeeScript",
+						"AngularJS",
+						"ReactJS",
+						"VueJS"
+					],
+					validator: VueFormGenerator.validators.string
+				},
+				{
+					type: "checkbox",
+					label: "Status",
+					model: "status",
+					inputName: "status",
+					multi: true,
+					readonly: false,
+					featured: false,
+					disabled: false,
+					default: true
+				},
+				{
+					type: "submit",
+					label: "",
+					buttonText: "Submit",
+					validateBeforeSubmit: true
+				}
+
+			]
+		},
+
+		formOptions: {
+			validateAfterLoad: false,
+			validateAfterChanged: false
+		}
+	}
+});
diff --git a/examples/simple/main.js b/examples/simple/main.js
@@ -24,7 +24,7 @@ var vm = new Vue({
 					} else if (/null/.test(match)) {
 						cls = "null";
 					}
-					return "<span class="" + cls + "">" + match + "</span>";
+					return "<span class=\"" + cls + "\">" + match + "</span>";
 				});
 			}
 		}

diff --git a/src/fields/fieldCheckbox.vue b/src/fields/fieldCheckbox.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="checkbox", v-model="value",  :autocomplete="schema.autocomplete", :disabled="disabled")
+	input(type="checkbox", v-model="value",  :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldCleave.vue b/src/fields/fieldCleave.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldColor.vue b/src/fields/fieldColor.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled")
+		input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
 		span.helper {{ value }}
 </template>
 

diff --git a/src/fields/fieldDateTimePicker.vue b/src/fields/fieldDateTimePicker.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.input-group.date
-		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>

diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldGoogleAddress.vue b/src/fields/fieldGoogleAddress.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly",  debounce="500", @focus="geolocate()")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()")
 </template>
 
 <script>

diff --git a/src/fields/fieldImage.vue b/src/fields/fieldImage.vue
@@ -1,7 +1,7 @@
 <template lang="jade">
 	div.wrapper
 		input.form-control.link(type="text", v-show="schema.hideInput !== true", v-model="wrappedValue", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
-		input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged")
+		input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged", :name="schema.inputName")
 		.preview(:style="previewStyle")
 			.remove(title="Remove image", @click="remove")
 </template>

diff --git a/src/fields/fieldInput.vue b/src/fields/fieldInput.vue
@@ -21,6 +21,7 @@
 		:maxlength="schema.maxlength",
 		:min="schema.min",
 		:multiple="schema.multiple",
+		:name="schema.inputName",
 		:pattern="schema.pattern",
 		:placeholder="schema.placeholder",
 		:readonly="schema.readonly",

diff --git a/src/fields/fieldMasked.vue b/src/fields/fieldMasked.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="number", v-model="value", number, :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="number", v-model="value", number, :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldPassword.vue b/src/fields/fieldPassword.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldPikaday.vue b/src/fields/fieldPikaday.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldRange.vue b/src/fields/fieldRange.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min")
+		input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :name="schema.inputName")
 		.helpText {{ value }}
 </template>
 

diff --git a/src/fields/fieldRangeSlider.vue b/src/fields/fieldRangeSlider.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :autocomplete="schema.autocomplete", :data-disable="disabled", :data-max="schema.max", :data-min="schema.min", :data-step="schema.step", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input(type="text", :autocomplete="schema.autocomplete", :data-disable="disabled", :data-max="schema.max", :data-min="schema.min", :data-step="schema.step", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldSelect.vue b/src/fields/fieldSelect.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	select.form-control(v-model="value", :disabled="disabled")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
 		option(:disabled="schema.required", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>

diff --git a/src/fields/fieldSelectEx.vue b/src/fields/fieldSelectEx.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%")
+	select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%", :name="schema.inputName")
 		option(:disabled="schema.required", v-if="schema.multiSelect !== true", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>

diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>

diff --git a/src/fields/fieldSubmit.vue b/src/fields/fieldSubmit.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="submit", :value="schema.buttonText", @click="click")
+	input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName")
 </template>
 
 <script>