Merge pull request #3766 from nextcloud/chore/vue3/migrate-event-buses-to-mitt

chore(vue3): migrate event buses to mitt

9 files changed, 30 insertions, 18 deletions

diff --git a/package-lock.json b/package-lock.json
index 953ea339..7732c1f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "debounce": "^1.2.1",
         "downloadjs": "^1.4.7",
         "ical.js": "^1.5.0",
+        "mitt": "^3.0.1",
         "moment": "^2.29.4",
         "p-limit": "^4.0.0",
         "qr-image": "^3.2.0",
@@ -13572,6 +13573,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -28538,6 +28544,11 @@
         }
       }
     },
+    "mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
diff --git a/package.json b/package.json
index c86a5dd6..6846f926 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "debounce": "^1.2.1",
     "downloadjs": "^1.4.7",
     "ical.js": "^1.5.0",
+    "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "p-limit": "^4.0.0",
     "qr-image": "^3.2.0",
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 3a82ced2..4549f565 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -84,7 +84,7 @@ import ContactDetails from '../ContactDetails.vue'
 import ContactsList from '../ContactsList.vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import RouterMixin from '../../mixins/RouterMixin.js'
-import Vue from 'vue'
+import mitt from 'mitt'
 
 export default {
 	name: 'ContactsContent',
@@ -117,7 +117,7 @@ export default {
 		return {
 			searchQuery: '',
 			// communication for ContactListItem and ContactDetails (reload avatar)
-			reloadBus: new Vue(),
+			reloadBus: mitt(),
 		}
 	},
 
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index b45fb03e..28de9dd1 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -373,7 +373,7 @@ import { showError } from '@nextcloud/dialogs'
 
 import { stringify } from 'ical.js'
 import qr from 'qr-image'
-import Vue from 'vue'
+import mitt from 'mitt'
 import {
 	NcActions as Actions,
 	NcActionButton as ActionButton,
@@ -500,7 +500,7 @@ export default {
 			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
 
 			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
-			bus: new Vue(),
+			bus: mitt(),
 			showMenuPopover: false,
 			profileEnabled,
 			isTalkEnabled,
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 3d882ad6..bc598627 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -195,11 +195,11 @@ export default {
 	},
 
 	created() {
-		this.bus.$on('add-prop', this.addProp)
+		this.bus.on('add-prop', this.addProp)
 	},
 
 	destroyed() {
-		this.bus.$off('add-prop', this.addProp)
+		this.bus.off('add-prop', this.addProp)
 	},
 
 	methods: {
@@ -210,7 +210,7 @@ export default {
 		 */
 		async addProp(id) {
 			if (this.usedProperties.includes(id) && !this.properties[id].multiple) {
-				this.bus.$emit('focus-prop', id)
+				this.bus.emit('focus-prop', id)
 				return
 			}
 
@@ -240,7 +240,7 @@ export default {
 				}
 			}
 			this.moreActionsOpen = false
-			this.bus.$emit('focus-prop', id)
+			this.bus.emit('focus-prop', id)
 		},
 	},
 }
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 055a4965..e7e30337 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -383,7 +383,7 @@ export default {
 
 			await this.loadPhotoUrl()
 
-			await this.reloadBus.$emit('reload-avatar', this.contact.key)
+			await this.reloadBus.emit('reload-avatar', this.contact.key)
 
 			this.loading = false
 		},
@@ -438,7 +438,7 @@ export default {
 			this.$store.dispatch('updateContact', this.contact)
 			// somehow the avatarUrl is not unavailable immediately, so we just set undefined
 			this.photoUrl = undefined
-			this.reloadBus.$emit('delete-avatar', this.contact.key)
+			this.reloadBus.emit('delete-avatar', this.contact.key)
 		},
 
 		/**
@@ -530,7 +530,7 @@ export default {
 
 					await this.loadPhotoUrl()
 
-					await this.reloadBus.$emit('reload-avatar', this.contact.key)
+					await this.reloadBus.emit('reload-avatar', this.contact.key)
 
 					// Notify user
 					showSuccess(t('contacts', 'Avatar downloaded from social network'))
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index 3cfae91c..839f9aa3 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -369,11 +369,11 @@ export default {
 	},
 
 	created() {
-		this.bus.$on('focus-prop', this.onFocusProp)
+		this.bus.on('focus-prop', this.onFocusProp)
 	},
 
 	destroyed() {
-		this.bus.$off('focus-prop', this.onFocusProp)
+		this.bus.off('focus-prop', this.onFocusProp)
 	},
 
 	methods: {
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index f3bc3d1a..d46888a3 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -70,12 +70,12 @@ export default {
 	},
 
 	created() {
-		this.reloadBus.$on('reload-avatar', this.reloadAvatarUrl)
-		this.reloadBus.$on('delete-avatar', this.deleteAvatar)
+		this.reloadBus.on('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.on('delete-avatar', this.deleteAvatar)
 	},
 	destroyed() {
-		this.reloadBus.$off('reload-avatar', this.reloadAvatarUrl)
-		this.reloadBus.$off('delete-avatar', this.deleteAvatar)
+		this.reloadBus.off('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.off('delete-avatar', this.deleteAvatar)
 	},
 	async mounted() {
 		await this.loadAvatarUrl()
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index b3e42b91..b4322d76 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -96,7 +96,7 @@ export default {
 		 * @param {string} id type of prop
 		 */
 		onAddProp(id) {
-			this.bus.$emit('add-prop', id)
+			this.bus.emit('add-prop', id)
 		},
 	},
 }