feat: added horizontal timeline

src/components/Timeline/Timeline.vue

@@ -1,14 +1,24 @@
 <template>
-  <ol class="relative border-l border-gray-200 dark:border-gray-700">
-    <slot></slot>
-  </ol>
+  <div class="vp-raw">
+    <ol :class="classNames(defaultClasses, horizontal ? horizontalClasses : verticalClasses)" v-bind="$attrs">
+      <slot></slot>
+    </ol>
+  </div>
 </template>
 <script lang="ts" setup>
-defineProps({
+import classNames from 'classnames'
+import { provide } from 'vue'
+
+const props = defineProps({
   horizontal: {
     type: Boolean,
     default: false,
   },
 })
 
+provide('horizontal', props.horizontal)
+
+const defaultClasses = 'relative border-gray-200 dark:border-gray-700'
+const verticalClasses = 'border-l'
+const horizontalClasses = 'flex'
 </script>

src/components/Timeline/TimelineBody.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"><slot></slot></p>
+</template>

src/components/Timeline/TimelineContent.vue

@@ -1,3 +1,11 @@
 <template>
-  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"><slot></slot></p>
+  <div :class="classes"><slot></slot></div>
 </template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import classNames from 'classnames'
+
+const isHorizontal = inject('horizontal')
+const classes = computed(() => classNames(isHorizontal ? 'mt-3 sm:pr-8' : ''))
+</script>

src/components/Timeline/TimelineItem.vue

@@ -1,5 +1,19 @@
 <template>
-  <li class="mb-10 ml-6">
+  <li :class="timelineItemClasses">
     <slot></slot>
   </li>
 </template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import classNames from 'classnames'
+
+const isHorizontal = inject('horizontal')
+
+const defaultClasses = 'mb-10'
+const horizontalClasses = 'mb-6 sm:mb-0 relative'
+const verticalClasses = 'ml-6'
+const timelineItemClasses = computed(() => {
+  return classNames(defaultClasses, isHorizontal ? horizontalClasses : verticalClasses)
+})
+</script>

src/components/Timeline/TimelinePoint.vue

@@ -1,13 +1,16 @@
 <template>
-  <div
-    :class="timelineClasses"
-  >
-    <slot />
+  <div :class="wrapperClasses">
+    <div
+        :class="timelineClasses"
+    >
+      <slot />
+    </div>
+    <div :class="borderClasses"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
+import { computed, inject, useSlots } from 'vue'
 import classNames from 'classnames'
 
 const slots = useSlots()
@@ -16,9 +19,24 @@ const hasSlot = computed(() => {
   return !!slots.default
 })
 
+const isHorizontal = inject('horizontal')
+
+const wrapperClasses = computed(() => {
+  return classNames(isHorizontal ? 'flex items-center' : '')
+})
+
+const defaultBorderClasses = 'h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex'
+const borderClasses = computed(() => classNames(defaultBorderClasses, { 'sm:hidden hidden': !isHorizontal }))
+
 const defaultClasses = 'absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700'
-const noIconClasses = 'mt-1.5 w-3 h-3 bg-gray-200'
+const noIconClasses = 'w-3 h-3 bg-gray-200'
+const horizontalClasses = ''
+const verticalClasses = 'mt-1.5'
 const iconContainerClasses = 'w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900'
 
-const timelineClasses = classNames(defaultClasses, hasSlot.value ? iconContainerClasses : noIconClasses)
+const timelineClasses = classNames(
+    defaultClasses,
+    hasSlot.value ? iconContainerClasses : noIconClasses,
+    isHorizontal ? horizontalClasses : verticalClasses,
+)
 </script>

src/index.ts

@@ -35,9 +35,10 @@ export { default as Table } from './components/Table/Table.vue'
 export { default as Timeline } from './components/Timeline/Timeline.vue'
 export { default as TimelineItem } from './components/Timeline/TimelineItem.vue'
 export { default as TimelinePoint } from './components/Timeline/TimelinePoint.vue'
+export { default as TimelineContent } from './components/Timeline/TimelineContent.vue'
 export { default as TimelineTime } from './components/Timeline/TimelineTime.vue'
 export { default as TimelineTitle } from './components/Timeline/TimelineTitle.vue'
-export { default as TimelineContent } from './components/Timeline/TimelineContent.vue'
+export { default as TimelineBody } from './components/Timeline/TimelineBody.vue'
 export { default as TimelineButton } from './components/Timeline/TimelineButton.vue'
 export { default as Toast } from './components/Toast/Toast.vue'
 export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'