diff options
Diffstat (limited to 'src/components/_sila/Global/SilaComponents/DataTabs.vue')
-rw-r--r-- | src/components/_sila/Global/SilaComponents/DataTabs.vue | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/DataTabs.vue b/src/components/_sila/Global/SilaComponents/DataTabs.vue new file mode 100644 index 00000000..49afbbfb --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/DataTabs.vue @@ -0,0 +1,136 @@ +<template> + <div> + <div + ref="content" + :class="'tabs-switch'" + :style="gridStyle" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'tab-active': currentTab === item.id }" + :style="`width: ${slotWidth}px`" + @click="switchTab(item.id)" + >{{ $t(item.name) }}</span + > + <div class="slider" :style="sliderStyle" /> + </div> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentTab: { + type: Number, + default: 1, + }, + switchTab: { + type: Function, + required: true, + }, + slotWidth: { + type: Number, + default: null, + }, + sliderWidth: { + type: Number, + default: null, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + computed: { + sliderStyle() { + return { + width: `${this.sliderWidth}px`, + left: `${ + ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth + }px`, + }; + }, + gridStyle() { + return { + gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`, + }; + }, + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.tabs-switch { + position: relative; + width: calc(95vw - 320px); + height: 45px; + margin-left: 32px; + display: grid; + grid-auto-flow: column; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.tab-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + margin-right: 6px; + cursor: pointer; + &:hover { + transition: ease-in 0.2s; + color: #e11717; + } +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> |