open/close/select

plantain-00 · Feb 5, 2017 · f36831a · f36831a
1 parent 60f147c
commit f36831a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/demo/data.ts b/demo/data.ts
@@ -1,6 +1,6 @@
-import { TreeNode } from "../dist/common";
+import { TreeData } from "../dist/common";
 
-export const data: TreeNode = {
+export const data: TreeData = {
     text: "Root node",
     state: {
         opened: true,

diff --git a/src/common.ts b/src/common.ts
@@ -1,9 +1,9 @@
-export type TreeNode = {
+export type TreeData = {
     text: string;
     state?: {
         opened?: boolean;
         selected?: boolean;
         disabled?: boolean;
     };
-    children?: TreeNode[];
+    children?: TreeData[];
 };
diff --git a/src/vue.ts b/src/vue.ts
@@ -5,7 +5,7 @@ import * as common from "./common";
 @Component({
     template: `
     <li role="treeitem" :class="nodeClassName">
-        <i class="jstree-icon jstree-ocl" role="presentation"></i><a :class="anchorClassName" href="javascript:void(0)" @mouseenter="hover(true)" @mouseleave="hover(false)"><i class="jstree-icon jstree-themeicon" role="presentation"></i>{{data.text}}</a>
+        <i class="jstree-icon jstree-ocl" role="presentation" @click="openOrClose()"></i><a :class="anchorClassName" href="javascript:void(0)" @click="click()" @mouseenter="hover(true)" @mouseleave="hover(false)"><i class="jstree-icon jstree-themeicon" role="presentation"></i>{{data.text}}</a>
         <ul v-if="data.children" role="group" class="jstree-children">
             <node v-for="(child, i) in data.children" :data="child" :last="i === data.children.length - 1"></node>
         </ul>
@@ -14,7 +14,7 @@ import * as common from "./common";
     props: ["data", "last"],
 })
 class Node extends Vue {
-    data: common.TreeNode;
+    data: common.TreeData;
     last: boolean;
     hovered = false;
 
@@ -23,6 +23,8 @@ class Node extends Vue {
         if (this.data.children && this.data.children.length > 0) {
             if (this.data.state && this.data.state.opened) {
                 values.push("jstree-open");
+            } else {
+                values.push("jstree-closed");
             }
         } else {
             values.push("jstree-leaf");
@@ -44,9 +46,23 @@ class Node extends Vue {
         return values.join(" ");
     }
 
+    beforeMount() {
+        if (!this.data.state) {
+            this.data.state = {};
+        }
+    }
+
     hover(hovered: boolean) {
         this.hovered = hovered;
     }
+    openOrClose() {
+        if (this.last) {
+            this.data.state!.opened = !this.data.state!.opened;
+        }
+    }
+    click() {
+        this.data.state!.selected = !this.data.state!.selected;
+    }
 }
 
 Vue.component("node", Node);
@@ -62,7 +78,7 @@ Vue.component("node", Node);
     props: ["data"],
 })
 class Tree extends Vue {
-    data: common.TreeNode;
+    data: common.TreeData;
 }
 
 Vue.component("tree", Tree);