|
|
@@ -0,0 +1,81 @@
|
|
|
+// demo data
|
|
|
+var data = {
|
|
|
+ name: 'My Tree',
|
|
|
+ children: [
|
|
|
+ { name: 'hello' },
|
|
|
+ { name: 'wat' },
|
|
|
+ {
|
|
|
+ name: 'child folder',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: 'child folder',
|
|
|
+ children: [
|
|
|
+ { name: 'hello' },
|
|
|
+ { name: 'wat' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { name: 'hello' },
|
|
|
+ { name: 'wat' },
|
|
|
+ {
|
|
|
+ name: 'child folder',
|
|
|
+ children: [
|
|
|
+ { name: 'hello' },
|
|
|
+ { name: 'wat' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// define the item component
|
|
|
+Vue.component('item', {
|
|
|
+ template: '#item-template',
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ open: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isFolder: function () {
|
|
|
+ return this.model.children &&
|
|
|
+ this.model.children.length
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ sortByChildren: function (list) {
|
|
|
+ return list.slice().sort(function (a, b) {
|
|
|
+ var alen = a.children ? 1 : 0
|
|
|
+ var blen = b.children ? 1 : 0
|
|
|
+ return alen > blen ? 1 : -1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggle: function () {
|
|
|
+ if (this.isFolder) {
|
|
|
+ this.open = !this.open
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeType: function () {
|
|
|
+ if (!this.isFolder) {
|
|
|
+ this.model.$add('children', [])
|
|
|
+ this.addChild()
|
|
|
+ this.open = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addChild: function () {
|
|
|
+ this.model.children.push({
|
|
|
+ name: 'new stuff'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// boot up the demo
|
|
|
+var demo = new Vue({
|
|
|
+ el: '#demo',
|
|
|
+ data: {
|
|
|
+ treeData: data
|
|
|
+ }
|
|
|
+})
|
Evan You