Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	README.md
#	dist/halower-tree.min.css
#	dist/v2-tree.js
#	dist/v2-tree.js.map
#	src/components/tree.vue

Author: Pistacchione

.gitignore

@@ -2,9 +2,12 @@
 node_modules/
 npm-debug.log
 yarn-error.log
+package-lock.json
+demo/package.lock.json
 
 # Editor directories and files
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj

README.md

@@ -10,7 +10,7 @@
 ### Node Property
 | Parameters | Description | Type | Optional values | Default value |
 |---------- |-------- |---------- |---------- |---------- |
-|id | node index | String | Y | title field |
+|id | when this property is empty, the title property will be used as the key | String | Y | -|
 |title | node name | String | N | -|
 |children | child nodes | Array[object] | Y | -|
 |expanded | node Expansion | Boolean | Y | false |
@@ -19,7 +19,7 @@
 |selected | whether the node is selected | Boolean | Y | false |
 |checked | whether the node check box is selected | Boolean | Y | false |
 |nocheck | specifies that a node does not render check box when multiple checkboxes are open | Boolean | Y | false |
-|loading | open Load Effect | Boolean | Y | false |
+|loading | open load effect | Boolean | Y | false |
 |chkDisabled | disable the function of a check box for a node | Boolean | Y | false |
 
 ### Tree Property
@@ -39,7 +39,7 @@
 | getSelectedNodes | returns an array of currently selected nodes | - |
 | getCheckedNodes | returns the array of nodes selected by the current check box | - |
 | getNodes |the options objects such as {selected:true}, if empty, use {} | options|
-| searchNodes | filter:function/string (If it is a function, it will eventually return a Boolean type) |node|
+| searchNodes | filter:function/string (if it is a function, it will eventually return a Boolean type) |node|
 
 ### events
 | Event name | Description | Parameters |

README_CN.md

@@ -12,6 +12,7 @@
 ###  Node 属性
 | 参数      | 说明    | 类型      | 可选值 | 默认值  |
 |---------- |-------- |---------- |---------- |---------- |
+|id     | 当这个属性为空，title属性将作为key | String | Y | — |
 |title     | 节点名称 | String | N | — |
 |expanded |  节点是否展开 | Boolean | Y | false |
 |checked |  节点复选框是否选中 | Boolean | Y | false |

dist/halower-tree.min.css

@@ -1,7 +1,7 @@
 {
   "name": "vue-tree-halower",
   "description": "This tree component is based on the Vue.js 2.0",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "author": "halower ([email protected])",
   "license": "MIT",
   "private": false,

dist/v2-tree.js

@@ -0,0 +1,91 @@
+'use strict'
+
+exports.__esModule = true
+
+var _dom = require('./dom')
+
+function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } }
+
+var Transition = (function () {
+  function Transition () {
+    _classCallCheck(this, Transition)
+  }
+
+  Transition.prototype.beforeEnter = function beforeEnter (el) {
+    (0, _dom.addClass)(el, 'collapse-transition')
+    if (!el.dataset) el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+
+    el.style.height = '0'
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+  }
+
+  Transition.prototype.enter = function enter (el) {
+    el.dataset.oldOverflow = el.style.overflow
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px'
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    } else {
+      el.style.height = ''
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    }
+
+    el.style.overflow = 'hidden'
+  }
+
+  Transition.prototype.afterEnter = function afterEnter (el) {
+    // for safari: remove class then reset height is necessary
+    (0, _dom.removeClass)(el, 'collapse-transition')
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+  }
+
+  Transition.prototype.beforeLeave = function beforeLeave (el) {
+    if (!el.dataset) el.dataset = {}
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
+
+    el.style.height = el.scrollHeight + 'px'
+    el.style.overflow = 'hidden'
+  }
+
+  Transition.prototype.leave = function leave (el) {
+    if (el.scrollHeight !== 0) {
+      // for safari: add class after set height, or it will jump to zero height suddenly, weired
+      (0, _dom.addClass)(el, 'collapse-transition')
+      el.style.height = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
+    }
+  }
+
+  Transition.prototype.afterLeave = function afterLeave (el) {
+    (0, _dom.removeClass)(el, 'collapse-transition')
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+    el.style.paddingTop = el.dataset.oldPaddingTop
+    el.style.paddingBottom = el.dataset.oldPaddingBottom
+  }
+
+  return Transition
+}())
+
+exports.default = {
+  name: 'ElCollapseTransition',
+  functional: true,
+  render: function render (h, _ref) {
+    var children = _ref.children
+
+    var data = {
+      on: new Transition()
+    }
+
+    return h('transition', data, children)
+  }
+}

dist/v2-tree.js.map

@@ -0,0 +1,58 @@
+
+const trim = function (string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
+}
+
+export function hasClass (el, cls) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+};
+
+export function addClass (el, cls) {
+  if (!el) return
+  let curClass = el.className
+  let classes = (cls || '').split(' ')
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    let clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.add(clsName)
+    } else {
+      if (!hasClass(el, clsName)) {
+        curClass += ' ' + clsName
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass
+  }
+};
+
+export function removeClass (el, cls) {
+  if (!el || !cls) return
+  let classes = cls.split(' ')
+  let curClass = ' ' + el.className + ' '
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    let clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.remove(clsName)
+    } else {
+      if (hasClass(el, clsName)) {
+        curClass = curClass.replace(' ' + clsName + ' ', ' ')
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass)
+  }
+};

package.json

@@ -8,6 +8,6 @@ export default {
   render (h, ctx) {
     let titleClass = ctx.props.node.selected ? 'node-title node-selected' : 'node-title'
     if (ctx.props.node.searched) titleClass += ' node-searched'
-    return ctx.props.tpl ? ctx.props.tpl(ctx.props.node, ctx) : <span title={ctx.props.node.title} domPropsInnerHTML={ctx.props.node.title} class={titleClass} onClick={() => ctx.parent.nodeSelected(ctx.props.node)}></span>
+    return ctx.props.tpl ? ctx.props.tpl(ctx.props.node, ctx) : <span domPropsInnerHTML={ctx.props.node.title} class={titleClass} onClick={() => ctx.parent.nodeSelected(ctx.props.node)}></span>
   }
 }

src/components/collapse-transition.js

@@ -11,16 +11,17 @@
               <Render :node="item" :tpl ='tpl'/>
               {{item.level}}
           </div>
-        <transition name="fade">
+        <collapse-transition>
           <tree v-if="!isLeaf(item)" @node-expanded.once='nodeExpanded' @node-click='nodeClick' @drag-node-end='dragNodeEnd' :dragAfterExpanded="dragAfterExpanded" :draggable="draggable" v-show="item.expanded"  :tpl ="tpl" :data="item.children" :halfcheck='halfcheck' :scoped='scoped' :parent ='item' :multiple="multiple"></tree>
-        </transition>
+        </collapse-transition>
       </li>
   </ul>
 </template>
 <script>
 import mixins from './mixins'
 import Render from './render'
 import Loading from './loading'
+import CollapseTransition from './collapse-transition'
 export default {
   name: 'Tree',
   mixins: [mixins],
@@ -55,7 +56,7 @@ export default {
     },
     tpl: Function
   },
-  components: { Render, Loading },
+  components: {Render, Loading, CollapseTransition},
   watch: {
     data () {
       this.initHandle()
@@ -201,20 +202,18 @@ export default {
      * @param newnode  new node
     */
     addNode (parent, newNode) {
-      this.$set(parent, 'expanded', true)
       let addnode = null
+      this.$set(parent, 'expanded', true)
       if (typeof newNode === 'undefined') {
         throw new ReferenceError('newNode is required but undefined')
       }
       if (typeof newNode === 'string') {
-        addnode = {
-          id: (Math.random().toString(36)+'00000000000000000').slice(2, 7), // Generate random id of 5 characters
-          title: newNode
-        }
-      } else {
-        if (newNode && !newNode.hasOwnProperty('title')) {
-          throw new ReferenceError('the property (title) is missed')
-        }
+        addnode = { title: newNode }
+      }
+      if (typeof newNode === 'object' && !newNode.hasOwnProperty('title')) {
+        throw new ReferenceError('the title property is missed')
+      }
+      if (typeof newNode === 'object' && newNode.hasOwnProperty('title')) {
         addnode = newNode
       }
       if (this.isLeaf(parent)) {
@@ -348,6 +347,10 @@ export default {
 }
 </script>
 <style scoped>
+.collapse-transition {
+    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+}
+
 .halo-tree li span:hover {
   background-color: #dddddde3
 }
@@ -545,15 +548,10 @@ export default {
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 }
 .halo-tree .node-title {
-     display: inline-block;
+    padding: 3px 3px;
     border-radius: 3px;
     cursor: pointer;
     margin: 0 2px;
-    max-width: calc(100% - 30px);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow:hidden;
-    vertical-align: bottom;
 }
 .halo-tree .node-selected {
     border: 1px solid #DDDDDD;