feat(#296): removed functional components

lib/components/T3CeBullets/T3CeBullets.vue

@@ -1,16 +1,16 @@
-<template functional>
+<template>
   <div class="t3-ce-bullets">
-    <t3-ce-header v-bind="props" />
+    <t3-ce-header v-bind="$props" />
     <ul
-      :is="props.bulletsType === 1 ? 'ol' : 'ul'"
-      v-if="props.bulletsType === 0 || props.bulletsType === 1"
+      :is="bulletsType === 1 ? 'ol' : 'ul'"
+      v-if="bulletsType === 0 || bulletsType === 1"
     >
-      <li v-for="(el, index) in props.bodytext" :key="index">
+      <li v-for="(el, index) in bodytext" :key="index">
         {{ el }}
       </li>
     </ul>
     <dl v-else>
-      <template v-for="(el, index) in props.bodytext">
+      <template v-for="(el, index) in bodytext">
         <dt :key="index">
           {{ el[0] }}
         </dt>

lib/components/T3CeDiv/T3CeDiv.vue

@@ -1,9 +1,8 @@
-<template functional>
+<template>
   <hr class="t3-ce-div">
 </template>
 <script>
 export default {
-  name: 'T3CeDiv',
-  functional: true
+  name: 'T3CeDiv'
 }
 </script>

lib/components/T3CeHtml/T3CeHtml.vue

@@ -1,13 +1,12 @@
-<template functional>
+<template>
   <div class="t3-ce-html">
-    <t3-html-parser :content="props.bodytext" />
+    <t3-html-parser :content="bodytext" />
   </div>
 </template>
 <script>
 import baseCe from '../../mixins/component/baseCe'
 export default {
   name: 'T3CeHtml',
-  functional: true,
   extends: baseCe,
   props: {
     bodytext: {

lib/components/T3CeMenuPages/T3CeMenuPagesList.vue

@@ -1,41 +1,40 @@
+<template>
+  <ul>
+    <li
+      v-for="child in children"
+      :key="child.id"
+    >
+      <t3-nav-link
+        :to="child.link"
+        :attrs="{
+          target: child.target || false,
+          title: child.title
+        }"
+      >
+        {{ child.title }}
+      </t3-nav-link>
+      <T3CeMenuPagesList
+        v-if="child.children"
+        :children="child.children"
+      />
+    </li>
+  </ul>
+</template>
+
 <script>
+import T3CeMenuPagesList from './T3CeMenuPagesList.vue'
+
 // helper component to render nested list
 export default {
-  functional: true,
+  name: 'T3CeMenuPagesList',
+  components: {
+    T3CeMenuPagesList
+  },
   props: {
     children: {
       type: Array,
       required: true
     }
-  },
-  render (createElement, ctx) {
-    return createElement(
-      'ul',
-      ctx.props.children.map((el) => {
-        return createElement('li', {}, [
-          createElement(
-            'nav-link',
-            {
-              props: {
-                to: el.link
-              },
-              attrs: {
-                target: el.target || false,
-                title: el.title
-              }
-            },
-            el.title
-          ),
-          el.children
-            ? createElement('T3CeMenuPagesList', {
-              props: {
-                children: el.children
-              }
-            })
-            : false
-        ])
-      })
-    )
   }
 }
 </script>

lib/components/T3CeShortcut/T3CeShortcut.vue

@@ -1,21 +1,18 @@
+<template>
+  <div>
+    <T3Renderer :shortcut="shortcut" />
+  </div>
+</template>
+
 <script>
+
 export default {
   name: 'T3CeShortcut',
-  functional: true,
   props: {
     shortcut: {
       type: Array,
       required: true
     }
-  },
-  render (createElement, ctx) {
-    return createElement('div', [
-      createElement('t3-ce-renderer', {
-        props: {
-          content: ctx.props.shortcut
-        }
-      })
-    ])
   }
 }
 </script>

lib/components/T3Frame/T3Frame.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="t3-ce-frame"
+    :class="computedClasses"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<!-- Content element wrapper - Section Frame
+All props are returned from appearance -->
+<script>
+export default {
+  name: 'T3Frame',
+  props: {
+    frameClass: {
+      type: String,
+      default: ''
+    },
+    layout: {
+      type: String,
+      default: 'default'
+    },
+    spaceAfter: {
+      type: String,
+      default: 'default'
+    },
+    spaceBefore: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    computedClasses () {
+      return [
+          `frame-${this.frameClass}`,
+          `layout-${this.layout}`,
+          `space-before-${
+            this.spaceBefore.length ? this.spaceBefore : 'default'
+          }`,
+          `space-after-${
+            this.spaceAfter.length ? this.spaceAfter : 'default'
+          }`
+      ]
+    }
+  }
+}
+</script>

lib/components/T3Frame/__tests__/T3Frame.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import T3CeDiv from '../../T3CeDiv/T3CeDiv'
-import T3Frame from '../T3Frame.js'
+import T3Frame from '../T3Frame.vue'
 
 describe('T3Frame', () => {
   let wrapper

lib/components/T3Frame/index.js

@@ -1 +1 @@
-export { default } from './T3Frame.js'
+export { default } from './T3Frame.vue'

lib/components/T3MediaFile/type/Audio.vue

@@ -1,17 +1,15 @@
-<template functional>
+<template>
   <audio
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-audio"
     controls
   >
-    <source :src="props.file.publicUrl" type="audio/mp3">
+    <source :src="file.publicUrl" type="audio/mp3">
   </audio>
 </template>
 <script>
 export default {
   name: 'MediaAudio',
-  functional: true,
   props: {
     file: {
       type: Object,

lib/components/T3MediaFile/type/Image.vue

@@ -1,23 +1,22 @@
-<template functional>
+<template>
   <div
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-image"
   >
     <component
-      :is="props.file.properties.link ? 't3-nav-link' : 'div'"
-      :to="props.file.properties.link"
+      :is="file.properties.link ? 't3-nav-link' : 'div'"
+      :to="file.properties.link"
     >
       <figure>
         <img
-          :src="props.file.publicUrl"
-          :height="props.file.properties.dimensions.height"
-          :width="props.file.properties.dimensions.width"
-          :alt="props.file.properties.alternative || false"
-          :title="props.file.properties.title || ''"
+          :src="file.publicUrl"
+          :height="file.properties.dimensions.height"
+          :width="file.properties.dimensions.width"
+          :alt="file.properties.alternative || false"
+          :title="file.properties.title || ''"
         >
-        <figcaption v-if="props.file.properties.description">
-          {{ props.file.properties.description }}
+        <figcaption v-if="file.properties.description">
+          {{ file.properties.description }}
         </figcaption>
       </figure>
     </component>
@@ -27,7 +26,6 @@
 <script>
 export default {
   name: 'MediaImage',
-  functional: true,
   props: {
     file: {
       type: Object,

lib/components/T3MediaFile/type/Video.vue

@@ -1,22 +1,20 @@
-<template functional>
+<template>
   <video
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-video"
     controls
   >
     <source
-      :src="props.file.publicUrl"
-      :height="props.file.properties.dimensions.height"
-      :width="props.file.properties.dimensions.width"
-      :type="props.file.properties.mimeType"
+      :src="file.publicUrl"
+      :height="file.properties.dimensions.height"
+      :width="file.properties.dimensions.width"
+      :type="file.properties.mimeType"
     >
   </video>
 </template>
 <script>
 export default {
   name: 'MediaVideo',
-  functional: true,
   props: {
     file: {
       type: Object,

lib/components/T3MediaFile/type/Vimeo.vue

@@ -1,11 +1,10 @@
-<template functional>
+<template>
   <iframe
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
-    :src="props.file.publicUrl"
-    :width="props.file.properties.dimensions.width || 640"
-    :height="props.file.properties.dimensions.height || 360"
-    :title="props.file.properties.title || false"
+    v-bind="$attrs"
+    :src="file.publicUrl"
+    :width="file.properties.dimensions.width || 640"
+    :height="file.properties.dimensions.height || 360"
+    :title="file.properties.title || false"
     frameborder="0"
     class="t3-ce-media-video t3-ce-media-vimeo"
     webkitallowfullscreen
@@ -16,7 +15,6 @@
 <script>
 export default {
   name: 'MediaVimeo',
-  functional: true,
   props: {
     file: {
       type: Object,