Dev environment

vue-generators · Apr 28, 2016 · e1f6125 · e1f6125
1 parent 8a721d4
commit e1f6125
Show file tree

Hide file tree

Showing 7 changed files with 514 additions and 6 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-form-generator development</title>
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
+
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
+	<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>
+  	<script src="/app.js"></script>
+  </body>
+</html>
diff --git a/dev/main.js b/dev/main.js
@@ -0,0 +1,78 @@
+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,
+
+			},
+
+			schema: Schema,
+
+			formOptions: {
+				validateAfterLoad: true,
+				validateAfterChanged: true
+			}
+		}
+	});
+
+});