Merge pull request #3889 from timmw/timmw/vue3-prep

Changes required for vue 3

.eslintrc.yml

@@ -57,7 +57,6 @@ rules:
   yoda: error
   vue/require-default-prop: off
   vue/no-v-html: off
-  vue/no-use-v-if-with-v-for: off
 
 plugins:
   - vue

client/components/Chat.vue

@@ -64,7 +64,7 @@
 					<div class="chat">
 						<div class="messages">
 							<div class="msg">
-								<Component
+								<component
 									:is="specialComponent"
 									:network="network"
 									:channel="channel"

client/components/Message.vue

@@ -19,7 +19,7 @@
 		</template>
 		<template v-else-if="isAction()">
 			<span class="from"><span class="only-copy">*** </span></span>
-			<Component :is="messageComponent" :network="network" :message="message" />
+			<component :is="messageComponent" :network="network" :message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
 			<span class="from"><span class="only-copy">* </span></span>

client/components/MessageList.vue

@@ -63,6 +63,8 @@ import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
 import DateMarker from "./DateMarker.vue";
 
+let unreadMarkerShown = false;
+
 export default {
 	name: "MessageList",
 	components: {
@@ -183,7 +185,7 @@ export default {
 		});
 	},
 	beforeUpdate() {
-		this.unreadMarkerShown = false;
+		unreadMarkerShown = false;
 	},
 	beforeDestroy() {
 		eventbus.off("resize", this.handleResize);
@@ -205,8 +207,8 @@ export default {
 			return new Date(previousMessage.time).getDay() !== new Date(message.time).getDay();
 		},
 		shouldDisplayUnreadMarker(id) {
-			if (!this.unreadMarkerShown && id > this.channel.firstUnread) {
-				this.unreadMarkerShown = true;
+			if (!unreadMarkerShown && id > this.channel.firstUnread) {
+				unreadMarkerShown = true;
 				return true;
 			}
 

client/components/NetworkList.vue

@@ -106,17 +106,18 @@
 					@start="onDragStart"
 					@end="onDragEnd"
 				>
-					<Channel
-						v-for="(channel, index) in network.channels"
-						v-if="index > 0"
-						:key="channel.id"
-						:channel="channel"
-						:network="network"
-						:active="
-							$store.state.activeChannel &&
-							channel === $store.state.activeChannel.channel
-						"
-					/>
+					<template v-for="(channel, index) in network.channels">
+						<Channel
+							v-if="index > 0"
+							:key="channel.id"
+							:channel="channel"
+							:network="network"
+							:active="
+								$store.state.activeChannel &&
+								channel === $store.state.activeChannel.channel
+							"
+						/>
+					</template>
 				</Draggable>
 			</div>
 		</Draggable>