feat(timeline): separate info type and rename default type to primary…

… type
vexip-ui · Jan 12, 2024 · 84d0b85 · 84d0b85
1 parent 7845ce2
commit 84d0b85
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 78 deletions.
diff --git a/components/timeline/symbol.ts b/components/timeline/symbol.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-export type TimelineItemType = 'default' | 'success' | 'error' | 'warning' | 'disabled'
+export type TimelineItemType = 'primary' | 'info' | 'success' | 'error' | 'warning' | 'disabled'
 
 export interface ItemState {
   label: string | number,
@@ -20,4 +20,13 @@ export interface TimelineState {
   handleSignalClick: (label: string | number) => void
 }
 
-export const TIMELINE_STATE: InjectionKey<TimelineState> = Symbol('TTIMELINE_STATE')
+export const TIMELINE_STATE: InjectionKey<TimelineState> = Symbol('TIMELINE_STATE')
+
+export const timelineItemTypes = Object.freeze<TimelineItemType[]>([
+  'primary',
+  'info',
+  'success',
+  'error',
+  'warning',
+  'disabled'
+])
diff --git a/components/timeline/tests/timeline.spec.tsx b/components/timeline/tests/timeline.spec.tsx
@@ -54,22 +54,14 @@ describe('Timeline', () => {
   })
 
   it('item type', () => {
-    ;(['default', 'success', 'error', 'warning', 'disabled'] as const).forEach(type => {
+    ;(['primary', 'info', 'success', 'error', 'warning', 'disabled'] as const).forEach(type => {
       const wrapper = mount(() => (
         <Timeline>
           <TimelineItem type={type}></TimelineItem>
         </Timeline>
       ))
 
-      if (type !== 'default') {
-        expect(wrapper.find('.vxp-timeline__item').classes()).toContain(
-          `vxp-timeline__item--${type}`
-        )
-      } else {
-        expect(wrapper.find('.vxp-timeline__item').classes()).not.toContain(
-          `vxp-timeline__item--${type}`
-        )
-      }
+      expect(wrapper.find('.vxp-timeline__item').classes()).toContain(`vxp-timeline__item--${type}`)
     })
   })
 

diff --git a/components/timeline/timeline-item.vue b/components/timeline/timeline-item.vue
@@ -3,24 +3,16 @@ import { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, ref,
 
 import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { timelineItemProps } from './props'
-import { TIMELINE_STATE } from './symbol'
+import { TIMELINE_STATE, timelineItemTypes } from './symbol'
 
-import type { ItemState, TimelineItemType } from './symbol'
-
-const timelineItemTypes = Object.freeze<TimelineItemType[]>([
-  'default',
-  'success',
-  'error',
-  'warning',
-  'disabled'
-])
+import type { ItemState } from './symbol'
 
 defineOptions({ name: 'TimelineItem' })
 
 const _props = defineProps(timelineItemProps)
 const props = useProps('timelineItem', _props, {
   type: {
-    default: 'default',
+    default: 'primary',
     validator: value => timelineItemTypes.includes(value)
   },
   color: '',
@@ -48,7 +40,7 @@ const content = ref<HTMLElement>()
 const className = computed(() => {
   return {
     [nh.be('item')]: true,
-    [nh.bem('item', props.type)]: props.type !== 'default'
+    [nh.bem('item', props.type)]: timelineItemTypes.includes(props.type)
   }
 })
 const itemStyle = computed(() => {

diff --git a/docs/.vitepress/theme/components/tip-container.vue b/docs/.vitepress/theme/components/tip-container.vue
@@ -2,6 +2,10 @@
 import { useI18n } from 'vue-i18n'
 
 defineProps({
+  type: {
+    type: String,
+    default: 'primary'
+  },
   i18n: {
     type: Boolean,
     default: false
@@ -16,7 +20,12 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <Alert class="docs-alert" v-bind="$attrs" :title="title ? (i18n ? t(title) : title) : undefined">
+  <Alert
+    class="docs-alert"
+    v-bind="$attrs"
+    :type="type === 'info' ? 'primary' : type"
+    :title="title ? (i18n ? t(title) : title) : undefined"
+  >
     <slot></slot>
   </Alert>
 </template>
diff --git a/docs/demos/timeline/basis/demo.en-US.vue b/docs/demos/timeline/basis/demo.en-US.vue
@@ -1,19 +1,11 @@
 <template>
   <Timeline>
-    <TimelineItem>
-      <span>Timeline node 1</span>
-    </TimelineItem>
-    <TimelineItem type="success">
-      <span>Timeline node 2</span>
-    </TimelineItem>
-    <TimelineItem type="warning">
-      <span>Timeline node 3</span>
-    </TimelineItem>
-    <TimelineItem type="error">
-      <span>Timeline node 4</span>
-    </TimelineItem>
-    <TimelineItem type="disabled">
-      <span>Timeline node 5</span>
+    <TimelineItem v-for="(itemType, index) in types" :key="index" :type="itemType">
+      <span>{{ `Timeline node ${index + 1}` }}</span>
     </TimelineItem>
   </Timeline>
 </template>
+
+<script setup lang="ts">
+const types = ['primary', 'info', 'success', 'warning', 'error', 'disabled'] as const
+</script>
diff --git a/docs/demos/timeline/basis/demo.zh-CN.vue b/docs/demos/timeline/basis/demo.zh-CN.vue
@@ -1,19 +1,11 @@
 <template>
   <Timeline>
-    <TimelineItem>
-      <span>时间节点 1</span>
-    </TimelineItem>
-    <TimelineItem type="success">
-      <span>时间节点 2</span>
-    </TimelineItem>
-    <TimelineItem type="warning">
-      <span>时间节点 3</span>
-    </TimelineItem>
-    <TimelineItem type="error">
-      <span>时间节点 4</span>
-    </TimelineItem>
-    <TimelineItem type="disabled">
-      <span>时间节点 5</span>
+    <TimelineItem v-for="(itemType, index) in types" :key="index" :type="itemType">
+      <span>{{ `时间节点 ${index + 1}` }}</span>
     </TimelineItem>
   </Timeline>
 </template>
+
+<script setup lang="ts">
+const types = ['primary', 'info', 'success', 'warning', 'error', 'disabled'] as const
+</script>
diff --git a/docs/en-US/component/timeline.md b/docs/en-US/component/timeline.md
@@ -62,6 +62,12 @@ You can use the slots and add a little style to make a simple steps bar.
 
 ## API
 
+### Preset Types
+
+```ts
+type TimelineItemType = 'primary' | 'info' | 'success' | 'error' | 'warning' | 'disabled'
+```
+
 ### Timeline Props
 
 | Name       | Type               | Description                                                                           | Default | Since    |
@@ -82,14 +88,14 @@ You can use the slots and add a little style to make a simple steps bar.
 
 ### TimelineItem Props
 
-| Name       | Type                                                           | Description                                                                           | Default     | Since |
-| ---------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- | ----- |
-| type       | `'default' \| 'success' \| 'error' \| 'warning' \| 'disabled'` | Time node type                                                                        | `'default'` | -     |
-| color      | `string`                                                       | You can specify a custom color for the node                                           | `''`        | -     |
-| label      | `number \| string`                                             | Set the `label` of the node, useful when listening for node click events              | `null`      | -     |
-| dashed     | `boolean`                                                      | Set whether the line of the time node is dashed                                       | `false`     | -     |
-| line-color | `string`                                                       | Set the line color of the time node                                                   | `null`      | -     |
-| spacing    | `number \| string`                                             | Set the spacing between time nodes, you can pass a number or a legal css length value | `null`      | -     |
+| Name       | Type               | Description                                                                           | Default     | Since |
+| ---------- | ------------------ | ------------------------------------------------------------------------------------- | ----------- | ----- |
+| type       | `TimelineItemType` | The type of tSimeline node                                                            | `'primary'` | -     |
+| color      | `string`           | You can specify a custom color for the node                                           | `''`        | -     |
+| label      | `number \| string` | Set the `label` of the node, useful when listening for node click events              | `null`      | -     |
+| dashed     | `boolean`          | Set whether the line of the time node is dashed                                       | `false`     | -     |
+| line-color | `string`           | Set the line color of the time node                                                   | `null`      | -     |
+| spacing    | `number \| string` | Set the spacing between time nodes, you can pass a number or a legal css length value | `null`      | -     |
 
 ### TimelineItem Events
 

diff --git a/docs/zh-CN/component/timeline.md b/docs/zh-CN/component/timeline.md
@@ -62,6 +62,12 @@
 
 ## API
 
+### 预设类型
+
+```ts
+type TimelineItemType = 'primary' | 'info' | 'success' | 'error' | 'warning' | 'disabled'
+```
+
 ### Timeline 属性
 
 | 名称       | 类型               | 说明                                                          | 默认值  | 始于     |
@@ -82,14 +88,14 @@
 
 ### TimelineItem 属性
 
-| 名称       | 类型                                                           | 说明                                                          | 默认值      | 始于 |
-| ---------- | -------------------------------------------------------------- | ------------------------------------------------------------- | ----------- | ---- |
-| type       | `'default' \| 'success' \| 'error' \| 'warning' \| 'disabled'` | 时间节点的类型                                                | `'default'` | -    |
-| color      | `string`                                                       | 可以指定节点的自定义颜色                                      | `''`        | -    |
-| label      | `number \| string`                                             | 设置节点的 `label`，在监听节点点击事件时有用                  | `null`      | -    |
-| dashed     | `boolean`                                                      | 设置时间节点的线是否为虚线                                    | `false`     | -    |
-| line-color | `string`                                                       | 设置时间节点的线的颜色                                        | `null`      | -    |
-| spacing    | `number \| string`                                             | 设置时间节点间的间隔距离，可以传入一个数字或合法的 css 长度值 | `null`      | -    |
+| 名称       | 类型               | 说明                                                          | 默认值      | 始于 |
+| ---------- | ------------------ | ------------------------------------------------------------- | ----------- | ---- |
+| type       | `TimelineItemType` | 时间节点的类型                                                | `'primary'` | -    |
+| color      | `string`           | 可以指定节点的自定义颜色                                      | `''`        | -    |
+| label      | `number \| string` | 设置节点的 `label`，在监听节点点击事件时有用                  | `null`      | -    |
+| dashed     | `boolean`          | 设置时间节点的线是否为虚线                                    | `false`     | -    |
+| line-color | `string`           | 设置时间节点的线的颜色                                        | `null`      | -    |
+| spacing    | `number \| string` | 设置时间节点间的间隔距离，可以传入一个数字或合法的 css 长度值 | `null`      | -    |
 
 ### TimelineItem 事件
 

diff --git a/style/timeline.scss b/style/timeline.scss
@@ -74,16 +74,16 @@ $timeline: map.merge(
       padding-bottom: 0;
     }
 
-    $types: success error warning;
-
     @each $type in $types {
-      &--#{$type} {
-        @include define-timeline-style(
-          (
-            pointer-color: 'color' $type 'base',
-            pointer-b-color: 'color' $type 'base'
-          )
-        );
+      @if $type != 'primary' {
+        &--#{$type} {
+          @include define-timeline-style(
+            (
+              pointer-color: 'color' $type 'base',
+              pointer-b-color: 'color' $type 'base'
+            )
+          );
+        }
       }
     }
   }