Tab component reedit

resources/js/components/Others/SetFolderIcon.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="set-folder-icon">
 
-        <TableWrapper >
-            <TableOption id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
+        <TabWrapper >
+            <TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
                 <div class="select-emoji-wrapper">
                     <label class="main-label">Pick Yout Emoji Icon:</label>
 
@@ -33,9 +33,9 @@
                         </div>
                     </transition>
                 </div>
-            </TableOption>
+            </TabOption>
 
-            <TableOption :title="$t('popup_rename.tab_color_title')" icon="folder">
+            <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
                 <div class="color-pick-wrapper">
                 <label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
                     <ul class="color-wrapper">
@@ -47,15 +47,15 @@
                             :style="{background:color}" />
                     </ul>
                 </div>
-            </TableOption>
-        </TableWrapper>
+            </TabOption>
+        </TabWrapper>
     </div>
 </template>
 
 <script>
     import {SmileIcon, FolderIcon, ChevronDownIcon   } from 'vue-feather-icons'
-    import TableWrapper from '@/components/Others/TableWrapper'
-    import TableOption from '@/components/Others/TableOption'
+    import TabWrapper from '@/components/Others/TabWrapper'
+    import TabOption from '@/components/Others/TabOption'
     import emojis from '../../emoji.json'
     import {events} from '@/bus'
 
@@ -64,8 +64,8 @@
         props: ['folderData', 'unique_id'],
         components: {
             ChevronDownIcon ,
-            TableWrapper,
-            TableOption,
+            TabWrapper,
+            TabOption,
             FolderIcon,
             SmileIcon,
         },

resources/js/components/Others/ShareCreate.vue

@@ -18,19 +18,19 @@
             <!--Form to set sharing-->
             <ValidationObserver v-if="! isGeneratedShared" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
                 
-                <TableWrapper>
+                <TabWrapper>
 
                     <!-- Share via link -->
-                    <TableOption :title="$t('shared_form.share_by_link')" icon="link"/>
+                    <TabOption :selected="true" :title="$t('shared_form.share_by_link')" icon="link"/>
                     
                     <!-- Share via Email -->
-                    <TableOption :title="$t('shared_form.share_by_email')" icon="email">
+                    <TabOption :title="$t('shared_form.share_by_email')" icon="email">
                         <ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
                             <EmailsInput  rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
                         </ValidationProvider>
-                    </TableOption>
+                    </TabOption>
 
-                </TableWrapper>
+                </TabWrapper>
 
                 <!--Permision Select-->
                 <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
@@ -109,8 +109,8 @@
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     import CopyInput from '@/components/Others/Forms/CopyInput'
-    import TableWrapper from '@/components/Others/TableWrapper'
-    import TableOption from '@/components/Others/TableOption'
+    import TabWrapper from '@/components/Others/TabWrapper'
+    import TabOption from '@/components/Others/TabOption'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import InfoBox from '@/components/Others/Forms/InfoBox'
     import {LinkIcon, MailIcon } from 'vue-feather-icons'
@@ -129,8 +129,8 @@
             ActionButton,
             PopupWrapper,
             PopupActions,
-            TableWrapper,
-            TableOption,
+            TabWrapper,
+            TabOption,
             PopupContent,
             PopupHeader,
             EmailsInput,

resources/js/components/Others/ShareEdit.vue

@@ -15,8 +15,8 @@
             </div>
 
             <div v-if="! sendToRecipientsMenu || (sendToRecipientsMenu && isEmailSended)" class="input-wrapper copy-input">
-                    <label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
-                    <CopyInput size="small" :value="pickedItem.shared.link" />
+                <label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
+                <CopyInput size="small" :value="pickedItem.shared.link" />
             </div>
 
             <ValidationObserver v-if="sendToRecipientsMenu && !isEmailSended" v-slot="{ invalid }" ref="shareEmail" tag="form" class="form-wrapper">

resources/js/components/Others/TabOption.vue

@@ -0,0 +1,22 @@
+<template>
+    <div v-if="isActive">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "TabOption",
+    props: ['title', 'icon', 'selected'],
+    data () {
+        return {
+            isActive: false
+        }
+    },
+    mounted() {
+        this.isActive = this.selected
+    }
+}
+</script>
+

resources/js/components/Others/TabWrapper.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <div class="tab-wrapper">
+            <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
+
+                <!--Icon-->
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon" size="17"/>
+
+                <!--Title-->
+                <b class="tab-title">{{tab.title}}</b>
+            </div>
+        </div>
+        <slot></slot>
+    </div>
+
+</template>
+
+<script>
+     import {
+        LinkIcon,
+        MailIcon,
+        SmileIcon,
+        FolderIcon } from 'vue-feather-icons'
+
+    export default {
+        name: "TabWrapper",
+        components: {
+            LinkIcon,
+            MailIcon,
+            SmileIcon,
+            FolderIcon
+        },
+        data () {
+            return {
+                tabs: []
+            }
+        },
+        methods: {
+            selectTab(selectedTab) {
+                this.tabs.forEach(tab => {
+                    tab.isActive = tab.title == selectedTab.title
+                })
+            }
+        },
+        mounted () {
+            this.tabs = this.$children
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .tab-wrapper {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+        cursor: pointer;
+        align-items: center;
+        background: $light_background;
+        color: $text;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .tab-title {
+            @include font-size(14);
+        }
+
+        .tab {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px;
+
+            &.active {
+                background: $text;
+
+                .tab-title {
+                    color: $light_background;
+                }
+            }
+        }
+
+        .tab-icon {
+            margin-right: 10px;
+            path,
+            circle,
+            line,
+            polyline {
+                color: $theme !important;
+            }
+        }
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+        .tab-wrapper {
+            background: $dark_mode_foreground;
+
+            .tab.active {
+                background: rgba($theme, 0.1);
+
+                .tab-title {
+                    color: $theme;
+                }
+            }
+        }
+    }
+
+</style>

resources/js/components/Others/TableOption.vue

@@ -1,19 +0,0 @@
-<template>
-    <div>
-        <slot v-if="activeTab"></slot>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: "TableOption",
-    props: ['title', 'icon'],
-    data () {
-        return {
-            activeTab: false
-        }
-    },
-}
-</script>
-

resources/js/components/Others/TableWrapper.vue

@@ -1,129 +0,0 @@
-<template>
-    <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 {
-        LinkIcon,
-        MailIcon,
-        SmileIcon,
-        FolderIcon } from 'vue-feather-icons'
-
-    export default {
-        name: "TableWrapper",
-        components: {
-            LinkIcon,
-            MailIcon,
-            SmileIcon,
-            FolderIcon
-        },
-        data () {
-            return {
-                tabList: [],
-                activeTab: undefined
-            }
-        },
-        methods: {
-            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)
-            })
-
-            // Set active tab the first one 
-            this.activeTab = this.$children[0]._props.title
-            this.$children[0]._data.activeTab = true
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "@assets/vue-file-manager/_inapp-forms.scss";
-    @import '@assets/vue-file-manager/_forms';
-
-    .select-table {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 20px;
-        cursor: pointer;
-        
-        & > * {
-            width: 100%;
-            height: 42px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: $light_background;
-            color: $text;
-        }
-        & > :first-child {
-            border-top-left-radius: 8px;
-            border-bottom-left-radius: 8px;
-        }
-        & > :last-child {
-             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) {
-        .select-table {   
-            & > * {
-                background: $dark_mode_foreground;
-                color: $dark_mode_text_primary;
-            }
-
-            .active {
-            background: $dark_mode_text_primary;
-                h1 {
-                    color: $dark_mode_foreground !important;
-                }
-            }
-        }
-    }
-
-</style>