first

packages/timeline/index.js

@@ -0,0 +1,8 @@
+import Timeline from './src/main';
+
+/* istanbul ignore next */
+Timeline.install = function(Vue) {
+  Vue.component(Timeline.name, Timeline);
+};
+
+export default Timeline;

packages/timeline/src/item.vue

@@ -0,0 +1,73 @@
+<template>
+  <li class="el-timeline-item">
+    <div class="el-timeline-item__tail"></div>
+
+    <div v-if="!$slots.dot"
+      class="el-timeline-item__node"
+      :class="[
+        `el-timeline-item__node--${size || ''}`,
+        `el-timeline-item__node--${type || ''}`
+      ]"
+      :style="{
+        backgroundColor: color
+      }"
+    >
+      <i v-if="icon"
+        class="el-timeline-item__icon"
+        :class="icon"
+      ></i>
+    </div>
+    <div v-if="$slots.dot" class="el-timeline-item__dot">
+      <slot name="dot"></slot>
+    </div>
+
+    <div class="el-timeline-item__wrapper">
+      <div v-if="!hideTimestamp && placement === 'top'"
+        class="el-timeline-item__timestamp is-top">
+        {{timestamp}}
+      </div>
+
+      <div class="el-timeline-item__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="!hideTimestamp && placement === 'bottom'"
+        class="el-timeline-item__timestamp is-bottom">
+        {{timestamp}}
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+  export default {
+    name: 'ElTimelineItem',
+
+    inject: ['timeline'],
+
+    props: {
+      timestamp: String,
+
+      hideTimestamp: {
+        type: Boolean,
+        default: false
+      },
+
+      placement: {
+        type: String,
+        default: 'bottom'
+      },
+
+      type: String,
+
+      color: String,
+
+      size: {
+        type: String,
+        default: 'normal'
+      },
+
+      icon: String
+    }
+  };
+</script>

packages/timeline/src/main.vue

@@ -0,0 +1,33 @@
+<script>
+  export default {
+    name: 'ElTimeline',
+
+    props: {
+      reverse: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    provide() {
+      return {
+        timeline: this
+      };
+    },
+
+    render() {
+      const reverse = this.reverse;
+      const classes = {
+        'el-timeline': true,
+        'is-reverse': reverse
+      };
+      let slots = this.$slots.default || [];
+      if (reverse) {
+        slots = slots.reverse();
+      }
+      return (<ul class={ classes }>
+        { slots }
+      </ul>);
+    }
+  };
+</script>