From 73a3c5f430c58fcd84fc95e173e093bed4cbf595 Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Thu, 16 Nov 2023 15:11:13 -0300
Subject: [PATCH] feat(Feed): new component

---
 .../content/examples/FeedExampleObjects.vue   |  36 ++++
 .../content/examples/FeedExampleSlotBody.vue  |  21 +++
 .../content/examples/FeedExampleSlotIcon.vue  |  17 ++
 .../examples/FeedExampleSlotTrailing.vue      |  19 ++
 docs/content/2.elements/12.feed.md            | 139 +++++++++++++++
 src/colors.ts                                 |   6 +
 src/runtime/components/elements/Feed.vue      | 162 ++++++++++++++++++
 src/runtime/types/feed.d.ts                   |  11 ++
 src/runtime/types/index.d.ts                  |   1 +
 src/runtime/ui.config.ts                      |  38 ++++
 10 files changed, 450 insertions(+)
 create mode 100644 docs/components/content/examples/FeedExampleObjects.vue
 create mode 100644 docs/components/content/examples/FeedExampleSlotBody.vue
 create mode 100644 docs/components/content/examples/FeedExampleSlotIcon.vue
 create mode 100644 docs/components/content/examples/FeedExampleSlotTrailing.vue
 create mode 100644 docs/content/2.elements/12.feed.md
 create mode 100644 src/runtime/components/elements/Feed.vue
 create mode 100644 src/runtime/types/feed.d.ts

diff --git a/docs/components/content/examples/FeedExampleObjects.vue b/docs/components/content/examples/FeedExampleObjects.vue
new file mode 100644
index 0000000000..1bd9efb9b4
--- /dev/null
+++ b/docs/components/content/examples/FeedExampleObjects.vue
@@ -0,0 +1,36 @@
+<template>
+  <UFeed :feed="feed" />
+</template>
+
+<script setup>
+const feed = [
+  {
+    title: 'Cloned',
+    description: 'Repository retrieved from GitHub',
+    icon: 'i-heroicons-cloud-arrow-down',
+    trailing: 'Oct 8 09:35:05',
+    color: 'amber'
+  },
+  {
+    title: 'Installed',
+    description: 'Dependencies installed',
+    icon: 'i-heroicons-clipboard-document-check',
+    trailing: 'Oct 8 09:36:21',
+    color: 'yellow'
+  },
+  {
+    title: 'Configured',
+    description: 'App configuration applied',
+    icon: 'i-heroicons-wrench',
+    trailing: 'Oct 8 09:36:32',
+    color: 'lime'
+  },
+  {
+    title: 'Deployed',
+    description: 'App running',
+    icon: 'i-heroicons-paper-airplane',
+    trailing: 'Oct 8 09:36:38',
+    color: 'green'
+  }
+]
+</script>
diff --git a/docs/components/content/examples/FeedExampleSlotBody.vue b/docs/components/content/examples/FeedExampleSlotBody.vue
new file mode 100644
index 0000000000..ca1d8c03f7
--- /dev/null
+++ b/docs/components/content/examples/FeedExampleSlotBody.vue
@@ -0,0 +1,21 @@
+<template>
+  <UFeed :feed="feed" :indicators="false">
+    <template #body="{ item }">
+      <div class="space-y-2">
+        <div class="text-xl">
+          {{ item.title }}
+        </div>
+        <div class="px-3 py-2 text-gray-100 text-sm font-mono ring-1 ring-gray-800 rounded bg-gray-950 shadow">
+          &gt; {{ item.description }}
+        </div>
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Process started', description: 'transcode --file=/storage/cf423da1.mp4' },
+  { title: 'Process finished', description: 'cf423da1.mp4 transcode successful' }
+]
+</script>
diff --git a/docs/components/content/examples/FeedExampleSlotIcon.vue b/docs/components/content/examples/FeedExampleSlotIcon.vue
new file mode 100644
index 0000000000..56df1b31f2
--- /dev/null
+++ b/docs/components/content/examples/FeedExampleSlotIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <UFeed :feed="feed">
+    <template #icon="{ item }">
+      <div class="px-2 py-0.5 font-sm font-mono rounded-full bg-gray-200 dark:bg-gray-700 flex items-center gap-2">
+        <UIcon name="i-heroicons-clock" />
+        {{ item.time }}
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Task started', time: '20:30' },
+  { title: 'Task finished', time: '20:34' }
+]
+</script>
diff --git a/docs/components/content/examples/FeedExampleSlotTrailing.vue b/docs/components/content/examples/FeedExampleSlotTrailing.vue
new file mode 100644
index 0000000000..66d9573b2d
--- /dev/null
+++ b/docs/components/content/examples/FeedExampleSlotTrailing.vue
@@ -0,0 +1,19 @@
+<template>
+  <UFeed :feed="feed">
+    <template #trailing="{ item }">
+      <div v-if="item.trailing" class="mt-1.5 font-mono text-xs text-gray-500 flex items-center gap-2">
+        {{ item.trailing }} <UIcon name="i-heroicons-clock" />
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Device turned on' },
+  { title: 'OS boot', trailing: '3s' },
+  { title: 'OS drivers load', trailing: '12s' },
+  { title: 'OS ready', trailing: '13s' },
+  { title: 'User profile loaded', trailing: '5s' }
+]
+</script>
diff --git a/docs/content/2.elements/12.feed.md b/docs/content/2.elements/12.feed.md
new file mode 100644
index 0000000000..000e0861a0
--- /dev/null
+++ b/docs/content/2.elements/12.feed.md
@@ -0,0 +1,139 @@
+---
+title: 'Feed'
+description: Show an ordered list of events vertically
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Feed.vue
+---
+
+## Usage
+
+Add an array of events in the `feed` prop.
+
+::component-card
+---
+baseProps:
+  feed:
+    - Cloned
+    - Installed
+    - Configured
+    - Deployed
+---
+::
+
+You may also use an array of objects as a feed, with the following properties:
+
+- `title` - The item title text
+- `description` - The secondary line of text below the title
+- `trailing` - The third line of text at the end of the item
+- `color` - The color of the indicator
+- `icon` - The icon to add as an indicator
+
+:component-example{component="feed-example-objects"}
+
+### Indicators
+
+You can transform the indicators to a small dot for all the events by setting the `indicators` prop to `false`.
+
+::component-card
+---
+baseProps:
+  feed:
+    - title: Cloned
+      description: Repository retrieved from GitHub
+      icon: i-heroicons-cloud-arrow-down
+      trailing: Oct 8 09:35:05
+    - title: Installed
+      description: Dependencies installed
+      icon: i-heroicons-clipboard-document-check
+      trailing: Oct 8 09:36:21
+    - title: Configured
+      description: App configuration applied
+      icon: i-heroicons-wrench
+      trailing: Oct 8 09:36:32
+    - title: Deployed
+      description: App running
+      icon: i-heroicons-paper-airplane
+      trailing: Oct 8 09:36:38
+props:
+  indicators: false
+---
+::
+
+### Separators
+
+You may disable the separators by setting `separators` to `false` 
+
+::component-card
+---
+baseProps:
+  feed:
+    - Cloned
+    - Installed
+    - Configured
+    - Deployed
+props:
+  separators: false
+  indicators: false
+---
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the indicators. If an event contains the `color` property, it will take precedence over the element prop.
+
+::component-card
+---
+baseProps:
+  feed:
+    - title: Cloned
+      description: Repository retrieved from GitHub
+      icon: i-heroicons-cloud-arrow-down
+      trailing: Oct 8 09:35:05
+    - title: Installed
+      description: Dependencies installed
+      icon: i-heroicons-clipboard-document-check
+      trailing: Oct 8 09:36:21
+    - title: Configured
+      description: App configuration applied
+      icon: i-heroicons-wrench
+      trailing: Oct 8 09:36:32
+    - title: Deployed
+      description: App running
+      icon: i-heroicons-paper-airplane
+      trailing: Oct 8 09:36:38
+      color: 'gray'
+props:
+  indicators: true
+  color: 'primary'
+---
+::
+
+## Slots
+
+### `icon`
+
+You have access to the item indicator through the `icon` prop, that receives the item and its index on the feed. You can use this to change how the indicator is shown on the feed for each item.
+
+:component-example{component="feed-example-slot-icon"}
+
+### `body`
+
+You can change how the feed item contents is presented using the `body` prop. It receives the item and the index position.
+
+:component-example{component="feed-example-slot-body"}
+
+### `trailing`
+
+You can change how the trailing text is presented using the `trailing` prop. It receives the item and the index position.
+
+:component-example{component="feed-example-slot-trailing"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
diff --git a/src/colors.ts b/src/colors.ts
index 2e853d5615..a29127f77d 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -188,6 +188,12 @@ const safelistByComponent = {
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-500`)
   }],
+  feed: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-200`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-700`),
+    variants: ['dark']
+  }],
   notification: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
     variants: ['dark']
diff --git a/src/runtime/components/elements/Feed.vue b/src/runtime/components/elements/Feed.vue
new file mode 100644
index 0000000000..a432fabf69
--- /dev/null
+++ b/src/runtime/components/elements/Feed.vue
@@ -0,0 +1,162 @@
+<template>
+  <ol :class="ui.base" v-bind="attrs">
+    <template v-for="(item, key) in items" :key="key">
+      <li :class="ui.item">
+        <div :class="ui.indicator.base">
+          <div :class="indicatorContainerClass">
+            <div>
+              <slot name="icon" v-bind="{ item, key }">
+                <div :class="[indicatorIconClass, getIndicatorColorClass(item)]">
+                  <template v-if="isDot" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" />
+                  <template v-else>
+                    {{ key + 1 }}
+                  </template>
+                </div>
+              </slot>
+            </div>
+            <div v-if="withSeparators && key < items.length - 1" :class="separatorClass" />
+          </div>
+        </div>
+        <div :class="ui.body.base" class="">
+          <slot name="body" v-bind="{ item, key }">
+            <div :class="titleClass">
+              {{ item.title }}
+            </div>
+            <div v-if="item.description" :class="descriptionClass">
+              <small>{{ item.description }}</small>
+            </div>
+          </slot>
+        </div>
+        <div :class="ui.trailing.base">
+          <slot name="trailing" v-bind="{ item, key }">
+            <div :class="trailingTextClass">
+              <small>{{ item.trailing }}</small>
+            </div>
+          </slot>
+        </div>
+      </li>
+    </template>
+  </ol>
+</template>
+
+<script lang="ts">
+import { computed, toRef, defineComponent } from 'vue'
+import type { PropType, ComputedRef } from 'vue'
+import { twJoin } from 'tailwind-merge'
+import type { Strategy, FeedItem, FeedIndicatorColor } from '../../types'
+import UIcon from './Icon.vue'
+import appConfig from '#build/app.config'
+import { mergeConfig } from '#ui/utils'
+import { feed } from '#ui/ui.config'
+import { useUI } from '#ui/composables/useUI'
+
+const config = mergeConfig<typeof feed>(appConfig.ui.strategy, appConfig.ui.feed, feed)
+
+export default defineComponent({
+  components: {
+    UIcon
+  },
+  inheritAttrs: false,
+  props: {
+    feed: {
+      type: Array as PropType<String[] | FeedItem[]>,
+      default: () => []
+    },
+    indicators: {
+      type: Boolean,
+      default: true
+    },
+    separators: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String as PropType<FeedIndicatorColor>,
+      default: () => config.default.color,
+      validator (value: string) {
+        return [...appConfig.ui.colors, 'gray'].includes(value)
+      }
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  setup (props) {
+    const { ui, attrs } = useUI('feed', toRef(props, 'ui'), config)
+
+    const items: ComputedRef<FeedItem[]> = computed(() => props.feed.map(item => {
+      return typeof item === 'string' ? { title: item } : item
+    }))
+
+    const isDot = computed(() => !props.indicators)
+
+    const withSeparators = computed(() => props.separators)
+
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.container,
+        isDot.value ? ui.value.indicator.margin : ''
+      )
+    })
+
+    const indicatorIconClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.icon.base,
+        ui.value.indicator.icon.rounded,
+        isDot.value ? ui.value.indicator.icon.dot : ui.value.indicator.icon.size
+      )
+    })
+
+    function getIndicatorColorClass (item: FeedItem) {
+      return twJoin(
+        ui.value.indicator.icon.background.replaceAll('{color}', item.color ?? props.color)
+      )
+    }
+
+    const separatorClass = computed(() => {
+      return twJoin(
+        ui.value.separator.base,
+        ui.value.separator.background.replaceAll('{color}', props.color)
+      )
+    })
+
+    const titleClass = computed(() => {
+      return twJoin(
+        ui.value.body.title.replaceAll('{color}', props.color)
+      )
+    })
+
+    const descriptionClass = computed(() => {
+      return twJoin(
+        ui.value.body.description.replaceAll('{color}', props.color)
+      )
+    })
+
+    const trailingTextClass = computed(() => {
+      return twJoin(
+        ui.value.trailing.text.base,
+        ui.value.trailing.text.align,
+        ui.value.trailing.text.color.replaceAll('{color}', props.color)
+      )
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      items,
+      isDot,
+      withSeparators,
+      indicatorContainerClass,
+      indicatorIconClass,
+      getIndicatorColorClass,
+      separatorClass,
+      titleClass,
+      descriptionClass,
+      trailingTextClass
+    }
+  }
+})
+</script>
diff --git a/src/runtime/types/feed.d.ts b/src/runtime/types/feed.d.ts
new file mode 100644
index 0000000000..3c7afbaa92
--- /dev/null
+++ b/src/runtime/types/feed.d.ts
@@ -0,0 +1,11 @@
+import colors from '#ui-colors'
+
+export type FeedIndicatorColor = 'gray' | typeof colors[number]
+
+export interface FeedItem extends Record<string, any> {
+  title: string,
+  description?: string,
+  trailing?: string,
+  icon?: string,
+  color?: FeedIndicatorColor
+}
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 1b9c1ed333..4914df0264 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -8,6 +8,7 @@ export * from './dropdown'
 export * from './form'
 export * from './link'
 export * from './meter'
+export * from './feed'
 export * from './notification'
 export * from './popper'
 export * from './progress'
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 6dc2781428..a67ab40706 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -550,6 +550,44 @@ export const meterGroup = {
   }
 }
 
+export const feed = {
+  base: 'flex flex-col',
+  item: 'flex flex-row',
+  indicator: {
+    base: 'h-full',
+    container: 'h-full flex flex-col items-center transition-all',
+    margin: 'mt-3',
+    icon: {
+      base: 'flex items-center justify-center transition-all',
+      background: 'bg-{color}-200 dark:bg-{color}-700',
+      color: '',
+      rounded: 'rounded-full',
+      size: 'h-8 w-8',
+      dot: 'h-2 w-2'
+    }
+  },
+  separator: {
+    base: 'h-full w-px my-1',
+    background: 'bg-gray-200 dark:bg-gray-700'
+  },
+  body: {
+    base: 'grow px-4 pb-4 mt-0.5',
+    title: 'text-gray-900 dark:text-gray-50',
+    description: 'text-gray-500 dark:text-gray-500'
+  },
+  trailing: {
+    base: 'mt-0.5',
+    text: {
+      base: '',
+      align: 'text-right',
+      color: 'text-gray-500 dark:text-gray-500'
+    }
+  },
+  default: {
+    color: 'gray'
+  }
+}
+
 // Forms
 
 export const input = {