Skip to content

Commit 80e0f86

Browse files
icebobicebob
committed
Dev environment
1 parent 3fb6261 commit 80e0f86

File tree

5 files changed

+123
-105
lines changed

5 files changed

+123
-105
lines changed

‎dev/app.vue

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template lang="jade">
2+
.row
3+
.col-md-6
4+
vue-form-generator(:schema='schema', :model='model', :options='formOptions')
5+
.col-md-6
6+
pre(v-if='model') {{{ model | prettyJSON }}}
7+
8+
</template>
9+
10+
<script>
11+
import Vue from "vue";
12+
import VueFormGenerator from "../src";
13+
import Schema from "./schema";
14+
15+
export default {
16+
components: {
17+
"VueFormGenerator": VueFormGenerator.component
18+
},
19+
20+
filters: {
21+
prettyJSON: function(json) {
22+
if (json) {
23+
json = JSON.stringify(json, undefined, 4);
24+
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
25+
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
26+
var cls = 'number';
27+
if (/^"/.test(match)) {
28+
if (/:$/.test(match)) {
29+
cls = 'key';
30+
} else {
31+
cls = 'string';
32+
}
33+
} else if (/true|false/.test(match)) {
34+
cls = 'boolean';
35+
} else if (/null/.test(match)) {
36+
cls = 'null';
37+
}
38+
return '<span class="' + cls + '">' + match + '</span>';
39+
});
40+
}
41+
}
42+
},
43+
44+
data() {
45+
return {
46+
model: {
47+
id: 1,
48+
name: "John Doe",
49+
type: "personal",
50+
password: "J0hnD03!x4",
51+
skills: [
52+
"Javascript",
53+
"VueJS"
54+
],
55+
email: "[email protected]",
56+
language: "en-GB",
57+
age: 35,
58+
dob: 348966000000,
59+
rank: 6,
60+
address: {
61+
country: "United Kingdom",
62+
city: "London",
63+
street: "SW1A 5 Parliament St",
64+
geo: {
65+
lat: 51.501015,
66+
lng: -0.126005
67+
}
68+
},
69+
role: "admin",
70+
created: 1461834815864,
71+
bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lacus porttitor, pellentesque odio sit amet, hendrerit felis. In turpis mauris, viverra a lacinia nec, fringilla ut nisi. Curabitur rutrum mattis risus, at dapibus nisl tempus et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget elementum lorem. Pellentesque tempor nec ante ut molestie. Suspendisse imperdiet tempus hendrerit. Morbi a dignissim augue.",
72+
status: true,
73+
74+
},
75+
76+
schema: Schema,
77+
78+
formOptions: {
79+
validateAfterLoad: true,
80+
validateAfterChanged: true
81+
}
82+
}
83+
},
84+
85+
ready() {
86+
window.app = this;
87+
}
88+
}
89+
90+
window.Vue = require('vue');
91+
</script>
92+
93+
<style lang="sass">
94+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Open+Sans+Condensed:300&subset=latin,latin-ext);
95+
96+
html {
97+
font-family: "Open Sans";
98+
font-size: 14px;
99+
}
100+
101+
* {
102+
-moz-box-sizing: border-box;
103+
-webkit-box-sizing: border-box;
104+
box-sizing: border-box;
105+
}
106+
107+
pre {
108+
overflow: auto;
109+
110+
.string { color: #885800; }
111+
.number { color: blue; }
112+
.boolean { color: magenta; }
113+
.null { color: red; }
114+
.key { color: green; }
115+
}
116+
117+
</style>

‎dev/index.html

+1-28
Original file line numberDiff line numberDiff line change
@@ -13,36 +13,9 @@
1313
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
1414
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
1515
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
16-
17-
<style>
18-
html {
19-
font-family: Tahoma;
20-
font-size: 14px;
21-
}
22-
23-
pre {
24-
overflow: auto;
25-
}
26-
pre .string { color: #885800; }
27-
pre .number { color: blue; }
28-
pre .boolean { color: magenta; }
29-
pre .null { color: red; }
30-
pre .key { color: green; }
31-
32-
</style>
33-
3416
</head>
3517
<body>
36-
<div id="app" class="container-fluid">
37-
<div class="row">
38-
<div class="col-md-6">
39-
<vue-form-generator :schema="schema", :model="model", :options="formOptions"></vue-form-generator>
40-
</div>
41-
<div class="col-md-6">
42-
<pre v-if="model">{{{ model | prettyJSON }}}</pre>
43-
</div>
44-
</div>
45-
</div>
18+
<app class="container-fluid"></app>
4619
<script src="/app.js"></script>
4720
</body>
4821
</html>

‎dev/main.js

+5-72
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,11 @@
1-
import Vue from "vue";
2-
import VueFormGenerator from "../src";
3-
import Schema from "./schema";
4-
51
$(function() {
62
console.log($.fn.selectpicker);
7-
8-
var vm = new Vue({
9-
el: "#app",
10-
components: {
11-
"vue-form-generator": VueFormGenerator.component
12-
},
13-
14-
filters: {
15-
prettyJSON: function(json) {
16-
if (json) {
17-
json = JSON.stringify(json, undefined, 4);
18-
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
19-
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
20-
var cls = 'number';
21-
if (/^"/.test(match)) {
22-
if (/:$/.test(match)) {
23-
cls = 'key';
24-
} else {
25-
cls = 'string';
26-
}
27-
} else if (/true|false/.test(match)) {
28-
cls = 'boolean';
29-
} else if (/null/.test(match)) {
30-
cls = 'null';
31-
}
32-
return '<span class="' + cls + '">' + match + '</span>';
33-
});
34-
}
35-
}
36-
},
37-
38-
data: {
39-
model: {
40-
id: 1,
41-
name: "John Doe",
42-
type: "personal",
43-
password: "J0hnD03!x4",
44-
skills: [
45-
"Javascript",
46-
"VueJS"
47-
],
48-
email: "[email protected]",
49-
language: "en-GB",
50-
age: 35,
51-
dob: 348966000000,
52-
rank: 6,
53-
address: {
54-
country: "United Kingdom",
55-
city: "London",
56-
street: "SW1A 5 Parliament St",
57-
geo: {
58-
lat: 51.501015,
59-
lng: -0.126005
60-
}
61-
},
62-
role: "admin",
63-
created: 1461834815864,
64-
bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lacus porttitor, pellentesque odio sit amet, hendrerit felis. In turpis mauris, viverra a lacinia nec, fringilla ut nisi. Curabitur rutrum mattis risus, at dapibus nisl tempus et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget elementum lorem. Pellentesque tempor nec ante ut molestie. Suspendisse imperdiet tempus hendrerit. Morbi a dignissim augue.",
65-
status: true,
3+
let App = require("./App.vue");
664

67-
},
68-
69-
schema: Schema,
70-
71-
formOptions: {
72-
validateAfterLoad: true,
73-
validateAfterChanged: true
74-
}
5+
new Vue({
6+
el: "body",
7+
components: {
8+
App
759
}
7610
});
77-
7811
});

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"css-loader": "0.23.1",
2929
"jade": "1.11.0",
3030
"jade-loader": "0.8.0",
31-
"jquery": "2.2.3",
3231
"lodash": "4.11.1",
3332
"moment": "2.13.0",
3433
"node-sass": "3.6.0",

‎webpack.dev.config.js

-4
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,6 @@ module.exports = {
5252
publicPath: '/'
5353
},
5454
plugins: [
55-
new webpack.ProvidePlugin({
56-
$: "jquery",
57-
jQuery: "jquery"
58-
})
5955
],
6056
module: {
6157
loaders: loaders

0 commit comments

Comments
 (0)