Prepare vue3 branch

package.json

@@ -24,21 +24,19 @@
     "analyze:report": "webpack-bundle-analyzer js/stats.json js/ --mode static --report js/stats/report.html"
   },
   "dependencies": {
-    "@linusborg/vue-simple-portal": "^0.1.5",
     "@nextcloud/auth": "^2.3.0",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/browser-storage": "^0.4.0",
     "@nextcloud/capabilities": "^1.2.0",
-    "@nextcloud/dialogs": "^5.3.1",
     "@nextcloud/event-bus": "^3.2.0",
     "@nextcloud/files": "^3.2.1",
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/l10n": "^3.0.0",
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/upload": "^1.1.1",
-    "@nextcloud/vue": "^8.11.3",
+    "@nextcloud/vue": "^9.0.0-alpha.2",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vueuse/components": "^10.9.0",
     "crypto-js": "^4.2.0",
     "debounce": "^2.0.0",
@@ -53,21 +51,18 @@
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "mockconsole": "0.0.1",
-    "nextcloud-vue-collections": "^0.12.0",
     "pinia": "^2.1.7",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",
-    "vue": "^2.7.16",
-    "vue-cropperjs": "^4.2.0",
-    "vue-draggable-resizable": "^2.3.0",
-    "vue-frag": "^1.4.3",
+    "vue": "^3.4.27",
+    "vue-cropperjs": "^5.0.0",
+    "vue-draggable-resizable": "^3.0.0",
     "vue-material-design-icons": "^5.3.0",
-    "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^3.6.5",
-    "vue-shortkey": "^3.1.7",
-    "vue-virtual-scroller": "^1.1.2",
-    "vue2-leaflet": "^2.7.1",
-    "vuex": "^3.6.2",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
+    "vue-router": "^4.3.2",
+    "vue-virtual-scroller": "^2.0.0-beta.8",
+    "vue3-shortkey": "^4.0.0",
+    "vuex": "^4.1.0",
     "webdav": "^5.6.0",
     "webrtc-adapter": "^9.0.1",
     "webrtcsupport": "^2.2.0",
@@ -80,11 +75,11 @@
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^3.0.1",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@nextcloud/webpack-vue-config": "github:nextcloud-libraries/webpack-vue-config#vue3",
     "@types/jest": "^29.5.12",
-    "@vue/test-utils": "^1.3.6",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "@vue/vue2-jest": "^29.2.6",
+    "@vue/vue3-jest": "^29.2.6",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "esbuild-loader": "^4.1.0",
     "flush-promises": "^1.0.2",
@@ -96,7 +91,6 @@
     "openapi-typescript": "^6.7.5",
     "regenerator-runtime": "^0.14.1",
     "ts-jest": "^29.1.2",
-    "vue-template-compiler": "^2.7.16",
     "wasm-check": "^2.1.2",
     "webpack-bundle-analyzer": "^4.10.2",
     "worker-loader": "^3.0.8"

src/PublicShareAuthRequestPasswordButton.vue

@@ -4,28 +4,24 @@
 -->
 
 <template>
-	<Fragment>
-		<!-- "submit-wrapper" is used to mimic the login button and thus get
-			automatic colouring of the confirm icon by the Theming app. -->
-		<div id="submit-wrapper" class="request-password-wrapper">
-			<NcButton id="request-password-button"
-				type="primary"
-				:wide="true"
-				:disabled="isRequestInProgress"
-				@click="requestPassword"
-				@keydown.enter="requestPassword">
-				{{ t('spreed', 'Request password') }}
-			</NcButton>
-		</div>
-		<p v-if="hasRequestFailed" class="warning error-message">
-			{{ t('spreed', 'Error requesting the password.') }}
-		</p>
-	</Fragment>
+	<!-- "submit-wrapper" is used to mimic the login button and thus get
+		automatic colouring of the confirm icon by the Theming app. -->
+	<div id="submit-wrapper" class="request-password-wrapper">
+		<NcButton id="request-password-button"
+			type="primary"
+			:wide="true"
+			:disabled="isRequestInProgress"
+			@click="requestPassword"
+			@keydown.enter="requestPassword">
+			{{ t('spreed', 'Request password') }}
+		</NcButton>
+	</div>
+	<p v-if="hasRequestFailed" class="warning error-message">
+		{{ t('spreed', 'Error requesting the password.') }}
+	</p>
 </template>
 
 <script>
-import { Fragment } from 'vue-frag'
-
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import { getPublicShareAuthConversationToken } from './services/publicShareAuthService.js'
@@ -37,7 +33,6 @@ export default {
 
 	components: {
 		NcButton,
-		Fragment,
 	},
 
 	props: {

src/PublicShareSidebar.vue

@@ -36,7 +36,8 @@
 </template>
 
 <script>
-import { showError } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -163,7 +164,7 @@ export default {
 			} catch (exception) {
 				this.joiningConversation = false
 
-				showError(t('spreed', 'Error occurred when joining the conversation'))
+				window.OCP.Toast.error(t('spreed', 'Error occurred when joining the conversation'))
 
 				console.error(exception)
 

src/components/AdminSettings/MatterbridgeIntegration.vue

@@ -44,7 +44,8 @@
 </template>
 
 <script>
-import { showError } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -124,7 +125,7 @@ export default {
 		async enableMatterbridgeApp() {
 			if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
 				OC.PasswordConfirmation.requirePasswordConfirmation(this.enableMatterbridgeAppCallback, {}, () => {
-					showError(t('spreed', 'An error occurred while installing the Matterbridge app'))
+					window.OCP.Toast.error(t('spreed', 'An error occurred while installing the Matterbridge app'))
 				})
 			}
 
@@ -136,7 +137,7 @@ export default {
 			try {
 				await enableMatterbridgeApp()
 			} catch (e) {
-				showError(t('spreed', 'An error occurred while installing the Talk Matterbridge. Please install it manually'), {
+				window.OCP.Toast.error(t('spreed', 'An error occurred while installing the Talk Matterbridge. Please install it manually'), {
 					onClick: () => {
 						window.open('https://apps.nextcloud.com/apps/talk_matterbridge', '_blank')
 					},
@@ -152,7 +153,7 @@ export default {
 				this.error = ''
 			} catch (error) {
 				console.error(error)
-				showError(t('spreed', 'Failed to execute Matterbridge binary.'))
+				window.OCP.Toast.error(t('spreed', 'Failed to execute Matterbridge binary.'))
 				if (error?.response?.data?.ocs?.data?.error) {
 					this.error = error.response.data.ocs.data.error
 				} else {

src/components/AdminSettings/RecordingServers.vue

@@ -52,9 +52,8 @@
 		<template v-if="servers.length && recordingConsentCapability">
 			<h3>{{ t('spreed', 'Recording consent') }}</h3>
 
-			<template v-for="level in recordingConsentOptions">
-				<NcCheckboxRadioSwitch :key="level.value + '_radio'"
-					:value="level.value.toString()"
+			<template v-for="level in recordingConsentOptions" :key="level.value">
+				<NcCheckboxRadioSwitch :value="level.value.toString()"
 					:checked.sync="recordingConsentSelected"
 					name="recording-consent"
 					type="radio"
@@ -63,7 +62,7 @@
 					{{ level.label }}
 				</NcCheckboxRadioSwitch>
 
-				<p :key="level.value + '_description'" class="consent-description">
+				<p class="consent-description">
 					{{ getRecordingConsentDescription(level.value) }}
 				</p>
 			</template>
@@ -77,7 +76,8 @@ import debounce from 'debounce'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
-import { showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showSuccess } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -181,7 +181,7 @@ export default {
 				secret: this.secret,
 			}), {
 				success: () => {
-					showSuccess(t('spreed', 'Recording backend settings saved'))
+					window.OCP.Toast.success(t('spreed', 'Recording backend settings saved'))
 					this.loading = false
 					this.toggleSave()
 				},

src/components/AdminSettings/SIPBridge.vue

@@ -80,7 +80,8 @@
 import debounce from 'debounce'
 
 import axios from '@nextcloud/axios'
-import { showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
@@ -196,7 +197,7 @@ export default {
 
 			this.loading = false
 			this.saveCurrentSetup()
-			showSuccess(t('spreed', 'SIP configuration saved!'))
+			window.OCP.Toast.success(t('spreed', 'SIP configuration saved!'))
 		},
 
 		async isDialoutSupported() {

src/components/AdminSettings/SignalingServers.vue

@@ -70,7 +70,8 @@ import debounce from 'debounce'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
-import { showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -139,7 +140,7 @@ export default {
 
 			OCP.AppConfig.setValue('spreed', 'hide_signaling_warning', this.hideWarning ? 'yes' : 'no', {
 				success: () => {
-					showSuccess(t('spreed', 'Missing high-performance backend warning hidden'))
+					window.OCP.Toast.success(t('spreed', 'Missing high-performance backend warning hidden'))
 					this.loading = false
 					this.toggleSave()
 				},
@@ -161,7 +162,7 @@ export default {
 				secret: this.secret,
 			}), {
 				success: () => {
-					showSuccess(t('spreed', 'High-performance backend settings saved'))
+					window.OCP.Toast.success(t('spreed', 'High-performance backend settings saved'))
 					this.loading = false
 					this.toggleSave()
 				},

src/components/AdminSettings/StunServers.vue

@@ -43,7 +43,8 @@ import debounce from 'debounce'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
-import { showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -119,7 +120,7 @@ export default {
 
 			OCP.AppConfig.setValue('spreed', 'stun_servers', JSON.stringify(servers), {
 				success: () => {
-					showSuccess(t('spreed', 'STUN settings saved'))
+					window.OCP.Toast.success(t('spreed', 'STUN settings saved'))
 					this.loading = false
 					this.toggleSave()
 				},

src/components/AdminSettings/TurnServers.vue

@@ -48,7 +48,8 @@ import debounce from 'debounce'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
-import { showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -134,7 +135,7 @@ export default {
 			this.loading = true
 			OCP.AppConfig.setValue('spreed', 'turn_servers', JSON.stringify(servers), {
 				success: () => {
-					showSuccess(t('spreed', 'TURN settings saved'))
+					window.OCP.Toast.success(t('spreed', 'TURN settings saved'))
 					this.loading = false
 					this.toggleSave()
 				},

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -26,7 +26,8 @@
 </template>
 
 <script>
-import { showError, showSuccess } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
@@ -98,14 +99,14 @@ export default {
 
 	methods: {
 		handleMessageSent() {
-			showSuccess(this.broadcast
+			window.OCP.Toast.success(this.broadcast
 				? t('spreed', 'The message was sent to all breakout rooms')
 				: t('spreed', 'The message was sent to "{roomName}"', { roomName: this.displayName }))
 			this.$emit('close')
 		},
 
 		handleMessageFailure() {
-			showError(t('spreed', 'The message could not be sent'))
+			window.OCP.Toast.error(t('spreed', 'The message could not be sent'))
 			this.$emit('close')
 		},
 	},

src/components/CallView/CallView.vue

@@ -121,7 +121,8 @@
 import debounce from 'debounce'
 
 import { getCapabilities } from '@nextcloud/capabilities'
-import { showMessage } from '@nextcloud/dialogs'
+// eslint-disable-next-line
+// import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import Grid from './Grid/Grid.vue'
@@ -457,7 +458,7 @@ export default {
 			removedModelIds.forEach(removedModelId => {
 				this.sharedDatas[removedModelId].remoteVideoBlocker.destroy()
 
-				this.$delete(this.sharedDatas, removedModelId)
+				delete this.sharedDatas[removedModelId]
 
 				this.speakingUnwatchers[removedModelId]()
 				// Not reactive, but not a problem
@@ -484,7 +485,7 @@ export default {
 					screenVisible: false,
 				}
 
-				this.$set(this.sharedDatas, addedModel.attributes.peerId, sharedData)
+				this.sharedDatas[addedModel.attributes.peerId] = sharedData
 
 				// Not reactive, but not a problem
 				this.speakingUnwatchers[addedModel.attributes.peerId] = this.$watch(function() {
@@ -551,11 +552,11 @@ export default {
 			// sometimes the nick name is not available yet...
 			if (nickName) {
 				if (raisedHand?.state) {
-					showMessage(t('spreed', '{nickName} raised their hand.', { nickName }))
+					window.OCP.Toast.message(t('spreed', '{nickName} raised their hand.', { nickName }))
 				}
 			} else {
 				if (raisedHand?.state) {
-					showMessage(t('spreed', 'A participant raised their hand.'))
+					window.OCP.Toast.message(t('spreed', 'A participant raised their hand.'))
 				}
 			}