Adds ability to sync tabs instances by group

docs/tabs.md

@@ -52,6 +52,10 @@ application.register('tabs', Tabs)
 
 `data-tabs-update-anchor-value="true"` can be used to update the URL anchor when the tab changes.
 
+`data-tabs-sync-value="true"` can be used to sync deferent instances of tabs.
+
+`data-tabs-sync-group-value="true"` can be used to sync tabs by groups.
+
 ##### Changing tabs from other places
 
 If you'd like to change the tab from a button or link outside of the tabs, you can call the same method and assign either `data-id` or `data-index` to select the tab.

src/tabs.js

@@ -7,11 +7,18 @@ export default class extends Controller {
     index: 0,
     updateAnchor: Boolean,
     scrollToAnchor: Boolean,
-    scrollActiveTabIntoView: Boolean
+    scrollActiveTabIntoView: Boolean,
+    sync: { type: Boolean, default: false },
+    syncGroup: { type: String, default: "default" }
   }
 
   initialize() {
     if (this.updateAnchorValue && this.anchor) this.indexValue = this.tabTargets.findIndex((tab) => tab.id === this.anchor)
+
+    if (this.syncValue) {
+      this.syncHandlerBound = this.syncHandler.bind(this);
+      document.addEventListener("tabs:sync", this.syncHandlerBound);
+    }
   }
 
   connect() {
@@ -36,6 +43,7 @@ export default class extends Controller {
       this.indexValue = this.tabTargets.indexOf(event.currentTarget)
     }
 
+    if(this.syncValue) this.dispatch(`sync`, { detail: { sync_group: this.syncGroupValue, tab_index: this.indexValue } });
   }
 
   nextTab() {
@@ -113,6 +121,25 @@ export default class extends Controller {
     if (activeTab) activeTab.scrollIntoView({ inline: 'center', })
   }
 
+  syncHandler(event) {
+    if(!this.syncValue) return
+
+    const { sync_group, tab_index } = event.detail;
+    const correctTabGroup = sync_group === this.syncGroupValue;
+    const incorrectTab = tab_index !== this.indexValue;
+    const tabExists = tab_index < this.tabsCount
+
+    if(tabExists && correctTabGroup && incorrectTab) {
+      this.indexValue = tab_index;
+    }
+  }
+
+  disconnect() {
+    if (this.syncValue && this.syncHandlerBound) {
+      document.removeEventListener("tabs:sync", this.syncHandlerBound);
+    }
+  }
+
   get tabsCount() {
     return this.tabTargets.length
   }