Merge branch 'su37josephxia-timeline'

build/bin/build-entry.js

@@ -114,6 +114,8 @@ ComponentNames.forEach((name) => {
       'notification',
       'page-header',
       'message',
+      'timeline',
+      'timeline-item',
       'input-number',
       'step',
       'steps',

packages/color-picker/src/components/picker-dropdown.vue

@@ -6,7 +6,7 @@
           ref="hue"
           :color="color"
           vertical
-          style="float: right;"
+          style="float: right"
         ></hue-slider>
         <sv-panel ref="sl" :color="color"></sv-panel>
       </div>

packages/timeline-item/__tests__/TimelineItem.spec.js

@@ -0,0 +1,19 @@
+import TimelineItem from '../TimelineItem.vue'
+import { mount } from '@vue/test-utils'
+describe('TimelineItem.vue', () => {
+  it('should timeline works', () => {
+    const wrapper = mount(TimelineItem, {
+      props: {
+        timestamp: '2018-04-15'
+      },
+      slots: {
+        default: '吃饭饭'
+      }
+    })
+
+    expect(wrapper.find('.el-timeline-item__timestamp').text()).toBe(
+      '2018-04-15'
+    )
+    expect(wrapper.find('.el-timeline-item__content').text()).toBe('吃饭饭')
+  })
+})

packages/timeline-item/index.js

@@ -1,4 +1,4 @@
-import ElTimelineItem from '../timeline/src/item'
+import ElTimelineItem from './TimelineItem'
 
 /* istanbul ignore next */
 ElTimelineItem.install = function (app) {

packages/timeline/src/main.vue → packages/timeline/Timeline.vue

@@ -1,4 +1,5 @@
 <script>
+import { Fragment } from 'vue'
 export default {
   name: 'ElTimeline',
 
@@ -21,10 +22,20 @@ export default {
       'el-timeline': true,
       'is-reverse': reverse
     }
-    let slots = this.$slots.default || []
-    if (reverse) {
-      slots = slots.reverse()
+    let slots
+    if (this.$slots.default) {
+      slots = this.$slots.default()
+      let children
+      if (slots.length > 0 && slots[0].type === Fragment) {
+        children = slots[0].children
+      } else {
+        children = slots
+      }
+      if (reverse) {
+        children.reverse()
+      }
     }
+
     return <ul class={classes}>{slots}</ul>
   }
 }

packages/timeline/__tests__/Timeline.spec.js

@@ -0,0 +1,38 @@
+import Timeline from '../Timeline.vue'
+import { mount } from '@vue/test-utils'
+describe('Timeline.vue', () => {
+  it('should slot works', () => {
+    const wrapper = mount(Timeline, {
+      slots: {
+        default: [`A`, `B`]
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('AB')
+  })
+
+  it('should props reverse works', () => {
+    const wrapper = mount(Timeline, {
+      props: {
+        reverse: true
+      },
+      slots: {
+        default: [`A`, `B`]
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('BA')
+  })
+
+  it('should slot null', () => {
+    const wrapper = mount(Timeline, {})
+    expect(wrapper.find('.el-timeline').text()).toBe('')
+  })
+
+  it('should slot empty array', () => {
+    const wrapper = mount(Timeline, {
+      slots: {
+        default: []
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('')
+  })
+})

packages/timeline/index.js

@@ -1,4 +1,4 @@
-import Timeline from './src/main'
+import Timeline from './Timeline'
 
 /* istanbul ignore next */
 Timeline.install = function (app) {