fix(vue3): replace value.sync syntax with v-model syntax

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/App.vue

@@ -13,7 +13,7 @@
 			<router-view />
 		</NcAppContent>
 		<RightSidebar :is-in-call="isInCall" />
-		<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
+		<MediaSettings v-model.recording-consent-given="recordingConsentGiven" />
 		<SettingsDialog />
 		<ConversationSettingsDialog />
 	</NcContent>

src/PublicShareAuthSidebar.vue

@@ -16,7 +16,7 @@
 				<CallView :token="token" :is-sidebar="true" />
 				<ChatView />
 				<PollViewer />
-				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
+				<MediaSettings v-model:recording-consent-given="recordingConsentGiven" />
 			</template>
 		</aside>
 	</TransitionWrapper>

src/PublicShareSidebar.vue

@@ -29,7 +29,7 @@
 				<CallButton class="call-button" />
 				<ChatView />
 				<PollViewer />
-				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
+				<MediaSettings v-model:recording-consent-given="recordingConsentGiven" />
 			</template>
 		</aside>
 	</TransitionWrapper>

src/components/AdminSettings/RecordingServers.vue

@@ -20,8 +20,8 @@
 			group>
 			<RecordingServer v-for="(server, index) in servers"
 				:key="`server${index}`"
-				:server.sync="servers[index].server"
-				:verify.sync="servers[index].verify"
+				v-model:server="servers[index].server"
+				v-model:verify="servers[index].verify"
 				:index="index"
 				:loading="loading"
 				@remove-server="removeServer"

src/components/AdminSettings/SignalingServers.vue

@@ -23,8 +23,8 @@
 			group>
 			<SignalingServer v-for="(server, index) in servers"
 				:key="`server${index}`"
-				:server.sync="servers[index].server"
-				:verify.sync="servers[index].verify"
+				v-model:server="servers[index].server"
+				v-model:verify="servers[index].verify"
 				:index="index"
 				:loading="loading"
 				@remove-server="removeServer"

src/components/AdminSettings/StunServers.vue

@@ -19,7 +19,7 @@
 			group>
 			<StunServer v-for="(server, index) in servers"
 				:key="`server${index}`"
-				:server.sync="servers[index]"
+				:server="servers[index]"
 				:index="index"
 				:loading="loading"
 				@remove-server="removeServer"

src/components/AdminSettings/TurnServers.vue

@@ -18,10 +18,10 @@
 			group>
 			<TurnServer v-for="(server, index) in servers"
 				:key="`server${index}`"
-				:schemes.sync="servers[index].schemes"
-				:server.sync="servers[index].server"
-				:secret.sync="servers[index].secret"
-				:protocols.sync="servers[index].protocols"
+				:schemes="servers[index].schemes"
+				:server="servers[index].server"
+				:secret="servers[index].secret"
+				:protocols="servers[index].protocols"
 				:index="index"
 				:loading="loading"
 				@remove-server="removeServer"

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -12,7 +12,7 @@
 				<SelectableParticipant v-for="participant in unassignedParticipants"
 					:key="participant.attendeeId"
 					:value="participant.attendeeId"
-					:checked.sync="selectedParticipants"
+					v-model="selectedParticipants"
 					:participant="participant" />
 			</BreakoutRoomItem>
 			<BreakoutRoomItem v-for="(item, index) in assignments"
@@ -22,7 +22,7 @@
 				<SelectableParticipant v-for="attendeeId in item"
 					:key="attendeeId"
 					:value="assignments"
-					:checked.sync="selectedParticipants"
+					v-model="selectedParticipants"
 					:participant="attendeesById[attendeeId]" />
 			</BreakoutRoomItem>
 		</ul>
@@ -73,7 +73,7 @@
 			</NcButton>
 		</div>
 		<NcDialog v-if="showDialog"
-			:open.sync="showDialog"
+			v-model:open="showDialog"
 			:name="t('spreed','Delete breakout rooms')"
 			:message="dialogMessage"
 			container=".participants-editor">

src/components/BreakoutRoomsEditor/SelectableParticipant.vue

@@ -44,21 +44,21 @@ export default {
 			required: true,
 		},
 
-		checked: {
+		modelValue: {
 			type: Array,
 			required: true,
 		},
 	},
 
-	emits: ['update:checked'],
+	emits: ['update:modelValue'],
 
 	computed: {
 		modelProxy: {
 			get() {
-				return this.checked
+				return this.modelValue
 			},
 			set(value) {
-				this.$emit('update:checked', value)
+				this.$emit('update:modelValue', value)
 			},
 		},
 	},

src/components/ChatView.vue

@@ -27,7 +27,7 @@
 		<MessagesList role="region"
 			:aria-label="t('spreed', 'Conversation messages')"
 			:token="token"
-			:is-chat-scrolled-to-bottom.sync="isChatScrolledToBottom"
+			v-model:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
 			:is-visible="isVisible" />
 
 		<div class="scroll-to-bottom">

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -7,7 +7,7 @@
 	<NcAppSettingsDialog id="conversation-settings-container"
 		:aria-label="t('spreed', 'Conversation settings')"
 		:name="t('spreed', 'Conversation settings')"
-		:open.sync="showSettings"
+		v-model:open="showSettings"
 		:show-navigation="true"
 		:container="container">
 		<NcAppSettingsSection id="basic-info"

src/components/ConversationSettings/DangerZone.vue

@@ -32,7 +32,7 @@
 					{{ t('spreed', 'Delete conversation') }}
 				</NcButton>
 				<NcDialog class="danger-zone__dialog"
-					:open.sync="isDeleteConversationDialogOpen"
+					v-model:open="isDeleteConversationDialogOpen"
 					:name="t('spreed','Delete conversation')"
 					:message="deleteConversationDialogMessage"
 					container=".danger-zone">
@@ -58,7 +58,7 @@
 					{{ t('spreed', 'Delete chat messages') }}
 				</NcButton>
 				<NcDialog class="danger-zone__dialog"
-					:open.sync="isDeleteChatDialogOpen"
+					v-model:open="isDeleteChatDialogOpen"
 					:name="t('spreed','Delete all chat messages')"
 					:message="deleteChatDialogMessage"
 					container=".danger-zone">

src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue

@@ -21,13 +21,13 @@
 					v-model="searchText"
 					@keydown.enter="createConversation(participantPhoneItem)" />
 				<DialpadPanel container=".call-phone__form"
-					:value.sync="searchText"
+					v-model="searchText"
 					@submit="createConversation(participantPhoneItem)" />
 			</div>
 
 			<SelectPhoneNumber :name="t('spreed', 'Call a phone number')"
 				:value="searchText"
-				:participant-phone-item.sync="participantPhoneItem"
+				v-model:participant-phone-item="participantPhoneItem"
 				@select="createConversation" />
 		</template>
 

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -88,7 +88,7 @@
 
 		<!-- confirmation required to delete conversation -->
 		<template v-if="isDialogOpen" #extra>
-			<NcDialog :open.sync="isDialogOpen"
+			<NcDialog v-model:open="isDialogOpen"
 				:name="t('spreed','Delete conversation')"
 				:message="dialogMessage"
 				:container="container">

src/components/LeftSidebar/LeftSidebar.vue

@@ -10,8 +10,8 @@
 			<div class="conversations-search"
 				:class="{'conversations-search--expanded': isFocused}">
 				<SearchBox ref="searchBox"
-					:value.sync="searchText"
-					:is-focused.sync="isFocused"
+					v-model="searchText"
+					v-model:is-focused="isFocused"
 					:list="list"
 					@input="debounceFetchSearchResults"
 					@abort-search="abortSearch" />

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -40,10 +40,10 @@
 				ref="messageButtonsBar"
 				class="message-buttons-bar"
 				:is-translation-available="isTranslationAvailable"
-				:is-action-menu-open.sync="isActionMenuOpen"
-				:is-emoji-picker-open.sync="isEmojiPickerOpen"
-				:is-reactions-menu-open.sync="isReactionsMenuOpen"
-				:is-forwarder-open.sync="isForwarderOpen"
+				v-model:is-action-menu-open="isActionMenuOpen"
+				v-model:is-emoji-picker-open="isEmojiPickerOpen"
+				v-model:is-reactions-menu-open="isReactionsMenuOpen"
+				v-model:is-forwarder-open="isForwarderOpen"
 				:can-react="canReact"
 				v-bind="{...$props, ...readInfoProps}"
 				@show-translate-dialog="isTranslateDialogOpen = true"

src/components/NewConversationDialog/NewConversationContactsPage.vue

@@ -24,7 +24,7 @@
 			</NcTextField>
 			<DialpadPanel v-if="canModerateSipDialOut"
 				container=".set-contacts__form"
-				:value.sync="searchText"
+				v-model="searchText"
 				@submit="addParticipantPhone" />
 		</div>
 
@@ -44,7 +44,7 @@
 		<SelectPhoneNumber v-if="canModerateSipDialOut"
 			:name="t('spreed', 'Add a phone number')"
 			:value="searchText"
-			:participant-phone-item.sync="participantPhoneItem"
+			v-model:participant-phone-item="participantPhoneItem"
 			@select="addParticipantPhone" />
 		<ParticipantSearchResults :search-results="searchResults"
 			:contacts-loading="contactsLoading"

src/components/NewConversationDialog/NewConversationDialog.vue

@@ -19,17 +19,17 @@
 				<!-- First page -->
 				<NewConversationSetupPage v-show="page === 0"
 					ref="setupPage"
-					:new-conversation.sync="newConversation"
-					:password.sync="password"
-					:listable.sync="listable"
+					v-model:new-conversation="newConversation"
+					v-model:password="password"
+					v-model:listable="listable"
 					class="new-group-conversation__content"
 					@handle-enter="handleEnter"
 					@avatar-edited="setIsAvatarEdited" />
 
 				<!-- Second page -->
 				<NewConversationContactsPage v-if="page === 1"
 					class="new-group-conversation__content"
-					:selected-participants.sync="selectedParticipants"
+					v-model:selected-participants="selectedParticipants"
 					:can-moderate-sip-dial-out="canModerateSipDialOut"
 					:conversation-name="conversationName" />
 			</div>

src/components/NewConversationDialog/NewConversationSetupPage.vue

@@ -113,17 +113,17 @@ export default {
 			get() {
 				return this.newConversation.displayName
 			},
-			set(event) {
-				this.updateNewConversation({ displayName: event.target.value })
+			set(value) {
+				this.updateNewConversation({ displayName: value })
 			},
 		},
 
 		conversationDescription: {
 			get() {
 				return this.newConversation.description
 			},
-			set(event) {
-				this.updateNewConversation({ description: event.target.value })
+			set(value) {
+				this.updateNewConversation({ description: value })
 			},
 		},
 
@@ -170,8 +170,8 @@ export default {
 			get() {
 				return this.password
 			},
-			set(event) {
-				this.$emit('update:password', event.target.value)
+			set(value) {
+				this.$emit('update:password', value)
 			},
 		},
 

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -9,21 +9,21 @@
 			<SearchBox v-if="canSearch"
 				ref="searchBox"
 				class="search-form__input"
-				:value.sync="searchText"
-				:is-focused.sync="isFocused"
+				v-model="searchText"
+				v-model:is-focused="isFocused"
 				:placeholder-text="searchBoxPlaceholder"
 				@input="handleInput"
 				@keydown.enter="addParticipants(participantPhoneItem)"
 				@abort-search="abortSearch" />
 			<DialpadPanel v-if="canAddPhones"
-				:value.sync="searchText"
+				v-model="searchText"
 				@submit="addParticipants(participantPhoneItem)" />
 		</div>
 
 		<SelectPhoneNumber v-if="canAddPhones"
 			:name="t('spreed', 'Add a phone number')"
 			:value="searchText"
-			:participant-phone-item.sync="participantPhoneItem"
+			v-model:participant-phone-item="participantPhoneItem"
 			@select="addParticipants" />
 
 		<ParticipantsListVirtual v-if="!isSearching"

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -62,7 +62,7 @@
 		<SharedItemsBrowser v-if="showSharedItemsBrowser"
 			:token="token"
 			:shared-items="sharedItems"
-			:active-tab.sync="browserActiveTab"
+			v-model:active-tab="browserActiveTab"
 			@close="showSharedItemsBrowser = false" />
 	</div>
 </template>

src/components/SettingsDialog/SettingsDialog.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcAppSettingsDialog :open.sync="showSettings"
+	<NcAppSettingsDialog v-model:open="showSettings"
 		:name="t('spreed', 'Talk settings')"
 		:show-navigation="true"
 		first-selected-section="keyboard shortcuts"

src/components/TopBar/CallTime.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<NcPopover class="call-time"
-		:shown.sync="showPopover"
+		v-model:shown="showPopover"
 		:focus-trap="isShowRecordingControls"
 		:triggers="[]"
 		:container="container">

src/components/TopBar/TopBarMediaControls.vue

@@ -76,7 +76,7 @@
 			class="app-navigation-entry-utils-menu-button"
 			:boundaries-element="boundaryElement"
 			:container="container"
-			:open.sync="screenSharingMenuOpen">
+			v-model:open="screenSharingMenuOpen">
 			<template #icon>
 				<MonitorOff :size="20" />
 			</template>

src/components/UIShared/DialpadPanel.vue

@@ -125,7 +125,7 @@ export default {
 		/**
 		 * The conversation token of the message to be replied to.
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -152,7 +152,7 @@ export default {
 		}
 	},
 
-	emits: ['dial:type', 'update:value', 'submit'],
+	emits: ['dial:type', 'update:modelValue', 'submit'],
 
 	setup(props) {
 		const options = Object.values(regionCodes).map(region =>
@@ -180,13 +180,13 @@ export default {
 			if (this.dialing) {
 				this.$emit('dial:type', value)
 			} else {
-				this.$emit('update:value', this.value + value)
+				this.$emit('update:modelValue', this.value + value)
 			}
 		},
 
 		dialCode(value) {
 			this.region = value
-			this.$emit('update:value', value.dial_code)
+			this.$emit('update:modelValue', value.dial_code)
 
 			this.$nextTick(() => {
 				this.$refs.panel?.focus()
@@ -225,7 +225,7 @@ export default {
 		},
 
 		handleBackspace() {
-			this.$emit('update:value', this.value.slice(0, -1))
+			this.$emit('update:modelValue', this.value.slice(0, -1))
 		}
 	},
 }