Merge pull request #54 from amsik/dnd

#11 Drag & Drop
amsik · Oct 7, 2018 · 93de32f · 93de32f
2 parents 7ab48d7 + 5bb2323
commit 93de32f
Show file tree

Hide file tree

Showing 15 changed files with 4,308 additions and 3,004 deletions.
diff --git a/demo/assets/menu.js b/demo/assets/menu.js
@@ -13,7 +13,8 @@
     { text: 'Editing', href: 'editing.html' },
     { text: 'Custom theme', href: 'custom-theme.html' },
     { text: 'Vuex Integration', href: 'vuex.html' },
-    { text: 'Exporting', href: 'exporting.html' }
+    { text: 'Exporting', href: 'exporting.html' },
+    { text: 'Drag & Drop', href: 'dnd.html' }
   ]
 
   function initMenu() {

diff --git a/demo/index.html b/demo/index.html
@@ -23,6 +23,7 @@
       <li class="demo-item"><a href="pages/custom-theme.html">Custom theme</a></li>
       <li class="demo-item"><a href="pages/vuex.html">Vuex Integration</a></li>
       <li class="demo-item"><a href="pages/exporting.html">Exporting</a></li>
+      <li class="demo-item"><a href="pages/dnd.html">Drag & Drop</a></li>
     </div>
   </body>
 </html>
diff --git a/demo/pages/checkboxes.html b/demo/pages/checkboxes.html
@@ -35,7 +35,7 @@
             </p>
 
             <p v-if="treeModel">
-              <b>Checked: </b>  {{ treeModel.checked.map(el => el.text) }}
+              <b>Checked: </b>  {{ treeModel.checked.map(el => getFullPath(el)) }}
             </p>
           </div>
           <div class="example-tree">
@@ -81,6 +81,16 @@
           },
         }),
 
+        methods: {
+          getFullPath(node) {
+            const fullPath = [node.text]
+
+            node.recurseUp(parentEl => fullPath.unshift(parentEl.text))
+
+            return fullPath.join('->')
+          }
+        },
+
         mounted() {
           const tree1 = this.$refs.tree1
 

diff --git a/demo/pages/dnd.html b/demo/pages/dnd.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Liquor Tree: Drag & Drop</title>
+    <link rel="stylesheet" href="../assets/style.css">
+    <script src="../assets/menu.js"></script>
+
+    <!-- first import Vue -->
+    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
+    <script src="../assets/vue.js"></script>
+    <script src="/liquor-tree.umd.js"></script>
+
+
+    <style>
+      .demo-tree {
+        width: 50%;
+      }
+
+      .tree.tree-loading {
+        width: 300px;
+        height: 300px;
+        background: #fff no-repeat url(/assets/img/loading.gif) center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="hello">
+        Drag & Drop.
+    </div>
+
+    <div id="app">
+      <div class="examples">
+        <div class="example">
+          <div class="example-description">
+            <p>Overriding default structure of tree data</p>
+          </div>
+
+          <div class="example-tree">
+            <tree
+              :data="treeData3"
+              :options="treeOptions3"
+            >
+              <div class="tree-scope" slot-scope="{ node }">
+                - {{ node.text }} -
+              </div>
+            </tree>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      new Vue({
+        el: '#app',
+        data: () => ({
+          /* example 3 */
+          treeData3: getTreeData2(),
+          treeOptions3: {
+            propertyNames: {
+              text: 'MY_TEXT',
+              children: 'KIDS',
+              state: 'OPTIONS'
+            },
+            deletion: true,
+            dnd: true,
+            checkbox: true
+          }
+        }),
+
+        methods: {
+          initTree2() {
+            this.treeData2 = new Promise(resolve => {
+              setTimeout(() => resolve(getTreeData1()), 2600)
+            })
+
+            this.treeData2.then(data => {
+              data[0].state = {}
+            })
+          }
+        }
+      })
+
+      function getTreeData2() {
+        return [
+          {
+            MY_TEXT: 'JS: The Right Way',
+            OPTIONS: { expanded: true },
+            KIDS: [
+              { MY_TEXT: 'Getting Started', OPTIONS: { checked: true, draggable: false } },
+              { MY_TEXT: 'JavaScript Code Style', OPTIONS: { selected: true } },
+              { MY_TEXT: 'MVC Pattern' },
+              { MY_TEXT: 'MVP Pattern' },
+              { MY_TEXT: 'MVVM Pattern' },
+              { MY_TEXT: 'The Good Parts', KIDS: [
+                { MY_TEXT: 'OBJECT ORIENTED', OPTIONS: { checked: true }  },
+                { MY_TEXT: 'ANONYMOUS FUNCTIONS', OPTIONS: { checked: true }  },
+                { MY_TEXT: 'FUNCTIONS AS FIRST-CLASS OBJECTS', OPTIONS: { checked: true }  },
+                { MY_TEXT: 'LOOSE TYPING', OPTIONS: { checked: true }  }
+              ]},
+              { MY_TEXT: 'Patterns', KIDS: [
+                { MY_TEXT: 'DESIGN PATTERNS', OPTIONS: { expanded: true }, KIDS: [
+                  { MY_TEXT: 'Creational Design Patterns', KIDS: [
+                    { MY_TEXT: 'Factory' },
+                    { MY_TEXT: 'Prototype' },
+                    { MY_TEXT: 'Mixin' },
+                    { MY_TEXT: 'Singleton' }
+                  ]},
+                  { MY_TEXT: 'Structural Design Patterns'}
+                ]},
+                { MY_TEXT: 'MV* PATTERNS', cildren: [
+                  { MY_TEXT: 'MVC Pattern' },
+                  { MY_TEXT: 'MVP Pattern' },
+                  { MY_TEXT: 'MVVM Pattern' }
+                ]}
+              ]}
+            ]
+          }
+        ]
+      }
+    </script>
+
+  </body>
+</html>