refactor: 💄 refacto NcEmptyContent

src/components/Atoms/EmptyContent.vue

@@ -0,0 +1,22 @@
+<template>
+	<NcEmptyContent class="empty">
+		<slot />
+	</NcEmptyContent>
+</template>
+
+<script>
+import { NcEmptyContent } from '@nextcloud/vue'
+
+export default {
+	name: 'EmptyContent',
+	components: {
+		NcEmptyContent,
+	},
+}
+</script>
+
+<style scoped>
+.empty {
+	height: 100%;
+}
+</style>

src/views/Feed.vue

@@ -1,14 +1,14 @@
 <template>
 	<AppContent :padding="false">
 		<Loading v-if="loading" />
-		<NcEmptyContent
+		<EmptyContent
 			v-if="failed"
 			class="error"
 			:name="t('repod', 'Error loading feed')">
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
 		<Banner
 			v-if="feed"
 			:author="feed.author"
@@ -24,9 +24,9 @@
 import Alert from 'vue-material-design-icons/Alert.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import Banner from '../components/Feed/Banner.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import Episodes from '../components/Feed/Episodes.vue'
 import Loading from '../components/Atoms/Loading.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import { decodeUrl } from '../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
@@ -37,9 +37,9 @@ export default {
 		Alert,
 		AppContent,
 		Banner,
+		EmptyContent,
 		Episodes,
 		Loading,
-		NcEmptyContent,
 	},
 	data: () => ({
 		failed: false,

src/views/GPodder.vue

@@ -1,6 +1,6 @@
 <template>
 	<AppContent>
-		<NcEmptyContent class="empty" :name="t('repod', 'Missing required app')">
+		<EmptyContent class="empty" :name="t('repod', 'Missing required app')">
 			<template #action>
 				<NcButton :href="gPodderSyncUrl">
 					{{ t('repod', 'Install GPodder Sync') }}
@@ -9,14 +9,15 @@
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
 	</AppContent>
 </template>
 
 <script>
-import { NcButton, NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
+import { NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
@@ -24,8 +25,8 @@ export default {
 	components: {
 		Alert,
 		AppContent,
+		EmptyContent,
 		NcButton,
-		NcEmptyContent,
 	},
 	computed: {
 		gPodderSyncUrl() {
@@ -34,9 +35,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-.empty {
-	height: 100%;
-}
-</style>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
 	<AppContent>
-		<NcEmptyContent
+		<EmptyContent
 			v-if="!favs.length"
 			class="empty"
 			:description="
@@ -10,7 +10,7 @@
 			<template #icon>
 				<StarOffIcon :size="20" />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
 		<ul v-if="favs.length">
 			<li
 				v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
@@ -23,8 +23,8 @@
 
 <script>
 import AppContent from '../components/Atoms/AppContent.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import Favorites from '../components/Home/Favorites.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
 import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
 import { mapState } from 'pinia'
 import { useSubscriptions } from '../store/subscriptions.js'
@@ -33,8 +33,8 @@ export default {
 	name: 'Home',
 	components: {
 		AppContent,
+		EmptyContent,
 		Favorites,
-		NcEmptyContent,
 		StarOffIcon,
 	},
 	computed: {
@@ -42,9 +42,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-.empty {
-	height: 100%;
-}
-</style>