Merge pull request #5664 from nextcloud-libraries/docs/NcVNodes

fix(NcVNodes): add re-export in root export and add docs

src/components/NcVNodes/NcVNodes.vue

@@ -20,6 +20,53 @@
  -
  -->
 
+<docs>
+A util component to render a VNode or an array of VNodes from the prop or the default slot.
+
+### Render the given or generated VNodes
+
+```vue
+<template>
+	<NcVNodes :vnodes="renderDiv()" />
+</template>
+
+<script>
+export default {
+	methods: {
+		renderDiv() {
+			return this.$createElement('div', 'This div was created programmatically as a VNode')
+		},
+	}
+}
+</script>
+```
+
+### Render content in a conditional wrapper
+
+```vue
+<template>
+	<div>
+		<p>
+			<NcCheckboxRadioSwitch :checked.sync="shouldRenderNcNoteCard">Render text inside "NcNoteCard"</NcCheckboxRadioSwitch>
+		</p>
+		<component :is="shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'">
+			<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a "NcNoteCard" wrapper</p>
+		</component>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			shouldRenderNcNoteCard: true,
+		}
+	},
+}
+</script>
+```
+</docs>
+
 <script>
 export default {
 	name: 'NcVNodes',
@@ -39,6 +86,8 @@ export default {
 	 * @return {object} The created VNode
 	 */
 	render(h) {
+		// eslint-disable-next-line jsdoc/check-tag-names
+		/** @slot Directly rendered content */
 		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
 	},
 }

src/components/index.js

@@ -88,8 +88,9 @@ export { default as NcSelectTags } from './NcSelectTags/index.js'
 export { default as NcSettingsInputText } from './NcSettingsInputText/index.js'
 export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js'
+export { default as NcTextArea } from './NcTextArea/index.js'
 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 NcTextArea } from './NcTextArea/index.js'
+export { default as NcVNodes } from './NcVNodes/index.js'