create picker dev

vue-generators · Jun 30, 2017 · 47d9d57 · 47d9d57
1 parent 659cea6
commit 47d9d57
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 1 deletion.
diff --git a/dev/picker/app.vue b/dev/picker/app.vue
@@ -0,0 +1,61 @@
+<template lang="html">
+	<div class="wrapper">
+		<div class="panel panel-default">
+			<div class="panel-heading">Form</div>
+			<div class="panel-body">
+				<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+			</div>
+		</div>
+
+		<div class="panel panel-default">
+			<div class="panel-heading">Model</div>
+			<div class="panel-body">
+				<pre v-if="model">{{ model }}</pre>
+			</div>
+		</div>	
+	</div>	
+</template>
+
+<script>
+import Vue from "vue";
+import Multiselect from "vue-multiselect"
+Vue.component("multiselect", Multiselect);
+
+export default {
+	data () {
+		return {
+			model: {
+				
+			},
+
+			schema: {
+				fields: [
+					{
+						type: "dateTimePicker",
+						/*type: "input",
+						inputType: "date",*/
+						label: "DT",
+						model: "dt",
+						dateTimePickerOptions: {
+							format: "YYYY-MM-DD HH:mm:ss"
+						}
+					}
+				]
+			},
+
+			formOptions: {}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+}
+</script>
+
+<style>
+	.wrapper {
+		width: 500px;
+		margin: 0 auto;
+	}
+</style>
diff --git a/dev/picker/index.html b/dev/picker/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-form-generator datePicker demo</title>
+
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
+
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
+
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
+
+  </head>
+  <body>
+    <div class="container-fluid"></div>
+    <div id="app"></div>
+  	<script src="/picker.js"></script>
+  </body>
+</html>
diff --git a/dev/picker/main.js b/dev/picker/main.js
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../src";
+Vue.use(VueFormGenerator);
+
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -35,7 +35,8 @@ module.exports = {
 		full: path.resolve("dev", "full", "main.js"),
 		mselect: path.resolve("dev", "multiselect", "main.js"),
 		grouping: path.resolve("dev", "grouping", "main.js"),
-		checklist: path.resolve("dev", "checklist", "main.js")
+		checklist: path.resolve("dev", "checklist", "main.js"),
+		picker: path.resolve("dev", "picker", "main.js")
 	},
 
 	output: {