Okay Tab View with Controls is working fine!!

src/assets/v-form-builder.css

@@ -1008,7 +1008,6 @@ html.md-theme-default .vue-form-builder .md-list-item {
 }
 .tabs .content section h2,
 .tabs ul li label {
-    font-family: "Montserrat";
     font-weight: bold;
     font-size: 18px;
     color: #428BFF;

src/mixins/form-builder/form-builder-event-handler.js

@@ -19,7 +19,7 @@ const FORM_BUILDER_EVENT_HANDLER = {
          */
         sectionAndRowMapping(sectionId, rowId) {
             // push it into the section Rows...
-            // I can ensure that sectionId is exists to be retrieve
+            // I can ensure that sectionId is exists to be retrieved
             this.formData.sections[sectionId].rows.push(rowId)
         },
 
@@ -116,7 +116,8 @@ const FORM_BUILDER_EVENT_HANDLER = {
          * @param rowObject
          */
         rowNewAdded(rowObject) {
-            this.formData.rows[rowObject.uniqueId] = rowObject
+            // $set => reactive
+            this.$set(this.formData.rows, rowObject.uniqueId, rowObject)
         },
 
 
@@ -133,12 +134,13 @@ const FORM_BUILDER_EVENT_HANDLER = {
             const type = this.formData.sections.hasOwnProperty(parentId)
                 ? 'section'
                 : 'row';
+            const controlUniqueId = controlObj.uniqueId
 
             // add controlID to section / row
             if (type === 'section') {
-                this.formData.sections[parentId].controls.push(controlObj.uniqueId)
+                this.formData.sections[parentId].controls.push(controlUniqueId)
             } else {
-                this.formData.rows[parentId].controls.push(controlObj.uniqueId)
+                this.formData.rows[parentId].controls.push(controlUniqueId)
             }
         },
 

src/mixins/row-view-mixin.js

@@ -65,32 +65,21 @@ const ROW_VIEW_MIXIN = {
                 this.styles.ROW,
                 'control-list-container',
                 (
-                    this.hasControl ?
-                    '' :
-                    'empty'
+                    this.hasControls
+                        ? ''
+                        : 'empty'
                 )
             ]
         },
 
-        /**
-         * Pick up the controls detail of this rows
-         * @returns {Array<{}>}
-         */
-        rowControls() {
-            return this.row.controls.map(controlId => {
-                return this.controls[controlId]
-            });
-        },
-
         /**
          * Check if we had controls
          * @returns {boolean}
          */
         hasControls() {
-            return this.rowControls.length > 0
+            return this.row.controls.length > 0
         }
     },
-
 }
 export {
     ROW_VIEW_MIXIN

src/mixins/section-view-mixins.js

@@ -37,10 +37,10 @@ const SECTION_VIEW_MIXINS = {
          */
         addRow($event = null, extendData = null) {
             // get rowType of Section
-            let rowType = SECTION_TYPES[this.section.type].rowType;
+            const rowType = SECTION_TYPES[this.section.type].rowType;
 
             // Create new Row Object - BUSS: New Object
-            let newRowObject = createNewRow(rowType, extendData);
+            const newRowObject = createNewRow(rowType, extendData);
 
             // Parent-Handle: Add Row | Push ID into Section.rows
             this.$formEvent.$emit(EVENT_CONSTANTS.BUILDER.ROW.CREATE, newRowObject)
@@ -84,16 +84,6 @@ const SECTION_VIEW_MIXINS = {
                 this.hasControl ? '' : 'empty'
             ]
         },
-
-        /**
-         * Pick up the rows detail of this section
-         * @returns {Array<{}>}
-         */
-        sectionRows() {
-            return this.section.rows.map(rowId => {
-                return this.rows[rowId]
-            });
-        },
     },
 };
 

src/views/builder/row-views/TabContentRowView.vue

@@ -9,9 +9,9 @@
             :group="dragGroup"
         >
 
-            <ControlView v-for="control in rowControls"
-                         :key="control.uniqueId"
-                         :control="control"
+            <ControlView v-for="controlId in row.controls"
+                         :key="controlId"
+                         :control="controls[controlId]"
                          :parent-id="row.uniqueId" />
 
             <p v-if="!hasControls">
@@ -26,20 +26,21 @@
     </section>
 </template>
 
-<script lang="ts">
+<script>
 
-// @ts-ignore
-import {ROW_VIEW_MIXIN} from "@/mixins/row-view-mixin";
+    // @ts-ignore
+    import {ROW_VIEW_MIXIN} from "@/mixins/row-view-mixin";
+    import mixins from 'vue-typed-mixins'
 
-/**
- * @property {Object} section
- * @property {Object} rows RowId - RowData
- * @property {Object} controls ControlId - ControlData
- * @property {Array} section.rows
- * @property {Array} section.controls
- */
-export default {
-    name: "TabContentRowView",
-    mixins: [ROW_VIEW_MIXIN],
-}
+    /**
+     * @property {Object} section
+     * @property {Object} rows RowId - RowData
+     * @property {Object} controls ControlId - ControlData
+     * @property {Array} section.rows
+     * @property {Array} section.controls
+     */
+    export default {
+        name: "TabContentRowView",
+        mixins: [ROW_VIEW_MIXIN]
+    }
 </script>

src/views/builder/section-views/TabSectionView.vue

@@ -8,26 +8,25 @@
         <div class="tabs">
 
             <input type="radio"
-                   v-for="rowObj in sectionRows"
-                   :key="'tab-radio' + rowObj.uniqueId"
-                   :id="'tab-radio' + rowObj.uniqueId"
+                   v-for="rowId in section.rows"
+                   :key="getRadioID(rowId)"
+                   :id="getRadioID(rowId)"
                    name="tab-control"
-                   :checked="rowObj.defaultChecked"
             >
 
             <ul>
                 <li
-                    v-for="rowObj in sectionRows"
-                    :key="'tab-header' + rowObj.uniqueId"
-                    :id="'tab-header' + rowObj.uniqueId"
+                    v-for="rowId in section.rows"
+                    :key="getTabHeaderID(rowId)"
+                    :id="getTabHeaderID(rowId)"
                 >
-                    <label :for="'tab-radio' + rowObj.uniqueId" role="button">
+                    <label :for="getRadioID(rowId)" role="button">
                         <span
-                            v-if="rowObj.extendData.tabIcon"
-                            v-html="rowObj.extendData.tabIcon"
+                            v-if="rows[rowId].extendData.tabIcon"
+                            v-html="rows[rowId].extendData.tabIcon"
                         ></span>
                         <br>
-                        <span v-text="rowObj.extendData.tabName"></span>
+                        <span v-text="rows[rowId].extendData.tabName"></span>
                     </label>
                 </li>
 
@@ -42,15 +41,15 @@
                 </li>
             </ul>
 
-            <div class="slider" v-show="rows.length > 0">
-                <div class="indicator"></div>
-            </div>
+<!--            <div class="slider" v-show="hasTabs > 0">-->
+<!--                <div class="indicator"></div>-->
+<!--            </div>-->
 
             <div class="content">
                 <TabContentRowView
-                    v-for="rowObj in sectionRows"
-                    :key="rowObj.uniqueId"
-                    :row="rowObj"
+                    v-for="rowId in section.rows"
+                    :key="rowId"
+                    :row="rows[rowId]"
                     :section="section"
                     :controls="controls"
                 />
@@ -60,7 +59,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script >
     // @ts-ignore
     import {SECTION_VIEW_MIXINS} from "@/mixins/section-view-mixins";
     // @ts-ignore
@@ -72,32 +71,65 @@
     import {TabRow} from "@/interfaces/tab-row.interface";
     import mixins from 'vue-typed-mixins'
 
-    export default mixins(SECTION_VIEW_MIXINS, STYLE_INJECTION_MIXIN).extend({
+    export default {
         name: "TableSectionView",
+        mixins:[SECTION_VIEW_MIXINS, STYLE_INJECTION_MIXIN],
         components: {
             TabContentRowView
         },
+
+        computed: {
+            hasTabs() {
+                // @ts-ignore
+                return this.section.rows.length > 0
+            }
+        },
+
         methods: {
+            getRadioID(uniqueId) {
+                return 'tab-radio-'.concat(uniqueId)
+            },
+
+            getTabHeaderID(uniqueId) {
+                return 'tab-header-'.concat(uniqueId)
+            },
+
             /**
              * [ACTION] Add a new tab action
+             * Buss: simply add a new row with extendData
              */
-            addNewTab() : void {
+            addNewTab() {
                 const tabName = prompt("Give it a name for your new tab")
                 if (!tabName) {
                     return ALERT_DIALOG.show("Tab Name can't be empty.");
                 }
 
-                const tabDetail : TabRow = {
+                const tabDetail = {
                     tabName,
                     defaultChecked: (
                         //@ts-ignore
-                        this.rows.length == 0
+                        this.section.rows.length == 0
                     )
                 }
 
                 // @ts-ignore
                 this.addRow(null, tabDetail);
+
+                // @ts-ignore - check if this is the first tab in our section??
+                if (this.section.rows.length == 1) {
+                    // yes it is, so after rendered new tab, we should select it.
+                    this.defaultSelectTab()
+                }
+            },
+
+            defaultSelectTab() {
+                this.$nextTick(() => {
+                    // @ts-ignore
+                    const radioDom = document.getElementById(this.getRadioID(this.section.rows[0]))
+                    // @ts-ignore
+                    radioDom.checked = true
+                })
             }
         }
-    })
+    }
 </script>

src/views/builder/section-views/ToggleableSectionView.vue

@@ -27,16 +27,19 @@
 
                 <!--- SHOW CONTROLS / With Draggable --->
                 <draggable
-                        :class="draggableClasses"
-                        ghost-class="ghost"
-                        :handle="dragControlHandle"
-                        :list="section.controls"
-                        :group="dragGroup">
+                    :class="draggableClasses"
+                    ghost-class="ghost"
+                    :handle="dragControlHandle"
+                    :list="section.controls"
+                    :group="dragGroup"
+                >
 
-                    <ControlView v-for="controlId in section.controls"
-                                 :key="controlId"
-                                 :control="controls[controlId]"
-                                 :parent-id="section.uniqueId" />
+                    <ControlView
+                        v-for="controlId in section.controls"
+                        :key="controlId"
+                        :control="controls[controlId]"
+                        :parent-id="section.uniqueId"
+                    />
 
                     <p v-if="!hasControl">
                         Droppable Zone / Controls will be showed here...