From fdc2bef0c1edbce6555b8c4c12f7ac2c6bbf5b0b Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Sat, 18 Sep 2021 11:31:58 +0800
Subject: [PATCH] feat(components): [el-timeline] add center prop (#3436)

* feat(components): [el-timeline]add center prop

* fix: remove unnecessary selector
---
 docs/en-US/component/timeline.md              | 31 +++++++++++-----
 docs/examples/timeline/center.vue             | 24 ++++++++++++
 .../timeline/__tests__/timeline.spec.ts       | 37 +++++++++++++++++++
 packages/components/timeline/src/item.vue     |  6 ++-
 packages/theme-chalk/src/timeline.scss        | 31 +++++++++++++++-
 5 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 docs/examples/timeline/center.vue

diff --git a/docs/en-US/component/timeline.md b/docs/en-US/component/timeline.md
index 38385b552e..04d655341c 100644
--- a/docs/en-US/component/timeline.md
+++ b/docs/en-US/component/timeline.md
@@ -32,6 +32,16 @@ timeline/custom-timestamp
 
 :::
 
+## Vertically centered
+
+Timeline-Item is centered vertically.
+
+:::demo
+
+timeline/center
+
+:::
+
 ## Timeline Slots
 
 | Name | Description                 |
@@ -40,16 +50,17 @@ timeline/custom-timestamp
 
 ## Timeline-Item Attributes
 
-| Attribute      | Description               | Type    | Accepted Values                             | Default |
-| -------------- | ------------------------- | ------- | ------------------------------------------- | ------- |
-| timestamp      | timestamp content         | string  | —                                           | —       |
-| hide-timestamp | whether to show timestamp | boolean | —                                           | false   |
-| placement      | position of timestamp     | string  | top / bottom                                | bottom  |
-| type           | node type                 | string  | primary / success / warning / danger / info | —       |
-| color          | background color of node  | string  | hsl / hsv / hex / rgb                       | —       |
-| size           | node size                 | string  | normal / large                              | normal  |
-| icon           | icon class name           | string  | —                                           | —       |
-| hollow         | icon is hollow            | boolean | —                                           | false   |
+| Attribute      | Description                 | Type    | Accepted Values                             | Default |
+| -------------- | --------------------------- | ------- | ------------------------------------------- | ------- |
+| timestamp      | timestamp content           | string  | —                                           | —       |
+| hide-timestamp | whether to show timestamp   | boolean | —                                           | false   |
+| center         | Whether vertically centered | boolean | —                                           | false   |
+| placement      | position of timestamp       | string  | top / bottom                                | bottom  |
+| type           | node type                   | string  | primary / success / warning / danger / info | —       |
+| color          | background color of node    | string  | hsl / hsv / hex / rgb                       | —       |
+| size           | node size                   | string  | normal / large                              | normal  |
+| icon           | icon class name             | string  | —                                           | —       |
+| hollow         | icon is hollow              | boolean | —                                           | false   |
 
 ## Timeline-Item Slots
 
diff --git a/docs/examples/timeline/center.vue b/docs/examples/timeline/center.vue
new file mode 100644
index 0000000000..b061a3c982
--- /dev/null
+++ b/docs/examples/timeline/center.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item center timestamp="2018/4/12" placement="top">
+        <el-card>
+          <h4>Update Github template</h4>
+          <p>Tom committed 2018/4/12 20:46</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2018/4/3" placement="top">
+        <el-card>
+          <h4>Update Github template</h4>
+          <p>Tom committed 2018/4/3 20:46</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item center timestamp="2018/4/2" placement="top">
+        Event start
+      </el-timeline-item>
+      <el-timeline-item timestamp="2018/4/2" placement="top">
+        Event end
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
diff --git a/packages/components/timeline/__tests__/timeline.spec.ts b/packages/components/timeline/__tests__/timeline.spec.ts
index 05521ed836..57bebc8c52 100644
--- a/packages/components/timeline/__tests__/timeline.spec.ts
+++ b/packages/components/timeline/__tests__/timeline.spec.ts
@@ -237,4 +237,41 @@ describe('TimeLine.vue', () => {
     expect(dotWrapper.text()).toEqual('dot')
     expect(wrapper.find('.el-timeline-item__node').exists()).toBe(false)
   })
+
+  test('center', () => {
+    const wrapper = mount({
+      ...Component,
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :center="index === 1"
+          >
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      `,
+      data() {
+        return {
+          activities: [
+            {
+              content: 'Step 1: xxxxxx',
+              timestamp: '2018-04-11',
+            },
+            {
+              content: 'Step 2: xxxxxx',
+              timestamp: '2018-04-13',
+            },
+            {
+              content: 'Step 3: xxxxxx',
+              timestamp: '2018-04-15',
+            },
+          ],
+        }
+      },
+    })
+    const timestampWrappers = wrapper.findAll('.el-timeline-item')
+    expect(timestampWrappers[1].classes()).toContain('el-timeline-item__center')
+  })
 })
diff --git a/packages/components/timeline/src/item.vue b/packages/components/timeline/src/item.vue
index 692b1bb6a1..1a632baa24 100644
--- a/packages/components/timeline/src/item.vue
+++ b/packages/components/timeline/src/item.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="el-timeline-item">
+  <li class="el-timeline-item" :class="{ 'el-timeline-item__center': center }">
     <div class="el-timeline-item__tail"></div>
 
     <div
@@ -56,6 +56,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    center: {
+      type: Boolean,
+      default: false,
+    },
     placement: {
       type: String,
       default: 'bottom',
diff --git a/packages/theme-chalk/src/timeline.scss b/packages/theme-chalk/src/timeline.scss
index 9eb90e90a0..918ac5ad61 100644
--- a/packages/theme-chalk/src/timeline.scss
+++ b/packages/theme-chalk/src/timeline.scss
@@ -11,9 +11,36 @@
   font-size: var(--el-font-size-base);
   list-style: none;
 
-  & .#{$namespace}-timeline-item:last-child {
-    & .#{$namespace}-timeline-item__tail {
+  .#{$namespace}-timeline-item:last-child {
+    .#{$namespace}-timeline-item__tail {
       display: none;
     }
   }
+
+  .#{$namespace}-timeline-item__center {
+    display: flex;
+    align-items: center;
+
+    .#{$namespace}-timeline-item__wrapper {
+      width: 100%;
+    }
+
+    .#{$namespace}-timeline-item__tail {
+      top: 0;
+    }
+  }
+
+  .#{$namespace}-timeline-item__center:first-child {
+    .#{$namespace}-timeline-item__tail {
+      height: calc(50% + 10px);
+      top: calc(50% - 10px);
+    }
+  }
+
+  .#{$namespace}-timeline-item__center:last-child {
+    .#{$namespace}-timeline-item__tail {
+      display: block;
+      height: calc(50% - 10px);
+    }
+  }
 }