Merge pull request #6904 from nextcloud-libraries/chore/refactor/empty-content

refactor(NcEmptyContent): migrate component to Typescript

Author: susnux

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -729,7 +729,7 @@ import IconStarOutline from 'vue-material-design-icons/StarOutline.vue'
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
 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 NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'
 import Focus from '../../directives/Focus/index.ts'

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,73 @@ export default {
 ```
 </docs>
 
+<script setup lang="ts">
+import type { Slot } from 'vue'
+
+withDefaults(defineProps<{
+	/**
+	 * Desription of the empty content
+	 *
+	 * @example 'No comments yet, start the conversation!'
+	 */
+	description?: string
+
+	/**
+	 * A header message about an empty content shown.
+	 *
+	 * @example 'No comments'
+	 */
+	name?: 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 -->
 			<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>
 		</slot>
 		<p v-if="description !== '' || $slots.description" class="empty-content__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 -->
 			<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;

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'