chore(compat): update listeners mixin for vue3

xanf · xanf · commit 9726a64f3f9a · 2022-10-25T00:35:54.000+03:00
diff --git a/src/mixins/listeners.js b/src/mixins/listeners.js
@@ -1,3 +1,24 @@
 import { makePropCacheMixin } from '../utils/cache'
+import { Vue, isVue3 } from '../vue'
 
-export const listenersMixin = makePropCacheMixin('$listeners', 'bvListeners')
+const listenersMixinVue2 = makePropCacheMixin('$listeners', 'bvListeners')
+
+const listenersMixinVue3 = Vue.extend({
+  data() {
+    return {
+      bvListeners: {}
+    }
+  },
+  created() {
+    this.bvListeners = {
+      ...this.$listeners
+    }
+  },
+  beforeUpdate() {
+    this.bvListeners = {
+      ...this.$listeners
+    }
+  }
+})
+
+export const listenersMixin = isVue3 ? listenersMixinVue3 : listenersMixinVue2
diff --git a/src/mixins/listeners.spec.js b/src/mixins/listeners.spec.js
@@ -1,3 +1,4 @@
+import { isVue3 } from '../vue'
 import { mount } from '@vue/test-utils'
 import { listenersMixin } from './listeners'
 
@@ -133,17 +134,41 @@ describe('mixins > listeners', () => {
     const App1 = {
       components: { Input1 },
       props: ['listenFocus1', 'listenFocus2'],
+      methods: {
+        emit1($event) {
+          if (this.listenFocus1) {
+            this.$emit('focus1', $event)
+          }
+        },
+        emit2($event) {
+          if (this.listenFocus2) {
+            this.$emit('focus2', $event)
+          }
+        }
+      },
       template: `<div>
-        <Input1 @focus="listenFocus1 ? $emit('focus1', $event) : () => {}" />
-        <Input1 @focus="listenFocus2 ? $emit('focus2', $event) : () => {}" />
+        <Input1 @focus="emit1" />
+        <Input1 @focus="emit2" />
       </div>`
     }
     const App2 = {
       components: { Input2 },
       props: ['listenFocus1', 'listenFocus2'],
+      methods: {
+        emit1($event) {
+          if (this.listenFocus1) {
+            this.$emit('focus1', $event)
+          }
+        },
+        emit2($event) {
+          if (this.listenFocus2) {
+            this.$emit('focus2', $event)
+          }
+        }
+      },
       template: `<div>
-        <Input2 @focus="listenFocus1 ? $emit('focus1', $event) : () => {}" />
-        <Input2 @focus="listenFocus2 ? $emit('focus2', $event) : () => {}" />
+        <Input2 @focus="emit1" />
+        <Input2 @focus="emit2" />
       </div>`
     }
 
@@ -172,15 +197,15 @@ describe('mixins > listeners', () => {
     expect(wrapper1.emitted().focus1).toBeTruthy()
     expect(wrapper1.emitted().focus2).not.toBeTruthy()
     // Both `Input1`'s are re-rendered (See: https://github.com/vuejs/vue/issues/7257)
-    expect(input1RenderCount).toBe(4)
+    expect(input1RenderCount).toBe(isVue3 ? 2 : 4)
 
     // Enable focus events for the second input and trigger it
     await wrapper1.setProps({ listenFocus2: true })
     await $inputs1.at(1).trigger('focus')
     expect(wrapper1.emitted().focus1).toBeTruthy()
     expect(wrapper1.emitted().focus2).toBeTruthy()
     // Both `Input1`'s are re-rendered (See: https://github.com/vuejs/vue/issues/7257)
-    expect(input1RenderCount).toBe(6)
+    expect(input1RenderCount).toBe(isVue3 ? 2 : 6)
 
     // --- `Input2` tests ---
 
