From 4dc8faf9f66996aa52360520ed9e724515ec3f39 Mon Sep 17 00:00:00 2001
From: antonin caudron <antonin@area17.com>
Date: Thu, 29 Aug 2024 16:06:54 +0200
Subject: [PATCH] Pass button variant to child tabList component and send
 custom event when panel change

---
 resources/frontend/scripts/behaviors/Tabs.js       | 14 ++++++++++----
 .../frontend/scripts/constants/customEvents.js     |  4 ++++
 resources/views/components/tabs/tabs.blade.php     |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/frontend/scripts/behaviors/Tabs.js b/resources/frontend/scripts/behaviors/Tabs.js
index 78b478e..40ce98e 100644
--- a/resources/frontend/scripts/behaviors/Tabs.js
+++ b/resources/frontend/scripts/behaviors/Tabs.js
@@ -1,4 +1,5 @@
 import { createBehavior } from '@area17/a17-behaviors'
+import { customEvents } from '../constants/customEvents'
 
 /*
     Markup and JS taken from:
@@ -38,8 +39,10 @@ const Tabs = createBehavior(
             this.current.tab.setAttribute('aria-selected', 'false')
             this.current.tab.tabIndex = -1
             this.current.tabpanel.inert = true
-            this.current.tabpanel.dispatchEvent(new CustomEvent('Tab:hidden'))
-
+            this.current.tabpanel.dispatchEvent(new CustomEvent(customEvents.TABS_HIDDEN))
+            document.dispatchEvent(
+                new CustomEvent(customEvents.TABS_HIDDEN)
+            )
             if (!init && this.options.scrollonclick) {
                 this.$node.scrollIntoView(true)
             }
@@ -53,7 +56,10 @@ const Tabs = createBehavior(
                 window.requestAnimationFrame(() => {
                     nextCurrentTab.tabpanel.inert = false
                     nextCurrentTab.tabpanel.dispatchEvent(
-                        new CustomEvent('Tab:shown')
+                        new CustomEvent(customEvents.TABS_SHOWN)
+                    )
+                    document.dispatchEvent(
+                        new CustomEvent(customEvents.TABS_SHOWN, { detail: this.current })
                     )
                 })
 
@@ -61,7 +67,7 @@ const Tabs = createBehavior(
                 this.$node.dataset.tabsImmediate = false
                 if (!init) {
                     document.dispatchEvent(
-                        new CustomEvent('tabs:opened', { detail: this.current })
+                        new CustomEvent(customEvents.TABS_OPENED, { detail: this.current })
                     )
                 }
             }, this.transitionTime)
diff --git a/resources/frontend/scripts/constants/customEvents.js b/resources/frontend/scripts/constants/customEvents.js
index 47c46aa..f1e7490 100644
--- a/resources/frontend/scripts/constants/customEvents.js
+++ b/resources/frontend/scripts/constants/customEvents.js
@@ -33,4 +33,8 @@ export const customEvents = {
 
     INPUT_VALIDATED: 'Input:Validated', /* node event */
     INPUT_RESET: 'Input:Reset', /* node event */
+
+    TABS_OPENED: 'Tabs:opened', /* node event */
+    TABS_SHOWN: 'Tabs:shown', /* node event */
+    TABS_HIDDEN: 'Tabs:hidden' /* node event */
 };
diff --git a/resources/views/components/tabs/tabs.blade.php b/resources/views/components/tabs/tabs.blade.php
index f7d0e07..cedf578 100644
--- a/resources/views/components/tabs/tabs.blade.php
+++ b/resources/views/components/tabs/tabs.blade.php
@@ -7,6 +7,7 @@
     <x-vui-tabs-list :class="$ui('tabs', 'tablist')"
                      :tabs-names="$tabsNames"
                      :name="$name"
+                     :tab-button-variant="$tabButtonVariant"
                      :tabListId="isset($title) ? $tabListId : null"/>
 
     {{ $slot }}