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'