feat: add example implementation of FSXARenderContentElement (e-Spiri…

…t#79)

* feat: add example implementation of FSXARenderContentElement
* docs: document usage of FSXARenderContentElement

docs/modules/ROOT/pages/GettingStarted/SFC-Components.adoc

@@ -31,7 +31,7 @@ With this we can start writing our class.
 ----
 export default {
   name: 'TeaserSection',
-  extends: [FSXABaseSection]
+  extends: FSXABaseSection
 }
 ----
 
@@ -55,7 +55,7 @@ For the time being our `Teaser.vue` file should look something like this:
 import { FSXABaseSection } from 'fsxa-pattern-library'
 export default {
   name: 'TeaserSection',
-  extends: [FSXABaseSection]
+  extends: FSXABaseSection
 }
 </script>
 ----
@@ -95,7 +95,7 @@ export default {
     'teaser-section': Sections.TeaserSection,
     'rich-text': FSXARichText
   },
-  extends: [FSXABaseSection]
+  extends: FSXABaseSection
 }
 ----
 
@@ -104,8 +104,8 @@ Using them in our template is slightly more complicated than in the TSX example.
 [source,xml]
 ----
 <template>
-  <teaser-section 
-    kicker="Some kicker text" 
+  <teaser-section
+    kicker="Some kicker text"
     headline="This is a headline"
     text="So here is a lot of text" />
 </template>
@@ -118,8 +118,8 @@ First, let’s extend the above example by rendering the headline in our own cus
 [source,xml]
 ----
 <template>
-  <teaser-section 
-    kicker="Some kicker text" 
+  <teaser-section
+    kicker="Some kicker text"
     headline="This is a headline"
     text="So here is a lot of text">
     <template v-slot:headline="customHeadline">
@@ -181,7 +181,7 @@ export default {
     'teaser-section': Sections.TeaserSection,
     'rich-text': FSXARichText
   },
-  extends: [FSXABaseSection],
+  extends: FSXABaseSection,
   methods: {
     getMedia() {
       if (this.$attrs.payload.st_picture) {
@@ -300,7 +300,7 @@ export default {
     'teaser-section': Sections.TeaserSection,
     'rich-text': FSXARichText
   },
-  extends: [FSXABaseSection],
+  extends: FSXABaseSection,
   methods: {
     getButtonText() {
       return this.$attrs.payload.st_button

docs/modules/ROOT/pages/components/FSXARenderContentElement.adoc

@@ -0,0 +1,31 @@
+= FSXARenderContextElement
+
+. <<Introduction>>
+. <<Usage>>
+. <<Properties>>
+
+== Introduction
+
+The FSXARenderContextElement is there to render nested components within .vue files (Single File Components).
+
+== Usage
+
+You can pass your nested component as a property like in this example:
+
+[source,html]
+----
+<!-- components/fsxa/sections/Accordion.vue -->
+<template>
+  <div>
+    <div v-for="section in $attrs.payload.st_acc" :key="section.id">
+      <FSXARenderContentElement :element="section"></FSXARenderContentElement>
+    </div>
+  </div>
+</template>
+----
+
+== Properties
+
+=== `element` - PageBodyContent
+
+The nested element

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@nuxt/core": "^2.15.8",
     "@nuxtjs/axios": "^5.13.6",
-    "fsxa-nuxt-module": "^7.1.0",
+    "fsxa-nuxt-module": "^7.1.1",
     "nuxt-start": "^2.15.8"
   },
   "devDependencies": {
@@ -70,7 +70,7 @@
     "eslint-plugin-nuxt": ">=2.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "fsxa-api": "^10.1.0",
-    "fsxa-pattern-library": "^8.1.0",
+    "fsxa-pattern-library": "^8.2.0",
     "fsxa-ui": "^4.1.1",
     "husky": "^4.0.0",
     "jest": "^24.1.0",