feat(tabs): support group

assets/js/shortcodes/tabs.js

@@ -5,7 +5,25 @@ function initTabs() {
 
     const container = button.closest(".tab__container");
     const tabIndex = parseInt(button.dataset.tabIndex);
-    activateTab(container, tabIndex);
+    const tabLabel = button.dataset.tabLabel;
+    const group = container.dataset.tabGroup;
+
+    if (group) {
+      const allGroupContainers = document.querySelectorAll(`.tab__container[data-tab-group="${group}"]`);
+
+      allGroupContainers.forEach((groupContainer) => {
+        const targetButton = Array.from(groupContainer.querySelectorAll(".tab__button")).find(
+          (btn) => btn.dataset.tabLabel === tabLabel,
+        );
+
+        if (targetButton) {
+          const targetIndex = parseInt(targetButton.dataset.tabIndex);
+          activateTab(groupContainer, targetIndex);
+        }
+      });
+    } else {
+      activateTab(container, tabIndex);
+    }
   };
 
   document.addEventListener("click", tabClickHandler);

layouts/shortcodes/tabs.html

@@ -1,8 +1,10 @@
 {{- .Store.Set "tab-index" 0 -}}
 {{- $noop := .Inner -}}
 
+{{- $group := .Get "group" -}}
 
-<div class="tab__container w-full">
+
+<div class="tab__container w-full" {{ with $group }}data-tab-group="{{ . }}"{{ end }}>
   <div class="tab__nav" role="tablist">
     <div class="flex gap-1 overflow-x-auto">
       {{- range $nTabs, $_ := .Store.Get "tabs" -}}
@@ -12,7 +14,8 @@
           {{ end }}"
           role="tab"
           aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
-          data-tab-index="{{ $nTabs }}">
+          data-tab-index="{{ $nTabs }}"
+          data-tab-label="{{ index . "label" }}">
           <span class="flex items-center gap-1">
             {{ with index . "icon" }}
               {{ partial "icon.html" . }}