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] 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'