From 7282eb7000c3db938b1bd21016c0b96b52702077 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 21 Jul 2022 00:44:07 +0000
Subject: [PATCH] Only accept accessible material design icons

- Drop support for class based icons
- Title is now optional

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/EmptyContent/EmptyContent.vue | 57 +++++++++++++-------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/components/EmptyContent/EmptyContent.vue b/src/components/EmptyContent/EmptyContent.vue
index 5f5d745ae2..294781523b 100644
--- a/src/components/EmptyContent/EmptyContent.vue
+++ b/src/components/EmptyContent/EmptyContent.vue
@@ -24,12 +24,14 @@
 ### Basic use
 
 Use this component to display a message about an empty content.
-An icon and a title are mandatory.
-Providing an additional description is strongly advised.
+Providing an icon, title, and a description is strongly advised.
 
 ```
-<EmptyContent icon="icon-comment">
+<EmptyContent>
 	No comments
+	<template #icon>
+		<Comment />
+	</template>
 	<template #desc>No comments in here</template>
 </EmptyContent>
 ```
@@ -37,17 +39,21 @@ Providing an additional description is strongly advised.
 <template>
 	<EmptyContent>
 		Network error
-		<template #icon><Airplane /></template>
+		<template #icon>
+			<Airplane />
+		</template>
 		<template #desc>Unable to load the list</template>
 	</EmptyContent>
 </template>
 
 <script>
 import Airplane from 'vue-material-design-icons/Airplane'
+import Comment from 'vue-material-design-icons/Comment'
 
 export default {
 	components: {
-		Airplane
+		Airplane,
+		Comment,
 	}
 }
 </script>
@@ -57,15 +63,15 @@ export default {
 
 <template>
 	<div class="empty-content" role="note">
-		<div class="empty-content__icon" :class="icon" role="img">
-			<!-- @slot Optional icon slot -->
+		<div v-if="hasIcon" class="empty-content__icon">
+			<!-- @slot Optional material design icon -->
 			<slot name="icon" />
 		</div>
-		<h2 class="empty-content__title">
-			<!-- @slot Mandatory title -->
+		<h2 v-if="hasTitle" class="empty-content__title">
+			<!-- @slot Optional title -->
 			<slot />
 		</h2>
-		<p v-show="$slots.desc">
+		<p v-if="hasDescription">
 			<!-- @slot Optional description -->
 			<slot name="desc" />
 		</p>
@@ -75,13 +81,29 @@ export default {
 <script>
 export default {
 	name: 'EmptyContent',
-	props: {
-		/**
-		 * The main icon illustration
-		 */
-		icon: {
-			type: String,
-			default: '',
+
+	data() {
+		return {
+			/**
+			 * Making sure the slots are reactive
+			 */
+			slots: this.$slots,
+		}
+	},
+
+	computed: {
+		hasIcon() {
+			return this.slots.icon !== undefined
+		},
+
+		hasTitle() {
+			return this.slots?.default !== undefined
+				&& this.slots?.default[0]?.text
+		},
+
+		hasDescription() {
+			return this.slots?.desc !== undefined
+				&& this.slots?.desc[0]?.text
 		},
 	},
 }
@@ -117,5 +139,4 @@ export default {
 		text-align: center;
 	}
 }
-
 </style>