Skip to content

Commit 27f84f5

Browse files
icebobicebob
authored
Merge pull request #86 from icebob/form_name_attr
Form name attr feature
2 parents cad76da + 13d6e0f commit 27f84f5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+337
-73
lines changed

‎dev/schema.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ module.exports = {
2020
type: "input",
2121
inputType: "hidden",
2222
label: "Hidden",
23-
model: "id"
23+
model: "id",
24+
inputName: "hiddenField"
2425
},
2526
{
2627
type: "input",
@@ -57,6 +58,7 @@ module.exports = {
5758
label: "URL",
5859
model: "website",
5960
placeholder: "Enter your website",
61+
inputName: "website",
6062
validator: validators.url
6163
},
6264
{
@@ -257,6 +259,7 @@ module.exports = {
257259
required: true,
258260
browse: true,
259261
hideInput: false,
262+
inputName: "photo",
260263
validator: validators.required
261264
},
262265
{

‎dist/vue-form-generator.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-form-generator.js

+15-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/post-form/index.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<meta charset="utf-8">
6+
<title>Demo of vue-form-generator</title>
7+
<link rel="stylesheet" type="text/css" href="../../dist/vue-form-generator.css">
8+
9+
<style>
10+
html {
11+
font-family: Tahoma;
12+
font-size: 14px;
13+
}
14+
15+
body {
16+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
17+
font-size: 14px;
18+
line-height: 1.42857143;
19+
color: #333;
20+
}
21+
22+
pre {
23+
overflow: auto;
24+
}
25+
pre .string { color: #885800; }
26+
pre .number { color: blue; }
27+
pre .boolean { color: magenta; }
28+
pre .null { color: red; }
29+
pre .key { color: green; }
30+
31+
.container {
32+
max-width: 970px;
33+
padding-right: 15px;
34+
padding-left: 15px;
35+
margin-right: auto;
36+
margin-left: auto;
37+
}
38+
39+
h1 {
40+
text-align: center;
41+
font-size: 36px;
42+
margin-top: 20px;
43+
margin-bottom: 10px;
44+
font-weight: 500;
45+
}
46+
47+
fieldset {
48+
border: 0;
49+
}
50+
51+
.panel {
52+
margin-bottom: 20px;
53+
background-color: #fff;
54+
border: 1px solid transparent;
55+
border-radius: 4px;
56+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
57+
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
58+
border-color: #ddd;
59+
}
60+
61+
.panel-heading {
62+
color: #333;
63+
background-color: #f5f5f5;
64+
border-color: #ddd;
65+
66+
padding: 10px 15px;
67+
border-bottom: 1px solid transparent;
68+
border-top-left-radius: 3px;
69+
border-top-right-radius: 3px;
70+
}
71+
72+
.panel-body {
73+
padding: 15px;
74+
}
75+
76+
</style>
77+
</head>
78+
79+
<body>
80+
<h1 class="text-center">Submit the form</h1>
81+
<div class="container" id="app">
82+
<div class="panel panel-default">
83+
<div class="panel-heading">Form</div>
84+
<div class="panel-body">
85+
<form action="https://httpbin.org/post" method="POST" enctype="application/x-www-form-urlencoded">
86+
<vue-form-generator :schema="schema", :model="model", :options="formOptions"></vue-form-generator>
87+
</form>
88+
</div>
89+
</div>
90+
91+
<div class="panel panel-default">
92+
<div class="panel-heading">Model</div>
93+
<div class="panel-body">
94+
<pre v-if="model">{{{ model | prettyJSON }}}</pre>
95+
</div>
96+
</div>
97+
98+
</div>
99+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
100+
<script type="text/javascript" src="../../dist/vue-form-generator.js"></script>
101+
<script type="text/javascript" src="./main.js"></script>
102+
</body>
103+
</html>

‎examples/post-form/main.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
var VueFormGenerator = window.VueFormGenerator;
2+
3+
var vm = new Vue({
4+
el: "#app",
5+
components: {
6+
"vue-form-generator": VueFormGenerator.component
7+
},
8+
9+
filters: {
10+
prettyJSON: function(json) {
11+
if (json) {
12+
json = JSON.stringify(json, undefined, 4);
13+
json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
14+
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
15+
var cls = "number";
16+
if (/^"/.test(match)) {
17+
if (/:$/.test(match)) {
18+
cls = "key";
19+
} else {
20+
cls = "string";
21+
}
22+
} else if (/true|false/.test(match)) {
23+
cls = "boolean";
24+
} else if (/null/.test(match)) {
25+
cls = "null";
26+
}
27+
return "<span class=\"" + cls + "\">" + match + "</span>";
28+
});
29+
}
30+
}
31+
},
32+
33+
data: {
34+
model: {
35+
id: 1,
36+
name: "John Doe",
37+
password: "J0hnD03!x4",
38+
skills: "Javascript",
39+
email: "[email protected]",
40+
status: true
41+
},
42+
schema: {
43+
fields: [
44+
{
45+
type: "text",
46+
label: "ID",
47+
model: "id",
48+
inputName: "id",
49+
readonly: true,
50+
featured: false,
51+
disabled: true
52+
},
53+
{
54+
type: "text",
55+
label: "Name",
56+
model: "name",
57+
inputName: "name",
58+
readonly: false,
59+
featured: true,
60+
required: true,
61+
disabled: false,
62+
placeholder: "User's name",
63+
validator: VueFormGenerator.validators.string
64+
},
65+
{
66+
type: "password",
67+
label: "Password",
68+
model: "password",
69+
inputName: "password",
70+
min: 6,
71+
required: true,
72+
hint: "Minimum 6 characters",
73+
validator: VueFormGenerator.validators.string
74+
},
75+
{
76+
type: "email",
77+
label: "E-mail",
78+
model: "email",
79+
inputName: "email",
80+
placeholder: "User's e-mail address",
81+
validator: VueFormGenerator.validators.email
82+
},
83+
{
84+
type: "select",
85+
label: "Skills",
86+
model: "skills",
87+
inputName: "skills",
88+
required: true,
89+
values: [
90+
"HTML5",
91+
"Javascript",
92+
"CSS3",
93+
"CoffeeScript",
94+
"AngularJS",
95+
"ReactJS",
96+
"VueJS"
97+
],
98+
validator: VueFormGenerator.validators.string
99+
},
100+
{
101+
type: "checkbox",
102+
label: "Status",
103+
model: "status",
104+
inputName: "status",
105+
multi: true,
106+
readonly: false,
107+
featured: false,
108+
disabled: false,
109+
default: true
110+
},
111+
{
112+
type: "submit",
113+
label: "",
114+
buttonText: "Submit",
115+
validateBeforeSubmit: true
116+
}
117+
118+
]
119+
},
120+
121+
formOptions: {
122+
validateAfterLoad: false,
123+
validateAfterChanged: false
124+
}
125+
}
126+
});

‎examples/simple/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var vm = new Vue({
2424
} else if (/null/.test(match)) {
2525
cls = "null";
2626
}
27-
return "<span class="" + cls + "">" + match + "</span>";
27+
return "<span class=\"" + cls + "\">" + match + "</span>";
2828
});
2929
}
3030
}

‎src/fields/fieldCheckbox.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled")
2+
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldCleave.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldColor.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="jade">
22
.wrapper
3-
input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled")
3+
input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
44
span.helper {{ value }}
55
</template>
66

‎src/fields/fieldDateTimePicker.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="jade">
22
.input-group.date
3-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
3+
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
44
span.input-group-addon
55
span.glyphicon.glyphicon-calendar
66
</template>

‎src/fields/fieldEmail.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldGoogleAddress.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", debounce="500", @focus="geolocate()")
2+
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()")
33
</template>
44

55
<script>

‎src/fields/fieldImage.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template lang="jade">
22
div.wrapper
33
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")
4-
input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged")
4+
input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged", :name="schema.inputName")
55
.preview(:style="previewStyle")
66
.remove(title="Remove image", @click="remove")
77
</template>

‎src/fields/fieldInput.vue

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
:maxlength="schema.maxlength",
2222
:min="schema.min",
2323
:multiple="schema.multiple",
24+
:name="schema.inputName",
2425
:pattern="schema.pattern",
2526
:placeholder="schema.placeholder",
2627
:readonly="schema.readonly",

‎src/fields/fieldMasked.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldNumber.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
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")
2+
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")
33
</template>
44

55
<script>

‎src/fields/fieldPassword.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldPikaday.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldRange.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="jade">
22
.wrapper
3-
input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min")
3+
input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :name="schema.inputName")
44
.helpText {{ value }}
55
</template>
66

‎src/fields/fieldRangeSlider.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
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")
2+
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")
33
</template>
44

55
<script>

‎src/fields/fieldSelect.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
select.form-control(v-model="value", :disabled="disabled")
2+
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
33
option(:disabled="schema.required", :value="null", :selected="value == undefined") &lt;Not selected&gt;
44
option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
55
</template>

‎src/fields/fieldSelectEx.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%")
2+
select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%", :name="schema.inputName")
33
option(:disabled="schema.required", v-if="schema.multiSelect !== true", :value="null", :selected="value == undefined") &lt;Not selected&gt;
44
option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
55
</template>

‎src/fields/fieldSpectrum.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
2+
input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
33
</template>
44

55
<script>

‎src/fields/fieldSubmit.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="jade">
2-
input(type="submit", :value="schema.buttonText", @click="click")
2+
input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName")
33
</template>
44

55
<script>

0 commit comments

Comments
 (0)