Fix require-toggle-inside-transition should respect "<slot>", "v-bind:key", attribute "appear"

lib/rules/require-toggle-inside-transition.js

@@ -32,9 +32,18 @@ module.exports = {
  if (utils.isCustomComponent(element)) {
  return
  }
+
+ /** @type VElement */ // @ts-expect-error
+ const parent = element.parent
+ if (utils.hasAttribute(parent, 'appear')) {
+ return
+ }
+
  if (
+ element.name !== 'slot' &&
  !utils.hasDirective(element, 'if') &&
- !utils.hasDirective(element, 'show')
+ !utils.hasDirective(element, 'show') &&
+ !utils.hasDirective(element, 'bind', 'key')
  ) {
  context.report({
  node: element.startTag,
@@ -47,10 +56,6 @@ module.exports = {
  return utils.defineTemplateBodyVisitor(context, {
  /** @param {VElement} node */
  "VElement[name='transition'] > VElement"(node) {
- const child = node.parent.children.find(utils.isVElement)
- if (child !== node) {
- return
- }
  verifyInsideElement(node)
  }
  })

tests/lib/rules/require-toggle-inside-transition.js

@@ -57,6 +57,18 @@ tester.run('require-toggle-inside-transition', rule, {
  {
  filename: 'test.vue',
  code: '<template><transition><template v-if="show"><div /></template></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition><slot /></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition><div :key="k" /></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition appear><div /></transition></template>'
  }
  ],
  invalid: [
@@ -81,7 +93,7 @@ tester.run('require-toggle-inside-transition', rule, {
  {
  filename: 'test.vue',
  code: '<template><transition><div /><div /></transition></template>',
- errors: [{ messageId: 'expected' }]
+ errors: [{ messageId: 'expected' }, { messageId: 'expected' }]
  },
  {
  filename: 'test.vue',