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