feat(timeline): using alternate to replace both-sides prop

BREAKING CHANGE: Timeline's `both-sides` prop has been deprecated, please using `alternate` prop to replace it.
vexip-ui · May 28, 2023 · 5f81887 · 5f81887
1 parent abe9f2e
commit 5f81887
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 51 deletions.
diff --git a/components/timeline/props.ts b/components/timeline/props.ts
@@ -12,6 +12,7 @@ export const timelineProps = buildProps({
   spacing: [Number, String],
   flip: booleanProp,
   horizontal: booleanProp,
+  alternate: booleanProp,
   onSignalClick: eventProp<(label: string | number) => void>()
 })
 

diff --git a/components/timeline/timeline.vue b/components/timeline/timeline.vue
@@ -11,7 +11,7 @@
 import { computed, defineComponent, provide, reactive, toRef } from 'vue'
 
 import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
-import { debounceMinor, isNull } from '@vexip-ui/utils'
+import { debounceMinor, isNull, warnOnce } from '@vexip-ui/utils'
 import { timelineProps } from './props'
 import { TIMELINE_STATE } from './symbol'
 
@@ -24,14 +24,22 @@ export default defineComponent({
   setup(_props) {
     const props = useProps('timeline', _props, {
       pending: false,
-      bothSides: false,
+      bothSides: null,
       dashed: false,
       lineColor: null,
       spacing: null,
       flip: false,
-      horizontal: false
+      horizontal: false,
+      alternate: false
     })
 
+    if (!isNull(props.bothSides)) {
+      warnOnce(
+        "[vexip-ui:Timeline] 'both-sides' prop has been deprecated, please " +
+          "use 'alternate' prop to replace it"
+      )
+    }
+
     const nh = useNameHelper('timeline')
     const itemStates = reactive(new Set<ItemState>())
 
@@ -41,7 +49,7 @@ export default defineComponent({
         [nh.bs('vars')]: true,
         [nh.bm('inherit')]: props.inherit,
         [nh.bm('pending')]: props.pending,
-        [nh.bm('both-sides')]: props.bothSides,
+        [nh.bm('alternate')]: props.bothSides || props.alternate,
         [nh.bm('flip')]: props.flip,
         [nh.bm('horizontal')]: props.horizontal
       }

diff --git a/docs/demos/timeline/sides/demo.en-US.vue → docs/demos/timeline/alternate/demo.en-US.vue b/docs/demos/timeline/sides/demo.en-US.vue → docs/demos/timeline/alternate/demo.en-US.vue
@@ -1,37 +1,37 @@
 <template>
   <p>
-    Filp:
+    Flip:
     <Switch v-model:value="flip"></Switch>
   </p>
-  <Timeline both-sides :flip="flip" style="max-width: 500px;">
+  <Timeline alternate :flip="flip" style="max-width: 500px">
     <TimelineItem>
-      <span style="margin-bottom: 10px;">PM</span>
+      <span style="margin-bottom: 10px">PM</span>
       <Card>
         Today, the customer put forward the demand of XXX, please do the technical feasibility
         analysis in time.
       </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">CTO</span>
+      <span style="margin-bottom: 10px">CTO</span>
       <Card>
         After discussion at the meeting, XXX requirements can be realized, please follow up.
       </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">Staff</span>
+      <span style="margin-bottom: 10px">Staff</span>
       <Card>
         The development needs have been received, and the current development progress is 30%.
       </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">PM</span>
+      <span style="margin-bottom: 10px">PM</span>
       <Card>
         Please follow up the development of XXX requirements in time. At present, customers have
         raised questions about the progress of this piece.
       </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">CTO</span>
+      <span style="margin-bottom: 10px">CTO</span>
       <Card>
         Received, the development situation has been followed up in time, and the investment of
         developers has been increased.

diff --git a/docs/demos/timeline/sides/demo.zh-CN.vue → docs/demos/timeline/alternate/demo.zh-CN.vue b/docs/demos/timeline/sides/demo.zh-CN.vue → docs/demos/timeline/alternate/demo.zh-CN.vue
@@ -3,25 +3,25 @@
     翻转：
     <Switch v-model:value="flip"></Switch>
   </p>
-  <Timeline both-sides :flip="flip" style="max-width: 500px;">
+  <Timeline alternate :flip="flip" style="max-width: 500px">
     <TimelineItem>
-      <span style="margin-bottom: 10px;">项目负责人</span>
+      <span style="margin-bottom: 10px">项目负责人</span>
       <Card> 今日客户提出了XXX的需求，请及时做技术可行性分析 </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">技术负责人</span>
+      <span style="margin-bottom: 10px">技术负责人</span>
       <Card> 经过会议讨论，XXX需求可以实现，请实施人员跟进 </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">技术骨干</span>
+      <span style="margin-bottom: 10px">技术骨干</span>
       <Card> 已收到开发需求，目前开发进度为30% </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">项目负责人</span>
+      <span style="margin-bottom: 10px">项目负责人</span>
       <Card> 请及时跟进XXX需求开发，目前客户对这块的进度提出了疑问 </Card>
     </TimelineItem>
     <TimelineItem>
-      <span style="margin-bottom: 10px;">技术负责人</span>
+      <span style="margin-bottom: 10px">技术负责人</span>
       <Card> 收到，已及时跟进开发情况，增加开发人员投入 </Card>
     </TimelineItem>
   </Timeline>

diff --git a/docs/demos/timeline/horizontal/demo.en-US.vue b/docs/demos/timeline/horizontal/demo.en-US.vue
@@ -1,14 +1,14 @@
 <template>
-  <p style="margin-bottom: 28px;">
+  <p style="margin-bottom: 28px">
     <span>Flip: </span>
-    <Switch v-model:value="flip" style="margin-right: 10px;"></Switch>
-    <span>Both sides: </span>
-    <Switch v-model:value="bothSides"></Switch>
+    <Switch v-model:value="flip" style="margin-right: 10px"></Switch>
+    <span>Alternate: </span>
+    <Switch v-model:value="alternate"></Switch>
   </p>
   <Timeline
     horizontal
     :flip="flip"
-    :both-sides="bothSides"
+    :alternate="alternate"
     pending
   >
     <TimelineItem>
@@ -33,7 +33,7 @@
 import { ref } from 'vue'
 
 const flip = ref(false)
-const bothSides = ref(false)
+const alternate = ref(false)
 </script>
 
 <style scoped>

diff --git a/docs/demos/timeline/horizontal/demo.zh-CN.vue b/docs/demos/timeline/horizontal/demo.zh-CN.vue
@@ -1,14 +1,14 @@
 <template>
-  <p style="margin-bottom: 28px;">
+  <p style="margin-bottom: 28px">
     <span>翻转：</span>
-    <Switch v-model:value="flip" style="margin-right: 10px;"></Switch>
-    <span>双边：</span>
-    <Switch v-model:value="bothSides"></Switch>
+    <Switch v-model:value="flip" style="margin-right: 10px"></Switch>
+    <span>交替：</span>
+    <Switch v-model:value="alternate"></Switch>
   </p>
   <Timeline
     horizontal
     :flip="flip"
-    :both-sides="bothSides"
+    :alternate="alternate"
     pending
   >
     <TimelineItem>
@@ -33,7 +33,7 @@
 import { ref } from 'vue'
 
 const flip = ref(false)
-const bothSides = ref(false)
+const alternate = ref(false)
 </script>
 
 <style scoped>

diff --git a/docs/en-US/component/timeline.md b/docs/en-US/component/timeline.md
@@ -28,9 +28,9 @@ Add the `flip` prop to quickly place the node content on the other side.
 
 :::
 
-:::demo timeline/sides
+:::demo timeline/alternate
 
-### Both Side Mode
+### Alternate Mode
 
 There was a demand for design like this, and it was born.
 
@@ -50,15 +50,16 @@ In both-sides mode, if you don't want the component to automatically calculate t
 
 ### Timeline Props
 
-| Name       | Type               | Description                                                                           | Default | Since    |
-| ---------- | ------------------ | ------------------------------------------------------------------------------------- | ------- | -------- |
-| pending    | `boolean`          | Set whether the timeline is pending                                                   | `false` | -        |
-| both-sides | `boolean`          | Set whether to enable both sides mode                                                 | `false` | -        |
-| dashed     | `boolean`          | Set whether the timeline is dashed                                                    | `false` | -        |
-| lineColor  | `string`           | Set the color of the timeline                                                         | `null`  | -        |
-| spacing    | `number \| string` | Set the spacing between time nodes, you can pass a number or a legal css length value | `null`  | -        |
-| flip       | `boolean`          | Set whether to flip the content                                                       | `false` | `2.0.18` |
-| horizontal | `boolean`          | Set whether the timeline is horizontal                                                | `false` | `2.0.18` |
+| Name           | Type               | Description                                                                           | Default | Since    |
+| -------------- | ------------------ | ------------------------------------------------------------------------------------- | ------- | -------- |
+| pending        | `boolean`          | Set whether the timeline is pending                                                   | `false` | -        |
+| ~~both-sides~~ | `boolean`          | Set whether to enable both sides mode                                                 | `false` | -        |
+| dashed         | `boolean`          | Set whether the timeline is dashed                                                    | `false` | -        |
+| lineColor      | `string`           | Set the color of the timeline                                                         | `null`  | -        |
+| spacing        | `number \| string` | Set the spacing between time nodes, you can pass a number or a legal css length value | `null`  | -        |
+| flip           | `boolean`          | Set whether to flip the content                                                       | `false` | `2.0.18` |
+| horizontal     | `boolean`          | Set whether the timeline is horizontal                                                | `false` | `2.0.18` |
+| alternate      | `boolean`          | Set whether to enable alternate mode                                                  | `false` | `2.1.23` |
 
 ### Timeline Events
 

diff --git a/docs/zh-CN/component/timeline.md b/docs/zh-CN/component/timeline.md
@@ -28,9 +28,9 @@
 
 :::
 
-:::demo timeline/sides
+:::demo timeline/alternate
 
-### 双边模式
+### 交替模式
 
 有一个需求用到这样子的设计，于是它就诞生了。
 
@@ -50,15 +50,16 @@
 
 ### Timeline 属性
 
-| 名称       | 类型               | 说明                                                          | 默认值  | 始于     |
-| ---------- | ------------------ | ------------------------------------------------------------- | ------- | -------- |
-| pending    | `boolean`          | 设置时间线是否为未完成状态                                    | `false` | -        |
-| both-sides | `boolean`          | 设置是否开启两侧模式                                          | `false` | -        |
-| dashed     | `boolean`          | 设置时间线是否为虚线                                          | `false` | -        |
-| lineColor  | `string`           | 设置时间线的颜色                                              | `null`  | -        |
-| spacing    | `number \| string` | 设置时间节点间的间隔距离，可以传入一个数字或合法的 css 长度值 | `null`  | -        |
-| flip       | `boolean`          | 设置是否翻转内容                                              | `false` | `2.0.18` |
-| horizontal | `boolean`          | 设置时间线是否为横向                                          | `false` | `2.0.18` |
+| 名称           | 类型               | 说明                                                          | 默认值  | 始于     |
+| -------------- | ------------------ | ------------------------------------------------------------- | ------- | -------- |
+| pending        | `boolean`          | 设置时间线是否为未完成状态                                    | `false` | -        |
+| ~~both-sides~~ | `boolean`          | 设置是否开启两侧模式                                          | `false` | -        |
+| dashed         | `boolean`          | 设置时间线是否为虚线                                          | `false` | -        |
+| lineColor      | `string`           | 设置时间线的颜色                                              | `null`  | -        |
+| spacing        | `number \| string` | 设置时间节点间的间隔距离，可以传入一个数字或合法的 css 长度值 | `null`  | -        |
+| flip           | `boolean`          | 设置是否翻转内容                                              | `false` | `2.0.18` |
+| horizontal     | `boolean`          | 设置时间线是否为横向                                          | `false` | `2.0.18` |
+| alternate      | `boolean`          | 设置是否开启交替模式                                          | `false` | `2.1.23` |
 
 ### Timeline 事件