Pass button variant to child tabList component and send custom event …

…when panel change # Conflicts: # resources/frontend/scripts/constants/customEvents.js
area17 · Sep 23, 2024 · 7b72ebc · 7b72ebc
1 parent 84db79e
commit 7b72ebc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git 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,15 +56,18 @@ 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 })
                     )
                 })
 
                 this.current = nextCurrentTab
                 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
@@ -32,5 +32,9 @@ export const customEvents = {
     DATE_PICKER_UPDATE: 'DatePicker:MinMaxUpdate' /* node event */,
 
     INPUT_VALIDATED: 'Input:Validated' /* node event */,
-    INPUT_RESET: 'Input:Reset' /* 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
@@ -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 }}