init project

2017-07-22 00:13:14 +08:00
commit 05ae84e77e
19 changed files with 3498 additions and 0 deletions
--- a/examples/demo1.html
+++ b/examples/demo1.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="with=device-width,initial-scale=1.0,
+      maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
+    <title>vue-date-range</title>
+    <link href="https://cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">
+    <style>
+        html {
+            /*background: linear-gradient(to bottom right, #00ebcb, #dafffa)*/
+        }
+
+        .container {
+            max-width: 1024px !important;
+            background-color: #fff;
+            padding: 0 0.5rem;
+            background-color: #fff;
+            margin-top: 1rem;
+            /*box-shadow: ;*/
+        }
+
+        .date-container, .selected-container {
+            margin: 1rem auto;
+            padding: 0 !important;
+            min-width: 300px;
+            max-width: 400px !important;
+        }
+
+        .wrapper {
+            min-height: 100vh;
+            padding: 0 0.5rem;
+        }
+
+        .column {
+            padding-top: 0;
+            padding-bottom: 0.5rem;
+        }
+
+        @media screen and (min-width: 768px) {
+            .control:not(:last-child) {
+                margin-bottom: 0.2rem;
+            }
+
+            .is-full {
+                flex: 1;
+            }
+
+            .is-horizontal {
+                display: flex;
+                align-items: center;
+            }
+
+            .label {
+                margin-right: 1rem;
+            }
+        }
+
+        .date-picker {
+            position: relative;
+        }
+        .calendar-wrapper {
+            border: 1px solid #bbbbbb;
+            position: absolute;
+            min-width: 300px;
+            max-width: 400px;
+            z-index: 999;
+        }
+        @media all and (max-width: 375px) {
+            .calendar-wrapper {
+                width: 120%;
+                max-width: 120%;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+        .mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 998;
+        }
+
+
+
+    </style>
+</head>
+<body>
+<div id="app" class="wrapper is-fullwidth">
+    <vue-tree :model="data"></vue-tree>
+</div>
+
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="../dist/vue-tree.min.js"></script>
+<script>
+    new Vue({
+      el: '#app',
+      components: {
+        'VueTree': vuetree.VueTree
+      },
+      data () {
+        return {
+          data: new vuetree.Tree([
+            {
+              name: 'Node 1-1',
+              id: 1,
+              pid: 0,
+              children: [
+                {
+                  name: 'Node 2-1',
+                  id: 2,
+                  pid: 1
+                }
+              ]
+            },
+            {
+              name: 'Node 1-2',
+              id: 3,
+              pid: 0
+            },
+            {
+              name: 'Node 1-3',
+              id: 4,
+              pid: 0
+            }
+          ])
+        }
+      }
+    })
+</script>
+</body>
+</html>