rebuild Tree

src/components/tree/tree.vue

@@ -31,6 +31,7 @@
     import Checkbox from '../checkbox/checkbox.vue';
     import { t } from '../../locale';
     import Emitter from '../../mixins/emitter';
+    import { findComponentUpward, findComponentDownward } from '../../utils/assist';
 
     const prefixCls = 'ivu-tree';
 
@@ -174,10 +175,18 @@
                         }
                     }
 //                    this.$dispatch('nodeSelected', this, selected);
-                    this.dispatch('Tree', 'nodeSelected', {
-                        ori: this,
-                        selected: selected
-                    });
+                    const parentTree = findComponentUpward(this, 'Tree');
+                    if (parentTree) {
+                        this.dispatch('Tree', 'nodeSelected', {
+                            ori: this,
+                            selected: selected
+                        });
+                    } else {
+                        this.$emit('nodeSelected', {
+                            ori: this,
+                            selected: selected
+                        });
+                    }
                 }
             },
             setCheck (disabled, index) {
@@ -270,6 +279,7 @@
                 });
             });
             this.$on('cancelSelected', ori => {
+                console.log(191)
 //                this.$broadcast('cancelSelected', ori);
                 this.broadcast('Tree', 'cancelSelected', ori);
                 if (this !== ori) {

src/components/tree2/index.js

@@ -0,0 +1,2 @@
+import Tree from './tree.vue';
+export default Tree;

src/components/tree2/node.vue

@@ -0,0 +1,132 @@
+<template>
+    <transition name="slide-up">
+        <ul :class="classes" v-show="visible">
+            <li>
+                <span :class="arrowClasses" @click="handleExpand">
+                    <Icon type="arrow-right-b"></Icon>
+                </span>
+                <Checkbox
+                    v-if="showCheckbox"
+                    :value="data.checked"
+                    :indeterminate="indeterminate"
+                    :disabled="data.disabled || data.disableCheckbox"
+                    @click.native.prevent="handleCheck"></Checkbox>
+                <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
+                <Tree-node
+                    v-for="item in data.children"
+                    :key="item"
+                    :data="item"
+                    :visible="data.expand"
+                    :multiple="multiple"
+                    :show-checkbox="showCheckbox">
+                </Tree-node>
+            </li>
+        </ul>
+    </transition>
+</template>
+<script>
+    import Checkbox from '../checkbox/checkbox.vue';
+    import Emitter from '../../mixins/emitter';
+    import { findComponentsDownward } from '../../utils/assist';
+
+    const prefixCls = 'ivu-tree';
+
+    export default {
+        name: 'TreeNode',
+        mixins: [ Emitter ],
+        components: { Checkbox },
+        props: {
+            data: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            showCheckbox: {
+                type: Boolean,
+                default: false
+            },
+            visible: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                indeterminate: false,
+                checked: false
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-children`
+                ]
+            },
+            selectedCls () {
+                return [
+                    {
+                        [`${prefixCls}-node-selected`]: this.data.selected
+                    }
+                ];
+            },
+            arrowClasses () {
+                return [
+                    `${prefixCls}-arrow`,
+                    {
+                        [`${prefixCls}-arrow-disabled`]: this.data.disabled,
+                        [`${prefixCls}-arrow-open`]: this.data.expand,
+                        [`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length)
+                    }
+                ];
+            },
+            titleClasses () {
+                return [
+                    `${prefixCls}-title`,
+                    {
+                        [`${prefixCls}-title-selected`]: this.data.selected
+                    }
+                ];
+            }
+        },
+        methods: {
+            handleExpand () {
+                if (this.data.disabled) return;
+                this.$set(this.data, 'expand', !this.data.expand);
+            },
+            handleSelect () {
+                if (this.data.disabled) return;
+                if (this.data.selected) {
+                    this.data.selected = false;
+                } else if (this.multiple) {
+                    this.$set(this.data, 'selected', !this.data.selected);
+                } else {
+                    this.dispatch('Tree', 'selected', this.data);
+                }
+                this.dispatch('Tree', 'on-selected');
+            },
+            handleCheck () {
+                if (this.disabled) return;
+                this.data.checked = !this.data.checked;
+                this.dispatch('Tree', 'checked');
+            },
+            setIndeterminate () {
+                this.indeterminate = this.data.checked ? false : findComponentsDownward(this, 'TreeNode').some(node => node.data.checked);
+            }
+        },
+        created () {
+            // created node.vue first, mounted tree.vue second
+            if (!this.data.checked) this.$set(this.data, 'checked', false);
+        },
+        mounted () {
+            this.$on('indeterminate', () => {
+                this.setIndeterminate();
+            })
+        }
+    };
+</script>

src/components/tree2/tree.vue

@@ -0,0 +1,113 @@
+<template>
+    <div :class="prefixCls">
+        <Tree-node
+            v-for="item in currentData"
+            :key="item"
+            :data="item"
+            visible
+            :multiple="multiple"
+            :show-checkbox="showCheckbox">
+        </Tree-node>
+    </div>
+</template>
+<script>
+    import TreeNode from './node.vue';
+    import { findComponentsDownward } from '../../utils/assist';
+    import Emitter from '../../mixins/emitter';
+    import { t } from '../../locale';
+
+    const prefixCls = 'ivu-tree';
+
+    export default {
+        name: 'Tree',
+        mixins: [ Emitter ],
+        components: { TreeNode },
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            showCheckbox: {
+                type: Boolean,
+                default: false
+            },
+            emptyText: {
+                type: String,
+                default () {
+                    return t('i.tree.emptyText');
+                }
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                currentData: this.data
+            };
+        },
+        watch: {
+            data (val) {
+                
+            }
+        },
+        methods: {
+            getSelectedNodes () {
+                const nodes = findComponentsDownward(this, 'TreeNode');
+                return nodes.filter(node => node.data.selected).map(node => node.data);
+            },
+            updateData () {
+                // init checked status
+                function reverseChecked(data) {
+                    if (data.children) {
+                        let checkedLength = 0;
+                        data.children.forEach(node => {
+                            if (node.children) node = reverseChecked(node);
+                            if (node.checked) checkedLength++;
+                        });
+//                        data.checked = checkedLength >= data.children.length;
+                        if (checkedLength >= data.children.length) data.checked = true;
+                        return data;
+                    } else {
+                        return data;
+                    }
+                }
+                
+                function forwardChecked(data) {
+                    if (data.children) {
+                        data.children.forEach(node => {
+                            if (data.checked) node.checked = true;
+                            if (node.children) node = forwardChecked(node);
+                        });
+                        return data;
+                    } else {
+                        return data;
+                    }
+                }
+                this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
+                this.broadcast('TreeNode', 'indeterminate');
+            }
+        },
+        mounted () {
+            this.updateData();
+
+            this.$on('selected', ori => {
+                const nodes = findComponentsDownward(this, 'TreeNode');
+                nodes.forEach(node => {
+                    this.$set(node.data, 'selected', false);
+                });
+                this.$set(ori, 'selected', true);
+            });
+            this.$on('on-selected', () => {
+                this.$emit('on-select-change', this.getSelectedNodes());
+            });
+            this.$on('checked', () => {
+                this.updateData();
+            });
+        }
+    };
+</script>