From 4b92a26c4ec88f13a32fe57c3c81b7fb47d7f3fa Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Thu, 27 Jun 2024 22:26:59 +0800
Subject: [PATCH 1/3] feat(require-toggle-inside-transition): check directive

---
 lib/rules/require-toggle-inside-transition.js       |  5 ++++-
 tests/lib/rules/require-toggle-inside-transition.js | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index fc46f75f9..21df2bcda 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/lib/rules/require-toggle-inside-transition.js
@@ -35,7 +35,10 @@ module.exports = {
 
       /** @type VElement */ // @ts-expect-error
       const parent = element.parent
-      if (utils.hasAttribute(parent, 'appear')) {
+      if (
+        utils.hasAttribute(parent, 'appear') ||
+        utils.hasDirective(parent, 'bind', 'appear')
+      ) {
         return
       }
 
diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js
index 815f5de3d..ba49a137d 100644
--- a/tests/lib/rules/require-toggle-inside-transition.js
+++ b/tests/lib/rules/require-toggle-inside-transition.js
@@ -68,6 +68,11 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       filename: 'test.vue',
       code: '<template><transition appear><div /></transition></template>'
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2467
+      filename: 'test.vue',
+      code: '<template><transition :appear="isLoaded"><div /></transition></template>'
     }
   ],
   invalid: [
@@ -113,6 +118,11 @@ tester.run('require-toggle-inside-transition', rule, {
       filename: 'test.vue',
       code: '<template><Transition>  <div /></Transition></template>',
       errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition @appear="isLoaded"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
     }
   ]
 })

From 170b598f5f2368a6880835580519133fcde2da02 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sat, 29 Jun 2024 16:52:50 +0800
Subject: [PATCH 2/3] feat: update test cases

---
 lib/rules/require-toggle-inside-transition.js   | 17 ++++++++++++++++-
 .../rules/require-toggle-inside-transition.js   | 11 ++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index 21df2bcda..a47ef2433 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/lib/rules/require-toggle-inside-transition.js
@@ -6,6 +6,20 @@
 
 const utils = require('../utils')
 
+/**
+ * @param {VDirective} vBindAppear
+ */
+function isValidateBindAppear(vBindAppear) {
+  if (
+    vBindAppear.value?.expression &&
+    vBindAppear.value.expression.type === 'Literal'
+  ) {
+    return vBindAppear.value.expression?.value !== false
+  }
+
+  return true
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -35,9 +49,10 @@ module.exports = {
 
       /** @type VElement */ // @ts-expect-error
       const parent = element.parent
+      const vBindAppear = utils.getDirective(parent, 'bind', 'appear')
       if (
         utils.hasAttribute(parent, 'appear') ||
-        utils.hasDirective(parent, 'bind', 'appear')
+        (vBindAppear && isValidateBindAppear(vBindAppear))
       ) {
         return
       }
diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js
index ba49a137d..d40ad4748 100644
--- a/tests/lib/rules/require-toggle-inside-transition.js
+++ b/tests/lib/rules/require-toggle-inside-transition.js
@@ -72,7 +72,11 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/2467
       filename: 'test.vue',
-      code: '<template><transition :appear="isLoaded"><div /></transition></template>'
+      code: '<template><transition :appear="foo"><div /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="true"><div /></transition></template>'
     }
   ],
   invalid: [
@@ -119,6 +123,11 @@ tester.run('require-toggle-inside-transition', rule, {
       code: '<template><Transition>  <div /></Transition></template>',
       errors: [{ messageId: 'expected' }]
     },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="false"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
+    },
     {
       filename: 'test.vue',
       code: '<template><transition @appear="isLoaded"><div /></transition></template>',

From aa6056ef5050cb8ec8f4b1e8f92f5651311d6e13 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <git@flo-edelmann.de>
Date: Mon, 1 Jul 2024 14:23:53 +0200
Subject: [PATCH 3/3] Rename function

---
 lib/rules/require-toggle-inside-transition.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index a47ef2433..423d4beb7 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/lib/rules/require-toggle-inside-transition.js
@@ -9,7 +9,7 @@ const utils = require('../utils')
 /**
  * @param {VDirective} vBindAppear
  */
-function isValidateBindAppear(vBindAppear) {
+function isValidBindAppear(vBindAppear) {
   if (
     vBindAppear.value?.expression &&
     vBindAppear.value.expression.type === 'Literal'
@@ -52,7 +52,7 @@ module.exports = {
       const vBindAppear = utils.getDirective(parent, 'bind', 'appear')
       if (
         utils.hasAttribute(parent, 'appear') ||
-        (vBindAppear && isValidateBindAppear(vBindAppear))
+        (vBindAppear && isValidBindAppear(vBindAppear))
       ) {
         return
       }