From 6cb7b45a83d1e6e48d9315516fd1eafdbeeee0a1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 1 Nov 2024 18:27:48 +0100
Subject: [PATCH 1/5] fix: migrate NcTextField to v-model usage

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AdminSettings/HostedSignalingServer.vue    | 6 +++---
 src/components/AdminSettings/RecordingServer.vue          | 4 ++--
 src/components/AdminSettings/SignalingServer.vue          | 4 ++--
 src/components/AdminSettings/StunServer.vue               | 4 ++--
 src/components/AdminSettings/TurnServer.vue               | 4 ++--
 src/components/GuestWelcomeWindow.vue                     | 2 +-
 .../LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue       | 2 +-
 .../NewConversationDialog/NewConversationContactsPage.vue | 2 +-
 src/components/NewMessage/NewMessageNewFileDialog.vue     | 8 ++------
 src/components/NewMessage/NewMessagePollEditor.vue        | 4 ++--
 src/components/RoomSelector.vue                           | 2 +-
 src/components/SetGuestUsername.vue                       | 2 +-
 src/components/UIShared/SearchBox.vue                     | 4 ++--
 13 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index b9c1117bf44..80c9d564097 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -16,7 +16,7 @@
 		</p>
 
 		<template v-if="!trialAccount.status">
-			<NcTextField :value.sync="hostedHPBNextcloudUrl"
+			<NcTextField v-model="hostedHPBNextcloudUrl"
 				class="form__textfield"
 				name="hosted_hpb_nextcloud_url"
 				placeholder="https://cloud.example.org/"
@@ -24,7 +24,7 @@
 				:label="t('spreed', 'URL of this Nextcloud instance')"
 				label-visible />
 
-			<NcTextField :value.sync="hostedHPBFullName"
+			<NcTextField v-model="hostedHPBFullName"
 				class="form__textfield"
 				name="full_name"
 				placeholder="Jane Doe"
@@ -32,7 +32,7 @@
 				:label="t('spreed', 'Full name of the user requesting the trial')"
 				label-visible />
 
-			<NcTextField :value.sync="hostedHPBEmail"
+			<NcTextField v-model="hostedHPBEmail"
 				class="form__textfield"
 				name="hosted_hpb_email"
 				placeholder="jane@example.org"
diff --git a/src/components/AdminSettings/RecordingServer.vue b/src/components/AdminSettings/RecordingServer.vue
index 601c520b001..02c540ac20b 100644
--- a/src/components/AdminSettings/RecordingServer.vue
+++ b/src/components/AdminSettings/RecordingServer.vue
@@ -10,10 +10,10 @@
 			class="recording-server__textfield"
 			name="recording_server"
 			placeholder="https://recording.example.org"
-			:value="server"
+			:model-value="server"
 			:disabled="loading"
 			:label="t('spreed', 'Recording backend URL')"
-			@update:value="updateServer" />
+			@update:model-value="updateServer" />
 
 		<NcCheckboxRadioSwitch :checked="verify"
 			class="recording-server__checkbox"
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index 43b6e23f1c6..705c8551c5c 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -9,10 +9,10 @@
 			class="signaling-server__textfield"
 			name="signaling_server"
 			placeholder="wss://signaling.example.org"
-			:value="server"
+			:model-value="server"
 			:disabled="loading"
 			:label="t('spreed', 'High-performance backend URL')"
-			@update:value="updateServer" />
+			@update:model-value="updateServer" />
 
 		<NcCheckboxRadioSwitch :checked="verify"
 			class="signaling-server__checkbox"
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index 197b4389504..dacbf228f81 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -14,11 +14,11 @@
 				name="stun_server"
 				class="stun-server__input"
 				placeholder="stunserver:port"
-				:value="server"
+				:model-value="server"
 				:disabled="loading"
 				:aria-label="t('spreed', 'STUN server URL')"
 				label-outside
-				@update:value="update" />
+				@update:model-value="update" />
 		</div>
 
 		<AlertCircle v-show="!isValidServer"
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 969ffeb4543..67ede7f53cd 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -24,10 +24,10 @@
 			class="turn-server__textfield"
 			:class="{ error: turnServerError }"
 			:title="turnServerError"
-			:value="server"
+			:model-value="server"
 			:disabled="loading"
 			:label="t('spreed', 'TURN server URL')"
-			@update:value="updateServer" />
+			@update:model-value="updateServer" />
 
 		<NcPasswordField ref="turn_secret"
 			v-model="turnSecret"
diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
index 4c13d393937..887c1efe4ee 100644
--- a/src/components/GuestWelcomeWindow.vue
+++ b/src/components/GuestWelcomeWindow.vue
@@ -21,7 +21,7 @@
 
 			<label for="textField">{{ t('spreed', 'Enter your name') }}</label>
 			<NcTextField id="textField"
-				:value.sync="guestUserName"
+				v-model="guestUserName"
 				:placeholder="t('spreed', 'Guest')"
 				class="username-form__input"
 				:show-trailing-button="false"
diff --git a/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue b/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
index 46a353a4efa..ad054bd9e05 100644
--- a/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
+++ b/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
@@ -13,10 +13,10 @@
 		<template v-if="!loading">
 			<div class="call-phone__form">
 				<NcTextField ref="textField"
+					v-model="searchText"
 					class="call-phone__form-input"
 					:label="t('spreed', 'Search participants or phone numbers')"
 					label-visible
-					:value.sync="searchText"
 					@keydown.enter="createConversation(participantPhoneItem)" />
 				<DialpadPanel container=".call-phone__form"
 					:value.sync="searchText"
diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index 6ba0b1f7a6b..62e7c60a724 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -8,8 +8,8 @@
 		<!-- Search -->
 		<div class="set-contacts__form">
 			<NcTextField ref="setContacts"
+				v-model="searchText"
 				v-intersection-observer="visibilityChanged"
-				:value.sync="searchText"
 				type="text"
 				class="set-contacts__form-input"
 				:label="textFieldLabel"
diff --git a/src/components/NewMessage/NewMessageNewFileDialog.vue b/src/components/NewMessage/NewMessageNewFileDialog.vue
index 561838128a6..61278a1b0d8 100644
--- a/src/components/NewMessage/NewMessageNewFileDialog.vue
+++ b/src/components/NewMessage/NewMessageNewFileDialog.vue
@@ -14,12 +14,11 @@
 			@submit.prevent="handleCreateNewFile">
 			<NcTextField id="new-file-form-name"
 				ref="textField"
+				v-model="newFileTitle"
 				:error="!!newFileError"
 				:helper-text="newFileError"
 				:label="t('spreed', 'Name of the new file')"
-				:placeholder="newFileTitle"
-				:value="newFileTitle"
-				@update:value="updateNewFileTitle" />
+				:placeholder="newFileTitle" />
 
 			<ul v-if="templates.length > 1" class="templates-picker__list">
 				<NewMessageTemplatePreview v-for="template in templates"
@@ -177,9 +176,6 @@ export default {
 
 	methods: {
 		t,
-		updateNewFileTitle(value) {
-			this.newFileTitle = value
-		},
 
 		// Create text file and share it to a conversation
 		async handleCreateNewFile() {
diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index 1113ab75ebb..b8559700785 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -23,7 +23,7 @@
 			{{ t('spreed', 'Question') }}
 		</p>
 		<div class="poll-editor__wrapper">
-			<NcTextField :value.sync="pollForm.question" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
+			<NcTextField v-model="pollForm.question" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
 			<!--native file picker, hidden -->
 			<input id="poll-upload"
 				ref="pollImport"
@@ -54,7 +54,7 @@
 			:key="index"
 			class="poll-editor__option">
 			<NcTextField ref="pollOption"
-				:value.sync="pollForm.options[index]"
+				v-model="pollForm.options[index]"
 				:label="t('spreed', 'Answer {option}', {option: index + 1})" />
 			<NcButton v-if="pollForm.options.length > 2"
 				type="tertiary"
diff --git a/src/components/RoomSelector.vue b/src/components/RoomSelector.vue
index aa1d4186e2c..6165dd9f0f8 100644
--- a/src/components/RoomSelector.vue
+++ b/src/components/RoomSelector.vue
@@ -11,7 +11,7 @@
 			<p v-if="dialogSubtitle" class="selector__subtitle">
 				{{ dialogSubtitle }}
 			</p>
-			<NcTextField :value.sync="searchText"
+			<NcTextField v-model="searchText"
 				trailing-button-icon="close"
 				class="selector__search"
 				:label="t('spreed', 'Search conversations or users')"
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index c843f25c4e6..5aef6d4872f 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -18,7 +18,7 @@
 
 		<NcTextField v-else
 			ref="usernameInput"
-			:value.sync="guestUserName"
+			v-model="guestUserName"
 			:placeholder="t('spreed', 'Guest')"
 			class="username-form__input"
 			:show-trailing-button="!!guestUserName"
diff --git a/src/components/UIShared/SearchBox.vue b/src/components/UIShared/SearchBox.vue
index 3efc841777f..c7f14305d23 100644
--- a/src/components/UIShared/SearchBox.vue
+++ b/src/components/UIShared/SearchBox.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<NcTextField ref="searchConversations"
-		:value="value"
+		:model-value="value"
 		:aria-label="placeholderText"
 		:aria-describedby="ariaDescribedby"
 		:placeholder="placeholderText"
@@ -14,7 +14,7 @@
 		label-outside
 		@focus="handleFocus"
 		@blur="handleBlur"
-		@update:value="updateValue"
+		@update:model-value="updateValue"
 		@trailing-button-click="abortSearch"
 		@keydown.esc="abortSearch">
 		<IconMagnify :size="16" />

From 1a36701e4b0ec830a9a3d460fcff88ce677176f5 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 1 Nov 2024 18:51:35 +0100
Subject: [PATCH 2/5] fix: migrate NcSelect to v-model usage

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AdminSettings/TurnServer.vue                | 4 ++--
 src/components/ConversationSettings/ExpirationSettings.vue | 2 +-
 src/components/UIShared/DialpadPanel.vue                   | 2 +-
 src/views/FlowPostToConversation.vue                       | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 67ede7f53cd..6ff53c16c8c 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -7,7 +7,7 @@
 	<li class="turn-server">
 		<NcSelect class="turn-server__select"
 			name="turn_schemes"
-			:value="schemesOptions.find(i => i.value === schemes)"
+			:model-value="schemesOptions.find(i => i.value === schemes)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server schemes')"
 			:options="schemesOptions"
@@ -40,7 +40,7 @@
 
 		<NcSelect class="turn-server__select"
 			name="turn_protocols"
-			:value="protocolOptions.find(i => i.value === protocols)"
+			:model-value="protocolOptions.find(i => i.value === protocols)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server protocols')"
 			:options="protocolOptions"
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
index ea7f06900bd..215b780f08c 100644
--- a/src/components/ConversationSettings/ExpirationSettings.vue
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -15,7 +15,7 @@
 		<template v-if="canModerate">
 			<NcSelect id="moderation_settings_message_expiration"
 				:input-label="t('spreed', 'Set message expiration')"
-				:value="selectedOption"
+				:model-value="selectedOption"
 				:options="expirationOptions"
 				label="label"
 				close-on-select
diff --git a/src/components/UIShared/DialpadPanel.vue b/src/components/UIShared/DialpadPanel.vue
index 6c9bc3c676b..3a72e4219d3 100644
--- a/src/components/UIShared/DialpadPanel.vue
+++ b/src/components/UIShared/DialpadPanel.vue
@@ -26,7 +26,7 @@
 			<NcSelect v-if="!dialing"
 				ref="regionSelect"
 				class="dial-panel__select"
-				:value="region"
+				:model-value="region"
 				:options="options"
 				:append-to-body="false"
 				:clearable="false"
diff --git a/src/views/FlowPostToConversation.vue b/src/views/FlowPostToConversation.vue
index 9f96c638853..91e7c38f401 100644
--- a/src/views/FlowPostToConversation.vue
+++ b/src/views/FlowPostToConversation.vue
@@ -5,13 +5,13 @@
 
 <template>
 	<div>
-		<NcSelect :value="currentRoom"
+		<NcSelect :model-value="currentRoom"
 			:options="roomOptions"
 			:aria-label-combobox="t('spreed', 'Select a conversation')"
 			label="displayName"
 			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': currentMode.id, 't': newValue.token }))" />
 
-		<NcSelect :value="currentMode"
+		<NcSelect :model-value="currentMode"
 			:options="modeOptions"
 			:aria-label-combobox="t('spreed', 'Select a mode')"
 			label="text"

From d2f66988ca35732468627510767a63122197a290 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 27 Dec 2024 15:37:10 +0100
Subject: [PATCH 3/5] fix: migrate some :model-value to v-model

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../AdminSettings/RecordingServer.vue         | 17 +++++---
 .../AdminSettings/SignalingServer.vue         | 17 +++++---
 src/components/AdminSettings/StunServer.vue   | 17 +++++---
 src/components/AdminSettings/TurnServer.vue   | 43 ++++++++++++++-----
 .../ExpirationSettings.vue                    | 35 +++++----------
 src/components/UIShared/DialpadPanel.vue      |  3 +-
 src/components/UIShared/SearchBox.vue         | 13 +++++-
 7 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/src/components/AdminSettings/RecordingServer.vue b/src/components/AdminSettings/RecordingServer.vue
index 02c540ac20b..425c420e6df 100644
--- a/src/components/AdminSettings/RecordingServer.vue
+++ b/src/components/AdminSettings/RecordingServer.vue
@@ -7,13 +7,12 @@
 <template>
 	<li class="recording-server">
 		<NcTextField ref="recording_server"
+			v-model="recordingServer"
 			class="recording-server__textfield"
 			name="recording_server"
 			placeholder="https://recording.example.org"
-			:model-value="server"
 			:disabled="loading"
-			:label="t('spreed', 'Recording backend URL')"
-			@update:model-value="updateServer" />
+			:label="t('spreed', 'Recording backend URL')" />
 
 		<NcCheckboxRadioSwitch :checked="verify"
 			class="recording-server__checkbox"
@@ -123,6 +122,15 @@ export default {
 				version: this.versionFound,
 			})
 		},
+
+		recordingServer: {
+			get() {
+				return this.server
+			},
+			set(value) {
+				this.$emit('update:server', value)
+			}
+		},
 	},
 
 	watch: {
@@ -144,9 +152,6 @@ export default {
 		removeServer() {
 			this.$emit('remove-server', this.index)
 		},
-		updateServer(value) {
-			this.$emit('update:server', value)
-		},
 		updateVerify(checked) {
 			this.$emit('update:verify', checked)
 		},
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index 705c8551c5c..094d0336ba5 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -6,13 +6,12 @@
 <template>
 	<li class="signaling-server">
 		<NcTextField ref="signaling_server"
+			v-model="signalingServer"
 			class="signaling-server__textfield"
 			name="signaling_server"
 			placeholder="wss://signaling.example.org"
-			:model-value="server"
 			:disabled="loading"
-			:label="t('spreed', 'High-performance backend URL')"
-			@update:model-value="updateServer" />
+			:label="t('spreed', 'High-performance backend URL')" />
 
 		<NcCheckboxRadioSwitch :checked="verify"
 			class="signaling-server__checkbox"
@@ -129,6 +128,15 @@ export default {
 				version: this.versionFound,
 			})
 		},
+
+		signalingServer: {
+			get() {
+				return this.server
+			},
+			set(value) {
+				this.$emit('update:server', value)
+			}
+		}
 	},
 
 	watch: {
@@ -150,9 +158,6 @@ export default {
 		removeServer() {
 			this.$emit('remove-server', this.index)
 		},
-		updateServer(value) {
-			this.$emit('update:server', value)
-		},
 		updateVerify(checked) {
 			this.$emit('update:verify', checked)
 		},
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index dacbf228f81..d829234c4e2 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -10,15 +10,14 @@
 			<label :for="`stun_server_${index}`">stun:</label>
 
 			<NcTextField ref="stun_server"
+				v-model="stunServer"
 				:input-id="`stun_server_${index}`"
 				name="stun_server"
 				class="stun-server__input"
 				placeholder="stunserver:port"
-				:model-value="server"
 				:disabled="loading"
 				:aria-label="t('spreed', 'STUN server URL')"
-				label-outside
-				@update:model-value="update" />
+				label-outside />
 		</div>
 
 		<AlertCircle v-show="!isValidServer"
@@ -76,6 +75,15 @@ export default {
 	emits: ['remove-server', 'update:server'],
 
 	computed: {
+		stunServer: {
+			get() {
+				return this.server
+			},
+			set(value) {
+				this.$emit('update:server', value)
+			}
+		},
+
 		isValidServer() {
 			let server = this.server
 
@@ -99,9 +107,6 @@ export default {
 		removeServer() {
 			this.$emit('remove-server', this.index)
 		},
-		update(value) {
-			this.$emit('update:server', value)
-		},
 	},
 }
 </script>
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 6ff53c16c8c..1c1db3d8b70 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -5,9 +5,9 @@
 
 <template>
 	<li class="turn-server">
-		<NcSelect class="turn-server__select"
+		<NcSelect v-model="turnSchemes"
+			class="turn-server__select"
 			name="turn_schemes"
-			:model-value="schemesOptions.find(i => i.value === schemes)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server schemes')"
 			:options="schemesOptions"
@@ -15,19 +15,17 @@
 			:searchable="false"
 			label="label"
 			track-by="value"
-			no-wrap
-			@input="updateSchemes" />
+			no-wrap />
 
 		<NcTextField ref="turn_server"
+			v-model="turnServer"
 			name="turn_server"
 			placeholder="turnserver:port"
 			class="turn-server__textfield"
 			:class="{ error: turnServerError }"
 			:title="turnServerError"
-			:model-value="server"
 			:disabled="loading"
-			:label="t('spreed', 'TURN server URL')"
-			@update:model-value="updateServer" />
+			:label="t('spreed', 'TURN server URL')" />
 
 		<NcPasswordField ref="turn_secret"
 			v-model="turnSecret"
@@ -38,9 +36,9 @@
 			:disabled="loading"
 			:label="t('spreed', 'TURN server secret')" />
 
-		<NcSelect class="turn-server__select"
+		<NcSelect v-model="turnProtocols"
+			class="turn-server__select"
 			name="turn_protocols"
-			:model-value="protocolOptions.find(i => i.value === protocols)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server protocols')"
 			:options="protocolOptions"
@@ -48,8 +46,7 @@
 			:searchable="false"
 			label="label"
 			track-by="value"
-			no-wrap
-			@input="updateProtocols" />
+			no-wrap />
 
 		<NcButton v-show="!loading"
 			type="tertiary"
@@ -152,6 +149,30 @@ export default {
 	},
 
 	computed: {
+		turnServer: {
+			get() {
+				return this.server
+			},
+			set(value) {
+				this.updateServer(value)
+			}
+		},
+		turnSchemes: {
+			get() {
+				return this.schemesOptions.find(i => i.value === this.schemes)
+			},
+			set(value) {
+				this.updateSchemes(value)
+			}
+		},
+		turnProtocols: {
+			get() {
+				return this.protocolOptions.find(i => i.value === this.protocols)
+			},
+			set(value) {
+				this.updateProtocols(value)
+			}
+		},
 		turnSecret: {
 			get() {
 				return this.secret
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
index 215b780f08c..d500a102a2c 100644
--- a/src/components/ConversationSettings/ExpirationSettings.vue
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -14,13 +14,12 @@
 
 		<template v-if="canModerate">
 			<NcSelect id="moderation_settings_message_expiration"
+				v-model="selectedOption"
 				:input-label="t('spreed', 'Set message expiration')"
-				:model-value="selectedOption"
 				:options="expirationOptions"
 				label="label"
 				close-on-select
-				:clearable="false"
-				@option:selected="changeExpiration" />
+				:clearable="false" />
 		</template>
 
 		<template v-else>
@@ -59,7 +58,6 @@ export default {
 
 	data() {
 		return {
-			overwriteExpiration: undefined,
 			defaultExpirationOptions: [
 				{ id: 3600, label: n('spreed', '%n hour', '%n hours', 1) },
 				{ id: 28800, label: n('spreed', '%n hour', '%n hours', 8) },
@@ -79,29 +77,22 @@ export default {
 		expirationOptions() {
 			const expirationOptions = [...this.defaultExpirationOptions]
 
-			const found = expirationOptions.find((option) => {
-				return option.id === this.conversation.messageExpiration
-			})
-			if (!found) {
+			if (!expirationOptions.some(option => option.id === this.conversation.messageExpiration)) {
 				expirationOptions.push({ id: this.conversation.messageExpiration, label: t('spreed', 'Custom expiration time') })
 			}
 
 			return expirationOptions
 		},
 
-		selectedOption() {
-			if (this.overwriteExpiration) {
-				return this.overwriteExpiration
+		selectedOption: {
+			get() {
+				return this.expirationOptions.find((option) => {
+					return option.id === this.conversation.messageExpiration
+				}) ?? this.expirationOptions.at(-1)
+			},
+			set(value) {
+				this.changeExpiration(value)
 			}
-
-			const option = this.expirationOptions.find((option) => {
-				return option.id === this.conversation.messageExpiration
-			})
-			if (option) {
-				return option
-			}
-
-			return this.expirationOptions.at(-1)
 		},
 	},
 
@@ -109,8 +100,6 @@ export default {
 		t,
 		n,
 		async changeExpiration(expiration) {
-			this.overwriteExpiration = expiration
-
 			try {
 				await this.$store.dispatch('setMessageExpiration', {
 					token: this.token,
@@ -128,8 +117,6 @@ export default {
 				showError(t('spreed', 'Error when trying to set message expiration'))
 				console.error(error)
 			}
-
-			this.overwriteExpiration = undefined
 		},
 	},
 }
diff --git a/src/components/UIShared/DialpadPanel.vue b/src/components/UIShared/DialpadPanel.vue
index 3a72e4219d3..8a5ead010b2 100644
--- a/src/components/UIShared/DialpadPanel.vue
+++ b/src/components/UIShared/DialpadPanel.vue
@@ -25,8 +25,8 @@
 			@keydown.capture="handleKeyDown">
 			<NcSelect v-if="!dialing"
 				ref="regionSelect"
+				v-model="region"
 				class="dial-panel__select"
-				:model-value="region"
 				:options="options"
 				:append-to-body="false"
 				:clearable="false"
@@ -186,7 +186,6 @@ export default {
 		},
 
 		dialCode(value) {
-			this.region = value
 			this.$emit('update:value', value.dial_code)
 
 			this.$nextTick(() => {
diff --git a/src/components/UIShared/SearchBox.vue b/src/components/UIShared/SearchBox.vue
index c7f14305d23..648f1256e74 100644
--- a/src/components/UIShared/SearchBox.vue
+++ b/src/components/UIShared/SearchBox.vue
@@ -5,16 +5,16 @@
 
 <template>
 	<NcTextField ref="searchConversations"
-		:model-value="value"
+		v-model="modelValue"
 		:aria-label="placeholderText"
 		:aria-describedby="ariaDescribedby"
 		:placeholder="placeholderText"
 		:show-trailing-button="isFocused"
+		:trailing-button-label="cancelSearchLabel"
 		class="search-box"
 		label-outside
 		@focus="handleFocus"
 		@blur="handleBlur"
-		@update:model-value="updateValue"
 		@trailing-button-click="abortSearch"
 		@keydown.esc="abortSearch">
 		<IconMagnify :size="16" />
@@ -78,6 +78,15 @@ export default {
 	emits: ['update:value', 'update:is-focused', 'input', 'abort-search', 'blur', 'focus'],
 
 	computed: {
+		modelValue: {
+			get() {
+				return this.value
+			},
+			set(value) {
+				this.updateValue(value)
+			}
+		},
+
 		isSearching() {
 			return this.value !== ''
 		},

From 9925e41cc6d897c64809ff2e126f92b8a5de7de5 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 1 Nov 2024 19:16:49 +0100
Subject: [PATCH 4/5] fix: migrate NcCheckboxRadioSwitch to v-model usage

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AdminSettings/BotsSettings.vue |  2 --
 src/components/AdminSettings/Federation.vue   | 16 +++++++-------
 .../AdminSettings/GeneralSettings.vue         |  8 +++----
 .../AdminSettings/MatterbridgeIntegration.vue |  4 ++--
 .../AdminSettings/RecordingServer.vue         |  4 ++--
 .../AdminSettings/RecordingServers.vue        |  8 +++----
 src/components/AdminSettings/SIPBridge.vue    |  4 ++--
 .../AdminSettings/SignalingServer.vue         |  4 ++--
 .../AdminSettings/SignalingServers.vue        |  4 ++--
 .../BreakoutRoomsEditor.vue                   |  6 ++---
 .../ConversationPermissionsSettings.vue       | 12 +++++-----
 .../ConversationSettingsDialog.vue            |  8 +++----
 .../LinkShareSettings.vue                     |  8 +++----
 .../ConversationSettings/ListableSettings.vue |  8 +++----
 .../ConversationSettings/LobbySettings.vue    |  4 ++--
 .../ConversationSettings/LockingSettings.vue  |  4 ++--
 .../Matterbridge/MatterbridgeSettings.vue     |  4 ++--
 .../ConversationSettings/MentionsSettings.vue |  4 ++--
 .../NotificationsSettings.vue                 |  8 +++----
 .../RecordingConsentSettings.vue              |  4 ++--
 .../ConversationSettings/SipSettings.vue      |  8 +++----
 .../MediaSettings/MediaSettings.vue           | 12 +++++-----
 .../NewConversationSetupPage.vue              |  4 ++--
 .../NewMessage/NewMessagePollEditor.vue       |  4 ++--
 .../PermissionsEditor/PermissionsEditor.vue   | 12 +++++-----
 src/components/PollViewer/PollViewer.vue      |  2 +-
 .../RightSidebar/Participants/Participant.vue |  2 +-
 .../SettingsDialog/MediaDevicesPreview.vue    |  4 ++--
 .../SettingsDialog/SettingsDialog.vue         | 22 +++++++++----------
 29 files changed, 96 insertions(+), 98 deletions(-)

diff --git a/src/components/AdminSettings/BotsSettings.vue b/src/components/AdminSettings/BotsSettings.vue
index 15b48368210..7af7eb34686 100644
--- a/src/components/AdminSettings/BotsSettings.vue
+++ b/src/components/AdminSettings/BotsSettings.vue
@@ -86,7 +86,6 @@ import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import { BOT } from '../../constants.js'
@@ -98,7 +97,6 @@ export default {
 	components: {
 		NcPopover,
 		NcButton,
-		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/Federation.vue b/src/components/AdminSettings/Federation.vue
index cf1ddfcee54..2221b3131f2 100644
--- a/src/components/AdminSettings/Federation.vue
+++ b/src/components/AdminSettings/Federation.vue
@@ -10,34 +10,34 @@
 			<small>{{ t('spreed', 'Beta') }}</small>
 		</h2>
 
-		<NcCheckboxRadioSwitch :checked="isFederationEnabled"
+		<NcCheckboxRadioSwitch :model-value="isFederationEnabled"
 			:disabled="loading"
 			type="switch"
-			@update:checked="saveFederationEnabled">
+			@update:model-value="saveFederationEnabled">
 			{{ t('spreed', 'Enable Federation in Talk app') }}
 		</NcCheckboxRadioSwitch>
 
 		<template v-if="isFederationEnabled">
 			<h3>{{ t('spreed', 'Permissions') }}</h3>
 
-			<NcCheckboxRadioSwitch :checked="isFederationIncomingEnabled"
+			<NcCheckboxRadioSwitch :model-value="isFederationIncomingEnabled"
 				:disabled="loading"
 				type="switch"
-				@update:checked="saveFederationIncomingEnabled">
+				@update:model-value="saveFederationIncomingEnabled">
 				{{ t('spreed', 'Allow users to be invited to federated conversations') }}
 			</NcCheckboxRadioSwitch>
 
-			<NcCheckboxRadioSwitch :checked="isFederationOutgoingEnabled"
+			<NcCheckboxRadioSwitch :model-value="isFederationOutgoingEnabled"
 				:disabled="loading"
 				type="switch"
-				@update:checked="saveFederationOutgoingEnabled">
+				@update:model-value="saveFederationOutgoingEnabled">
 				{{ t('spreed', 'Allow users to invite federated users into conversation') }}
 			</NcCheckboxRadioSwitch>
 
-			<NcCheckboxRadioSwitch :checked="isFederationOnlyTrustedServersEnabled"
+			<NcCheckboxRadioSwitch :model-value="isFederationOnlyTrustedServersEnabled"
 				:disabled="loading"
 				type="switch"
-				@update:checked="saveFederationOnlyTrustedServersEnabled">
+				@update:model-value="saveFederationOnlyTrustedServersEnabled">
 				{{ t('spreed', 'Only allow to federate with trusted servers') }}
 			</NcCheckboxRadioSwitch>
 			<!-- eslint-disable-next-line vue/no-v-html -->
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 751185fa020..05244a4b5fc 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -25,15 +25,15 @@
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
-		<NcCheckboxRadioSwitch :checked="isConversationsFilesChecked"
+		<NcCheckboxRadioSwitch :model-value="isConversationsFilesChecked"
 			:disabled="loading || loadingConversationsFiles"
-			@update:checked="saveConversationsFiles">
+			@update:model-value="saveConversationsFiles">
 			{{ t('spreed', 'Allow conversations on files') }}
 		</NcCheckboxRadioSwitch>
 
-		<NcCheckboxRadioSwitch :checked="isConversationsFilesPublicSharesChecked"
+		<NcCheckboxRadioSwitch :model-value="isConversationsFilesPublicSharesChecked"
 			:disabled="loading || loadingConversationsFiles || !isConversationsFilesChecked"
-			@update:checked="saveConversationsFilesPublicShares">
+			@update:model-value="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
 		</NcCheckboxRadioSwitch>
 	</section>
diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue
index 8533e61e075..66298177a99 100644
--- a/src/components/AdminSettings/MatterbridgeIntegration.vue
+++ b/src/components/AdminSettings/MatterbridgeIntegration.vue
@@ -15,8 +15,8 @@
 				{{ installedVersion }}
 			</p>
 
-			<NcCheckboxRadioSwitch :checked="isEnabled"
-				@update:checked="saveMatterbridgeEnabled">
+			<NcCheckboxRadioSwitch :model-value="isEnabled"
+				@update:model-value="saveMatterbridgeEnabled">
 				{{ t('spreed', 'Enable Matterbridge integration') }}
 			</NcCheckboxRadioSwitch>
 		</template>
diff --git a/src/components/AdminSettings/RecordingServer.vue b/src/components/AdminSettings/RecordingServer.vue
index 425c420e6df..82b1f945522 100644
--- a/src/components/AdminSettings/RecordingServer.vue
+++ b/src/components/AdminSettings/RecordingServer.vue
@@ -14,9 +14,9 @@
 			:disabled="loading"
 			:label="t('spreed', 'Recording backend URL')" />
 
-		<NcCheckboxRadioSwitch :checked="verify"
+		<NcCheckboxRadioSwitch :model-value="verify"
 			class="recording-server__checkbox"
-			@update:checked="updateVerify">
+			@update:model-value="updateVerify">
 			{{ t('spreed', 'Validate SSL certificate') }}
 		</NcCheckboxRadioSwitch>
 
diff --git a/src/components/AdminSettings/RecordingServers.vue b/src/components/AdminSettings/RecordingServers.vue
index e0f1dd977fb..d9d8de43f2d 100644
--- a/src/components/AdminSettings/RecordingServers.vue
+++ b/src/components/AdminSettings/RecordingServers.vue
@@ -58,12 +58,12 @@
 
 				<template v-for="level in recordingConsentOptions">
 					<NcCheckboxRadioSwitch :key="level.value + '_radio'"
+						v-model="recordingConsentSelected"
 						:value="level.value.toString()"
-						:checked.sync="recordingConsentSelected"
 						name="recording-consent"
 						type="radio"
 						:disabled="loading"
-						@update:checked="setRecordingConsent">
+						@update:model-value="setRecordingConsent">
 						{{ level.label }}
 					</NcCheckboxRadioSwitch>
 
@@ -81,14 +81,14 @@
 					v-model="recordingTranscriptionEnabled"
 					type="switch"
 					:disabled="loading"
-					@update:modelValue="setRecordingTranscription">
+					@update:model-value="setRecordingTranscription">
 					{{ t('spreed', 'Automatically transcribe call recordings with a transcription provider') }}
 				</NcCheckboxRadioSwitch>
 
 				<NcCheckboxRadioSwitch v-model="recordingSummaryEnabled"
 					type="switch"
 					:disabled="loading"
-					@update:modelValue="setRecordingSummary">
+					@update:model-value="setRecordingSummary">
 					{{ t('spreed', 'Automatically summarize call recordings with transcription and summary providers') }}
 				</NcCheckboxRadioSwitch>
 			</template>
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index d9c4ee549ad..f715a6a2f72 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -12,8 +12,8 @@
 			:text="t('spreed', 'SIP configuration is only possible with a high-performance backend.')" />
 
 		<template v-else>
-			<NcCheckboxRadioSwitch type="switch"
-				:checked.sync="dialOutEnabled"
+			<NcCheckboxRadioSwitch v-model="dialOutEnabled"
+				type="switch"
 				:disabled="loading || !dialOutSupported">
 				{{ t('spreed', 'Enable SIP Dial-out option') }}
 			</NcCheckboxRadioSwitch>
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index 094d0336ba5..bbf2954479e 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -13,9 +13,9 @@
 			:disabled="loading"
 			:label="t('spreed', 'High-performance backend URL')" />
 
-		<NcCheckboxRadioSwitch :checked="verify"
+		<NcCheckboxRadioSwitch :model-value="verify"
 			class="signaling-server__checkbox"
-			@update:checked="updateVerify">
+			@update:model-value="updateVerify">
 			{{ t('spreed', 'Validate SSL certificate') }}
 		</NcCheckboxRadioSwitch>
 
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index 83d1bc85402..8a3d1f3b8b1 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -47,9 +47,9 @@
 			<p class="settings-hint additional-top-margin">
 				{{ t('spreed', 'Please note that in calls with more than 4 participants without external signaling server, participants can experience connectivity issues and cause high load on participating devices.') }}
 			</p>
-			<NcCheckboxRadioSwitch :checked.sync="hideWarning"
+			<NcCheckboxRadioSwitch v-model="hideWarning"
 				:disabled="loading"
-				@update:checked="updateHideWarning">
+				@update:model-value="updateHideWarning">
 				{{ t('spreed', 'Don\'t warn about connectivity issues in calls with more than 4 participants') }}
 			</NcCheckboxRadioSwitch>
 		</template>
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index d08040778fe..7090efc6c87 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -28,19 +28,19 @@
 
 					<label class="breakout-rooms-editor__caption">{{ t('spreed', 'Assignment method') }}</label>
 					<fieldset>
-						<NcCheckboxRadioSwitch :checked.sync="mode"
+						<NcCheckboxRadioSwitch v-model="mode"
 							value="1"
 							name="mode_radio"
 							type="radio">
 							{{ t('spreed', 'Automatically assign participants') }}
 						</NcCheckboxRadioSwitch>
-						<NcCheckboxRadioSwitch :checked.sync="mode"
+						<NcCheckboxRadioSwitch v-model="mode"
 							value="2"
 							name="mode_radio"
 							type="radio">
 							{{ t('spreed', 'Manually assign participants') }}
 						</NcCheckboxRadioSwitch>
-						<NcCheckboxRadioSwitch :checked.sync="mode"
+						<NcCheckboxRadioSwitch v-model="mode"
 							value="3"
 							name="mode_radio"
 							type="radio">
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index df86dee460d..2cc7463f837 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -14,12 +14,12 @@
 
 		<!-- All permissions -->
 		<div class="conversation-permissions-editor__setting">
-			<NcCheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch v-model="radioValue"
 				:disabled="loading"
 				value="all"
 				name="permission_radio"
 				type="radio"
-				@update:checked="handleSubmitPermissions">
+				@update:model-value="handleSubmitPermissions">
 				{{ t('spreed', 'All permissions') }}
 			</NcCheckboxRadioSwitch>
 			<span v-show="loading && radioValue === 'all'" class="icon-loading-small" />
@@ -30,12 +30,12 @@
 
 		<!-- No permissions -->
 		<div class="conversation-permissions-editor__setting">
-			<NcCheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch v-model="radioValue"
 				value="restricted"
 				:disabled="loading"
 				name="permission_radio"
 				type="radio"
-				@update:checked="handleSubmitPermissions">
+				@update:model-value="handleSubmitPermissions">
 				{{ t('spreed', 'Restricted') }}
 			</NcCheckboxRadioSwitch>
 			<span v-show="loading && radioValue === 'restricted'" class="icon-loading-small" />
@@ -46,12 +46,12 @@
 
 		<!-- Advanced permissions -->
 		<div class="conversation-permissions-editor__setting--advanced">
-			<NcCheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch v-model="radioValue"
 				value="advanced"
 				:disabled="loading"
 				name="permission_radio"
 				type="radio"
-				@update:checked="showPermissionsEditor = true">
+				@update:model-value="showPermissionsEditor = true">
 				{{ t('spreed', 'Advanced permissions') }}
 			</NcCheckboxRadioSwitch>
 
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 1551163f402..888ce57fa0b 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -23,8 +23,8 @@
 				<NcCheckboxRadioSwitch v-if="showMediaSettingsToggle"
 					type="switch"
 					:disabled="recordingConsentRequired"
-					:checked="showMediaSettings"
-					@update:checked="setShowMediaSettings">
+					:model-value="showMediaSettings"
+					@update:model-value="setShowMediaSettings">
 					{{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }}
 				</NcCheckboxRadioSwitch>
 				<p v-if="recordingConsentRequired">
@@ -92,8 +92,8 @@
 						{{ t('spreed', 'Archived conversations are hidden from the conversation list by default. However, they will still appear when you search for the conversation name or access a list of archived conversations.') }}
 					</p>
 					<NcCheckboxRadioSwitch type="switch"
-						:checked="isArchived"
-						@update:checked="toggleArchiveConversation">
+						:model-value="isArchived"
+						@update:model-value="toggleArchiveConversation">
 						{{ t('spreed', 'Archive conversation') }}
 					</NcCheckboxRadioSwitch>
 				</template>
diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
index f792d77121f..046a206e930 100644
--- a/src/components/ConversationSettings/LinkShareSettings.vue
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -13,21 +13,21 @@
 			<p v-if="hasBreakoutRooms" class="app-settings-section__hint">
 				{{ t('spreed', 'Breakout rooms are not allowed in public conversations.') }}
 			</p>
-			<NcCheckboxRadioSwitch :checked="isSharedPublicly"
+			<NcCheckboxRadioSwitch :model-value="isSharedPublicly"
 				:disabled="hasBreakoutRooms || isSaving"
 				type="switch"
 				aria-describedby="link_share_settings_hint"
-				@update:checked="toggleGuests">
+				@update:model-value="toggleGuests">
 				{{ t('spreed', 'Allow guests to join this conversation via link') }}
 			</NcCheckboxRadioSwitch>
 
 			<template v-if="isSharedPublicly">
 				<NcCheckboxRadioSwitch v-if="!forcePasswordProtection"
-					:checked="isPasswordProtectionChecked"
+					:model-value="isPasswordProtectionChecked"
 					:disabled="isSaving"
 					type="switch"
 					aria-describedby="link_share_settings_password_hint"
-					@update:checked="togglePassword">
+					@update:model-value="togglePassword">
 					{{ t('spreed', 'Password protection') }}
 				</NcCheckboxRadioSwitch>
 				<template v-else>
diff --git a/src/components/ConversationSettings/ListableSettings.vue b/src/components/ConversationSettings/ListableSettings.vue
index 0a4fe8f823b..57879d8a417 100644
--- a/src/components/ConversationSettings/ListableSettings.vue
+++ b/src/components/ConversationSettings/ListableSettings.vue
@@ -5,18 +5,18 @@
 
 <template>
 	<div v-if="canModerate">
-		<NcCheckboxRadioSwitch :checked="listable !== LISTABLE.NONE"
+		<NcCheckboxRadioSwitch :model-value="listable !== LISTABLE.NONE"
 			:disabled="isListableLoading"
 			type="switch"
-			@update:checked="toggleListableUsers">
+			@update:model-value="toggleListableUsers">
 			{{ t('spreed', 'Open conversation to registered users, showing it in search results') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch v-if="listable !== LISTABLE.NONE && isGuestsAccountsEnabled"
 			class="additional-top-margin"
-			:checked="listable === LISTABLE.ALL"
+			:model-value="listable === LISTABLE.ALL"
 			:disabled="isListableLoading"
 			type="switch"
-			@update:checked="toggleListableGuests">
+			@update:model-value="toggleListableGuests">
 			{{ t('spreed', 'Also open to users created with the Guests app') }}
 		</NcCheckboxRadioSwitch>
 	</div>
diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 9fa425f7d19..83db4c9de2f 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -9,10 +9,10 @@
 			<NcNoteCard v-if="hasCall && !hasLobbyEnabled"
 				type="warning"
 				:text="t('spreed', 'Enabling the lobby will remove non-moderators from the ongoing call.')" />
-			<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
+			<NcCheckboxRadioSwitch :model-value="hasLobbyEnabled"
 				type="switch"
 				:disabled="isLobbyStateLoading"
-				@update:checked="toggleLobby">
+				@update:model-value="toggleLobby">
 				{{ t('spreed', 'Enable lobby, restricting the conversation to moderators') }}
 			</NcCheckboxRadioSwitch>
 		</div>
diff --git a/src/components/ConversationSettings/LockingSettings.vue b/src/components/ConversationSettings/LockingSettings.vue
index 2bf54691a50..52fc771fbf8 100644
--- a/src/components/ConversationSettings/LockingSettings.vue
+++ b/src/components/ConversationSettings/LockingSettings.vue
@@ -12,11 +12,11 @@
 			type="warning"
 			:text="t('spreed', 'This will also terminate the ongoing call.')" />
 		<div>
-			<NcCheckboxRadioSwitch :checked="isReadOnly"
+			<NcCheckboxRadioSwitch :model-value="isReadOnly"
 				type="switch"
 				aria-describedby="moderation_settings_lock_conversation_hint"
 				:disabled="isReadOnlyStateLoading"
-				@update:checked="toggleReadOnly">
+				@update:model-value="toggleReadOnly">
 				{{ t('spreed', 'Lock the conversation to prevent anyone to post messages or start calls') }}
 			</NcCheckboxRadioSwitch>
 		</div>
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index aa2ce34c43b..26d615c0acf 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -35,9 +35,9 @@
 				</div>
 				<div v-show="parts.length > 0"
 					class="enable-switch-line">
-					<NcCheckboxRadioSwitch :checked="enabled"
+					<NcCheckboxRadioSwitch :model-value="enabled"
 						type="switch"
-						@update:checked="onEnabled">
+						@update:model-value="onEnabled">
 						{{ t('spreed', 'Enable bridge') }}
 						({{ processStateText }})
 					</NcCheckboxRadioSwitch>
diff --git a/src/components/ConversationSettings/MentionsSettings.vue b/src/components/ConversationSettings/MentionsSettings.vue
index 486bc3386a2..f1716f72f1e 100644
--- a/src/components/ConversationSettings/MentionsSettings.vue
+++ b/src/components/ConversationSettings/MentionsSettings.vue
@@ -5,10 +5,10 @@
 
 <template>
 	<div v-if="canModerate">
-		<NcCheckboxRadioSwitch :checked="mentionPermissions === MENTION_PERMISSIONS.EVERYONE"
+		<NcCheckboxRadioSwitch :model-value="mentionPermissions === MENTION_PERMISSIONS.EVERYONE"
 			:disabled="isMentionPermissionsLoading"
 			type="switch"
-			@update:checked="toggleMentionPermissions">
+			@update:model-value="toggleMentionPermissions">
 			{{ t('spreed', 'Allow participants to mention @all') }}
 		</NcCheckboxRadioSwitch>
 	</div>
diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue
index 765143ad67f..3d4b10725af 100644
--- a/src/components/ConversationSettings/NotificationsSettings.vue
+++ b/src/components/ConversationSettings/NotificationsSettings.vue
@@ -11,11 +11,11 @@
 
 		<NcCheckboxRadioSwitch v-for="level in notificationLevels"
 			:key="level.value"
+			v-model="notificationLevel"
 			:value="level.value.toString()"
-			:checked.sync="notificationLevel"
 			name="notification_level"
 			type="radio"
-			@update:checked="setNotificationLevel">
+			@update:model-value="setNotificationLevel">
 			<span class="radio-button">
 				<component :is="notificationLevelIcon(level.value)" />
 				{{ level.label }}
@@ -24,9 +24,9 @@
 
 		<NcCheckboxRadioSwitch v-if="showCallNotificationSettings"
 			id="notification_calls"
+			v-model="notifyCalls"
 			type="switch"
-			:checked.sync="notifyCalls"
-			@update:checked="setNotificationCalls">
+			@update:model-value="setNotificationCalls">
 			{{ t('spreed', 'Notify about calls in this conversation') }}
 		</NcCheckboxRadioSwitch>
 	</div>
diff --git a/src/components/ConversationSettings/RecordingConsentSettings.vue b/src/components/ConversationSettings/RecordingConsentSettings.vue
index 17460ff88c9..554ff2e61aa 100644
--- a/src/components/ConversationSettings/RecordingConsentSettings.vue
+++ b/src/components/ConversationSettings/RecordingConsentSettings.vue
@@ -12,10 +12,10 @@
 			{{ t('spreed', 'Recording consent cannot be changed once a call or breakout session has started.') }}
 		</div>
 		<NcCheckboxRadioSwitch v-if="canModerate && !isGlobalConsent"
+			v-model="recordingConsentSelected"
 			type="switch"
-			:checked.sync="recordingConsentSelected"
 			:disabled="disabled"
-			@update:checked="setRecordingConsent">
+			@update:model-value="setRecordingConsent">
 			{{ t('spreed', 'Require recording consent before joining call in this conversation') }}
 		</NcCheckboxRadioSwitch>
 		<p v-else-if="isGlobalConsent">
diff --git a/src/components/ConversationSettings/SipSettings.vue b/src/components/ConversationSettings/SipSettings.vue
index 153c5e2f6ab..245b1f26d97 100644
--- a/src/components/ConversationSettings/SipSettings.vue
+++ b/src/components/ConversationSettings/SipSettings.vue
@@ -10,19 +10,19 @@
 		</h4>
 
 		<div>
-			<NcCheckboxRadioSwitch :checked="hasSIPEnabled"
+			<NcCheckboxRadioSwitch :model-value="hasSIPEnabled"
 				type="switch"
 				aria-describedby="sip_settings_hint"
 				:disabled="isSipLoading"
-				@update:checked="toggleSetting('enable')">
+				@update:model-value="toggleSetting('enable')">
 				{{ t('spreed', 'Enable phone and SIP dial-in') }}
 			</NcCheckboxRadioSwitch>
 		</div>
 		<div v-if="hasSIPEnabled">
-			<NcCheckboxRadioSwitch :checked="noPinRequired"
+			<NcCheckboxRadioSwitch :model-value="noPinRequired"
 				type="switch"
 				:disabled="isSipLoading || !hasSIPEnabled"
-				@update:checked="toggleSetting('nopin')">
+				@update:model-value="toggleSetting('nopin')">
 				{{ t('spreed', 'Allow to dial-in without a PIN') }}
 			</NcCheckboxRadioSwitch>
 		</div>
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 241751f72e5..05603b8dfd3 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -99,16 +99,16 @@
 			<!-- "Always show" setting -->
 			<NcCheckboxRadioSwitch v-if="!isPublicShareAuthSidebar"
 				class="checkbox"
-				:checked="showMediaSettings || showRecordingWarning"
+				:model-value="showMediaSettings || showRecordingWarning"
 				:disabled="showRecordingWarning"
-				@update:checked="setShowMediaSettings">
+				@update:model-value="setShowMediaSettings">
 				{{ t('spreed', 'Always show preview for this conversation') }}
 			</NcCheckboxRadioSwitch>
 
 			<!-- Moderator options before starting a call-->
 			<NcCheckboxRadioSwitch v-if="!hasCall && canModerateRecording"
-				class="checkbox"
-				:checked.sync="isRecordingFromStart">
+				v-model="isRecordingFromStart"
+				class="checkbox">
 				{{ t('spreed', 'Start recording immediately with the call') }}
 			</NcCheckboxRadioSwitch>
 
@@ -125,8 +125,8 @@
 						{{ t('spreed', 'The recording might include your voice, video from camera, and screen share. Your consent is required before joining the call.') }}
 					</p>
 					<NcCheckboxRadioSwitch class="checkbox--warning"
-						:checked="recordingConsentGiven"
-						@update:checked="setRecordingConsentGiven">
+						:model-value="recordingConsentGiven"
+						@update:model-value="setRecordingConsentGiven">
 						{{ t('spreed', 'Give consent to the recording of this call') }}
 					</NcCheckboxRadioSwitch>
 				</template>
diff --git a/src/components/NewConversationDialog/NewConversationSetupPage.vue b/src/components/NewConversationDialog/NewConversationSetupPage.vue
index 5ab50495dc8..a0be9bc967e 100644
--- a/src/components/NewConversationDialog/NewConversationSetupPage.vue
+++ b/src/components/NewConversationDialog/NewConversationSetupPage.vue
@@ -39,12 +39,12 @@
 		<label class="new-group-conversation__label">
 			{{ t('spreed', 'Conversation visibility') }}
 		</label>
-		<NcCheckboxRadioSwitch :checked.sync="isPublic"
+		<NcCheckboxRadioSwitch v-model="isPublic"
 			type="switch">
 			{{ t('spreed', 'Allow guests to join via link') }}
 		</NcCheckboxRadioSwitch>
 		<div class="new-group-conversation__wrapper">
-			<NcCheckboxRadioSwitch :checked.sync="hasPassword"
+			<NcCheckboxRadioSwitch v-model="hasPassword"
 				type="switch"
 				:disabled="!isPublic || forcePasswordProtection">
 				<span class="checkbox__label">{{ t('spreed', 'Password protect') }}</span>
diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index b8559700785..85ff813045b 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -79,10 +79,10 @@
 			{{ t('spreed', 'Settings') }}
 		</p>
 		<div class="poll-editor__settings">
-			<NcCheckboxRadioSwitch :checked.sync="isAnonymous" type="checkbox">
+			<NcCheckboxRadioSwitch v-model="isAnonymous" type="checkbox">
 				{{ t('spreed', 'Anonymous poll') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="isMultipleAnswer" type="checkbox">
+			<NcCheckboxRadioSwitch v-model="isMultipleAnswer" type="checkbox">
 				{{ t('spreed', 'Multiple answers') }}
 			</NcCheckboxRadioSwitch>
 		</div>
diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index 7001c3118a3..594d8b6d14b 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -14,32 +14,32 @@
 				<p :id="dialogHeaderId" class="title" v-html="modalTitle" />
 				<form @submit.prevent="handleSubmitPermissions">
 					<NcCheckboxRadioSwitch ref="callStart"
-						:checked.sync="callStart"
+						v-model="callStart"
 						class="checkbox">
 						{{ t('spreed', 'Start a call') }}
 					</NcCheckboxRadioSwitch>
 					<NcCheckboxRadioSwitch ref="lobbyIgnore"
-						:checked.sync="lobbyIgnore"
+						v-model="lobbyIgnore"
 						class="checkbox">
 						{{ t('spreed', 'Skip the lobby') }}
 					</NcCheckboxRadioSwitch>
 					<NcCheckboxRadioSwitch ref="chatMessagesAndReactions"
-						:checked.sync="chatMessagesAndReactions"
+						v-model="chatMessagesAndReactions"
 						class="checkbox">
 						{{ t('spreed', 'Can post messages and reactions') }}
 					</NcCheckboxRadioSwitch>
 					<NcCheckboxRadioSwitch ref="publishAudio"
-						:checked.sync="publishAudio"
+						v-model="publishAudio"
 						class="checkbox">
 						{{ t('spreed', 'Enable the microphone') }}
 					</NcCheckboxRadioSwitch>
 					<NcCheckboxRadioSwitch ref="publishVideo"
-						:checked.sync="publishVideo"
+						v-model="publishVideo"
 						class="checkbox">
 						{{ t('spreed', 'Enable the camera') }}
 					</NcCheckboxRadioSwitch>
 					<NcCheckboxRadioSwitch ref="publishScreen"
-						:checked.sync="publishScreen"
+						v-model="publishScreen"
 						class="checkbox">
 						{{ t('spreed', 'Share the screen') }}
 					</NcCheckboxRadioSwitch>
diff --git a/src/components/PollViewer/PollViewer.vue b/src/components/PollViewer/PollViewer.vue
index 0a8a79da3ee..8710dd612d4 100644
--- a/src/components/PollViewer/PollViewer.vue
+++ b/src/components/PollViewer/PollViewer.vue
@@ -23,7 +23,7 @@
 			<div v-if="modalPage === 'voting'" class="poll-modal__options">
 				<NcCheckboxRadioSwitch v-for="(option, index) in poll.options"
 					:key="'option-' + index"
-					:checked.sync="checked"
+					v-model="checked"
 					:value="index.toString()"
 					:type="isMultipleAnswers ? 'checkbox' : 'radio'"
 					name="answerType">
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 6c164c996a0..cb6d4d0bf54 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -280,7 +280,7 @@
 				:name="removeParticipantLabel">
 				<p> {{ removeDialogMessage }} </p>
 				<template v-if="showBanOption">
-					<NcCheckboxRadioSwitch :checked.sync="isBanParticipant">
+					<NcCheckboxRadioSwitch v-model="isBanParticipant">
 						{{ t('spreed', 'Also ban from this conversation') }}
 					</NcCheckboxRadioSwitch>
 					<template v-if="isBanParticipant">
diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue
index f694253e3a9..fbddbbc9357 100644
--- a/src/components/SettingsDialog/MediaDevicesPreview.vue
+++ b/src/components/SettingsDialog/MediaDevicesPreview.vue
@@ -65,8 +65,8 @@
 		</div>
 		<NcCheckboxRadioSwitch v-if="supportDefaultBlurVirtualBackground"
 			type="switch"
-			:checked="blurVirtualBackgroundEnabled"
-			@update:checked="setBlurVirtualBackgroundEnabled">
+			:model-value="blurVirtualBackgroundEnabled"
+			@update:model-value="setBlurVirtualBackgroundEnabled">
 			{{ t('spreed', 'Enable blur background by default for all conversation') }}
 		</NcCheckboxRadioSwitch>
 	</div>
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 5512d8cb099..0248a05519f 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -22,11 +22,11 @@
 			<MediaDevicesPreview />
 			<NcCheckboxRadioSwitch v-if="supportStartWithoutMedia"
 				id="call-media"
-				:checked="startWithoutMediaEnabled"
+				:model-value="startWithoutMediaEnabled"
 				:disabled="mediaLoading"
 				type="switch"
 				class="checkbox call-media"
-				@update:checked="toggleStartWithoutMedia">
+				@update:model-value="toggleStartWithoutMedia">
 				{{ t('spreed', 'Turn off camera and microphone by default when joining a call') }}
 			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>
@@ -61,20 +61,20 @@
 			:name="t('spreed', 'Privacy')"
 			class="app-settings-section">
 			<NcCheckboxRadioSwitch id="read_status_privacy"
-				:checked="readStatusPrivacyIsPublic"
+				:model-value="readStatusPrivacyIsPublic"
 				:disabled="privacyLoading"
 				type="switch"
 				class="checkbox"
-				@update:checked="toggleReadStatusPrivacy">
+				@update:model-value="toggleReadStatusPrivacy">
 				{{ t('spreed', 'Share my read-status and show the read-status of others') }}
 			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch v-if="supportTypingStatus"
 				id="typing_status_privacy"
-				:checked="typingStatusPrivacyIsPublic"
+				:model-value="typingStatusPrivacyIsPublic"
 				:disabled="privacyLoading"
 				type="switch"
 				class="checkbox"
-				@update:checked="toggleTypingStatusPrivacy">
+				@update:model-value="toggleTypingStatusPrivacy">
 				{{ t('spreed', 'Share my typing-status and show the typing-status of others') }}
 			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>
@@ -82,11 +82,11 @@
 			:name="t('spreed', 'Sounds')"
 			class="app-settings-section">
 			<NcCheckboxRadioSwitch id="play_sounds"
-				:checked="shouldPlaySounds"
+				:model-value="shouldPlaySounds"
 				:disabled="playSoundsLoading"
 				type="switch"
 				class="checkbox"
-				@update:checked="togglePlaySounds">
+				@update:model-value="togglePlaySounds">
 				{{ t('spreed', 'Play sounds when participants join or leave a call') }}
 			</NcCheckboxRadioSwitch>
 			<em>{{ t('spreed', 'Sounds can currently not be played on iPad and iPhone devices due to technical restrictions by the manufacturer.') }}</em>
@@ -103,7 +103,7 @@
 			class="app-settings-section">
 			<template v-if="serverSupportsBackgroundBlurred">
 				<NcCheckboxRadioSwitch id="blur-call-background"
-					:checked="isBackgroundBlurred === 'yes'"
+					:model-value="isBackgroundBlurred === 'yes'"
 					:indeterminate="isBackgroundBlurred === ''"
 					type="checkbox"
 					class="checkbox"
@@ -119,10 +119,10 @@
 			</template>
 			<NcCheckboxRadioSwitch v-else
 				id="blur-call-background"
-				:checked="isBackgroundBlurred !== 'false'"
+				:model-value="isBackgroundBlurred !== 'false'"
 				type="switch"
 				class="checkbox"
-				@update:checked="toggleBackgroundBlurred">
+				@update:model-value="toggleBackgroundBlurred">
 				{{ t('spreed', 'Blur background image in the call (may increase GPU load)') }}
 			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>

From 65131a30fc298473b904788cc25a7ec77b6d8f61 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 27 Dec 2024 17:47:30 +0100
Subject: [PATCH 5/5] fix: adjust tests

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../PermissionsEditor/PermissionsEditor.vue   | 12 ++--
 .../ParticipantPermissionsEditor.spec.js      | 68 +++++++++----------
 src/components/RoomSelector.spec.js           |  8 +--
 3 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index 594d8b6d14b..404fb5338c5 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -219,12 +219,12 @@ export default {
 		 * @param {number} permissions - the permissions number.
 		 */
 		writePermissionsToComponent(permissions) {
-			permissions & PERMISSIONS.CALL_START ? this.callStart = true : this.callStart = false
-			permissions & PERMISSIONS.LOBBY_IGNORE ? this.lobbyIgnore = true : this.lobbyIgnore = false
-			permissions & PERMISSIONS.CHAT ? this.chatMessagesAndReactions = true : this.chatMessagesAndReactions = false
-			permissions & PERMISSIONS.PUBLISH_AUDIO ? this.publishAudio = true : this.publishAudio = false
-			permissions & PERMISSIONS.PUBLISH_VIDEO ? this.publishVideo = true : this.publishVideo = false
-			permissions & PERMISSIONS.PUBLISH_SCREEN ? this.publishScreen = true : this.publishScreen = false
+			this.callStart = Boolean(permissions & PERMISSIONS.CALL_START)
+			this.lobbyIgnore = Boolean(permissions & PERMISSIONS.LOBBY_IGNORE)
+			this.chatMessagesAndReactions = Boolean(permissions & PERMISSIONS.CHAT)
+			this.publishAudio = Boolean(permissions & PERMISSIONS.PUBLISH_AUDIO)
+			this.publishVideo = Boolean(permissions & PERMISSIONS.PUBLISH_VIDEO)
+			this.publishScreen = Boolean(permissions & PERMISSIONS.PUBLISH_SCREEN)
 		},
 
 		handleSubmitPermissions() {
diff --git a/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
index a3b35895302..c69ca8920b3 100644
--- a/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
+++ b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
@@ -72,50 +72,48 @@ describe('ParticipantPermissionsEditor.vue', () => {
 		})
 	}
 
-	describe('Properly renders the checkboxes when mounted', () => {
-		test('Properly renders the call start checkbox', async () => {
+	describe('checkboxes render on mount', () => {
+		const testCheckboxRendering = async (participant) => {
+			// Arrange
+			const permissions = participant.permissions
+				|| (PARTICIPANT.PERMISSIONS.MAX_DEFAULT & ~PARTICIPANT.PERMISSIONS.LOBBY_IGNORE) // Default from component
+
+			const permissionsMap = [
+				{ ref: 'callStart', value: !!(permissions & PARTICIPANT.PERMISSIONS.CALL_START) },
+				{ ref: 'lobbyIgnore', value: !!(permissions & PARTICIPANT.PERMISSIONS.LOBBY_IGNORE) },
+				{ ref: 'chatMessagesAndReactions', value: !!(permissions & PARTICIPANT.PERMISSIONS.CHAT) },
+				{ ref: 'publishAudio', value: !!(permissions & PARTICIPANT.PERMISSIONS.PUBLISH_AUDIO) },
+				{ ref: 'publishVideo', value: !!(permissions & PARTICIPANT.PERMISSIONS.PUBLISH_VIDEO) },
+				{ ref: 'publishScreen', value: !!(permissions & PARTICIPANT.PERMISSIONS.PUBLISH_SCREEN) },
+			]
+
+			// Act
 			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const callStartCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'callStart' })
-			expect(callStartCheckbox.vm.$options.propsData.checked).toBe(true)
-		})
 
-		test('Properly renders the lobby Ignore checkbox', async () => {
-			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const lobbyIgnoreCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'lobbyIgnore' })
-			expect(lobbyIgnoreCheckbox.vm.$options.propsData.checked).toBe(false)
-		})
+			// Assert
+			for (const permission of permissionsMap) {
+				expect(wrapper.findComponent(PermissionsEditor).findComponent({ ref: permission.ref })
+					.props('modelValue')).toBe(permission.value)
+			}
+		}
 
-		test('Properly renders the publish audio checkbox', async () => {
-			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const publishAudioCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishAudio' })
-			expect(publishAudioCheckbox.vm.$options.propsData.checked).toBe(true)
+		it('render checkboxes with custom permissions', async () => {
+			await testCheckboxRendering(participant)
 		})
 
-		test('Properly renders the publish video checkbox', async () => {
-			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const publishVideoCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishVideo' })
-			expect(publishVideoCheckbox.vm.$options.propsData.checked).toBe(true)
+		it('render checkboxes with default permissions', async () => {
+			participant.permissions = PARTICIPANT.PERMISSIONS.DEFAULT
+			await testCheckboxRendering(participant)
 		})
 
-		test('Properly renders the publish screen checkbox', async () => {
-			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const publishScreenCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishScreen' })
-			expect(publishScreenCheckbox.vm.$options.propsData.checked).toBe(false)
+		it('render checkboxes with all permissions', async () => {
+			participant.permissions = PARTICIPANT.PERMISSIONS.MAX_DEFAULT
+			await testCheckboxRendering(participant)
 		})
 
-		test('Properly renders the checkboxes with default permissions', async () => {
-			participant.permissions = PARTICIPANT.PERMISSIONS.DEFAULT
-			const wrapper = await mountParticipantPermissionsEditor(participant)
-			const callStartCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'callStart' })
-			expect(callStartCheckbox.vm.$options.propsData.checked).toBe(true)
-			const lobbyIgnoreCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'lobbyIgnore' })
-			expect(lobbyIgnoreCheckbox.vm.$options.propsData.checked).toBe(false)
-			const publishAudioCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishAudio' })
-			expect(publishAudioCheckbox.vm.$options.propsData.checked).toBe(true)
-			const publishVideoCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishVideo' })
-			expect(publishVideoCheckbox.vm.$options.propsData.checked).toBe(true)
-			const publishScreenCheckbox = wrapper.findComponent(PermissionsEditor).findComponent({ ref: 'publishScreen' })
-			expect(publishScreenCheckbox.vm.$options.propsData.checked).toBe(true)
+		it('render checkboxes with restricted permissions', async () => {
+			participant.permissions = PARTICIPANT.PERMISSIONS.CALL_JOIN
+			await testCheckboxRendering(participant)
 		})
 	})
 
diff --git a/src/components/RoomSelector.spec.js b/src/components/RoomSelector.spec.js
index 31a9dce4fb8..1dddd1882b8 100644
--- a/src/components/RoomSelector.spec.js
+++ b/src/components/RoomSelector.spec.js
@@ -170,7 +170,7 @@ describe('RoomSelector', () => {
 
 			// Act: type 'conversation'
 			const input = wrapper.findComponent({ name: 'NcTextField' })
-			await input.vm.$emit('update:value', 'conversation')
+			await input.vm.$emit('update:modelValue', 'conversation')
 
 			// Assert
 			const list = wrapper.findAllComponents({ name: 'NcListItem' })
@@ -184,7 +184,7 @@ describe('RoomSelector', () => {
 
 			// Act: type 'conversation'
 			const input = wrapper.findComponent({ name: 'NcTextField' })
-			await input.vm.$emit('update:value', 'qwerty')
+			await input.vm.$emit('update:modelValue', 'qwerty')
 
 			// Assert
 			const list = wrapper.findAllComponents({ name: 'NcListItem' })
@@ -197,7 +197,7 @@ describe('RoomSelector', () => {
 
 			// Act: type 'conversation'
 			const input = wrapper.findComponent({ name: 'NcTextField' })
-			await input.vm.$emit('update:value', 'qwerty')
+			await input.vm.$emit('update:modelValue', 'qwerty')
 
 			// Assert
 			const list = wrapper.findAllComponents({ name: 'NcListItem' })
@@ -210,7 +210,7 @@ describe('RoomSelector', () => {
 			// Arrange
 			const wrapper = await mountRoomSelector()
 			const input = wrapper.findComponent({ name: 'NcTextField' })
-			await input.vm.$emit('update:value', 'conversation')
+			await input.vm.$emit('update:modelValue', 'conversation')
 
 			// Act: click trailing button
 			await input.vm.$emit('trailing-button-click')