Adds ability to sync tabs instances by group

[anthony0030]

We have a page that uses the tabs component for inputs in different languages, one tab per language.
We want to be able to change all the tabs at once.

[anthony0030]

I just realized there are also tests to do. I will try to fill them in tomorrow.

[anthony0030]

@excid3 could you please take a look at this before I write the test to see if the implementation is any good and that this is a usefull feature for more peaple.

[excid3]

It feels a bit niche, so I'm not sure if we want to maintain that. I'm having a hard time keeping up so I'd like to focus on the most common use cases.

How about doing this as a separate controller that inherits and extends the Tab controller?

For example:

import {Tabs} from "tailwindcss-stimulus-components"

export default class extends Tabs {
  static values = {
    scrollActiveTabIntoView: Boolean,
    sync: { type: Boolean, default: false },
    syncGroup: { type: String, default: "default" }
  }
  
  initialize() {
    super()
    
    if (this.syncValue) {
      this.syncHandlerBound = this.syncHandler.bind(this);
      document.addEventListener("tabs:sync", this.syncHandlerBound);
    }
  }
  
  connect() {
    super()
    
    if(this.syncValue) this.dispatch(`sync`, { detail: { sync_group: this.syncGroupValue, tab_index: this.indexValue } })
  }
  
  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);
    }
  }
}

[anthony0030]

Thanks so much for the fast reply, I did not know that I could use super in js like this.

It works perfectly :D

[excid3]

Excellent! I will close this but it'll be a great reference for anyone else trying to do similar things. Thanks for sharing! 👍