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