Merge pull request #14048 from nextcloud/fix/noid/migrate-to-v-model-…

…part-2

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() {

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

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>

src/components/AdminSettings/HostedSignalingServer.vue

@@ -16,23 +16,23 @@
 		</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/"
 				:disabled="loading"
 				: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"
 				:disabled="loading"
 				: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="[email protected]"

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>

src/components/AdminSettings/RecordingServer.vue

@@ -7,17 +7,16 @@
 <template>
 	<li class="recording-server">
 		<NcTextField ref="recording_server"
+			v-model="recordingServer"
 			class="recording-server__textfield"
 			name="recording_server"
 			placeholder="https://recording.example.org"
-			:value="server"
 			:disabled="loading"
-			:label="t('spreed', 'Recording backend URL')"
-			@update:value="updateServer" />
+			: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>
 
@@ -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)
 		},

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>

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>

src/components/AdminSettings/SignalingServer.vue

@@ -6,17 +6,16 @@
 <template>
 	<li class="signaling-server">
 		<NcTextField ref="signaling_server"
+			v-model="signalingServer"
 			class="signaling-server__textfield"
 			name="signaling_server"
 			placeholder="wss://signaling.example.org"
-			:value="server"
 			:disabled="loading"
-			:label="t('spreed', 'High-performance backend URL')"
-			@update:value="updateServer" />
+			: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>
 
@@ -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)
 		},

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>

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"
-				:value="server"
 				:disabled="loading"
 				:aria-label="t('spreed', 'STUN server URL')"
-				label-outside
-				@update: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>

src/components/AdminSettings/TurnServer.vue

@@ -5,29 +5,27 @@
 
 <template>
 	<li class="turn-server">
-		<NcSelect class="turn-server__select"
+		<NcSelect v-model="turnSchemes"
+			class="turn-server__select"
 			name="turn_schemes"
-			:value="schemesOptions.find(i => i.value === schemes)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server schemes')"
 			:options="schemesOptions"
 			:clearable="false"
 			: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"
-			:value="server"
 			:disabled="loading"
-			:label="t('spreed', 'TURN server URL')"
-			@update:value="updateServer" />
+			:label="t('spreed', 'TURN server URL')" />
 
 		<NcPasswordField ref="turn_secret"
 			v-model="turnSecret"
@@ -38,18 +36,17 @@
 			:disabled="loading"
 			:label="t('spreed', 'TURN server secret')" />
 
-		<NcSelect class="turn-server__select"
+		<NcSelect v-model="turnProtocols"
+			class="turn-server__select"
 			name="turn_protocols"
-			:value="protocolOptions.find(i => i.value === protocols)"
 			:disabled="loading"
 			:aria-label-combobox="t('spreed', 'TURN server protocols')"
 			:options="protocolOptions"
 			:clearable="false"
 			: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