-
Notifications
You must be signed in to change notification settings - Fork 740
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
233 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import LfSvg from '@/shared/svg/svg.vue'; | ||
| import LfIconOld from '@/ui-kit/icon/IconOld.vue'; | ||
| import LfTimeline from './Timeline.vue'; | ||
| import LfTimelineItem from './TimelineItem.vue'; | ||
| import { TimelineGroup } from './types/TimelineTypes'; | ||
|
|
||
| export default { | ||
| title: 'LinuxFoundation/Timeline', | ||
| component: LfTimeline, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| groups: { | ||
| description: 'Timeline groups', | ||
| control: 'object', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Regular = { | ||
| args: { | ||
| groups: [ | ||
| { | ||
| label: 'Group 1', labelLink: { name: 'organizationView', params: { id: '1' } }, icon: 'https://avatars.githubusercontent.com/u/38015056?v=4', items: [{ id: 1, label: 'Item 1', date: 'Aug 2024 - Dec 2024' }, { id: 2, label: 'Item 2', date: 'Aug 2024' }, { id: 3, label: 'Item 3', date: 'Aug 2024' }, { id: 4, label: 'Item 4', date: 'Aug 2024' }], | ||
| }, | ||
| { | ||
| label: 'Group 2', labelLink: { name: 'organizationView', params: { id: '2' } }, icon: 'https://avatars.githubusercontent.com/u/38015056?v=4', items: [{ id: 3, label: 'Item 3', date: 'Aug 2024' }, { id: 4, label: 'Item 4', date: 'Aug 2024' }], | ||
| }, | ||
| ], | ||
| }, | ||
| render: (args: { groups: TimelineGroup[] }) => ({ | ||
| components: { | ||
| LfTimeline, LfTimelineItem, LfSvg, LfIconOld, | ||
| }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: `<lf-timeline :groups="args.groups" v-slot="{ group }"> | ||
| <lf-timeline-item :data="item" v-for="item in group.items" :key="item.id"> | ||
| <!-- SAMPLE CONTENT --> | ||
| <div class="text-small text-gray-900 mb-1.5 flex items-center gap-1.5"> | ||
| <lf-svg name="id-card" class="h-4 w-4 text-gray-400" /> | ||
| <p class="truncate text-gray-900" style="max-width: 30ch"> | ||
| {{ item.label }} | ||
| </p> | ||
| </div> | ||
| <p class="text-small text-gray-500 mb-1.5 flex items-center"> | ||
| <lf-icon-old name="calendar-line" :size="16" class="mr-1.5 text-gray-400" /> | ||
| {{ item.date }} | ||
| </p> | ||
| </lf-timeline-item> | ||
| </lf-timeline>`, | ||
| }), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <template> | ||
| <div | ||
| v-for="group in props.groups" | ||
| :key="group.label" | ||
| class="c-timeline" | ||
| @mouseover="emit('onGroupHover', group)" | ||
| @mouseleave="emit('onGroupHover', null)" | ||
| > | ||
| <div class="c-timeline__group-icon"> | ||
| <lf-avatar | ||
| :name="group.label" | ||
| :src="group.icon" | ||
| :size="24" | ||
| class="!rounded-md border border-gray-200 min-w-6" | ||
| img-class="!object-contain" | ||
| /> | ||
| </div> | ||
| <div class="grow"> | ||
| <div class="c-timeline__group-label"> | ||
| <router-link | ||
| v-if="group.labelLink" | ||
| :to="group.labelLink" | ||
| class="cursor-pointer text-gray-900 hover:text-primary-500" | ||
| > | ||
| {{ group.label }} | ||
| </router-link> | ||
| <span v-else> | ||
| {{ group.label }} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="c-timeline__items"> | ||
| <slot name="default" :group="group" :hovered="hovered" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import LfAvatar from '@/ui-kit/avatar/Avatar.vue'; | ||
| import { ref } from 'vue'; | ||
| import { TimelineGroup } from './types/TimelineTypes'; | ||
| const emit = defineEmits(['onGroupHover']); | ||
| const props = defineProps<{ | ||
| groups: TimelineGroup[]; | ||
| }>(); | ||
| const hovered = ref(false); | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: 'LfTimeline', | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped lang="scss" src="./timeline.scss" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <div class="c-timeline__item"> | ||
| <div class="c-timeline__item-dot" /> | ||
| <div class="c-timeline__item-content"> | ||
| <slot :data="props.data" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| const props = defineProps<{ | ||
| data: any; | ||
| }>(); | ||
| </script> | ||
| <script lang="ts"> | ||
| export default { | ||
| name: 'LfTimelineItem', | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .c-timeline { | ||
| @apply flex items-start gap-3; | ||
| &__group-label { | ||
| @apply flex items-center font-semibold text-medium leading-6 mb-1 truncate text-black hover:text-primary-500 transition block w-full overflow-hidden; | ||
| } | ||
| // &__border { | ||
| // @apply w-px h-full bg-gray-200; | ||
| // } | ||
|
|
||
| ::v-deep .c-timeline__item { | ||
| @apply relative mb-4; | ||
| .c-timeline__item-dot { | ||
| @apply w-3 h-3 z-[2] bg-gray-200 rounded-full absolute top-[2px] -left-[30px] border-3 border-white; | ||
| } | ||
| .c-timeline__item-content { | ||
| @apply relative; | ||
| &::before { | ||
| content: ''; | ||
| @apply w-px bg-gray-200 absolute top-[2px] left-[-25px]; | ||
| height: calc(100% + 25px); | ||
| } | ||
| } | ||
|
|
||
| &:first-child { | ||
| .c-timeline__item-dot { | ||
| @apply invisible; | ||
| } | ||
| } | ||
|
|
||
| &:last-child { | ||
| .c-timeline__item-content { | ||
| &::before { | ||
| @apply h-[5px]; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import type { RouteLocationRaw } from 'vue-router'; | ||
|
|
||
| export interface TimelineGroup { | ||
| id: number; | ||
| label: string; | ||
| labelLink?: RouteLocationRaw; | ||
| icon?: string; | ||
| items: any[]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters