From 3ad87453b4e3a35214ce8760f049fad7d9daa172 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Wed, 15 Mar 2023 18:46:22 +0100
Subject: [PATCH] feat: Add slot for description of `NcEmptyContent`

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
---
 .../NcEmptyContent/NcEmptyContent.vue         | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
index ba6e2fec56..6dcf18b543 100644
--- a/src/components/NcEmptyContent/NcEmptyContent.vue
+++ b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -73,6 +73,34 @@ and add actions.
 <script>
 import Comment from 'vue-material-design-icons/Comment'
 
+export default {
+	components: {
+		Comment,
+	},
+}
+</script>
+```
+
+Similar to the `#title` slot, you could also use the `#description` slot.
+The content will be rendered within a paragraph so you can use any inline element,
+like a link.
+
+```
+<template>
+	<NcEmptyContent
+		title="No comments">
+		<template #icon>
+			<Comment />
+		</template>
+		<template #description>
+			<a href="https://en.wikipedia.org/wiki/Comment">What is even a comment?</a>
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script>
+import Comment from 'vue-material-design-icons/Comment'
+
 export default {
 	components: {
 		Comment,
@@ -94,7 +122,10 @@ export default {
 			</h2>
 		</slot>
 		<p v-if="hasDescription">
-			{{ description }}
+			<!-- @slot Optional formatted description rendered inside a paragraph -->
+			<slot name="description">
+				{{ description }}
+			</slot>
 		</p>
 		<div v-if="$slots.action" class="empty-content__action">
 			<!-- @slot Optional slot for a button or the like -->
@@ -123,8 +154,11 @@ export default {
 		hasTitle() {
 			return this.title !== ''
 		},
+		/**
+		 * Check if a description is given as either property or slot
+		 */
 		hasDescription() {
-			return this.description !== ''
+			return this.description !== '' || this.$slots.description?.[0]
 		},
 	},
 }