feat(VTimeline): add a new VTimeline component (#171)

* feat(VTimeline): add new `VTimeline component` * chore(VTimeline): fix dot position & make content full width * chore(VTimeline): change storybook layout to padded and add styled content example story * chore(VTimeline): export sub components * chore(VTimeline): extract divider into component * chore(VTimeline): update dev deps * chore(VTimeline): update example * chore(VTimeline): fix types * feat(ui): register timeline components * feat(VTimeline): add dark mode support * docs(VTimeline): add timeline docs * test: add v-timeline test * fix(VTimeline): load timeline styles * feat(nuxt): auto-import timeline components
gitsindonesia · Apr 3, 2023 · 93e3105 · 93e3105
1 parent 3226f98
commit 93e3105
Show file tree

Hide file tree

Showing 27 changed files with 983 additions and 2 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -155,6 +155,10 @@ export default defineConfig({
             text: 'Tabs',
             link: '/components/tabs',
           },
+          {
+            text: 'Timeline',
+            link: '/components/timeline',
+          },
           {
             text: 'Toast',
             link: '/components/toast',

diff --git a/docs/components/timeline.md b/docs/components/timeline.md
@@ -0,0 +1,158 @@
+---
+outline: deep
+---
+
+# Timeline
+
+The `VTimeline` component is a Vue timeline component that can display a list of events or steps in a vertical or horizontal layout. It provides an optional dashed styling and a customizable divider component to separate the timeline items.
+
+## Usage
+
+### Basic Usage
+
+To use the `VTimeline` component, you can simply include it in your template like this:
+
+<LivePreview src="components-timeline--default">
+
+```vue
+<script setup lang="ts">
+const items = [
+  {
+    date: 'June 2022',
+    title: 'New feature release',
+    description:
+      "We've released an exciting new feature that will change the way you use our product.",
+    link: '#',
+    icon: 'mdi:rocket',
+    button: 'View release notes',
+    dot: {
+      color: 'primary.100',
+      textColor: 'primary.600',
+    },
+  },
+  {
+    date: 'May 2022',
+    title: 'User interface redesign',
+    description:
+      "We've updated our user interface to improve usability and make it more intuitive.",
+    link: '#',
+    icon: 'mdi:palette',
+    dot: {
+      color: 'gray.100',
+      textColor: 'gray.600',
+    },
+  },
+  {
+    date: 'April 2022',
+    title: 'Server migration',
+    description:
+      "We're moving our servers to a new data center to improve performance and reliability.",
+    link: '#',
+    icon: 'mdi:server',
+    dot: {
+      color: 'warning.100',
+      textColor: 'warning.600',
+    },
+  },
+  {
+    date: 'March 2022',
+    title: 'New logo',
+    description:
+      "We've updated our logo to make it more recognizable and memorable.",
+    link: '#',
+    icon: 'mdi:brush',
+    dot: {
+      color: 'error.100',
+      textColor: 'error.600',
+    },
+  },
+];
+</script>
+
+<template>
+  <VTimeline>
+    <VTimelineItem v-for="item in items" :key="item.title">
+      <VTimelineItemDot v-bind="item.dot">
+        <VIcon :name="item.icon" size="xs" />
+      </VTimelineItemDot>
+      <VTimelineItemContent>
+        <VText font-weight="semibold">
+          {{ item.title }}
+        </VText>
+        <VText variant="sm" color="gray.500" class="mt-1">
+          Published on {{ item.date }}
+        </VText>
+        <VText color="gray.600" class="mt-1">
+          {{ item.description }}
+        </VText>
+        <VBtn v-if="item.button" class="mt-4">
+          {{ item.button }}
+        </VBtn>
+      </VTimelineItemContent>
+    </VTimelineItem>
+  </VTimeline>
+</template>
+```
+
+</LivePreview>
+
+### Dashed
+
+To apply dashed style to the timeline divider, add `dashed` prop.
+
+<LivePreview src="components-timeline--default">
+
+```vue {4}
+<!-- more code -->
+
+<template>
+  <VTimeline dashed>
+    <!-- more code -->
+  </VTimeline>
+</template>
+```
+
+</LivePreview>
+
+### Horizontal
+
+To change the timeline layout to horizontal, add `horizontal` prop.
+
+<LivePreview src="components-timeline--default">
+
+```vue {4}
+<!-- more code -->
+
+<template>
+  <VTimeline horizontal>
+    <!-- more code -->
+  </VTimeline>
+</template>
+```
+
+</LivePreview>
+
+## Props
+
+| Name                        | Type      | Default | Description                                                         |
+| --------------------------- | --------- | ------- | ------------------------------------------------------------------- |
+| [`dashed`](#dashed)         | `boolean` | `false` | Determines whether the timeline is rendered with a dashed style.    |
+| [`horizontal`](#horizontal) | `boolean` | `false` | Determines whether the timeline is rendered in a horizontal layout. |
+
+## Slots
+
+| Name      | Description                                                                                                                                                                |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `default` | The default slot is used to render the timeline items.                                                                                                                     |
+| `divider` | The divider slot can be used to customize the divider component that separates the timeline items. If not provided, the default `VTimelineDivider` component will be used. |
+
+## Sub Components
+
+- [`VTimelineDivider`](#timeline-divider)
+- [`VTimelineItem`](#timeline-item)
+- [`VTimelineItemDot`](#timeline-item-dot)
+- [`VTimelineItemContent`](#timeline-item-content)
+
+## Storybook
+
+View Storybook documentation [here](https://gits-ui.web.app/?path=/story/components-timeline--default).
diff --git a/packages/nuxt/playground/layouts/default.vue b/packages/nuxt/playground/layouts/default.vue
@@ -103,6 +103,10 @@ const components = [
     name: 'ProgressCircular',
     href: '#progress-circular',
   },
+  {
+    name: 'Timeline',
+    href: '#timeline',
+  },
 ];
 </script>
 

diff --git a/packages/nuxt/playground/pages/index.vue b/packages/nuxt/playground/pages/index.vue
@@ -20,6 +20,58 @@ const rating = ref(2);
 
 const ckeditorContent = ref('');
 const quillContent = ref('');
+
+const timelineItems = [
+  {
+    date: 'June 2022',
+    title: 'New feature release',
+    description:
+      "We've released an exciting new feature that will change the way you use our product.",
+    link: '#',
+    icon: 'mdi:rocket',
+    button: 'View release notes',
+    dot: {
+      color: 'primary.100',
+      textColor: 'primary.600',
+    },
+  },
+  {
+    date: 'May 2022',
+    title: 'User interface redesign',
+    description:
+      "We've updated our user interface to improve usability and make it more intuitive.",
+    link: '#',
+    icon: 'mdi:palette',
+    dot: {
+      color: 'gray.100',
+      textColor: 'gray.600',
+    },
+  },
+  {
+    date: 'April 2022',
+    title: 'Server migration',
+    description:
+      "We're moving our servers to a new data center to improve performance and reliability.",
+    link: '#',
+    icon: 'mdi:server',
+    dot: {
+      color: 'warning.100',
+      textColor: 'warning.600',
+    },
+  },
+  {
+    date: 'March 2022',
+    title: 'New logo',
+    description:
+      "We've updated our logo to make it more recognizable and memorable.",
+    link: '#',
+    icon: 'mdi:brush',
+    dot: {
+      color: 'error.100',
+      textColor: 'error.600',
+    },
+  },
+];
 </script>
 
 <template>
@@ -373,7 +425,9 @@ const quillContent = ref('');
     </div>
 
     <hr class="dark:border-neutral-700" />
-    <h3 id="quill-editor" class="text-xl font-semibold">Progress Circular</h3>
+    <h3 id="progress-circular" class="text-xl font-semibold">
+      Progress Circular
+    </h3>
     <div>
       <VProgressCircular :model-value="50" />
       <VProgressCircular :model-value="50" indeterminate />
@@ -393,6 +447,32 @@ const quillContent = ref('');
         {{ value }}%
       </VProgressCircular>
     </div>
+
+    <hr class="dark:border-neutral-700" />
+    <h3 id="timeline" class="text-xl font-semibold">Timeline</h3>
+    <div>
+      <VTimeline>
+        <VTimelineItem v-for="item in timelineItems" :key="item.title">
+          <VTimelineItemDot v-bind="item.dot">
+            <VIcon :name="item.icon" size="xs" />
+          </VTimelineItemDot>
+          <VTimelineItemContent>
+            <VText font-weight="semibold">
+              {{ item.title }}
+            </VText>
+            <VText variant="sm" color="gray.500" class="mt-1">
+              Published on {{ item.date }}
+            </VText>
+            <VText color="gray.600" class="mt-1">
+              {{ item.description }}
+            </VText>
+            <VBtn v-if="item.button" class="mt-4">
+              {{ item.button }}
+            </VBtn>
+          </VTimelineItemContent>
+        </VTimelineItem>
+      </VTimeline>
+    </div>
   </div>
 </template>
 

diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -368,6 +368,26 @@ const components: AddComponentOptions[] = [
     name: 'VProgressCircular',
     filePath: '@morpheme/progress-circular/src/VProgressCircular.vue',
   },
+  {
+    name: 'VTimeline',
+    filePath: '@morpheme/timeline/src/VTimeline.vue',
+  },
+  {
+    name: 'VTimelineDivider',
+    filePath: '@morpheme/timeline/src/VTimelineDivider.vue',
+  },
+  {
+    name: 'VTimelineItem',
+    filePath: '@morpheme/timeline/src/VTimelineItem.vue',
+  },
+  {
+    name: 'VTimelineItemDot',
+    filePath: '@morpheme/timeline/src/VTimelineItemDot.vue',
+  },
+  {
+    name: 'VTimelineItemContent',
+    filePath: '@morpheme/timeline/src/VTimelineItemContent.vue',
+  },
 ];
 
 export interface ModuleOptions {

diff --git a/packages/timeline/CHANGELOG.md b/packages/timeline/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.