refactor(NcEmptyContent): migrate component to Typescript

- Typescript migration
- Use CSS instead of computation of slots

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -715,7 +715,7 @@ import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
 import NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'
 import NcButton from '../NcButton/index.ts'
-import NcEmptyContent from '../NcEmptyContent/index.js'
+import NcEmptyContent from '../NcEmptyContent/index.ts'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import Focus from '../../directives/Focus/index.js'
 import { vOnClickOutside as ClickOutside } from '@vueuse/components'

src/components/NcDashboardWidget/NcDashboardWidget.vue

@@ -215,7 +215,7 @@ export default {
 <script>
 import NcAvatar from '../NcAvatar/index.js'
 import NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'
-import NcEmptyContent from '../NcEmptyContent/index.js'
+import NcEmptyContent from '../NcEmptyContent/index.ts'
 
 import Check from 'vue-material-design-icons/Check.vue'
 

src/components/NcEmptyContent/NcEmptyContent.vue

@@ -121,57 +121,71 @@ export default {
 ```
 </docs>
 
+<script setup lang="ts">
+import type { Slot } from 'vue'
+
+withDefaults(defineProps<{
+	/**
+	 * A header message about an empty content shown.
+	 *
+	 * @example 'No comments'
+	 */
+	name?: string
+
+	/**
+	 * Desription of the empty content
+	 *
+	 * @example 'No comments yet, start the conversation!'
+	 */
+	description?: string
+}>(), {
+	description: '',
+	name: '',
+})
+
+defineSlots<{
+	/**
+	 * Optional slot for a button or the like
+	 */
+	action?: Slot
+
+	/**
+	 * Optional slot for adding an icon
+	 */
+	icon?: Slot
+
+	/**
+	 * Allow to add custom formatted name as an alternative to the name property.
+	 * The content passed shall be enclosed by a header element.
+	 */
+	name?: Slot
+
+	/**
+	 * Optional formatted description rendered inside a paragraph as an alternative to the description property.
+	 */
+	description?: Slot
+}>()
+</script>
+
 <template>
 	<div class="empty-content" role="note">
-		<div v-if="$slots.icon" class="empty-content__icon" aria-hidden="true">
-			<!-- @slot Optional material design icon -->
+		<div class="empty-content__icon" aria-hidden="true">
 			<slot name="icon" />
 		</div>
-		<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->
 		<slot name="name">
-			<span v-if="name !== ''" class="empty-content__name">
-				{{ name }}
-			</span>
+			<span class="empty-content__name" v-text="name" />
 		</slot>
-		<p v-if="description !== '' || $slots.description" class="empty-content__description">
-			<!-- @slot Optional formatted description rendered inside a paragraph -->
+		<p class="empty-content__description">
 			<slot name="description">
 				{{ description }}
 			</slot>
 		</p>
-		<div v-if="$slots.action" class="empty-content__action">
-			<!-- @slot Optional slot for a button or the like -->
+		<div class="empty-content__action">
 			<slot name="action" />
 		</div>
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'NcEmptyContent',
-
-	props: {
-		/**
-		 * A header message about an empty content shown
-		 * @example 'No comments'
-		 */
-		name: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Desription of the empty content
-		 * @example 'No comments yet, start the conversation!'
-		 */
-		description: {
-			type: String,
-			default: '',
-		},
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .empty-content {
 	display: flex;
@@ -198,6 +212,10 @@ export default {
 		background-position: center;
 		background-size: 64px;
 
+		&:empty {
+			display: none;
+		}
+
 		:deep(svg) {
 			width: 64px !important;
 			height: 64px !important;
@@ -212,15 +230,27 @@ export default {
 		font-weight: bold;
 		font-size: 20px;
 		line-height: 30px;
+
+		&:empty {
+			display: none;
+		}
 	}
 
 	&__description {
 		color: var(--color-text-maxcontrast);
+
+		&:empty {
+			display: none;
+		}
 	}
 
 	&__action {
 		margin-top: 8px;
 
+		&:empty {
+			display: none;
+		}
+
 		.modal-wrapper & {
 			margin-top: 20px;
 			display: flex;

src/components/NcEmptyContent/index.js renamed to src/components/NcEmptyContent/index.ts

@@ -44,7 +44,7 @@
 <script>
 import { searchProvider } from './../../../functions/reference/providerHelper.js'
 import { isUrl } from './utils.js'
-import NcEmptyContent from '../../NcEmptyContent/index.js'
+import NcEmptyContent from '../../NcEmptyContent/index.ts'
 import NcHighlight from '../../NcHighlight/index.js'
 import NcSelect from '../../NcSelect/index.js'
 import { t } from '../../../l10n.js'

src/components/NcRichText/NcReferencePicker/NcProviderList.vue

@@ -35,7 +35,7 @@
 <script>
 import NcReferenceWidget from '../NcReferenceWidget.vue'
 import { isUrl, delay } from './utils.js'
-import NcEmptyContent from '../../NcEmptyContent/index.js'
+import NcEmptyContent from '../../NcEmptyContent/index.ts'
 import NcLoadingIcon from '../../NcLoadingIcon/index.js'
 import NcTextField from '../../NcTextField/index.js'
 import { t } from '../../../l10n.js'

src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue

@@ -70,7 +70,7 @@
 <script>
 import NcSearchResult from './NcSearchResult.vue'
 import { isUrl, delay } from './utils.js'
-import NcEmptyContent from '../../NcEmptyContent/index.js'
+import NcEmptyContent from '../../NcEmptyContent/index.ts'
 import NcSelect from '../../NcSelect/index.js'
 
 import { t } from '../../../l10n.js'

src/components/NcRichText/NcReferencePicker/NcSearch.vue

@@ -53,7 +53,7 @@ export { default as NcDialog } from './NcDialog/index.js'
 export { default as NcDialogButton } from './NcDialogButton/index.js'
 export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'
 export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
-export { default as NcEmptyContent } from './NcEmptyContent/index.js'
+export { default as NcEmptyContent } from './NcEmptyContent/index.ts'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
 export { default as NcHeaderButton } from './NcHeaderButton/index'
 export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'