refactoring

resources/assets/js/mixins/global.js

@@ -159,6 +159,57 @@ export default {
                 prevEl: ".swiper-button-prev",
             },
         });
+
+        //swiper slider for long tabs items
+        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
+            item.id = index;
+
+            if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
+                let initial_slide = 0;
+                let hash_split = window.location.hash.split('#')[1];
+
+                document.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
+                    item.classList.add('swiper-slide');
+
+                    if (item.getAttribute('data-tabs') == hash_split) {
+                        initial_slide = index;
+                    }
+                });
+
+                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 bg-purple text-white flex items-center justify-center right-0">
+                        <span class="material-icons">chevron_right</span>
+                    </div>
+                    <div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
+                        <span class="material-icons">chevron_left</span>
+                    </div>
+                    `; 
+
+                document.querySelector('[data-tabs-swiper]').innerHTML = html; 
+
+                new Swiper(".swiper-tabs-container", {
+                    loop: false,
+                    slidesPerView: Number(item.getAttribute('data-swiper')),
+                    pagination: {
+                        el: ".swiper-pagination",
+                        clickable: true
+                    },
+                    navigation: {
+                        nextEl: ".swiper-button-next",
+                        prevEl: ".swiper-button-prev",
+                    },
+                    initialSlide: initial_slide,
+                });
+            }
+        }
+        //swiper slider for long tabs items
     },
 
     methods: {

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

@@ -37,57 +37,6 @@ const app = new Vue({
 
     mounted() {
         this.form.create_user = false;
-
-        //swiper slider for long tabs items
-        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
-            item.id = index;
-
-            if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
-                let initial_slide = 0;
-                let hash_split = window.location.hash.split('#')[1];
-
-                document.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
-                    item.classList.add('swiper-slide');
-
-                    if (item.getAttribute('data-tabs') == hash_split) {
-                        initial_slide = index;
-                    }
-                });
-
-                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; 
-
-                let swiper = new Swiper(".swiper-tabs-container", {
-                    loop: false,
-                    slidesPerView: Number(item.getAttribute('data-swiper')),
-                    pagination: {
-                        el: ".swiper-pagination",
-                        clickable: true
-                    },
-                    navigation: {
-                        nextEl: ".swiper-button-next",
-                        prevEl: ".swiper-button-prev",
-                    },
-                    initialSlide: initial_slide,
-                });
-            }
-        }
-        //swiper slider for long tabs items
     },
 
     methods:{

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

@@ -134,7 +134,7 @@
 
         @if (! $hideBottomRight)
         <x-show.content.right>
-            <x-tabs slides="2" active="documents">
+            <x-tabs active="documents">
                 <x-slot name="navs">
                     @stack('documents_nav_start')
 
@@ -150,18 +150,6 @@
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
-                    <x-tabs.nav
-                        id="first"
-                    >
-                    First
-                    </x-tabs.nav>
-
-                    <x-tabs.nav
-                        id="second"
-                    >
-                    Second
-                    </x-tabs.nav>
-
                     @stack('transactions_nav_end')
                 </x-slot>
 

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

@@ -1,4 +1,4 @@
-@props(['active', 'id'])
+@props(['active'])
 
 @php
     if (! empty($attributes['slides'])) {