refactor(NcVNodes): migrate component to Typescript

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -391,18 +391,18 @@ Just set the `pinned` prop.
 </template>
 
 <script>
-import NcActions from '../NcActions/index.js'
-import NcActionButton from '../NcActionButton/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
-import NcVNodes from '../NcVNodes/index.js'
-import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
-import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { createElementId } from '../../utils/createElementId.ts'
 import { t } from '../../l10n.js'
 
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
+import NcActions from '../NcActions/index.js'
+import NcActionButton from '../NcActionButton/index.js'
+import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
+import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
+import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import NcVNodes from '../NcVNodes/index.ts'
 
 export default {
 	name: 'NcAppNavigationItem',

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -158,13 +158,13 @@ export default {
 </template>
 
 <script>
-import NcDialog from '../NcDialog/index.js'
-import NcVNodes from '../NcVNodes/index.js'
+import debounce from 'debounce'
+import { warn } from 'vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { t } from '../../l10n.js'
 
-import debounce from 'debounce'
-import { warn } from 'vue'
+import NcDialog from '../NcDialog/index.js'
+import NcVNodes from '../NcVNodes/index.ts'
 
 export default {
 

src/components/NcAppSidebar/NcAppSidebarTabs.vue

@@ -54,8 +54,8 @@
 </template>
 
 <script>
-import NcVNodes from '../NcVNodes/index.js'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'
+import NcVNodes from '../NcVNodes/index.ts'
 
 export default {
 	name: 'NcAppSidebarTabs',

src/components/NcListItem/NcListItem.vue

@@ -535,7 +535,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 <script>
 import NcActions from '../NcActions/index.js'
 import NcCounterBubble from '../NcCounterBubble/index.js'
-import NcVNodes from '../NcVNodes/index.js'
+import NcVNodes from '../NcVNodes/index.ts'
 
 export default {
 	name: 'NcListItem',

src/components/NcVNodes/NcVNodes.vue

@@ -52,25 +52,28 @@ export default {
 ```
 </docs>
 
-<script>
-export default {
+<script lang="ts">
+import type { PropType, VNode } from 'vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
 	name: 'NcVNodes',
+
 	props: {
 		/**
 		 * The vnodes to render
 		 */
 		vnodes: {
-			type: [Array, Object],
+			type: [Array, Object] as PropType<VNode | VNode[]>,
 			default: null,
 		},
 	},
+
 	/**
 	 * The render function to display the component
-	 *
-	 * @return {object} The created VNode
 	 */
 	render() {
 		return this.vnodes || this.$slots?.default?.({})
 	},
-}
+})
 </script>

src/components/index.ts

@@ -63,7 +63,6 @@ export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
 export { default as NcModal } from './NcModal/index.js'
-export { default as NcVNodes } from './NcVNodes/index.js'
 export { default as NcNoteCard } from './NcNoteCard/index.js'
 export { default as NcPasswordField } from './NcPasswordField/index.js'
 export { default as NcPopover } from './NcPopover/index.js'
@@ -82,3 +81,4 @@ export { default as NcTextField } from './NcTextField/index.js'
 export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
 export { default as NcUserBubble } from './NcUserBubble/index.js'
 export { default as NcUserStatusIcon } from './NcUserStatusIcon/index.js'
+export { default as NcVNodes } from './NcVNodes/index.ts'