shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabs javascript function

Browse Source
This commit is contained in:
Burak Civan 2022-11-02 16:33:59 +03:00
parent 9a495ce457
commit a2568f91d2
6 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/css/app.css vendored
View File

@ -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%;
}

26
resources/assets/js/views/common/contacts.js vendored
View File

@ -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')),

35
resources/views/components/contacts/show/content.blade.php
View File

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

14
resources/views/components/tabs/index.blade.php
View File

@ -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 class="swiper-tabs-container">
<ul class="swiper-wrapper" {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
<div id="{{ $id }}" data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
<div data-tabs-swiper>
<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 !!}

3
resources/views/components/tabs/nav-link.blade.php
View File

@ -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 }}
>

3
resources/views/components/tabs/nav.blade.php
View File

@ -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 }}