rebuild Tree

examples/routers/tree.vue

@@ -1,40 +1,68 @@
 <template>
-    <div>
+    <Tree :data="baseData" @on-select-change="handleSelectChange" show-checkbox></Tree>
-        <Tree :data="baseData" show-checkbox></Tree>
-        <div @click="c">change</div>
-    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                baseData: [{
+                baseData: [
-                    expand: true,
+                    {
-                    title: 'parent 1',
-                    children: [{
-                        title: 'parent 1-0',
                         expand: true,
-                        disabled: true,
+                        title: 'parent 1',
                         children: [{
-                            title: 'leaf',
+                            title: 'parent 1-0',
-                            disableCheckbox: true
+                            expand: true,
+//                            disabled: true,
+//                            checked: true,
+                            children: [
+                                {
+                                    title: 'leaf',
+                                    checked: true,
+                                    selected: true
+                                },
+                                {
+                                    title: 'leaf',
+                                    checked: false
+                                }
+                            ]
                         }, {
-                            title: 'leaf',
+                            title: 'parent 1-1',
+                            expand: true,
+                            checked: true,
+                            children: [
+                                {
+                                    title: '<span style="color: red">leaf</span>',
+                                    checked: false
+                                }
+                            ]
                         }]
-                    }, {
+                    },
-                        title: 'parent 1-1',
+//                    {
-                        expand: true,
+//                        expand: true,
-                        checked: true,
+//                        title: 'parent 1',
-                        children: [{
+//                        children: [{
-                            title: '<span style="color: red">leaf</span>'
+//                            title: 'parent 1-0',
-                        }]
+//                            expand: true,
-                    }]
+//                            children: [{
-                }]
+//                                title: 'leaf'
+//                            }, {
+//                                title: 'leaf',
+//                            }]
+//                        }, {
+//                            title: 'parent 1-1',
+//                            expand: true,
+//                            checked: true,
+//                            children: [{
+//                                title: '<span style="color: red">leaf</span>',
+//                            }]
+//                        }]
+//                    }
+                ]
             }
         },
         methods: {
-            c () {
+            handleSelectChange (data) {
-                this.baseData[0].expand = false;
+                console.log(data);
             }
         }
     }

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', {
+                    const parentTree = findComponentUpward(this, 'Tree');
-                        ori: this,
+                    if (parentTree) {
-                        selected: selected
+                        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>

src/index.js

@@ -40,7 +40,7 @@ import Timeline from './components/timeline';
 import TimePicker from './components/time-picker';
 import Tooltip from './components/tooltip';
 import Transfer from './components/transfer';
-import Tree from './components/tree';
+import Tree from './components/tree2';
 import Upload from './components/upload';
 import { Row, Col } from './components/grid';
 import { Select, Option, OptionGroup } from './components/select';

src/styles/components/tree.less

@@ -1,139 +1,59 @@
 @tree-prefix-cls: ~"@{css-prefix}tree";
 
 .@{tree-prefix-cls} {
-    margin: 0;
+    ul{
-    padding: 5px;
-    font-size: @font-size-small;
-    li {
-        padding: 0;
-        margin: 8px 0;
         list-style: none;
-        white-space: nowrap;
+        margin: 0;
-        outline: 0;
+        padding: 5px;
-        a[draggable],
+        font-size: @font-size-small;
-        a[draggable="true"] {
+        li{
-            user-select: none;
+            list-style: none;
-            /* Required to make elements draggable in old WebKit */
+            margin: 8px 0;
-            -khtml-user-drag: element;
+            padding: 0;
-            -webkit-user-drag: element;
+            white-space: nowrap;
+            outline: none;
         }
-        &.drag-over {
+    }
-            > a[draggable] {
+    li{
-                background-color: @primary-color;
+        ul{
-                color: white;
-                opacity: 0.8;
-            }
-        }
-        &.drag-over-gap-top {
-            > a[draggable] {
-                border-top: 2px @primary-color solid;
-            }
-        }
-        &.drag-over-gap-bottom {
-            > a[draggable] {
-                border-bottom: 2px @primary-color solid;
-            }
-        }
-        &.filter-node {
-            > a {
-                color: @error-color!important;
-                font-weight: bold!important;
-            }
-        }
-        ul {
             margin: 0;
             padding: 0 0 0 18px;
         }
-        a {
+    }
-            display: inline-block;
+    &-title {
-            margin: 0;
+        display: inline-block;
-            padding: 0 4px;
+        margin: 0;
-            border-radius: @btn-border-radius-small;
+        padding: 0 4px;
-            cursor: pointer;
+        border-radius: @btn-border-radius-small;
-            text-decoration: none;
+        cursor: pointer;
-            vertical-align: top;
+        vertical-align: top;
-            color: @text-color;
+        color: @text-color;
+        transition: all @transition-time @ease-in-out;
+        &:hover {
+            background-color: tint(@primary-color, 90%);
+        }
+        &-selected, &-selected:hover{
+            background-color: tint(@primary-color, 80%);
+        }
+    }
+    &-arrow{
+        cursor: pointer;
+        i{
             transition: all @transition-time @ease-in-out;
-            &:hover {
+        }
-                background-color: tint(@primary-color, 90%);
+        &-open{
-            }
+            i {
-            &.@{tree-prefix-cls}-node-selected {
+                transform: rotate(90deg);
-                background-color: tint(@primary-color, 80%);
             }
         }
-        .@{checkbox-prefix-cls}-wrapper{
+        &-hidden{
-            margin-right: 4px;
+            cursor: auto;
-        }
+            i{
-        span {
+                display: none;
-            &.@{tree-prefix-cls}-switcher,
-            &.@{tree-prefix-cls}-iconEle {
-                display: inline-block;
-                text-align: center;
-                width: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin: 0;
-                vertical-align: middle;
-                border: 0 none;
-                cursor: pointer;
-                outline: none;
-            }
-            //&.@{tree-prefix-cls}-icon_loading {
-            //    &:after {
-            //        display: inline-block;
-            //        //.iconfont-font("\e6a1");
-            //        animation: loadingCircle 1s infinite linear;
-            //        color: @primary-color;
-            //    }
-            //}
-            &.@{tree-prefix-cls}-switcher {
-                i{
-                    transition: all @transition-time @ease-in-out;
-                }
-                &.@{tree-prefix-cls}-switcher-noop {
-                    //display: none;
-                    cursor: auto;
-                    i{
-                        display: none;
-                    }
-                }
-                &.@{tree-prefix-cls}-roots_open,
-                &.@{tree-prefix-cls}-center_open,
-                &.@{tree-prefix-cls}-bottom_open,
-                &.@{tree-prefix-cls}-noline_open {
-                    i {
-                        transform: rotate(90deg);
-                    }
-                }
-                &.@{tree-prefix-cls}-roots_close,
-                &.@{tree-prefix-cls}-center_close,
-                &.@{tree-prefix-cls}-bottom_close,
-                &.@{tree-prefix-cls}-noline_close {
-
-                }
             }
         }
-    }
+        &-disabled{
-    &-child-tree {
+            cursor: @cursor-disabled;
-        display: none;
-        &-open {
-            display: block;
         }
     }
-    &-treenode-disabled {
-        >span,
-        >a,
-        >a span {
-            color: @input-disabled-bg;
-            cursor: not-allowed;
-        }
-    }
-    &-icon__open {
-        margin-right: 2px;
-        vertical-align: top;
-    }
-    &-icon__close {
-        margin-right: 2px;
-        vertical-align: top;
-    }
 }

src/styles/components/tree2.less

@@ -0,0 +1,139 @@
+@tree-prefix-cls: ~"@{css-prefix}tree";
+
+.@{tree-prefix-cls} {
+    margin: 0;
+    padding: 5px;
+    font-size: @font-size-small;
+    li {
+        padding: 0;
+        margin: 8px 0;
+        list-style: none;
+        white-space: nowrap;
+        outline: 0;
+        a[draggable],
+        a[draggable="true"] {
+            user-select: none;
+            /* Required to make elements draggable in old WebKit */
+            -khtml-user-drag: element;
+            -webkit-user-drag: element;
+        }
+        &.drag-over {
+            > a[draggable] {
+                background-color: @primary-color;
+                color: white;
+                opacity: 0.8;
+            }
+        }
+        &.drag-over-gap-top {
+            > a[draggable] {
+                border-top: 2px @primary-color solid;
+            }
+        }
+        &.drag-over-gap-bottom {
+            > a[draggable] {
+                border-bottom: 2px @primary-color solid;
+            }
+        }
+        &.filter-node {
+            > a {
+                color: @error-color!important;
+                font-weight: bold!important;
+            }
+        }
+        ul {
+            margin: 0;
+            padding: 0 0 0 18px;
+        }
+        a {
+            display: inline-block;
+            margin: 0;
+            padding: 0 4px;
+            border-radius: @btn-border-radius-small;
+            cursor: pointer;
+            text-decoration: none;
+            vertical-align: top;
+            color: @text-color;
+            transition: all @transition-time @ease-in-out;
+            &:hover {
+                background-color: tint(@primary-color, 90%);
+            }
+            &.@{tree-prefix-cls}-node-selected {
+                background-color: tint(@primary-color, 80%);
+            }
+        }
+        .@{checkbox-prefix-cls}-wrapper{
+            margin-right: 4px;
+        }
+        span {
+            &.@{tree-prefix-cls}-switcher,
+            &.@{tree-prefix-cls}-iconEle {
+                display: inline-block;
+                text-align: center;
+                width: 16px;
+                height: 16px;
+                line-height: 16px;
+                margin: 0;
+                vertical-align: middle;
+                border: 0 none;
+                cursor: pointer;
+                outline: none;
+            }
+            //&.@{tree-prefix-cls}-icon_loading {
+            //    &:after {
+            //        display: inline-block;
+            //        //.iconfont-font("\e6a1");
+            //        animation: loadingCircle 1s infinite linear;
+            //        color: @primary-color;
+            //    }
+            //}
+            &.@{tree-prefix-cls}-switcher {
+                i{
+                    transition: all @transition-time @ease-in-out;
+                }
+                &.@{tree-prefix-cls}-switcher-noop {
+                    //display: none;
+                    cursor: auto;
+                    i{
+                        display: none;
+                    }
+                }
+                &.@{tree-prefix-cls}-roots_open,
+                &.@{tree-prefix-cls}-center_open,
+                &.@{tree-prefix-cls}-bottom_open,
+                &.@{tree-prefix-cls}-noline_open {
+                    i {
+                        transform: rotate(90deg);
+                    }
+                }
+                &.@{tree-prefix-cls}-roots_close,
+                &.@{tree-prefix-cls}-center_close,
+                &.@{tree-prefix-cls}-bottom_close,
+                &.@{tree-prefix-cls}-noline_close {
+
+                }
+            }
+        }
+    }
+    &-child-tree {
+        display: none;
+        &-open {
+            display: block;
+        }
+    }
+    &-treenode-disabled {
+        >span,
+        >a,
+        >a span {
+            color: @input-disabled-bg;
+            cursor: not-allowed;
+        }
+    }
+    &-icon__open {
+        margin-right: 2px;
+        vertical-align: top;
+    }
+    &-icon__close {
+        margin-right: 2px;
+        vertical-align: top;
+    }
+}