Skip to content

Commit 5d2620b

Browse files
zoul0813zoul0813
committed
jsfiddle-sample embedded into repo
1 parent 846d49b commit 5d2620b

File tree

4 files changed

+211
-0
lines changed

4 files changed

+211
-0
lines changed

‎examples/jsfiddle-sample/demo.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
html {
2+
font-family: Tahoma;
3+
font-size: 14px;
4+
}
5+
6+
body {
7+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
8+
font-size: 14px;
9+
line-height: 1.42857143;
10+
color: #333;
11+
}
12+
13+
pre {
14+
overflow: auto;
15+
}
16+
pre .string { color: #885800; }
17+
pre .number { color: blue; }
18+
pre .boolean { color: magenta; }
19+
pre .null { color: red; }
20+
pre .key { color: green; }
21+
22+
h1 {
23+
text-align: center;
24+
font-size: 36px;
25+
margin-top: 20px;
26+
margin-bottom: 10px;
27+
font-weight: 500;
28+
}
29+
30+
fieldset {
31+
border: 0;
32+
}
33+
34+
.panel {
35+
margin-bottom: 20px;
36+
background-color: #fff;
37+
border: 1px solid transparent;
38+
border-radius: 4px;
39+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
40+
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
41+
border-color: #ddd;
42+
}
43+
44+
.panel-heading {
45+
color: #333;
46+
background-color: #f5f5f5;
47+
border-color: #ddd;
48+
49+
padding: 10px 15px;
50+
border-bottom: 1px solid transparent;
51+
border-top-left-radius: 3px;
52+
border-top-right-radius: 3px;
53+
}
54+
55+
.panel-body {
56+
padding: 15px;
57+
}
58+
59+
.field-checklist .wrapper {
60+
width: 100%;
61+
}

‎examples/jsfiddle-sample/demo.details

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
name: vue-form-generator example
3+
description: https://github.com/vue-generators/vue-form-generator
4+
authors:
5+
- David Higgins (@zoul0813)
6+
- Icebob (@icebob)
7+
resources:
8+
- https://unpkg.com/[email protected]/dist/vue.min.js
9+
- https://unpkg.com/vue-form-generator
10+
- https://unpkg.com/vue-form-generator/dist/vfg.css
11+
normalize_css: no
12+
load_type: l
13+
...

‎examples/jsfiddle-sample/demo.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<h1 class="text-center">Demo of vue-form-generator</h1>
2+
<div class="container" id="app">
3+
<div class="panel panel-default">
4+
<div class="panel-heading">Form</div>
5+
<div class="panel-body">
6+
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
7+
</div>
8+
</div>
9+
10+
<div class="panel panel-default">
11+
<div class="panel-heading">Model</div>
12+
<div class="panel-body">
13+
<pre v-if="model" v-html="prettyJSON(model)"></pre>
14+
</div>
15+
</div>
16+
17+
<div class="panel panel-default">
18+
<div class="panel-heading">Schema</div>
19+
<div class="panel-body">
20+
<pre v-if="model" v-html="prettyJSON(schema)"></pre>
21+
</div>
22+
</div>
23+
</div>

‎examples/jsfiddle-sample/demo.js

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

0 commit comments

Comments
 (0)