Dev environment

vue-generators · Apr 28, 2016 · 80e0f86 · 80e0f86
1 parent 3fb6261
commit 80e0f86
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 105 deletions.
diff --git a/dev/app.vue b/dev/app.vue
@@ -0,0 +1,117 @@
+<template lang="jade">
+    .row
+      .col-md-6
+        vue-form-generator(:schema='schema', :model='model', :options='formOptions')
+      .col-md-6
+        pre(v-if='model') {{{ model | prettyJSON }}}   
+
+</template>
+
+<script>
+	import Vue from "vue";
+	import VueFormGenerator from "../src";
+	import Schema from "./schema";
+
+	export default {
+		components: {
+			"VueFormGenerator": 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() {
+			return {
+				model: {
+					id: 1,
+					name: "John Doe",
+					type: "personal",
+					password: "J0hnD03!x4",
+					skills: [
+						"Javascript",
+						"VueJS"
+					],
+					email: "[email protected]",
+					language: "en-GB",
+					age: 35,
+					dob: 348966000000,
+					rank: 6,
+					address: {
+						country: "United Kingdom",
+						city: "London",
+						street: "SW1A 5 Parliament St",
+						geo: {
+							lat: 51.501015, 
+							lng: -0.126005
+						}
+					},
+					role: "admin",
+					created: 1461834815864,
+					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.",
+					status: true,
+
+				},
+
+				schema: Schema,
+
+				formOptions: {
+					validateAfterLoad: true,
+					validateAfterChanged: true
+				}
+			}
+		},
+		
+		ready() {
+			window.app = this;
+		}
+	}
+
+	window.Vue = require('vue');
+</script>
+
+<style lang="sass">
+	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Open+Sans+Condensed:300&subset=latin,latin-ext);
+
+	html {
+		font-family: "Open Sans";
+        font-size: 14px;
+	}
+
+	* {
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+      pre {
+        overflow: auto;
+        
+        .string { color: #885800; }
+        .number { color: blue; }
+        .boolean { color: magenta; }
+        .null { color: red; }
+        .key { color: green; }    	
+      }
+
+</style>
diff --git a/dev/index.html b/dev/index.html
@@ -13,36 +13,9 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
-
-	<style>
-	    html {
-	        font-family: Tahoma;
-	        font-size: 14px;
-	    }
-
-	    pre {
-	        overflow: auto;
-	    }
-	        pre .string { color: #885800; }
-	        pre .number { color: blue; }
-	        pre .boolean { color: magenta; }
-	        pre .null { color: red; }
-	        pre .key { color: green; }    
-
-	</style>
-
   </head>
   <body>
-    <div id="app" class="container-fluid">
-    	<div class="row">
-	    	<div class="col-md-6">
-	        	<vue-form-generator :schema="schema", :model="model", :options="formOptions"></vue-form-generator>    
-	        </div>
-	    	<div class="col-md-6">
-		        <pre v-if="model">{{{ model | prettyJSON }}}</pre>
-	        </div>
-	    </div>
-    </div>
+    <app class="container-fluid"></app>
   	<script src="/app.js"></script>
   </body>
 </html>
diff --git a/dev/main.js b/dev/main.js
@@ -1,78 +1,11 @@
-import Vue from "vue";
-import VueFormGenerator from "../src";
-import Schema from "./schema";
-
 $(function() {
 	console.log($.fn.selectpicker);
-
-	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",
-				type: "personal",
-				password: "J0hnD03!x4",
-				skills: [
-					"Javascript",
-					"VueJS"
-				],
-				email: "[email protected]",
-				language: "en-GB",
-				age: 35,
-				dob: 348966000000,
-				rank: 6,
-				address: {
-					country: "United Kingdom",
-					city: "London",
-					street: "SW1A 5 Parliament St",
-					geo: {
-						lat: 51.501015, 
-						lng: -0.126005
-					}
-				},
-				role: "admin",
-				created: 1461834815864,
-				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.",
-				status: true,
+	let App = require("./App.vue");
 
-			},
-
-			schema: Schema,
-
-			formOptions: {
-				validateAfterLoad: true,
-				validateAfterChanged: true
-			}
+	new Vue({
+		el: "body",
+		components: {
+			App
 		}
 	});
-
 });
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "css-loader": "0.23.1",
     "jade": "1.11.0",
     "jade-loader": "0.8.0",
-    "jquery": "2.2.3",
     "lodash": "4.11.1",
     "moment": "2.13.0",
     "node-sass": "3.6.0",

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -52,10 +52,6 @@ module.exports = {
     publicPath: '/'
   },
   plugins: [
-    new webpack.ProvidePlugin({
-      $: "jquery",
-      jQuery: "jquery"
-    })
   ],
   module: {
     loaders: loaders