refactor(tree): file names

demo/readme.js

@@ -384,19 +384,19 @@ Vue.use(naiveUi)
 <td>Menu</td>
 <td style="text-align:center;">✋</td>
 <td style="text-align:center;"></td>
-<td>Not Planne</td>
+<td>Not Planned</td>
 </tr>
 <tr>
 <td>Typography</td>
 <td style="text-align:center;">✋</td>
 <td style="text-align:center;"></td>
-<td>Not Planne</td>
+<td>Not Planned</td>
 </tr>
 <tr>
 <td>Mentions</td>
 <td style="text-align:center;">✋</td>
 <td style="text-align:center;"></td>
-<td>Not Planne</td>
+<td>Not Planned</td>
 </tr>
 <tr>
 <td>Calendar</td>
@@ -424,19 +424,19 @@ Vue.use(naiveUi)
 <li>Refactor CSS use mixins(which means I should learn SCSS hard…)</li>
 </ol>
 <h2 id="roadmap">RoadMap</h2>
-<p>v0.3 cascader
-v0.4 refactor popover
-v0.5 finish all planned components
-v0.6 add keyboard event on planned components
-v0.7 refactor form component
-v0.8 refactor table component
-v0.9 fulfill props for all components
-v0.10 split icons for components
-v0.11 refactor css
-v0.12 import on demand
-v0.13 i18n
-v0.14 unit test
-v0.15 light theme
-v0.16 refactor using proper html tags
-v0.17 document formation
-v0.18 refactor document page</p></div>`
+<p>v0.3 cascader</p>
+<p>v0.4 refactor popover</p>
+<p>v0.5 finish all planned components</p>
+<p>v0.6 add keyboard event on planned components</p>
+<p>v0.7 refactor form component</p>
+<p>v0.8 refactor table component</p>
+<p>v0.9 fulfill props for all components</p>
+<p>v0.10 split icons for components</p>
+<p>v0.11 refactor css</p>
+<p>v0.12 import on demand</p>
+<p>v0.13 i18n</p>
+<p>v0.14 unit test</p>
+<p>v0.15 light theme</p>
+<p>v0.16 refactor using proper html tags</p>
+<p>v0.17 document formation</p>
+<p>v0.18 refactor document page</p></div>`

packages/common/Tree/src/ChildNodesExpandTransition.js

@@ -0,0 +1,38 @@
+export default {
+  methods: {
+    handleBeforeLeave () {
+      this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
+      this.$el.style.height = this.$el.offsetHeight + 'px'
+      this.$el.getBoundingClientRect()
+    },
+    handleLeave () {
+      this.$el.style.maxHeight = 0
+      this.$el.getBoundingClientRect()
+    },
+    handleEnter () {
+      this.$nextTick().then(() => {
+        this.$el.style.height = this.$el.offsetHeight + 'px'
+        this.$el.style.maxHeight = 0
+        this.$el.getBoundingClientRect()
+        this.$el.style.maxHeight = this.$el.style.height
+      })
+    },
+    handleAfterEnter () {
+      this.$el.style.height = null
+      this.$el.style.maxHeight = null
+    }
+  },
+  render (h) {
+    return h('transition', {
+      props: {
+        name: 'n-height-seamlessly-expand'
+      },
+      on: {
+        beforeLeave: this.handleBeforeLeave,
+        leave: this.handleLeave,
+        enter: this.handleEnter,
+        afterEnter: this.handleAfterEnter
+      }
+    }, this.$slots.default)
+  }
+}

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>

packages/common/Tree/src/TreeNode.js

@@ -1,6 +1,6 @@
-import NTreeNodeSwitcher from './switcher.vue'
-import NTreeNodeCheckbox from './checkbox.vue'
-import NTreeNodeContent from './content.vue'
+import NTreeNodeSwitcher from './TreeNodeSwitcher.vue'
+import NTreeNodeCheckbox from './TreeNodeCheckbox.vue'
+import NTreeNodeContent from './TreeNodeContent.vue'
 
 export default {
   name: 'NTreeNode',

packages/common/Tree/src/TreeNodeSwitcher.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import NTreeSwitcherIcon from './switcherIcon'
+import NTreeSwitcherIcon from './SwitcherIcon'
 
 export default {
   name: 'NTreeSwitcher',

packages/common/Tree/src/main.js

@@ -6,48 +6,8 @@ import {
   menuOptions
 } from '../../../utils/data/menuModel'
 
-import NTreeNode from './node'
-
-const NTreeNodeExpandWrapper = {
-  methods: {
-    handleBeforeLeave () {
-      this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
-      this.$el.style.height = this.$el.offsetHeight + 'px'
-      this.$el.getBoundingClientRect()
-    },
-    handleLeave () {
-      this.$el.style.maxHeight = 0
-      this.$el.getBoundingClientRect()
-    },
-    handleEnter () {
-      this.$nextTick().then(() => {
-        this.$el.style.height = this.$el.offsetHeight + 'px'
-        this.$el.style.maxHeight = 0
-        this.$el.getBoundingClientRect()
-        this.$el.style.maxHeight = this.$el.style.height
-      })
-    },
-    handleAfterEnter () {
-      this.$el.style.height = null
-      this.$el.style.maxHeight = null
-    }
-  },
-  render (h) {
-    return h('transition', {
-      props: {
-        name: 'n-height-seamlessly-expand'
-      },
-      on: {
-        beforeLeave: this.handleBeforeLeave,
-        leave: this.handleLeave,
-        enter: this.handleEnter,
-        afterEnter: this.handleAfterEnter
-      }
-    }, this.$slots.default)
-  }
-}
-
-// render -> genSingleNode -> internalExpandedKeys
+import NTreeNode from './TreeNode'
+import NTreeChildNodesExpandTransition from './ChildNodesExpandTransition'
 
 function genSingleNode (node, h, self) {
   const listeners = {
@@ -61,7 +21,7 @@ function genSingleNode (node, h, self) {
   const expanded = self.internalExpandedKeys.includes(node.key)
   const props = {
     data: node,
-    expanded, // self.internalExpandedKeys.includes(node.key),
+    expanded,
     selected: self.internalSelectedKeys.includes(node.key),
     draggable: self.draggable,
     drop: self.drop,
@@ -78,7 +38,7 @@ function genSingleNode (node, h, self) {
       props,
       on: listeners,
       key: node.key
-    }, [h(NTreeNodeExpandWrapper, {},
+    }, [h(NTreeChildNodesExpandTransition, {},
       [ expanded
         ? h('ul', {
           staticClass: 'n-tree-children-wrapper'
@@ -89,8 +49,6 @@ function genSingleNode (node, h, self) {
 }
 
 function convertRootedOptionsToVNodeTree (root, h, self) {
-  // console.log(self.internalExpandedKeys)
-  // console.log(self.internalSelectedKeys)
   return root.children.map(child => genSingleNode(child, h, self))
 }