diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index cbeed6dd8..73af5a1be 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -38,6 +38,8 @@ import GLightbox from 'glightbox';
Swiper.use([Navigation, Pagination]);
+var BreakException = {};
+
export default {
components: {
AkauntingDropzoneFileUpload,
@@ -159,6 +161,78 @@ export default {
prevEl: ".swiper-button-prev",
},
});
+
+ //swiper slider for long tabs items
+ for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
+ if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
+ let initial_slide = 0;
+ let hash_split = window.location.hash.split('#')[1];
+ let loop = 0;
+ let slides_view;
+
+ try {
+ item.querySelectorAll('[data-tabs-slide]').forEach((slide, index, arr) => {
+ loop += slide.clientWidth;
+
+ slide.classList.add('swiper-slide');
+
+ if (slide.getAttribute('data-tabs') == hash_split) {
+ initial_slide = index;
+ }
+
+ if (loop > item.clientWidth) {
+ slides_view = index;
+ throw BreakException;
+ }
+ });
+ } catch (e) {
+ if (e !== BreakException) throw e;
+ }
+
+ item.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
+ item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
+
+ let html = `
+
+ ${item.querySelector('[data-tabs-swiper]').innerHTML}
+
+
+
+ chevron_right
+
+
+ chevron_left
+
+ `;
+
+ item.querySelector('[data-tabs-swiper]').innerHTML = html;
+ slides_view = Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper')) : slides_view;
+ item.setAttribute('data-swiper', slides_view);
+
+ new Swiper(item.querySelector('.swiper-tabs-container'), {
+ loop: true,
+ slidesPerView: slides_view,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+ initialSlide: initial_slide,
+ });
+ } else {
+ item.removeAttribute('data-swiper');
+ item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper');
+ item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper');
+
+ item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
+ slide.removeAttribute('data-tabs-slide');
+ });
+ }
+ }
+ //swiper slider for long tabs items
},
methods: {
diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php
index 4aa9aceee..87d043913 100644
--- a/resources/views/components/contacts/show/content.blade.php
+++ b/resources/views/components/contacts/show/content.blade.php
@@ -160,7 +160,7 @@
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
-
+
@stack('transactions_nav_end')
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index 6e317a89a..aaa39d25f 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -1,8 +1,16 @@
@props(['active'])
-
-
-
has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
+@php
+ if (! empty($attributes['slides'])) {
+ $slides = $attributes['slides'];
+ } else {
+ $slides = null;
+ }
+@endphp
+
+
+
+
has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'inline-flex']) : $attributes }}>
{!! $navs !!}
diff --git a/resources/views/components/tabs/nav-link.blade.php b/resources/views/components/tabs/nav-link.blade.php
index 4e363be7f..7452a7400 100644
--- a/resources/views/components/tabs/nav-link.blade.php
+++ b/resources/views/components/tabs/nav-link.blade.php
@@ -5,6 +5,7 @@
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 }}
>
diff --git a/resources/views/components/tabs/nav.blade.php b/resources/views/components/tabs/nav.blade.php
index 47743f05f..4c5ec9d3d 100644
--- a/resources/views/components/tabs/nav.blade.php
+++ b/resources/views/components/tabs/nav.blade.php
@@ -5,6 +5,7 @@
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 }}