add event and document

plantain-00 · Feb 5, 2017 · 9a3cea3 · 9a3cea3
1 parent f36831a
commit 9a3cea3
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -6,3 +6,60 @@
 
 # tree-component
 A reactjs, angular2 and vuejs tree component.
+
+#### install
+
+`npm i tree-component`
+
+#### vuejs component demo
+
+```ts
+import "tree-component/dist/vue";
+```
+
+```html
+<tree :data="data"
+    @toggle="toggle(arguments[0])"
+    @change="change(arguments[0])"></tree>
+```
+
+the online demo: https://plantain-00.github.io/tree-component/demo/vue/index.html
+
+the source code of the demo: https://github.com/plantain-00/tree-component/tree/master/demo/vue
+
+#### properties and events of the component
+
+name | type | description
+--- | --- | ---
+data | property | the data of the tree, [the structure](#tree-data-structure)
+toggle | event | triggered when opening or closing a node, [the structure of first parameter](#event-data-structure)
+change | event | triggered when selecting or deselecting a node, [the structure first parameter](#event-data-structure)
+
+#### tree data structure
+
+```ts
+type TreeData = {
+    text: string;
+    value?: any;
+    state?: {
+        opened?: boolean;
+        selected?: boolean;
+        disabled?: boolean;
+    };
+    children?: TreeData[];
+};
+```
+
+#### event data structure
+
+```ts
+type EventData = {
+    data: TreeData;
+};
+```
+
+#### features
+
++ vuejs component
++ reactjs component
++ angular2 component
diff --git a/demo/data.ts b/demo/data.ts
@@ -8,9 +8,6 @@ export const data: TreeData = {
     children: [
         {
             text: "Child node 1",
-            state: {
-                selected: true,
-            },
         },
         {
             text: "Child node 2",
@@ -26,6 +23,9 @@ export const data: TreeData = {
                 },
                 {
                     text: "Child node 4",
+                    state: {
+                        disabled: true,
+                    },
                 },
             ],
         },

diff --git a/demo/vue/index.ejs.html b/demo/vue/index.ejs.html
@@ -8,7 +8,9 @@
 
 <body>
     <div id="container">
-        <tree :data="data"></tree>
+        <tree :data="data"
+            @toggle="toggle(arguments[0])"
+            @change="change(arguments[0])"></tree>
     </div>
     <script src="../<%=demoVueBundleJs %>" crossOrigin="anonymous" integrity="<%=sri.demoVueBundleJs %>"></script>
 </body>

diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -1,9 +1,9 @@
 import * as Vue from "vue";
 import "../../dist/vue";
 import { data } from "../data";
+import * as common from "../../dist/common";
 
 /* tslint:disable:no-unused-new */
-/* tslint:disable:object-literal-shorthand */
 
 new Vue({
     el: "#container",
@@ -12,4 +12,12 @@ new Vue({
             data,
         };
     },
+    methods: {
+        toggle(eventData: common.EventData) {
+            eventData.data.state!.opened = !eventData.data.state!.opened;
+        },
+        change(eventData: common.EventData) {
+            eventData.data.state!.selected = !eventData.data.state!.selected;
+        },
+    },
 });
diff --git a/src/common.ts b/src/common.ts
@@ -1,9 +1,14 @@
 export type TreeData = {
     text: string;
+    value?: any;
     state?: {
         opened?: boolean;
         selected?: boolean;
         disabled?: boolean;
     };
     children?: TreeData[];
 };
+
+export type EventData = {
+    data: TreeData;
+};
diff --git a/src/vue.ts b/src/vue.ts
@@ -5,9 +5,14 @@ import * as common from "./common";
 @Component({
     template: `
     <li role="treeitem" :class="nodeClassName">
-        <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>
+        <i class="jstree-icon jstree-ocl" role="presentation" @click="toggle()"></i><a :class="anchorClassName" href="javascript:void(0)" @click="change()" @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>
+            <node v-for="(child, i) in data.children"
+                :data="child"
+                :last="i === data.children.length - 1"
+                @toggle="toggle(arguments[0])"
+                @change="change(arguments[0])">
+            </node>
         </ul>
     </li>
     `,
@@ -16,6 +21,7 @@ import * as common from "./common";
 class Node extends Vue {
     data: common.TreeData;
     last: boolean;
+
     hovered = false;
 
     get nodeClassName() {
@@ -37,8 +43,13 @@ class Node extends Vue {
 
     get anchorClassName() {
         const values = ["jstree-anchor"];
-        if (this.data.state && this.data.state.selected) {
-            values.push("jstree-clicked");
+        if (this.data.state) {
+            if (this.data.state.selected) {
+                values.push("jstree-clicked");
+            }
+            if (this.data.state.disabled) {
+                values.push("jstree-disabled");
+            }
         }
         if (this.hovered) {
             values.push("jstree-hovered");
@@ -55,13 +66,21 @@ class Node extends Vue {
     hover(hovered: boolean) {
         this.hovered = hovered;
     }
-    openOrClose() {
-        if (this.last) {
-            this.data.state!.opened = !this.data.state!.opened;
+    toggle(eventData?: common.EventData) {
+        if (eventData) {
+            this.$emit("toggle", eventData);
+        } else {
+            if (this.last) {
+                this.$emit("toggle", { data: this.data });
+            }
         }
     }
-    click() {
-        this.data.state!.selected = !this.data.state!.selected;
+    change(eventData?: common.EventData) {
+        if (eventData) {
+            this.$emit("change", eventData);
+        } else {
+            this.$emit("change", { data: this.data });
+        }
     }
 }
 
@@ -71,14 +90,24 @@ Vue.component("node", Node);
     template: `
     <div class="jstree jstree-default jstree-default-dark" role="tree">
         <ul class="jstree-container-ul jstree-children" role="group">
-            <node :data="data" :last="true"></node>
+            <node :data="data"
+                :last="true"
+                @toggle="toggle(arguments[0])"
+                @change="change(arguments[0])"></node>
         </ul>
     </div>
     `,
     props: ["data"],
 })
-class Tree extends Vue {
+export class Tree extends Vue {
     data: common.TreeData;
+
+    toggle(eventData: common.EventData) {
+        this.$emit("toggle", eventData);
+    }
+    change(eventData: common.EventData) {
+        this.$emit("change", eventData);
+    }
 }
 
 Vue.component("tree", Tree);