feat(tree): add some feature...

demo/debugComponents/verticalAlignDebug.vue

@@ -26,7 +26,7 @@
         style="height: 60px;display: inline-block; vertical-align: baseline;"
         value="666"
       >
-
+      <n-checkbox />
       <div
         style="height: 60px; background: red; display: inline-block; vertical-align: baseline;"
       >

packages/common/Scrollbar/src/main.vue

@@ -334,7 +334,8 @@ export default {
       }
     },
     handleDragStart (e) {
-      e.preventDefault()
+      // e.preventDefault()
+      // for n-tree component to work...
     }
   }
 }

packages/common/Tree/src/checkbox.vue

@@ -0,0 +1,16 @@
+<template>
+  <span class="n-tree-node-checkbox">
+    <n-checkbox />
+  </span>
+</template>
+
+<script>
+import NCheckbox from '../../Checkbox'
+
+export default {
+  name: 'NTreeNodeCheckbox',
+  components: {
+    NCheckbox
+  }
+}
+</script>

packages/common/Tree/src/content.vue

@@ -0,0 +1,44 @@
+<template>
+  <span
+    class="n-tree-node-content"
+    :class="{
+      'n-tree-node-content--pending': pending,
+      'n-tree-node-content--pending-bottom': pendingPosition === 'bottom',
+      'n-tree-node-content--pending-body': pendingPosition === 'body',
+      'n-tree-node-content--pending-top': pendingPosition === 'top'
+    }"
+    @dragleave="handleContentDragLeave"
+    @dragstart="handleContentDragStart"
+    @dragover="handleDragOverContent"
+    @dragend="handleContentDragEnd"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'NTreeNodeContent',
+  data () {
+    return {
+      pending: false
+    }
+  },
+  methods: {
+    handleContentDragStart (e) {
+      console.log('drag start', e)
+    },
+    handleDragOverContent (e) {
+      const el = this.$el
+      this.pending = true
+      console.log('drag over content', e)
+    },
+    handleContentDragEnd (e) {
+      console.log('drag end', e)
+    },
+    handleContentDragLeave (e) {
+      this.pending = false
+    }
+  }
+}
+</script>

packages/common/Tree/src/main.js

@@ -5,6 +5,8 @@ import {
   menuOptions
 } from '../../../utils/data/menuModel'
 
+import NTreeNode from './node'
+
 const NTreeNodeExpandWrapper = {
   methods: {
     handleBeforeLeave () {
@@ -44,70 +46,35 @@ const NTreeNodeExpandWrapper = {
   }
 }
 
-const NTreeNode = {
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    expand: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    handleClick () {
-      this.$emit('click', this.data)
-    }
-  },
-  render (h) {
-    return h('span', {
-      on: {
-        click: this.handleClick
-      }
-    }, [
-      this.data.isLeaf ? null : this.expand ? 'v ' : '> ',
-      this.data.label
-    ])
-  }
-}
-
 function genSingleNode (node, h, self) {
   if (node.isLeaf) {
-    return h('li', {
-      staticClass: 'n-tree-node'
-    }, [
-      h(NTreeNode, {
-        props: {
-          data: node,
-          expand: self.expandNodesId.includes(node.id)
-        },
-        on: {
-          click: self.handleNodeClick
-        }
-      })
-    ])
+    return h(NTreeNode, {
+      props: {
+        data: node,
+        expand: self.expandNodesId.includes(node.id),
+        draggable: self.draggable
+      },
+      on: {
+        click: self.handleNodeClick
+      }
+    })
   } else if (node.children) {
-    return h('li', {
-      staticClass: 'n-tree-node'
-    }, [
-      h(NTreeNode, {
-        props: {
-          data: node,
-          expand: self.expandNodesId.includes(node.id)
-        },
-        on: {
-          click: self.handleNodeClick
-        }
-      }),
-      h(NTreeNodeExpandWrapper, {},
-        [self.expandNodesId.includes(node.id)
-          ? h('ul', {
-            staticClass: 'n-tree-children-wrapper'
-          }, node.children.map(child => genSingleNode(child, h, self)))
-          : null]
-      )
-    ])
+    return h(NTreeNode, {
+      props: {
+        data: node,
+        expand: self.expandNodesId.includes(node.id),
+        draggable: self.draggable
+      },
+      on: {
+        click: self.handleNodeClick
+      }
+    }, [h(NTreeNodeExpandWrapper, {},
+      [self.expandNodesId.includes(node.id)
+        ? h('ul', {
+          staticClass: 'n-tree-children-wrapper'
+        }, node.children.map(child => genSingleNode(child, h, self)))
+        : null]
+    )])
   }
 }
 
@@ -125,6 +92,14 @@ export default {
     checkable: {
       type: Boolean,
       default: false
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: true
+    },
+    draggable: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -169,7 +144,6 @@ export default {
     },
     handleNodeClick (node) {
       this.toggleExpand(node)
-      // console.log(this.expandNodesId)
     }
   },
   render (h) {

packages/common/Tree/src/node.js

@@ -0,0 +1,54 @@
+import NTreeNodeSwitcher from './switcher.vue'
+import NTreeNodeCheckbox from './checkbox.vue'
+import NTreeNodeContent from './content.vue'
+
+export default {
+  name: 'NTreeNode',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: true
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleSwitcherClick () {
+      this.$emit('click', this.data)
+    }
+  },
+  render (h) {
+    return h('li', {
+      staticClass: 'n-tree-node'
+    }, [
+      h(NTreeNodeSwitcher, {
+        props: {
+          expand: this.expand,
+          hide: this.data.isLeaf
+        },
+        on: {
+          click: this.handleSwitcherClick
+        }
+      }),
+      this.showCheckbox ? h(NTreeNodeCheckbox) : null,
+      h(NTreeNodeContent, {
+        domProps: {
+          draggable: this.draggable
+        }
+      }, [
+        this.data.label
+      ]),
+      this.$slots.default
+    ])
+  }
+}

packages/common/Tree/src/switcher.vue

@@ -0,0 +1,38 @@
+<template>
+  <span
+    class="n-tree-node-switcher"
+    :class="{
+      'n-tree-node-switcher--expand': expand,
+      'n-tree-node-switcher--hide': hide
+    }"
+    @click="handleClick"
+  >
+    <n-tree-switcher-icon />
+  </span>
+</template>
+
+<script>
+import NTreeSwitcherIcon from './switcherIcon'
+
+export default {
+  name: 'NTreeSwitcher',
+  components: {
+    NTreeSwitcherIcon
+  },
+  props: {
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    hide: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>

packages/common/Tree/src/switcherIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NTreeArrow'
+}
+</script>

styles/Tree.scss

@@ -12,6 +12,51 @@
     margin-left: 16px;
   }
   @include b(tree-node) {
-    
+    padding: 4px 0 4px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+  @include b(tree-node-switcher) {
+    cursor: pointer;
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    vertical-align: bottom;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 12px;
+      height: 12px;
+      transition: transform .3s $default-cubic-bezier;
+    }
+    @include m(hide) {
+      visibility: hidden
+    }
+    @include m(expand) {
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  @include b(tree-node-checkbox) {
+    display: inline-flex;
+    height: 24px;
+    width: 16px;
+    vertical-align: bottom;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+  }
+  @include b(tree-node-content) {
+    display: inline-flex;
+    height: 24px;
+    align-items: center;
+    vertical-align: bottom;
+    padding: 0 6px;
+    cursor: pointer;
+    @include m(pending) {
+      background: greenyellow;
+    }
   }
 }