failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bugs, added accordion type in tabs

Browse Source
This commit is contained in:
F4ilji
2025-05-27 14:55:34 +05:00
parent dc7c18691b
commit a3f3e97b2f
7 changed files with 68 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/componentss/shared/builder/pageBuilder/blocks/TabBlock.vue
+26 -7
View File
@@ -1,7 +1,27 @@
<template>
<div class="">
<nav class="-mb-0.5 flex justify-center gap-2 flex-wrap" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
<div v-if="block.data.settings?.is_accordion">
<div class="hs-accordion-group">
<div v-for="(tab, index) in block.data.tab" class="hs-accordion hs-accordion-active:border-gray-200 bg-white border border-transparent rounded-xl dark:hs-accordion-active:border-neutral-700 dark:bg-neutral-800 dark:border-transparent" id="hs-active-bordered-heading-one">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:outline-hidden dark:focus:text-neutral-400" aria-expanded="false" aria-controls="hs-basic-active-bordered-collapse-one">
{{ tab.title }}
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
<div id="hs-basic-active-bordered-collapse-one" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-active-bordered-heading-one">
<div class="pb-4 px-5 text-gray-800">
<PageTabBuilder :blocks="tab.content" />
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="-mb-0.5 flex justify-center gap-2 flex-wrap" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
<button
v-for="(tab, index) in block.data.tab" type="button"
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
@@ -13,10 +33,8 @@
:aria-controls="generateSlug(tab.title)" role="tab">
{{ tab.title }}
</button>
</nav>
</div>
<div class="mt-3">
</div>
<div class="mt-3">
<template v-for="(tab, index) in block.data.tab">
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
@@ -25,6 +43,7 @@
</div>
</template>
</div>
</div>
</template>
<script>