feat(timeline): n-timeline-item add color prop

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-timeline` add `horizontal` prop, closes [#887](https://github.com/TuSimple/naive-ui/issues/887).
 - `n-image` add `preview-src` prop, closes [#922](https://github.com/TuSimple/naive-ui/issues/922)
 - `n-dynamic-tags` add `input` and `add` slot, closes [#499](https://github.com/TuSimple/naive-ui/issues/499).
+- `n-timeline-item` add `color` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,7 @@
 - `n-timeline` 新增 `horizontal` 属性，关闭 [#887](https://github.com/TuSimple/naive-ui/issues/887)
 - `n-image` 新增 `preview-src` 属性，关闭 [#922](https://github.com/TuSimple/naive-ui/issues/922)
 - `n-dynamic-tags` 新增 `input` 和 `add` 插槽，关闭 [#499](https://github.com/TuSimple/naive-ui/issues/499)
+- `n-timeline-item` 新增 `color` 属性
 
 ### Fixes
 

src/input/src/Input.tsx

@@ -35,7 +35,7 @@ import {
   InputWrappedRef,
   inputInjectionKey
 } from './interface'
-import { len } from './utils'
+import { len, isEmptyValue } from './utils'
 import WordCount from './WordCount'
 import style from './styles/input.cssr'
 
@@ -190,10 +190,6 @@ export default defineComponent({
       }
     })
 
-    function isEmptyValue (value: any): boolean {
-      return ['', undefined, null].includes(value)
-    }
-
     const showPlaceholder1Ref = computed(() => {
       const { value: isComposing } = isComposingRef
       const { value: mergedValue } = mergedValueRef

src/input/src/utils.ts

@@ -6,3 +6,7 @@ export function len (s: string): number {
   }
   return count
 }
+
+export function isEmptyValue (value: any): boolean {
+  return ['', undefined, null].includes(value)
+}

src/timeline/demos/enUS/index.demo-entry.md

@@ -11,7 +11,7 @@ item-placement
 horizontal
 ```
 
-## Props
+## API
 
 ### Timeline Props
 
@@ -21,24 +21,23 @@ horizontal
 | item-placement | `'left' \| 'right'`   | `'left'`   | Direction.  |
 | size           | `'medium' \| 'large'` | `'medium'` | Size.       |
 
-### Timeline Item Props
+### TimelineItem Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| color | `string` | `undefined` | 选项的颜色 |
 | content | `string` | `undefined` | Item content. |
 | time | `string` | `undefined` | Item time. |
 | title | `string` | `undefined` | Item title. |
 | type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Item type. |
 
-## Slots
-
 ### Timeline Slots
 
 | Name    | Parameters | Description       |
 | ------- | ---------- | ----------------- |
 | default | `()`       | Timeline Content. |
 
-### Timeline Item Slots
+### TimelineItem Slots
 
 | Name    | Parameters | Description                                    |
 | ------- | ---------- | ---------------------------------------------- |

src/timeline/demos/zhCN/index.demo-entry.md

@@ -11,7 +11,7 @@ item-placement
 horizontal
 ```
 
-## Props
+## API
 
 ### Timeline Props
 
@@ -21,24 +21,23 @@ horizontal
 | item-placement | `'left' \| 'right'`   | `'left'`   | 方向   |
 | size           | `'medium' \| 'large'` | `'medium'` | 大小   |
 
-### Timeline Item Props
+### TimelineItem Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| color | `string` | `undefined` | 选项的颜色 |
 | content | `string` | `undefined` | 选项内容 |
 | time | `string` | `undefined` | 选项时间 |
 | title | `string` | `undefined` | 选项标题 |
 | type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | 选项类型 |
 
-## Slots
-
 ### Timeline Slots
 
 | 名称    | 参数 | 说明       |
 | ------- | ---- | ---------- |
 | default | `()` | 时间线内容 |
 
-### Timeline Item Slots
+### TimelineItem Slots
 
 | 名称    | 参数 | 说明               |
 | ------- | ---- | ------------------ |

src/timeline/src/TimelineItem.tsx

@@ -15,6 +15,7 @@ const timelineItemProps = {
   time: [String, Number] as PropType<string | number>,
   title: String,
   content: String,
+  color: String,
   type: {
     type: String as PropType<
     'default' | 'success' | 'error' | 'warning' | 'info'
@@ -74,7 +75,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, color } = this
     return (
       <div
         class={[
@@ -85,7 +86,10 @@ export default defineComponent({
       >
         <div class={`${mergedClsPrefix}-timeline-item-timeline`}>
           <div class={`${mergedClsPrefix}-timeline-item-timeline__line`} />
-          <div class={`${mergedClsPrefix}-timeline-item-timeline__circle`} />
+          <div
+            class={`${mergedClsPrefix}-timeline-item-timeline__circle`}
+            style={{ borderColor: color }}
+          />
         </div>
         <div class={`${mergedClsPrefix}-timeline-item-content`}>
           {this.title || this.$slots.header ? (

src/timeline/src/styles/index.cssr.ts

@@ -23,6 +23,7 @@ export default cB('timeline', `
   `, [
     cB('timeline-item', `
       flex-shrink: 0;
+      padding-right: 40px;
     `, [
       cB('timeline-item-content', `
         margin-top: 26px;
@@ -30,7 +31,6 @@ export default cB('timeline', `
         cE('meta', `
           margin-top: 6px;
           margin-bottom: unset;
-          margin-right: 40px;
         `)
       ]),
       cB('timeline-item-timeline', `