From dbcb58225f14d0bd987d16661af1b6f8aaf06915 Mon Sep 17 00:00:00 2001
From: Farhan <raditzfarhan@gmail.com>
Date: Fri, 29 Jul 2022 11:38:00 +0800
Subject: [PATCH] Add TabComponent

---
 .../general/elements/TabComponent.vue         | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 resources/assets/vue/components/general/elements/TabComponent.vue

diff --git a/resources/assets/vue/components/general/elements/TabComponent.vue b/resources/assets/vue/components/general/elements/TabComponent.vue
new file mode 100644
index 00000000..7a28e67f
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/TabComponent.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="tabsContainer" v-bind="$attrs">    
+        <div class="row" v-if="tabPosition==='top'">
+            <div v-for="(tab, index) in tabs" :key="tab.name" class="col b-r b-white" >            
+                <div class="row fs-12 text-center">
+                    <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
+                        <div class="row justify-content-center m-b-5" v-if="tab.icon">
+                            <div class="col-auto">
+                                 <span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
+                                    <i :class="`fa fa-${tab.icon}`"></i> 
+                                 </span>     
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <div class="fs-12 m-t-5 all-caps">{{ tab.text }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row" v-if="tabPosition==='top'">
+            <div class="col bg-white padding-25">
+                <div v-for="(tab, index) in tabs" :key="tab.name" class="row tabsContainer tabContent m-l-0 m-r-0" :tab-name="tab.name" :class=" index !== activeTab ? 'hide' : ''">              
+                    <slot v-if="index===activeTab || loadedTabs.has(index)" :name="tab.name"></slot>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="tabPosition==='left' || tabPosition==='right'" class="row">  
+            
+            <div v-if="tabPosition==='left'" class="col-12 col-md-auto px-0">              
+                <div class="bg-master-light tabButton m-b-5" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
+                    <div class="row align-items-center mx-0">
+                        <div class="col-auto  p-t-10 p-b-10 b-r b-grey">
+                            <span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
+                                <i :class="`fa fa-${tab.icon}`"></i> 
+                            </span>    
+                        </div>
+                        <div class="col">
+                            <div class="fs-12 m-t-5 all-caps m-b-5">{{ tab.text }}</div>
+                        </div>
+                    </div>
+                </div>               
+            </div>
+            
+            <div class="col bg-white p-l-25 p-r-25 p-t-15 p-b-15">
+                <div class="tabsContainer tabContent" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index !== activeTab ? 'hide' : ''">
+                    <slot v-if="index===activeTab || loadedTabs.has(index)" :name="tab.name"></slot>
+                </div>            
+            </div>
+
+            <div v-if="tabPosition==='right'" class="col-12 col-md-auto px-0">              
+                <div class="bg-master-light tabButton m-b-5" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
+                    <div class="row align-items-center mx-0">                       
+                        <div class="col">
+                            <div class="fs-12 m-t-5 all-caps m-b-5 text-right">{{ tab.text }}</div>
+                        </div>
+                         <div class="col-auto p-t-10 p-b-10 b-l b-grey">
+                            <span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
+                                <i :class="`fa fa-${tab.icon}`"></i> 
+                            </span>    
+                        </div>
+                    </div>
+                </div>               
+            </div>
+        </div>              
+    </div>
+</template>
+
+<script>
+    export default {
+        props:{
+            tabs:{
+                type: Array,
+                required: true
+            },
+            tabPosition: {
+                type: String,
+                default: 'top',
+                validator(value) {                    
+                    return ['top', 'left', 'right'].includes(value)
+                }
+            }
+        },
+        data(){
+            return {
+                activeTab: 0,
+                loadedTabs: new Set([0])
+            }
+        },
+        created(){
+            // console.log(this.tabs)
+        },
+        methods: {
+            onClick(tabIndex){
+                this.activeTab = tabIndex
+                this.loadedTabs.add(tabIndex)
+            }
+        }     
+    }
+</script>
\ No newline at end of file