jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added horizontal timeline

Browse Source
This commit is contained in:
victor
2022-12-17 01:48:31 +04:00
parent 3b8719a72c
commit 3e0454a50e
10 changed files with 340 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
docs/components/timeline.md
View File

@@ -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>
```

84
docs/components/timeline/examples/TimelineExample.vue
View File

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

58
docs/components/timeline/examples/TimelineHorizontalExample.vue Normal file
View File

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

66
docs/components/timeline/examples/TimelineWithIconsExample.vue
View File

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

18
src/components/Timeline/Timeline.vue
View File

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

3
src/components/Timeline/TimelineBody.vue Normal file
View File

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

10
src/components/Timeline/TimelineContent.vue
View File

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

16
src/components/Timeline/TimelineItem.vue
View File

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

32
src/components/Timeline/TimelinePoint.vue
View File

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

3
src/index.ts
View File

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