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

feat: added classes system for timeline point

Browse Source
This commit is contained in:
victor
2022-12-18 02:20:11 +04:00
parent 3e0454a50e
commit bf9c92f4be
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<div :class="wrapperClasses"> <div :class="wrapperClasses">
<div <div
:class="timelineClasses" :class="pointClasses"
> >
<slot /> <slot />
</div> </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 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 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( 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, defaultClasses,
hasSlot.value ? iconContainerClasses : noIconClasses, {
isHorizontal ? horizontalClasses : verticalClasses, [verticalWithNoIconClasses]: isVerticalWithNoIcon,
) [verticalWithIconClasses]: isVerticalWithIcon,
[horizontalWithNoIconClasses]: isHorizontalWithNoIcon,
[horizontalWithIconClasses]: isHorizontalWithIcon,
},
)
})
</script> </script>