tabs javascript function

public/css/app.css

@@ -50876,6 +50876,10 @@ body{
     width: 8.333333%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:w-3\/12{
     width: 25%;
   }
@@ -50940,10 +50944,6 @@ body{
     width: 1rem;
   }
 
-  .lg\:w-auto{
-    width: auto;
-  }
-
   .lg\:w-2\/4{
     width: 50%;
   }

resources/assets/js/views/common/contacts.js

@@ -42,6 +42,32 @@ const app = new Vue({
         for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
             item.id = index;
 
+            if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
+                document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
+                    item.classList.add('swiper-slide');
+                });
+
+                document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
+                document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
+
+                let html = `
+                    <div class="swiper-tabs-container">
+                        ${document.querySelector('[data-tabs-swiper]').innerHTML}
+                    </div>
+
+                    <div class="swiper-button-next top-3 right-0">
+                        <span class="material-icons">chevron_right</span>
+                    </div>
+                    <div class="swiper-button-prev top-3 left-0">
+                        <span class="material-icons">chevron_left</span>
+                    </div>
+                    `; 
+
+                document.querySelector('[data-tabs-swiper]').innerHTML = html; 
+            }
+
+            // console.log(swiper.activeIndex);
+
             new Swiper(".swiper-tabs-container", {
                 loop: false,
                 slidesPerView: Number(item.getAttribute('data-swiper')),

resources/views/components/contacts/show/content.blade.php

@@ -151,33 +151,26 @@
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
                     <x-tabs.nav
-                        id="transactions"
+                        id="first"
-                        name="{{ trans_choice('general.transactions', 2) }}"
+                    >
-                    />
+                    First
+                    </x-tabs.nav>
+
                     <x-tabs.nav
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
                     <x-tabs.nav
-                        id="transactions"
+                        id="first"
-                        name="{{ trans_choice('general.transactions', 2) }}"
+                    >
-                    />
+                    First
+                    </x-tabs.nav>
+
                     <x-tabs.nav
-                        id="transactions"
+                        id="second"
-                        name="{{ trans_choice('general.transactions', 2) }}"
+                    >
-                    />
+                    Second
-                    <x-tabs.nav
+                    </x-tabs.nav>
-                        id="transactions"
-                        name="{{ trans_choice('general.transactions', 2) }}"
-                    />
-                    <x-tabs.nav
-                        id="transactions"
-                        name="{{ trans_choice('general.transactions', 2) }}"
-                    />
-                    <x-tabs.nav
-                        id="transactions"
-                        name="{{ trans_choice('general.transactions', 2) }}"
-                    />
 
                     @stack('transactions_nav_end')
                 </x-slot>

resources/views/components/tabs/index.blade.php

@@ -10,19 +10,11 @@
     }
 @endphp
 
-<div id="{{ $id }}" data-swiper="{{ $slides }}" class="swiper" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+<div id="{{ $id }}" data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
-    <div class="swiper-tabs-container">
+    <div data-tabs-swiper>
-        <ul class="swiper-wrapper" {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
+        <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
             {!! $navs !!}
         </ul>
-
-        <div class="swiper-button-next top-3 right-0">
-            <span class="material-icons">chevron_right</span>
-        </div>
-
-        <div class="swiper-button-prev top-3 left-0">
-            <span class="material-icons">chevron_left</span>
-        </div>
     </div>
 
     {!! $content !!}

resources/views/components/tabs/nav-link.blade.php

@@ -1,10 +1,11 @@
 @props(['id', 'name', 'href', 'active'])
 
 <li 
-    class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}
 >

resources/views/components/tabs/nav.blade.php

@@ -1,10 +1,11 @@
 @props(['id', 'name', 'active'])
 
 <li 
-    class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-on:click="active = '{{ $id }}'"
     x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}