Make table wrapper and table options components

resources/js/components/Others/TableWrapper.vue

@@ -1,34 +1,66 @@
 <template>
-    <div class="table-wrapper">
-        <slot>
-            <child @click="setTab"></child>
-        </slot>
+    <div>
+        <div class="select-table" >
+            <div :class="{'active' : activeTab === child.title}" @click="setActiveTab(child)" v-for="(child, i) in tabList" :key="i"> 
+                <mail-icon v-if="child.icon === 'email'" class="icon" size="17"/> 
+                <link-icon v-if="child.icon === 'link'" class="icon" size="17"/>
+                <smile-icon v-if="child.icon === 'emoji'" class="icon" size="17"/>
+                <folder-icon v-if="child.icon === 'folder'" class="icon" size="17"/>
+                <b>{{child.title}}</b>
+            </div>
+        </div>
+        <slot></slot>
     </div>
+
 </template>
 
 <script>
-    import TableOption from '@/components/Others/TableOption'
+     import {
+        LinkIcon,
+        MailIcon,
+        SmileIcon,
+        FolderIcon } from 'vue-feather-icons'
+
     export default {
         name: "TableWrapper",
-        components: {TableOption},
+        components: {
+            LinkIcon,
+            MailIcon,
+            SmileIcon,
+            FolderIcon
+        },
         data () {
             return {
-                tabList: []
+                tabList: [],
+                activeTab: undefined
             }
         },
         methods: {
-            setTab(tab){
-                console.log('setTab')
-                this.$children.find(child => child._props.title === tab)
-            }
+            setActiveTab(tab){
+
+                // Set false active tab for all TableWrapper childrens
+                this.$children.map(child => {
+                    if(child._props.title !== tab.title)
+                        child._data.activeTab = false    
+                })
+
+                // Set active tab for clicked cildren
+                let child = this.$children.find(child => child._props.title === tab.title)._data.activeTab = true
+
+                this.activeTab = tab.title
+            },
         },
         mounted () {
+
+            //Get all TableWrapper childrens and push to tabList
             this.$children.map(child => {
-                this.tabList.push(child._props.title)
+                this.tabList.push(child._props)
             })
-            console.log(this.$children)
+
+            // Set active tab the first one 
+            this.activeTab = this.$children[0]._props.title
+            this.$children[0]._data.activeTab = true
         }
-        
     }
 </script>
 
@@ -36,10 +68,9 @@
     @import "@assets/vue-file-manager/_inapp-forms.scss";
     @import '@assets/vue-file-manager/_forms';
 
-    .table-wrapper {
+    .select-table {
         display: flex;
         justify-content: center;
-        padding: 0px 20px;
         margin-bottom: 20px;
         cursor: pointer;
         
@@ -57,18 +88,41 @@
             border-bottom-left-radius: 8px;
         }
         & > :last-child {
-            border-top-right-radius: 8px;
+             border-top-right-radius: 8px;
             border-bottom-right-radius: 8px;
         }
-        
+        .icon {
+            margin-right: 10px;
+            path,
+            circle,
+            line,
+            polyline {
+                color: $theme !important;
+            }
+        }
+
+        .active {
+            background: $text;
+                b {
+                    color: $light_background !important;
+                }
+        }
     }
 
+
     @media (prefers-color-scheme: dark) {
-        .table-wrapper {   
+        .select-table {   
             & > * {
                 background: $dark_mode_foreground;
                 color: $dark_mode_text_primary;
             }
+
+            .active {
+            background: $dark_mode_text_primary;
+                h1 {
+                    color: $dark_mode_foreground !important;
+                }
+            }
         }
     }