nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 01:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
resources/js/components/Others/TabWrapper.vue
View File

@@ -2,125 +2,117 @@
<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 text-theme dark-text-theme" size="17"/>
<link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17"/>
<smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17"/>
<folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17"/>
<mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme dark-text-theme" size="17" />
<link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17" />
<smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17" />
<folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17" />
<!--Title-->
<b class="tab-title">
{{tab.title}}
{{ tab.title }}
</b>
</div>
</div>
<slot></slot>
</div>
</template>
<script>
import {
import { LinkIcon, MailIcon, SmileIcon, FolderIcon } from 'vue-feather-icons'
export default {
name: 'TabWrapper',
components: {
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
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 '../../../sass/vuefilemanager/inapp-forms';
@import '../../../sass/vuefilemanager/forms';
@import '../../../sass/vuefilemanager/inapp-forms';
@import '../../../sass/vuefilemanager/forms';
.tab-wrapper {
.tab-wrapper {
display: flex;
justify-content: center;
margin-bottom: 20px;
cursor: pointer;
align-items: center;
background: white;
color: $text;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e9eb;
.tab-title {
@include font-size(14);
}
.tab {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
cursor: pointer;
align-items: center;
background: white;
color: $text;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E8E9EB;
justify-content: center;
padding: 8px;
.tab-title {
@include font-size(14);
}
&.active {
background: $light_background;
.tab {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
&.active {
background: $light_background;
.tab-title {
color: $text;
}
}
}
.tab-icon {
margin-right: 10px;
path,
circle,
line,
polyline {
color: inherit !important;
.tab-title {
color: $text;
}
}
}
.tab-icon {
margin-right: 10px;
.dark {
path,
circle,
line,
polyline {
color: inherit !important;
}
}
}
.dark {
.tab-wrapper {
background: $dark_mode_foreground;
border-color: transparent;
.tab.active {
background: lighten($dark_mode_foreground, 7%);
.tab-title {
color: $dark_mode_text_primary;
}
}
}
.popup-wrapper {
.tab-wrapper {
background: $dark_mode_foreground;
border-color: transparent;
.tab.active {
background: lighten($dark_mode_foreground, 7%);
.tab-title {
color: $dark_mode_text_primary;
}
}
}
.popup-wrapper {
.tab-wrapper {
background: lighten($dark_mode_foreground, 2%);
}
background: lighten($dark_mode_foreground, 2%);
}
}
}
</style>