From 3b8719a72cb295dc18ed75e01c6453558ce64954 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Fri, 16 Dec 2022 19:39:09 +0400
Subject: [PATCH 1/7] feat: added vertical timeline

---
 docs/components/timeline.md                   | 140 ++++++++++++++++--
 .../timeline/examples/TimelineExample.vue     |  53 ++++++-
 .../examples/TimelineWithIconsExample.vue     |  60 ++++++++
 src/components/Timeline/Timeline.vue          |  31 +---
 src/components/Timeline/TimelineButton.vue    |   5 +
 src/components/Timeline/TimelineContent.vue   |   3 +
 src/components/Timeline/TimelineItem.vue      |   5 +
 src/components/Timeline/TimelinePoint.vue     |  24 +++
 src/components/Timeline/TimelineTime.vue      |   5 +
 src/components/Timeline/TimelineTitle.vue     |   5 +
 src/index.ts                                  |   6 +
 11 files changed, 298 insertions(+), 39 deletions(-)
 create mode 100644 docs/components/timeline/examples/TimelineWithIconsExample.vue
 create mode 100644 src/components/Timeline/TimelineButton.vue
 create mode 100644 src/components/Timeline/TimelineContent.vue
 create mode 100644 src/components/Timeline/TimelineItem.vue
 create mode 100644 src/components/Timeline/TimelinePoint.vue
 create mode 100644 src/components/Timeline/TimelineTime.vue
 create mode 100644 src/components/Timeline/TimelineTitle.vue

diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index 6516756..9560561 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -1,15 +1,137 @@
 <script setup>
-import TimelineExample from './timeline/examples/TimelineExample.vue'
+import TimelineExample from './timeline/examples/TimelineExample.vue';
+import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExample.vue';
 </script>
 # Vue Timeline Component - Flowbite
 
-```vue
-<script setup>
-import { Timeline } from 'flowbite-vue'
-</script>
-<template>
-  <Timeline></Timeline>
-</template>
-```
+## Default timeline usage
 
 <TimelineExample />
+
+```vue
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw flex flex-col">
+    <Timeline>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2021
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+    </Timeline>
+  </div>
+</template>
+
+```
+## Timeline with icons
+
+<TimelineWithIconsExample />
+
+```vue
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw flex flex-col">
+    <Timeline>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2021
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+    </Timeline>
+  </div>
+</template>
+
+```
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
index 2661e72..652bdf4 100644
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ b/docs/components/timeline/examples/TimelineExample.vue
@@ -1,8 +1,57 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Timeline></Timeline>
+    <Timeline>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2021
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+        </timeline-point>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+    </Timeline>
   </div>
 </template>
 <script setup>
-import { Timeline } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
 </script>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
new file mode 100644
index 0000000..a3e47f5
--- /dev/null
+++ b/docs/components/timeline/examples/TimelineWithIconsExample.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Timeline>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2021
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+      <timeline-item>
+        <timeline-point>
+          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+        </timeline-point>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-content>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-content>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-item>
+    </Timeline>
+  </div>
+</template>
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
+</script>
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
index 6f25935..b030d3f 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/src/components/Timeline/Timeline.vue
@@ -1,35 +1,10 @@
 <template>
-  <ol class="relative border-l border-gray-200 dark:border-gray-700">                  
-    <li class="mb-10 ml-4">
-      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
-      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time>
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>
-      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
-      <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
-    </li>
-    <li class="mb-10 ml-4">
-      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
-      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time>
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Marketing UI design in Figma</h3>
-      <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
-    </li>
-    <li class="ml-4">
-      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
-      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time>
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">E-Commerce UI code in Tailwind CSS</h3>
-      <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
-    </li>
+  <ol class="relative border-l border-gray-200 dark:border-gray-700">
+    <slot></slot>
   </ol>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  },
+defineProps({
   horizontal: {
     type: Boolean,
     default: false,
diff --git a/src/components/Timeline/TimelineButton.vue b/src/components/Timeline/TimelineButton.vue
new file mode 100644
index 0000000..5a48a33
--- /dev/null
+++ b/src/components/Timeline/TimelineButton.vue
@@ -0,0 +1,5 @@
+<template>
+  <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">
+    <slot></slot>
+  </a>
+</template>
diff --git a/src/components/Timeline/TimelineContent.vue b/src/components/Timeline/TimelineContent.vue
new file mode 100644
index 0000000..d9c5bec
--- /dev/null
+++ b/src/components/Timeline/TimelineContent.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>
diff --git a/src/components/Timeline/TimelineItem.vue b/src/components/Timeline/TimelineItem.vue
new file mode 100644
index 0000000..fdd58b5
--- /dev/null
+++ b/src/components/Timeline/TimelineItem.vue
@@ -0,0 +1,5 @@
+<template>
+  <li class="mb-10 ml-6">
+    <slot></slot>
+  </li>
+</template>
diff --git a/src/components/Timeline/TimelinePoint.vue b/src/components/Timeline/TimelinePoint.vue
new file mode 100644
index 0000000..56684a7
--- /dev/null
+++ b/src/components/Timeline/TimelinePoint.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    :class="timelineClasses"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+import classNames from 'classnames'
+
+const slots = useSlots()
+
+const hasSlot = computed(() => {
+  return !!slots.default
+})
+
+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 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)
+</script>
diff --git a/src/components/Timeline/TimelineTime.vue b/src/components/Timeline/TimelineTime.vue
new file mode 100644
index 0000000..03eab9a
--- /dev/null
+++ b/src/components/Timeline/TimelineTime.vue
@@ -0,0 +1,5 @@
+<template>
+  <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+    <slot></slot>
+  </time>
+</template>
diff --git a/src/components/Timeline/TimelineTitle.vue b/src/components/Timeline/TimelineTitle.vue
new file mode 100644
index 0000000..e39664e
--- /dev/null
+++ b/src/components/Timeline/TimelineTitle.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+    <slot></slot>
+  </h3>
+</template>
diff --git a/src/index.ts b/src/index.ts
index 9de0f19..c92b24f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,6 +33,12 @@ export { default as Rating } from './components/Rating/Rating.vue'
 export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
 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 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 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'
 export { default as Tooltip } from './components/Tooltip/Tooltip.vue'

From 3e0454a50e6f182c63bf55eaa7ce6e40e20a9b3e Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sat, 17 Dec 2022 01:48:31 +0400
Subject: [PATCH 2/7] feat: added horizontal timeline

---
 docs/components/timeline.md                   | 216 ++++++++++++------
 .../timeline/examples/TimelineExample.vue     |  84 ++++---
 .../examples/TimelineHorizontalExample.vue    |  58 +++++
 .../examples/TimelineWithIconsExample.vue     |  66 +++---
 src/components/Timeline/Timeline.vue          |  18 +-
 src/components/Timeline/TimelineBody.vue      |   3 +
 src/components/Timeline/TimelineContent.vue   |  10 +-
 src/components/Timeline/TimelineItem.vue      |  16 +-
 src/components/Timeline/TimelinePoint.vue     |  32 ++-
 src/index.ts                                  |   3 +-
 10 files changed, 340 insertions(+), 166 deletions(-)
 create mode 100644 docs/components/timeline/examples/TimelineHorizontalExample.vue
 create mode 100644 src/components/Timeline/TimelineBody.vue

diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index 9560561..9ef6f68 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -1,6 +1,7 @@
 <script setup>
 import TimelineExample from './timeline/examples/TimelineExample.vue';
 import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExample.vue';
+import TimelineHorizontalExample from './timeline/examples/TimelineHorizontalExample.vue';
 </script>
 # Vue Timeline Component - Flowbite
 
@@ -13,62 +14,62 @@ import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExamp
 import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
 </script>
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2021
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2020
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 
 ```
 ## Timeline with icons
+You can add icons by passing svg icons as slot to `<timeline-point></timeline-point>`
+<br>
 
 <TimelineWithIconsExample />
 
@@ -77,61 +78,126 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
 import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
 </script>
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2021
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2020
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
+</template>
+
+```
+## Timeline with icons
+`horizontal` prop makes timeline horizontal
+<br>
+
+<TimelineHorizontalExample />
+
+```vue
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+</script>
+<template>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 
 ```
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
index 652bdf4..52ae8a2 100644
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ b/docs/components/timeline/examples/TimelineExample.vue
@@ -1,57 +1,55 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2021
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2020
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/docs/components/timeline/examples/TimelineHorizontalExample.vue b/docs/components/timeline/examples/TimelineHorizontalExample.vue
new file mode 100644
index 0000000..dc83df5
--- /dev/null
+++ b/docs/components/timeline/examples/TimelineHorizontalExample.vue
@@ -0,0 +1,58 @@
+<template>
+  <Timeline horizontal>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
+</template>
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
+</script>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
index a3e47f5..0a28213 100644
--- a/docs/components/timeline/examples/TimelineWithIconsExample.vue
+++ b/docs/components/timeline/examples/TimelineWithIconsExample.vue
@@ -1,60 +1,58 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2021
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2020
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
index b030d3f..85d11c9 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/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>
diff --git a/src/components/Timeline/TimelineBody.vue b/src/components/Timeline/TimelineBody.vue
new file mode 100644
index 0000000..d9c5bec
--- /dev/null
+++ b/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>
diff --git a/src/components/Timeline/TimelineContent.vue b/src/components/Timeline/TimelineContent.vue
index d9c5bec..7c27116 100644
--- a/src/components/Timeline/TimelineContent.vue
+++ b/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>
diff --git a/src/components/Timeline/TimelineItem.vue b/src/components/Timeline/TimelineItem.vue
index fdd58b5..1d97666 100644
--- a/src/components/Timeline/TimelineItem.vue
+++ b/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>
diff --git a/src/components/Timeline/TimelinePoint.vue b/src/components/Timeline/TimelinePoint.vue
index 56684a7..175fb18 100644
--- a/src/components/Timeline/TimelinePoint.vue
+++ b/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>
diff --git a/src/index.ts b/src/index.ts
index c92b24f..a40897f 100644
--- a/src/index.ts
+++ b/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'

From bf9c92f4beca64adb05f511c0fdf4ca38d76afaf Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 18 Dec 2022 02:20:11 +0400
Subject: [PATCH 3/7] feat: added classes system for timeline point

---
 src/components/Timeline/TimelinePoint.vue | 35 ++++++++++++++++-------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/Timeline/TimelinePoint.vue b/src/components/Timeline/TimelinePoint.vue
index 175fb18..61e195f 100644
--- a/src/components/Timeline/TimelinePoint.vue
+++ b/src/components/Timeline/TimelinePoint.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapperClasses">
     <div
-        :class="timelineClasses"
+        :class="pointClasses"
     >
       <slot />
     </div>
@@ -28,15 +28,28 @@ const wrapperClasses = computed(() => {
 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 = '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,
-    isHorizontal ? horizontalClasses : verticalClasses,
-)
+const pointClasses = computed(() => {
+  const defaultClasses = 'absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700'
+
+  const verticalWithNoIconClasses = 'mt-1.5 w-3 h-3 bg-gray-200'
+  const verticalWithIconClasses = 'mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900'
+  const horizontalWithNoIconClasses = 'w-3 h-3 bg-gray-200'
+  const horizontalWithIconClasses = 'w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900'
+
+  const isVerticalWithNoIcon = !isHorizontal && !hasSlot.value
+  const isVerticalWithIcon = !isHorizontal && hasSlot.value
+  const isHorizontalWithNoIcon = isHorizontal && !hasSlot.value
+  const isHorizontalWithIcon = isHorizontal && hasSlot.value
+
+  return classNames(
+      defaultClasses,
+      {
+        [verticalWithNoIconClasses]: isVerticalWithNoIcon,
+        [verticalWithIconClasses]: isVerticalWithIcon,
+        [horizontalWithNoIconClasses]: isHorizontalWithNoIcon,
+        [horizontalWithIconClasses]: isHorizontalWithIcon,
+      },
+  )
+})
 </script>

From 458cece0c3b925eef57ce4d605758e362cc8d409 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 18 Dec 2022 02:21:30 +0400
Subject: [PATCH 4/7] chore: moved timeline item in the sidebar

---
 docs/.vitepress/config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 492e67d..5a873ee 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -49,6 +49,7 @@ function getComponents() {
     { text: 'Spinner', link: '/components/spinner' },
     { text: 'Tabs', link: '/components/tabs' },
     { text: 'ListGroup', link: 'components/list-group' },
+    { text: 'Timeline', link: 'components/timeline' },
     { text: 'Toast', link: 'components/toast' },
     { text: 'Tooltip', link: 'components/tooltip' },
     { text: 'Modal', link: 'components/modal' },
@@ -58,7 +59,7 @@ function getComponents() {
     { text: '- Pagination', link: 'components/pagination' },
     { text: '- Sidebar', link: 'components/sidebar' },
     { text: '- Table', link: 'components/table' },
-    { text: '- Timeline', link: 'components/timeline' },
+    { text: 'Timeline', link: 'components/timeline' },
   ]
 }
 

From e3fb92cb5628fe19381f84123c0dfe339be157fd Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 18 Dec 2022 14:46:09 +0400
Subject: [PATCH 5/7] fix: vitepress styles reset moved to examples

---
 docs/.vitepress/config.ts                     | 28 ++++++-------------
 .../timeline/examples/TimelineExample.vue     |  2 +-
 .../examples/TimelineHorizontalExample.vue    |  2 +-
 .../examples/TimelineWithIconsExample.vue     |  2 +-
 src/components/Timeline/Timeline.vue          |  2 +-
 5 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5a873ee..b4f2b3a 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -11,23 +11,17 @@ function buildSidebar() {
     {
       text: 'Components',
       collapsible: true,
-      items: [
-        ...getComponents(),
-      ],
+      items: [...getComponents()],
     },
     {
       text: 'Form',
       collapsible: true,
-      items: [
-        ...getFormComponents(),
-      ],
+      items: [...getFormComponents()],
     },
     {
       text: 'Utils',
       collapsible: true,
-      items: [
-        ...getUtils(),
-      ],
+      items: [...getUtils()],
     },
   ]
 }
@@ -59,20 +53,17 @@ function getComponents() {
     { text: '- Pagination', link: 'components/pagination' },
     { text: '- Sidebar', link: 'components/sidebar' },
     { text: '- Table', link: 'components/table' },
-    { text: 'Timeline', link: 'components/timeline' },
   ]
 }
 
 function getFormComponents() {
-  return [
-    { text: 'Input', link: 'components/input' },
-  ]
+  return [{ text: 'Input', link: 'components/input' }]
 }
 
 function getUtils() {
   return [
     { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
-    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' }
+    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
   ]
 }
 
@@ -83,21 +74,18 @@ function getUtils() {
 export default defineConfig({
   title: 'Flowbite Vue 3',
   cleanUrls: 'without-subfolders',
-  head: [
-    ['link', { rel: "icon", type: "image/svg", href: "/assets/logo.svg"}],
-  ],
+  head: [['link', { rel: 'icon', type: 'image/svg', href: '/assets/logo.svg' }]],
   themeConfig: {
     sidebar: buildSidebar(),
     logo: '/assets/logo.svg',
     socialLinks: [
       { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
-      { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
+      { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' },
     ],
 
     footer: {
       message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2022 Flowbite™'
+      copyright: 'Copyright © 2022 Flowbite™',
     },
-
   },
 })
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
index 52ae8a2..8f6b440 100644
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ b/docs/components/timeline/examples/TimelineExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <Timeline>
+  <Timeline class="vp-raw">
     <timeline-item>
       <timeline-point>
       </timeline-point>
diff --git a/docs/components/timeline/examples/TimelineHorizontalExample.vue b/docs/components/timeline/examples/TimelineHorizontalExample.vue
index dc83df5..3b8c887 100644
--- a/docs/components/timeline/examples/TimelineHorizontalExample.vue
+++ b/docs/components/timeline/examples/TimelineHorizontalExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <Timeline horizontal>
+  <Timeline class="vp-raw" horizontal>
     <timeline-item>
       <timeline-point>
         <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
index 0a28213..da2f71b 100644
--- a/docs/components/timeline/examples/TimelineWithIconsExample.vue
+++ b/docs/components/timeline/examples/TimelineWithIconsExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <Timeline>
+  <Timeline class="vp-raw">
     <timeline-item>
       <timeline-point>
         <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
index 85d11c9..e5344e5 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/src/components/Timeline/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw">
+  <div>
     <ol :class="classNames(defaultClasses, horizontal ? horizontalClasses : verticalClasses)" v-bind="$attrs">
       <slot></slot>
     </ol>

From 7b42dbc0f610f733857dde5b39ba19778bfea0ae Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 18 Dec 2022 14:56:00 +0400
Subject: [PATCH 6/7] refactor: removed timeline button

---
 docs/components/timeline.md                       | 15 +++------------
 .../timeline/examples/TimelineExample.vue         |  5 +----
 .../examples/TimelineHorizontalExample.vue        |  5 +----
 .../examples/TimelineWithIconsExample.vue         |  5 +----
 src/components/Timeline/Timeline.vue              |  6 ++++--
 src/components/Timeline/TimelineButton.vue        |  5 -----
 src/index.ts                                      |  1 -
 7 files changed, 10 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/Timeline/TimelineButton.vue

diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index 9ef6f68..bc66fa9 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -11,7 +11,7 @@ import TimelineHorizontalExample from './timeline/examples/TimelineHorizontalExa
 
 ```vue
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
 </script>
 <template>
   <Timeline>
@@ -28,9 +28,6 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
@@ -75,7 +72,7 @@ You can add icons by passing svg icons as slot to `<timeline-point></timeline-po
 
 ```vue
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
 </script>
 <template>
   <Timeline>
@@ -93,9 +90,6 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
@@ -142,7 +136,7 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
 
 ```vue
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
 </script>
 <template>
   <Timeline>
@@ -160,9 +154,6 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
index 8f6b440..436b706 100644
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ b/docs/components/timeline/examples/TimelineExample.vue
@@ -13,9 +13,6 @@
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
@@ -51,5 +48,5 @@
   </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/docs/components/timeline/examples/TimelineHorizontalExample.vue b/docs/components/timeline/examples/TimelineHorizontalExample.vue
index 3b8c887..6c30cb4 100644
--- a/docs/components/timeline/examples/TimelineHorizontalExample.vue
+++ b/docs/components/timeline/examples/TimelineHorizontalExample.vue
@@ -14,9 +14,6 @@
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
@@ -54,5 +51,5 @@
   </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
index da2f71b..2d8518d 100644
--- a/docs/components/timeline/examples/TimelineWithIconsExample.vue
+++ b/docs/components/timeline/examples/TimelineWithIconsExample.vue
@@ -14,9 +14,6 @@
         <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         </timeline-body>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
       </timeline-content>
     </timeline-item>
     <timeline-item>
@@ -54,5 +51,5 @@
   </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
index e5344e5..f6a803f 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/src/components/Timeline/Timeline.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <ol :class="classNames(defaultClasses, horizontal ? horizontalClasses : verticalClasses)" v-bind="$attrs">
+    <ol :class="timelineClasses" v-bind="$attrs">
       <slot></slot>
     </ol>
   </div>
 </template>
 <script lang="ts" setup>
 import classNames from 'classnames'
-import { provide } from 'vue'
+import { computed, provide } from 'vue'
 
 const props = defineProps({
   horizontal: {
@@ -21,4 +21,6 @@ provide('horizontal', props.horizontal)
 const defaultClasses = 'relative border-gray-200 dark:border-gray-700'
 const verticalClasses = 'border-l'
 const horizontalClasses = 'flex'
+
+const timelineClasses = computed(() => classNames(defaultClasses, props.horizontal ? horizontalClasses : verticalClasses))
 </script>
diff --git a/src/components/Timeline/TimelineButton.vue b/src/components/Timeline/TimelineButton.vue
deleted file mode 100644
index 5a48a33..0000000
--- a/src/components/Timeline/TimelineButton.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">
-    <slot></slot>
-  </a>
-</template>
diff --git a/src/index.ts b/src/index.ts
index a40897f..7d76c84 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -39,7 +39,6 @@ export { default as TimelineContent } from './components/Timeline/TimelineConten
 export { default as TimelineTime } from './components/Timeline/TimelineTime.vue'
 export { default as TimelineTitle } from './components/Timeline/TimelineTitle.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'
 export { default as Tooltip } from './components/Tooltip/Tooltip.vue'

From 97ef4f9a13eaa2d7b48cc58eb23a350c68274c76 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 18 Dec 2022 15:01:20 +0400
Subject: [PATCH 7/7] chore: added horizontal prop to example

---
 docs/components/timeline.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index bc66fa9..3248432 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -139,7 +139,7 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
 import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
 </script>
 <template>
-  <Timeline>
+  <Timeline horizontal>
     <timeline-item>
       <timeline-point>
         <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>