ilk commit

2025-07-04 14:11:18 +03:00
parent 7604d77a89
commit 1754e646a8
306 changed files with 24956 additions and 0 deletions
--- a/src/components/global/Tabs.vue
+++ b/src/components/global/Tabs.vue
@ -0,0 +1,109 @@
+<template>
+  <div class="tabs-buttons-c" :id="'tabnav' + rnd">
+    <template v-for="(tab, i) in tabList">
+      <div
+        :class="['tab-button', currentTab === i ? 'tab-selected' : '']"
+        @click="ChangeTab(i)"
+        :style="[i === 0 ? tabPosition : '']">
+        <slot :name="'tabname' + i">{{ tab.text }}</slot>
+      </div>
+    </template>
+    <div class="tab-nav-button tab-nav-button-prev" @click="ChangeTab('<')">
+      <i class="ico-c ico-tab-nav">
+        <svg width="8"><use href="/src/assets/images/icons.svg#arrow"></use></svg>
+      </i>
+    </div>
+    <div class="tab-nav-button tab-nav-button-next" @click="ChangeTab('>')">
+      <i class="ico-c ico-tab-nav">
+        <svg width="8"><use href="/src/assets/images/icons.svg#arrow"></use></svg>
+      </i>
+    </div>
+  </div>
+  <div class="tabs-contents-c" :id="'tabs' + rnd">
+    <template v-for="(tabc, j) in tabList">
+      <div
+        class="tab-content tab-animate"
+        :style="[j === 0 ? tabContentPosition : '', { width: tabWidth + 'px' }]">
+        <template v-if="currentTab === j">
+          <slot :name="tabc.id"></slot>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed, onMounted, watch } from 'vue'
+  import { useGlobalStore } from '@/stores/globalStore'
+  const globalStore = useGlobalStore()
+
+  interface TabObj {
+    [key: string]: any
+    text: string
+    id: string
+  }
+
+  const props = defineProps<{
+    tabList: TabObj[]
+  }>()
+
+  const currentTab = ref<number>(0)
+  const rnd = ref<number>(Math.ceil(Number(Math.random() * 1000000000)))
+  const tabWidth = ref<number>(0)
+  const tabPosition = ref<string>('')
+
+  const tabContentPosition = computed<string>(() => {
+    var tabPos = ''
+    let pos = -(tabWidth.value * currentTab.value)
+    tabPos = `margin-left:${pos}px`
+    return tabPos
+  })
+
+  const CalculateNavPosition = () => {
+    tabPosition.value = ''
+    let screenWidth = document.body.offsetWidth
+    if (screenWidth <= 1024) {
+      let pos = -(tabWidth.value * currentTab.value - 50)
+      tabPosition.value = `margin-left:${pos}px`
+    }
+  }
+
+  const ChangeTab = (d: number | string) => {
+    if (d === '<') {
+      if (currentTab.value !== 0) {
+        currentTab.value--
+      }
+    } else if (d == '>') {
+      if (currentTab.value !== props.tabList.length - 1) {
+        currentTab.value++
+      }
+    } else {
+      currentTab.value = Number(d)
+    }
+    CalculateNavPosition()
+  }
+  const TabWidth = () => {
+    let screenWidth = document.body.offsetWidth
+    let tabel = document.getElementById('tabs' + rnd.value) as HTMLElement
+    if (screenWidth <= globalStore.breakPoints.tablet) {
+      tabWidth.value = screenWidth - 48
+    } else {
+      const menuSideW = document.querySelector('.menu-side-w')
+      let sideW = globalStore.sideMenu ? menuSideW!.getBoundingClientRect().width : 0
+      tabWidth.value = screenWidth - sideW - 48
+    }
+  }
+  const Resize = () => {
+    TabWidth()
+    CalculateNavPosition()
+  }
+  onMounted(() => {
+    TabWidth()
+    window.addEventListener('resize', Resize)
+  })
+  watch(
+    () => globalStore.sideMenu,
+    () => {
+      TabWidth()
+    }
+  )
+</script>