chore(vue3): migrate event buses to mitt

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",

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(),
 		}
 	},
 

src/components/ContactDetails.vue

@@ -65,7 +65,7 @@
 				<!-- org, title -->
 				<template #subtitle>
 					<template v-if="isReadOnly">
 						<span v-html="formattedSubtitle" />
 					</template>
 					<template v-else>
 						<input id="contact-title"
@@ -230,7 +230,7 @@
 						<template #icon>
 							<IconMail :size="20" />
 						</template>
 						<ActionLink v-for="emailAddress in emailAddressList"
 							:key="emailAddress"
 							:href="'mailto:' + emailAddress">
 							<template #icon>
@@ -373,7 +373,7 @@
 
 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 @@
 			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
 
 			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
-			bus: new Vue(),
+			bus: mitt(),
 			showMenuPopover: false,
 			profileEnabled,
 			isTalkEnabled,
@@ -965,7 +965,7 @@
 		/**
 		 *  Update this.localContact and set this.fixed
 		 *
 		 * @param {Contact} contact the contact to clone
 		 */
 		async updateLocalContact(contact) {
 			// create empty contact and copy inner data
@@ -1016,7 +1016,7 @@
 		/**
 		 * Should display the property
 		 *
 		 * @param {Property} property the property to check
 		 * @return {boolean}
 		 */
 		canDisplay(property) {

src/components/ContactDetails/ContactDetailsAddNewProp.vue

@@ -139,7 +139,7 @@
 		/**
 		 * Rfc props
 		 *
 		 * @return string[]
 		 */
 		propertiesOrder() {
 			return rfcProps.fieldOrder
@@ -195,11 +195,11 @@
 	},
 
 	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 @@
 		 */
 		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 @@
 				}
 			}
 			this.moreActionsOpen = false
-			this.bus.$emit('focus-prop', id)
+			this.bus.emit('focus-prop', id)
 		},
 	},
 }

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'))

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: {

src/components/ContactsList/ContactsListItem.vue

@@ -70,12 +70,12 @@
 	},
 
 	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()

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)
 		},
 	},
 }