Emit events from TPW? [OTHER]

[plweil]

Is there any way to get the vue version to emit an event when the tab is changed? I'd do it myself, but I can't figure out how to take these scripts and make a standalone TPW vue component that I can add this to. I've got to have way to track the current tab.

[tjk]

Would this be okay? Should probably look at how others do this API...

const emit = defineEmits<{
  // when in tab mode
  (e: 'select', idx: number): void
  // when in accordion mode
  (e: 'expand', idx: number): void
  (e: 'collapse', idx: number): void
}>()

[plweil]

@tjk thanks for the rapid reply. fyi I am using vue 2 (do you need to define emits for v2?) .

Without seeing your response, I would probably would have done something like:

    spanClick(idx) {
      if (this.isAccordion) {
        this.$set(this.expandedTabsIdx, idx, !this.expandedTabsIdx[idx])
        this.$emit('panelChange', this.expandedTabsId)
      } else {
        this.selectedTabIdx = idx
        this.$emit('tabChange', this.selectedTabIdx)
      }
    },

[tjk]

Just spent a little time thinking about it and I think it probably makes more sense to parallelize event name and args as much as possible so a consumer who is using in ambiguous mode only needs to listen for one event (and can always expect the value to be an array)... If it's useful to know what mode the widget is in at event emit time, can also pass a third arg that is is either number[] or number maybe? or expose the mode via some other value but not sure there is an export for that. Will implement in next 24 hours.

this.$emit("change", [1], 1) // if first tab is selected
this.$emit("change", [1], [1]) // this would mean just the first accordion panel is opened

Makes sense hopefully? Maybe there is something more clever...

const emit = defineEmits<{
  (e: 'change', indices: number[], indexOrIndices: number | number[]): void
}>()

[plweil]

This sounds workable, although I confess to having some difficulty with the number combo and discerning why the tab indicator is an array and the accordion panel indicator is an object. That's not an objection at all; I'm just new to this script and am still unfamiliar with how the indices work and get calculated.

I guess more generally, I'd suggest imagining a user who is using the Vue version. They're probably using additional components, and so having an (or a more) accessible API for inter-component communication would be a big plus. There are a few props (although I still don't understand selectedIdxs), but there could be more. And having events going the other way match the Vue way of doing things. I've tried using a class for opening one panel on launch, and am unable to get that to work (opened a discussion on that). Seems as though a prop might be a more effective way than a classes to implement that. I don't mean to sound overly critical; I say this in the spirit of constructive criticism.