chore: intend to put v-bind in lower position to main the current att…

…ribute selection in vue 2 (individual attributes are always selected over those in v-bind). In vue 3, it depends on the order.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -20,8 +20,7 @@
 -->
 
 <template>
-	<NcModal v-bind="$attrs"
-		:container="container"
+	<NcModal :container="container"
 		:class="{'modal-mask__participants-step': isEditingParticipants}"
 		v-on="$listeners">
 		<div class="breakout-rooms-editor"

src/components/CallView/CallView.vue

@@ -98,7 +98,6 @@
 
 				<!-- Stripe or fullscreen grid depending on `isGrid` -->
 				<Grid v-if="!isSidebar"
-					v-bind="$attrs"
 					:is-stripe="!isGrid"
 					:is-recording="isRecording"
 					:token="token"
@@ -109,7 +108,8 @@
 					:local-call-participant-model="localCallParticipantModel"
 					:shared-datas="sharedDatas"
 					@select-video="handleSelectVideo"
-					@click-local-video="handleClickLocalVideo" />
+					@click-local-video="handleClickLocalVideo"
+					v-bind="$attrs" />
 
 				<ReactionToaster v-if="supportedReactions?.length"
 					:token="token"

src/components/CallView/shared/Screen.vue

@@ -26,11 +26,11 @@
 			class="screen"
 			:class="screenClass" />
 		<VideoBottomBar v-if="isBig"
-			v-bind="$props"
-			:is-big="true"
-			:is-screen="true"
+			is-big
+			is-screen
 			:model="model"
-			:participant-name="remoteParticipantName" />
+			:participant-name="remoteParticipantName"
+			v-bind="$props" />
 	</div>
 </template>
 

src/components/CallView/shared/VideoVue.vue

@@ -80,9 +80,9 @@
 			{{ connectionMessage }}
 		</div>
 		<slot v-if="!hideBottomBar" name="bottom-bar">
-			<VideoBottomBar v-bind="$props"
-				:has-shadow="hasVideo"
-				:participant-name="participantName" />
+			<VideoBottomBar :has-shadow="hasVideo"
+				:participant-name="participantName"
+				v-bind="$props" />
 		</slot>
 	</div>
 </template>

src/components/ConversationSettings/LobbySettings.vue

@@ -49,8 +49,8 @@
 					:disabled="lobbyTimerFieldDisabled"
 					type="datetime"
 					:input-class="['mx-input', { focusable: !lobbyTimerFieldDisabled }]"
-					v-bind="dateTimePickerAttrs"
-					@change="saveLobbyTimer" />
+					@change="saveLobbyTimer"
+					v-bind="dateTimePickerAttrs" />
 			</form>
 		</div>
 	</div>

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

@@ -36,10 +36,10 @@
 			'system' : isSystemMessage,
 			'combined-system': isCombinedSystemMessage}"
 			class="message-body">
-			<MessageBody v-bind="{...$props, ...readInfoProps}"
-				:rich-parameters="richParameters"
+			<MessageBody :rich-parameters="richParameters"
 				:is-deleting="isDeleting"
-				:has-call="conversation.hasCall" />
+				:has-call="conversation.hasCall"
+				v-bind="{...$props, ...readInfoProps}" />
 
 			<!-- reactions buttons and popover with details -->
 			<Reactions v-if="Object.keys(reactions).length"
@@ -55,7 +55,6 @@
 			<MessageButtonsBar v-if="showMessageButtonsBar"
 				ref="messageButtonsBar"
 				class="message-buttons-bar"
-				v-bind="{...$props, ...readInfoProps}"
 				:is-translation-available="isTranslationAvailable"
 				:is-action-menu-open.sync="isActionMenuOpen"
 				:is-emoji-picker-open.sync="isEmojiPickerOpen"
@@ -65,7 +64,8 @@
 				@show-translate-dialog="isTranslateDialogOpen = true"
 				@reply="handleReply"
 				@edit="handleEdit"
-				@delete="handleDelete" />
+				@delete="handleDelete"
+				v-bind="{...$props, ...readInfoProps}" />
 			<div v-else-if="showCombinedSystemMessageToggle"
 				class="message-buttons-bar">
 				<NcButton type="tertiary"

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

@@ -24,15 +24,15 @@
 
 <template>
 	<component :is="filePreviewElement"
-		v-bind="filePreviewBinding"
 		:tabindex="wrapperTabIndex"
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable,
 			'file-preview--upload-editor': isUploadEditor,
 			'file-preview--shared-items-grid': isSharedItems && !rowLayout,
 			'file-preview--row-layout': rowLayout }"
 		@click.exact="handleClick"
-		@keydown.enter="handleClick">
+		@keydown.enter="handleClick"
+		v-bind="filePreviewBinding">
 		<span v-if="!isLoading || fallbackLocalUrl"
 			class="image-container"
 			:class="{'playable': isPlayable}">

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

@@ -41,9 +41,9 @@
 			<!-- Additional controls -->
 			<CallButton v-if="showJoinCallButton" />
 			<Poll v-if="showResultsButton"
-				v-bind="messageParameters.poll"
 				:token="token"
-				show-as-button />
+				show-as-button
+				v-bind="messageParameters.poll" />
 		</div>
 
 		<!-- Normal message body content -->

src/components/MessagesList/MessagesGroup/MessagesGroup.vue

@@ -38,13 +38,13 @@
 			</li>
 			<Message v-for="(message, index) of messages"
 				:key="message.id"
-				v-bind="message"
 				:token="token"
 				:is-temporary="message.timestamp === 0"
 				:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
 				:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
 				:actor-type="actorType"
-				:actor-id="actorId" />
+				:actor-id="actorId"
+				v-bind="message" />
 		</ul>
 	</li>
 </template>

src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue

@@ -26,26 +26,26 @@
 			class="messages-group__system">
 			<ul v-if="messagesCollapsed.messages?.length > 1"
 				class="messages messages--header">
-				<Message v-bind="createCombinedSystemMessage(messagesCollapsed)"
-					:token="token"
+				<Message :token="token"
 					is-combined-system-message
 					:is-combined-system-message-collapsed="messagesCollapsed.collapsed"
 					:next-message-id="getNextMessageId(messagesCollapsed.messages.at(-1))"
 					:previous-message-id="getPrevMessageId(messagesCollapsed.messages.at(0))"
 					:last-collapsed-message-id="messagesCollapsed.lastId"
-					@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)" />
+					@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)"
+					v-bind="createCombinedSystemMessage(messagesCollapsed)" />
 			</ul>
 			<ul v-show="messagesCollapsed.messages?.length === 1 || !messagesCollapsed.collapsed"
 				class="messages"
 				:class="{'messages--collapsed': messagesCollapsed.messages?.length > 1}">
 				<Message v-for="message in messagesCollapsed.messages"
 					:key="message.id"
-					v-bind="message"
 					:token="token"
 					is-collapsed-system-message
 					:last-collapsed-message-id="messagesCollapsed.lastId"
 					:next-message-id="getNextMessageId(message)"
-					:previous-message-id="getPrevMessageId(message)" />
+					:previous-message-id="getPrevMessageId(message)"
+					v-bind="message" />
 			</ul>
 		</div>
 	</li>

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -46,9 +46,9 @@
 					<template v-for="file in files">
 						<FilePreview :key="file[1].temporaryMessage.id"
 							:token="token"
-							v-bind="file[1].temporaryMessage.messageParameters.file"
-							:is-upload-editor="true"
-							@remove-file="handleRemoveFileFromSelection" />
+							is-upload-editor
+							@remove-file="handleRemoveFileFromSelection"
+							v-bind="file[1].temporaryMessage.messageParameters.file" />
 					</template>
 					<div :key="'addMore'"
 						class="add-more">

src/components/TopBar/TopBarMenu.vue

@@ -174,6 +174,7 @@ import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import GridView from 'vue-material-design-icons/ViewGrid.vue'
+import PromotedView from 'vue-material-design-icons/ViewGallery.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showWarning } from '@nextcloud/dialogs'
@@ -186,7 +187,6 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
-import PromotedView from '../../assets/missingMaterialDesignIcons/PromotedView.vue'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'

src/components/UIShared/TransitionWrapper.vue

@@ -22,14 +22,14 @@
 <template>
 	<TransitionGroup v-if="group"
 		class="transition-group"
-		v-bind="$attrs"
 		:name="name"
+		v-bind="$attrs"
 		v-on="$listeners">
 		<slot />
 	</TransitionGroup>
 	<Transition v-else
-		v-bind="$attrs"
 		:name="name"
+		v-bind="$attrs"
 		v-on="$listeners">
 		<slot />
 	</Transition>