Allow custom toggles in vue/require-toggle-inside-transition

[cjpearson]

What rule do you want to change?

vue/require-toggle-inside-transition

Does this change cause the rule to produce more or fewer warnings?

If option is configured, fewer warnings.

How will the change be implemented? (New option, new default behavior, etc.)?

I would add a new option to the rule which allows adding additional custom "toggle" directives which will satisfy this check in addition to v-show or v-if.

Please provide some example code that this change will affect:

<transition>
  <dialog v-dialog="visible">...</dialog>
</transition>

What does the rule currently do for this code?

It flags it as an error, because there is no v-show or v-if on the <dialog>

What will the rule do after it's changed?

If the rule is configured to include v-dialog as a toggle directive, it will no longer flag this case as an error.

Additional context

In the example above, v-dialog is a custom directive which shows/hides the element using close() and showModal(). Transitions are also applied in the directive.

[FloEdelmann]

Transitions are also applied in the directive.

Is this documented somewhere? If not, it may be a bug or accidental behavior that might change in the future, and then I don't think we should encourage people to use that.

[cjpearson]

That's a good question. I wrote this code some time ago and can't remember exactly where I found this pattern. 😅 It may have been from mimicking v-show.

The transition behavior is intentional though. The directive reads the transition property of the vnode and calls the hooks when necessary. e.g.

mounted(el, { value, modifiers }, { transition }) {
  if (transition && value) {
    transition.enter(el)
  }
  toggleDialog(el, value, modifiers.modal)
},

[FloEdelmann]

Okay, I guess it's fine then. A PR is welcome that:

• adds a new option additionalDirectives: string[] to the rule
• updates the docs
• adds new test cases

[cjpearson]

Cool, thanks for the feedback!