diff --git a/examples/routers/tree.vue b/examples/routers/tree.vue
index 1cdd23a..f024a31 100644
--- a/examples/routers/tree.vue
+++ b/examples/routers/tree.vue
@@ -1,40 +1,68 @@
<template>
- <div>
- <Tree :data="baseData" show-checkbox></Tree>
- <div @click="c">change</div>
- </div>
+ <Tree :data="baseData" @on-select-change="handleSelectChange" show-checkbox></Tree>
</template>
<script>
export default {
data () {
return {
- baseData: [{
- expand: true,
- title: 'parent 1',
- children: [{
- title: 'parent 1-0',
+ baseData: [
+ {
expand: true,
- disabled: true,
+ title: 'parent 1',
children: [{
- title: 'leaf',
- disableCheckbox: true
+ title: 'parent 1-0',
+ 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,
- checked: true,
- children: [{
- title: '<span style="color: red">leaf</span>'
- }]
- }]
- }]
+ },
+// {
+// expand: true,
+// title: 'parent 1',
+// children: [{
+// 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 () {
- this.baseData[0].expand = false;
+ handleSelectChange (data) {
+ console.log(data);
}
}
}
diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
index 8fe870a..c3535b9 100644
--- a/src/components/tree/tree.vue
+++ b/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) {
diff --git a/src/components/tree2/index.js b/src/components/tree2/index.js
new file mode 100644
index 0000000..d1a1ccb
--- /dev/null
+++ b/src/components/tree2/index.js
@@ -0,0 +1,2 @@
+import Tree from './tree.vue';
+export default Tree;
\ No newline at end of file
diff --git a/src/components/tree2/node.vue b/src/components/tree2/node.vue
new file mode 100644
index 0000000..f79b5a9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/tree2/tree.vue b/src/components/tree2/tree.vue
new file mode 100644
index 0000000..e59f22c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fd9bdad..495ec9a 100644
--- a/src/index.js
+++ b/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';
diff --git a/src/styles/components/tree.less b/src/styles/components/tree.less
index 7e76723..ee392aa 100644
--- a/src/styles/components/tree.less
+++ b/src/styles/components/tree.less
@@ -1,139 +1,59 @@
@tree-prefix-cls: ~"@{css-prefix}tree";
.@{tree-prefix-cls} {
- margin: 0;
- padding: 5px;
- font-size: @font-size-small;
- li {
- padding: 0;
- margin: 8px 0;
+ ul{
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;
+ margin: 0;
+ padding: 5px;
+ font-size: @font-size-small;
+ li{
+ list-style: none;
+ margin: 8px 0;
+ padding: 0;
+ white-space: nowrap;
+ outline: none;
}
- &.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 {
+ }
+ li{
+ 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%);
- }
+ }
+ &-title {
+ display: inline-block;
+ margin: 0;
+ padding: 0 4px;
+ border-radius: @btn-border-radius-small;
+ cursor: pointer;
+ vertical-align: top;
+ color: @text-color;
+ transition: all @transition-time @ease-in-out;
+ &:hover {
+ background-color: tint(@primary-color, 90%);
}
- .@{checkbox-prefix-cls}-wrapper{
- margin-right: 4px;
+ &-selected, &-selected:hover{
+ background-color: tint(@primary-color, 80%);
}
- 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 {
-
- }
+ }
+ &-arrow{
+ cursor: pointer;
+ i{
+ transition: all @transition-time @ease-in-out;
+ }
+ &-open{
+ i {
+ transform: rotate(90deg);
}
}
- }
- &-child-tree {
- display: none;
- &-open {
- display: block;
+ &-hidden{
+ cursor: auto;
+ i{
+ display: none;
+ }
}
- }
- &-treenode-disabled {
- >span,
- >a,
- >a span {
- color: @input-disabled-bg;
- cursor: not-allowed;
+ &-disabled{
+ cursor: @cursor-disabled;
}
}
- &-icon__open {
- margin-right: 2px;
- vertical-align: top;
- }
- &-icon__close {
- margin-right: 2px;
- vertical-align: top;
- }
}
\ No newline at end of file
diff --git a/src/styles/components/tree2.less b/src/styles/components/tree2.less
new file mode 100644
index 0000000..7e76723
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
--
libgit2 0.21.4