feat(TimeLine): init timeLine

components.d.ts

@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     'DatePicker.story': typeof import('./src/components/Form/datePicker.story.vue')['default']
     'DateTimePicker.story': typeof import('./src/components/Form/dateTimePicker.story.vue')['default']
     'Descriptions.story': typeof import('./src/components/Data/descriptions.story.vue')['default']
+    'Dialog.story': typeof import('./src/components/Feedback/dialog.story.vue')['default']
     'Divider.story': typeof import('./src/components/Others/divider.story.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
@@ -51,6 +52,7 @@ declare module '@vue/runtime-core' {
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -80,9 +82,12 @@ declare module '@vue/runtime-core' {
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     'Empty.story': typeof import('./src/components/Data/empty.story.vue')['default']
     HstColor: typeof import('./src/controls-components/HstColor.vue')['default']
+    HstDateTimePicker: typeof import('./src/controls-components/HstDateTimePicker.vue')['default']
     HstDateTimePIcker: typeof import('./src/controls-components/HstDateTimePicker.vue')['default']
     'Icon.story': typeof import('./src/components/Basic/Icon/icon.story.vue')['default']
     'Image.story': typeof import('./src/components/Data/Image/image.story.vue')['default']
@@ -104,5 +109,6 @@ declare module '@vue/runtime-core' {
     'Space.story': typeof import('./src/components/Basic/space.story.vue')['default']
     'Switch.story': typeof import('./src/components/Form/switch.story.vue')['default']
     'Tag.story': typeof import('./src/components/Data/tag.story.vue')['default']
+    'Timeline.story': typeof import('./src/components/Data/Timeline/timeline.story.vue')['default']
   }
 }

src/components/Data/Timeline/constants.ts

@@ -0,0 +1,21 @@
+export const placementList = [
+  {
+    label: 'top',
+    value: 'top',
+  },
+  {
+    label: 'bottom',
+    value: 'bottom',
+  },
+]
+
+export const sizeList = [
+  {
+    label: 'normal',
+    value: 'normal',
+  },
+  {
+    label: 'large',
+    value: 'large',
+  },
+]

src/components/Data/Timeline/timeline.story.md

@@ -0,0 +1,26 @@
+## Timeline Slots
+
+| Name | Description                 | Subtags       |
+| ---- | --------------------------- | ------------- |
+| —    | Custom content for timeline | Timeline-Item |
+
+## Timeline-Item Attributes
+
+| Name           | 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 component              | `string \| Component` | —                                           | —       |
+| hollow         | icon is hollow              | boolean               | —                                           | false   |
+
+## Timeline-Item Slots
+
+| Name | Description                      |
+| ---- | -------------------------------- |
+| —    | Custom content for timeline item |
+| dot  | Custom defined node              |

src/components/Data/Timeline/timeline.story.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import typeList from '@constants/typeOptions'
+import { placementList, sizeList } from './constants'
+import { isAttribute } from '@/utils'
+
+const activities = ref([
+  {
+    content: 'Event start',
+    timestamp: '2018-04-15',
+  },
+  {
+    content: 'Approved',
+    timestamp: '2018-04-13',
+  },
+  {
+    content: 'Success',
+    timestamp: '2018-04-11',
+  },
+])
+const basicPropsData = reactive({
+  hideTimestamp: false,
+  center: false,
+  placement: 'bottom',
+  type: '',
+  color: '',
+  size: 'normal',
+  hollow: false,
+})
+const basicSource = computed(() => {
+  return `<script setup lang="ts">
+  const activities = [
+  {
+    content: 'Event start',
+    timestamp: '2018-04-15',
+  },
+  {
+    content: 'Approved',
+    timestamp: '2018-04-13',
+  },
+  {
+    content: 'Success',
+    timestamp: '2018-04-11',
+  },
+]
+<\/script>
+
+<el-timeline>
+  <el-timeline-item
+    v-for="activity in activities"
+    :key="activity.timestamp"
+    :timestamp="activity.timestamp"${isAttribute(
+basicPropsData.hideTimestamp,
+'  hide-timestamp',
+)}${isAttribute(
+basicPropsData.center,
+ '  center',
+)}${isAttribute(
+basicPropsData.placement === 'top',
+'  placement="top"',
+)}${isAttribute(
+basicPropsData.type !== '',
+`  type="${basicPropsData.type}"`,
+)}${isAttribute(
+Boolean(basicPropsData.color),
+`  color=${basicPropsData.color}`,
+)}${isAttribute(
+basicPropsData.size !== 'normal',
+`  size=${basicPropsData.size}`,
+)}${isAttribute(
+basicPropsData.hollow,
+'  hollow',
+)}
+  >
+    {{ activity.content }}
+  </el-timeline-item>
+</el-timeline>`
+})
+</script>
+
+<template>
+  <Story title="Data/Timeline" icon="mdi:timeline-clock-outline">
+    <Variant
+      title="Basic Usage"
+      :source="basicSource"
+    >
+      <el-timeline>
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :timestamp="activity.timestamp"
+          :hide-timestamp="basicPropsData.hideTimestamp"
+          :center="basicPropsData.center"
+          :placement="basicPropsData.placement"
+          :type="basicPropsData.type"
+          :color="basicPropsData.color"
+          :size="basicPropsData.size"
+          :hollow="basicPropsData.hollow"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+      <template #controls>
+        <HstCheckbox v-model="basicPropsData.hideTimestamp" title="hide-timestamp" />
+        <HstCheckbox v-model="basicPropsData.center" title="Center" />
+        <HstButtonGroup
+          v-model="basicPropsData.placement"
+          title="Placement"
+          :options="placementList"
+        />
+        <HstButtonGroup
+          v-model="basicPropsData.size"
+          title="Size"
+          :options="sizeList"
+        />
+        <HstColor v-model="basicPropsData.color" title="Color" />
+        <HstCheckbox v-model="basicPropsData.hollow" title="Hollow" />
+        <HstRadio
+          v-model="basicPropsData.type"
+          title="Type"
+          :options="typeList"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+</style>

src/constants/typeOptions.ts

@@ -0,0 +1,26 @@
+export default [
+  {
+    label: 'default',
+    value: '',
+  },
+  {
+    label: 'primary',
+    value: 'primary',
+  },
+  {
+    label: 'success',
+    value: 'success',
+  },
+  {
+    label: 'warning',
+    value: 'warning',
+  },
+  {
+    label: 'danger',
+    value: 'danger',
+  },
+  {
+    label: 'info',
+    value: 'info',
+  },
+]