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/T3CeDefault/T3CeDefault.vue

@@ -0,0 +1,23 @@
+<template>
+  <pre :style="{ overflowX: 'scroll' }">
+    <code
+      :style="{
+        fontSize: '12px',
+        fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace'
+      }"
+    >
+      {{ content }}
+    </code>
+  </pre>
+</template>
+
+<script>
+export default {
+  name: 'T3CeDefault',
+  computed: {
+    content () {
+      return JSON.stringify(this.$attrs, null, 2)
+    }
+  }
+}
+</script>

lib/components/T3CeDefault/index.js

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

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/T3Debug/T3Debug.vue

@@ -1,43 +1,35 @@
+<template>
+  <div
+    class="t3p-debug"
+    :style="{ position: 'relative' }"
+  >
+    <code
+      :style="{
+        width: '100%',
+        border: '2px solid #E53E3E',
+        color: '#000',
+        display: 'inline-block',
+        wordBreak: 'break-word',
+        position: 'absolute',
+        fontSize: '12px',
+        fontFamily:
+          'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
+        padding: '10px',
+        boxSizing: 'border-box',
+        top: 0,
+        left: 0,
+        backgroundColor: '#FED7D7'
+      }"
+    >
+      {{ JSON.stringify($attrs) }}
+    </code>
+    <slot />
+  </div>
+</template>
+
 <script>
 // you can use debug wrapper to display quickly CE data
 export default {
-  name: 'T3Debug',
-  functional: true,
-  render (createElement, ctx) {
-    return createElement(
-      'div',
-      {
-        style: {
-          position: 'relative'
-        },
-        class: 't3p-debug'
-      },
-      [
-        createElement(
-          'code',
-          {
-            style: {
-              width: '100%',
-              border: '2px solid #E53E3E',
-              color: '#000',
-              display: 'inline-block',
-              wordBreak: 'break-word',
-              position: 'absolute',
-              fontSize: '12px',
-              fontFamily:
-                'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
-              padding: '10px',
-              boxSizing: 'border-box',
-              top: 0,
-              left: 0,
-              backgroundColor: '#FED7D7'
-            }
-          },
-          JSON.stringify(ctx.props)
-        ),
-        ctx.children
-      ]
-    )
-  }
+  name: 'T3Debug'
 }
 </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'