From 2d3838e3300cb589ff8ab77d8cc336194e51be4d Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 4 Apr 2024 15:10:10 +0200
Subject: [PATCH] chore: intend to put v-bind in lower position to main the
 current attribute 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>
---
 .../PromotedView.vue                          | 54 -------------------
 .../BreakoutRoomsEditor.vue                   |  3 +-
 src/components/CallView/CallView.vue          |  2 +-
 src/components/CallView/shared/Screen.vue     |  8 +--
 src/components/CallView/shared/VideoVue.vue   |  6 +--
 .../MessagesGroup/Message/Message.vue         |  8 +--
 .../Message/MessagePart/FilePreview.vue       |  2 +-
 .../Message/MessagePart/MessageBody.vue       |  4 +-
 .../MessagesGroup/MessagesGroup.vue           |  4 +-
 .../MessagesGroup/MessagesSystemGroup.vue     |  8 +--
 .../NewMessage/NewMessageUploadEditor.vue     |  2 +-
 src/components/TopBar/TopBarMenu.vue          |  3 +-
 src/components/UIShared/TransitionWrapper.vue |  4 +-
 13 files changed, 26 insertions(+), 82 deletions(-)
 delete mode 100644 src/assets/missingMaterialDesignIcons/PromotedView.vue

diff --git a/src/assets/missingMaterialDesignIcons/PromotedView.vue b/src/assets/missingMaterialDesignIcons/PromotedView.vue
deleted file mode 100644
index 88ee61cdc098..000000000000
--- a/src/assets/missingMaterialDesignIcons/PromotedView.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-	<span :aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon promoted-view-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg :fill="fillColor"
-			class="material-design-icon__svg"
-			:width="size"
-			:height="size"
-			viewBox="0 0 16 16">
-			<rect x="1"
-				y="1"
-				width="13"
-				height="9" />
-			<rect x="1"
-				y="12"
-				width="3"
-				height="3" />
-			<rect x="6"
-				y="12"
-				width="3"
-				height="3" />
-			<rect x="11"
-				y="12"
-				width="3"
-				height="3" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'PromotedView',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-		size: {
-			type: Number,
-			default: 24,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index ce77c63897dd..48997669f043 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/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"
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index d81aa5ccfa93..f250f0b2dcce 100644
--- a/src/components/CallView/CallView.vue
+++ b/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"
@@ -108,6 +107,7 @@
 					:local-media-model="localMediaModel"
 					:local-call-participant-model="localCallParticipantModel"
 					:shared-datas="sharedDatas"
+					v-bind="$attrs"
 					@select-video="handleSelectVideo"
 					@click-local-video="handleClickLocalVideo" />
 
diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
index 394762377566..7a3a341c83dc 100644
--- a/src/components/CallView/shared/Screen.vue
+++ b/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>
 
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index e41203c56c9e..924473d658e4 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/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>
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index a61e4c569133..008456bf9309 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/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,13 +55,13 @@
 			<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"
 				:is-reactions-menu-open.sync="isReactionsMenuOpen"
 				:is-forwarder-open.sync="isForwarderOpen"
 				:can-react="canReact"
+				v-bind="{...$props, ...readInfoProps}"
 				@show-translate-dialog="isTranslateDialogOpen = true"
 				@reply="handleReply"
 				@edit="handleEdit"
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index a65dd7f87039..088650873883 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -24,13 +24,13 @@
 
 <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 }"
+		v-bind="filePreviewBinding"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
 		<span v-if="!isLoading || fallbackLocalUrl"
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 7e0f4672b72c..f803706e7ff4 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/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 -->
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 65eec24509d9..f6a0c84c2362 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/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>
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index ad424e560a30..96dbfaebc6ae 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -26,13 +26,13 @@
 			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"
+					v-bind="createCombinedSystemMessage(messagesCollapsed)"
 					@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)" />
 			</ul>
 			<ul v-show="messagesCollapsed.messages?.length === 1 || !messagesCollapsed.collapsed"
@@ -40,12 +40,12 @@
 				: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>
diff --git a/src/components/NewMessage/NewMessageUploadEditor.vue b/src/components/NewMessage/NewMessageUploadEditor.vue
index bae56bed56d5..2b2c56c1f8b7 100644
--- a/src/components/NewMessage/NewMessageUploadEditor.vue
+++ b/src/components/NewMessage/NewMessageUploadEditor.vue
@@ -46,8 +46,8 @@
 					<template v-for="file in files">
 						<FilePreview :key="file[1].temporaryMessage.id"
 							:token="token"
+							is-upload-editor
 							v-bind="file[1].temporaryMessage.messageParameters.file"
-							:is-upload-editor="true"
 							@remove-file="handleRemoveFileFromSelection" />
 					</template>
 					<div :key="'addMore'"
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index ddbe4e6bba0c..7b6b2baf16e1 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -173,6 +173,7 @@ import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 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 PromotedView from 'vue-material-design-icons/ViewGallery.vue'
 import GridView from 'vue-material-design-icons/ViewGrid.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
@@ -186,8 +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'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
diff --git a/src/components/UIShared/TransitionWrapper.vue b/src/components/UIShared/TransitionWrapper.vue
index a39d2391c168..2dc70cc1645c 100644
--- a/src/components/UIShared/TransitionWrapper.vue
+++ b/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>