Update eslint-plugin-vue

.eslintrc.yml

@@ -90,6 +90,7 @@ rules:
   yoda: error
   vue/html-indent: [error, tab]
   vue/require-default-prop: off
+  vue/no-v-html: off
 
 plugins:
   - vue

client/components/App.vue

@@ -16,7 +16,7 @@
 				</div>
 				<NetworkList
 					:networks="networks"
-					:active-channel="activeChannel"/>
+					:active-channel="activeChannel" />
 			</div>
 			<footer id="footer">
 				<span
@@ -27,7 +27,7 @@
 						aria-label="Sign in"
 						role="tab"
 						aria-controls="sign-in"
-						aria-selected="false"/></span>
+						aria-selected="false" /></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
 					aria-label="Connect to network"><button
@@ -36,7 +36,7 @@
 						aria-label="Connect to network"
 						role="tab"
 						aria-controls="connect"
-						aria-selected="false"/></span>
+						aria-selected="false" /></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
 					aria-label="Settings"><button
@@ -45,7 +45,7 @@
 						aria-label="Settings"
 						role="tab"
 						aria-controls="settings"
-						aria-selected="false"/></span>
+						aria-selected="false" /></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
 					aria-label="Help"><button
@@ -54,40 +54,40 @@
 						aria-label="Help"
 						role="tab"
 						aria-controls="help"
-						aria-selected="false"/></span>
+						aria-selected="false" /></span>
 			</footer>
 		</aside>
-		<div id="sidebar-overlay"/>
+		<div id="sidebar-overlay" />
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
 				:settings="settings"
 				:network="activeChannel.network"
-				:channel="activeChannel.channel"/>
+				:channel="activeChannel.channel" />
 			<div
 				id="sign-in"
 				class="window"
 				role="tabpanel"
-				aria-label="Sign-in"/>
+				aria-label="Sign-in" />
 			<div
 				id="connect"
 				class="window"
 				role="tabpanel"
-				aria-label="Connect"/>
+				aria-label="Connect" />
 			<div
 				id="settings"
 				class="window"
 				role="tabpanel"
-				aria-label="Settings"/>
+				aria-label="Settings" />
 			<div
 				id="help"
 				class="window"
 				role="tabpanel"
-				aria-label="Help"/>
+				aria-label="Help" />
 			<div
 				id="changelog"
 				class="window"
-				aria-label="Changelog"/>
+				aria-label="Changelog" />
 		</article>
 	</div>
 </template>

client/components/Channel.vue

@@ -17,7 +17,7 @@
 				aria-label="Leave">
 				<button
 					class="close"
-					aria-label="Leave"/>
+					aria-label="Leave" />
 			</span>
 		</template>
 		<template v-else>
@@ -26,7 +26,7 @@
 				aria-label="Close">
 				<button
 					class="close"
-					aria-label="Close"/>
+					aria-label="Close" />
 			</span>
 		</template>
 	</ChannelWrapper>

client/components/ChannelWrapper.vue

@@ -9,12 +9,11 @@
 		:aria-controls="'#chan-' + channel.id"
 		:aria-selected="activeChannel && channel === activeChannel.channel"
 		class="chan"
-		role="tab"
+		role="tab">
-	>
 		<slot
 			:network="network"
 			:channel="channel"
-			:activeChannel="activeChannel"/>
+			:activeChannel="activeChannel" />
 	</div>
 </template>
 

client/components/Chat.vue

@@ -9,38 +9,35 @@
 				'hide-motd': !settings.motd,
 				'colored-nicks': settings.coloredNicks,
 				'show-seconds': settings.showSeconds,
-			}"
+		}">
-		>
 			<div
 				:id="'chan-' + channel.id"
 				:class="[channel.type, 'chan', 'active']"
 				:data-id="channel.id"
 				:data-type="channel.type"
 				:aria-label="channel.name"
-				role="tabpanel"
+				role="tabpanel">
-			>
 				<div class="header">
 					<button
 						class="lt"
-						aria-label="Toggle channel list"/>
+						aria-label="Toggle channel list" />
 					<span class="title">{{ channel.name }}</span>
 					<span
 						:title="channel.topic"
 						class="topic"><ParsedMessage
 							v-if="channel.topic"
 							:network="network"
-							:text="channel.topic"/></span>
+							:text="channel.topic" /></span>
 					<button
 						class="menu"
-						aria-label="Open the context menu"
+						aria-label="Open the context menu" />
-					/>
 					<span
 						v-if="channel.type === 'channel'"
 						class="rt-tooltip tooltipped tooltipped-w"
 						aria-label="Toggle user list">
 						<button
 							class="rt"
-							aria-label="Toggle user list"/>
+							aria-label="Toggle user list" />
 					</span>
 				</div>
 				<div
@@ -52,7 +49,7 @@
 								<component
 									:is="specialComponent"
 									:network="network"
-									:channel="channel"/>
+									:channel="channel" />
 							</div>
 						</div>
 					</div>
@@ -63,17 +60,17 @@
 					<MessageList
 						:network="network"
 						:channel="channel"
-						:settings="settings"/>
+						:settings="settings" />
 					<ChatUserList
 						v-if="channel.type === 'channel'"
-						:channel="channel"/>
+						:channel="channel" />
 				</div>
 			</div>
 		</div>
-		<div id="connection-error"/>
+		<div id="connection-error" />
 		<ChatInput
 			:network="network"
-			:channel="channel"/>
+			:channel="channel" />
 	</div>
 </template>
 

client/components/ChatInput.vue

@@ -13,8 +13,7 @@
 			:aria-label="getInputPlaceholder(channel)"
 			:disabled="!$root.connected"
 			class="mousetrap"
-			@keypress.enter.exact.prevent="onSubmit"
+			@keypress.enter.exact.prevent="onSubmit" />
-		/>
 		<span
 			v-if="$root.connected"
 			id="submit-tooltip"
@@ -23,7 +22,7 @@
 			<button
 				id="submit"
 				type="submit"
-				aria-label="Send message"/>
+				aria-label="Send message" />
 		</span>
 	</form>
 </template>

client/components/ChatUserList.vue

@@ -1,13 +1,12 @@
 <template>
 	<aside
 		ref="userlist"
-		class="userlist"
+		class="userlist">
-	>
 		<div class="count">
 			<input
 				ref="input"
-				:placeholder="channel.users.length + ' user' + (channel.users.length === 1 ? '' : 's')"
 				v-model="userSearchInput"
+				:placeholder="channel.users.length + ' user' + (channel.users.length === 1 ? '' : 's')"
 				type="search"
 				class="search"
 				aria-label="Search among the user list"
@@ -16,30 +15,28 @@
 				@keydown.down="navigateUserList(1)"
 				@keydown.page-up="navigateUserList(-10)"
 				@keydown.page-down="navigateUserList(10)"
-				@keydown.enter="selectUser"
+				@keydown.enter="selectUser">
-			>
 		</div>
 		<div class="names">
 			<div
 				v-for="(users, mode) in groupedUsers"
 				:key="mode"
-				:class="['user-mode', getModeClass(mode)]"
+				:class="['user-mode', getModeClass(mode)]">
-			>
 				<template v-if="userSearchInput.length > 0">
 					<UsernameFiltered
 						v-for="user in users"
-						:on-hover="hoverUser"
 						:key="user.original.nick"
+						:on-hover="hoverUser"
 						:active="user.original === activeUser"
-						:user="user"/>
+						:user="user" />
 				</template>
 				<template v-else>
 					<Username
 						v-for="user in users"
-						:on-hover="hoverUser"
 						:key="user.nick"
+						:on-hover="hoverUser"
 						:active="user === activeUser"
-						:user="user"/>
+						:user="user" />
 				</template>
 			</div>
 		</div>

client/components/JoinChannel.vue

@@ -6,11 +6,10 @@
 		action=""
 		autocomplete="off"
 		@keydown.esc.prevent="$emit('toggleJoinChannel')"
-		@submit.prevent="onSubmit"
+		@submit.prevent="onSubmit">
-	>
 		<input
-			v-focus
 			v-model="inputChannel"
+			v-focus
 			type="text"
 			class="input"
 			name="channel"
@@ -18,8 +17,7 @@
 			pattern="[^\s]+"
 			maxlength="200"
 			title="The channel name may not contain spaces"
-			required
+			required>
-		>
 		<input
 			v-model="inputPassword"
 			type="password"
@@ -29,8 +27,7 @@
 			pattern="[^\s]+"
 			maxlength="200"
 			title="The channel password may not contain spaces"
-			autocomplete="new-password"
+			autocomplete="new-password">
-		>
 		<button
 			type="submit"
 			class="btn btn-small">Join</button>

client/components/LinkPreview.vue

@@ -38,8 +38,7 @@
 							:aria-expanded="isContentShown"
 							:aria-label="moreButtonLabel"
 							class="more"
-							@click="onMoreClick"
+							@click="onMoreClick"><span class="more-caret" /></button>
-						><span class="more-caret"/></button>
 					</div>
 
 					<div class="body overflowable">
@@ -112,8 +111,7 @@
 						:aria-expanded="isContentShown"
 						:aria-label="moreButtonLabel"
 						class="more"
-						@click="onMoreClick"
+						@click="onMoreClick"><span class="more-caret" /></button>
-					><span class="more-caret"/></button>
 				</template>
 			</template>
 		</div>

client/components/LinkPreviewToggle.vue

@@ -2,7 +2,7 @@
 	<button
 		v-if="link.canDisplay"
 		:class="['toggle-button', 'toggle-preview', { opened: link.shown }]"
-		@click="onClick"/>
+		@click="onClick" />
 </template>
 
 <script>

client/components/Message.vue

@@ -2,8 +2,7 @@
 	<div
 		:id="'msg-' + message.id"
 		:class="['msg', message.type, {self: message.self, highlight: message.highlight}]"
-		:data-from="message.from && message.from.nick"
+		:data-from="message.from && message.from.nick">
-	>
 		<span
 			:aria-label="message.time | localetime"
 			class="time tooltipped tooltipped-e">{{ message.time | tz }}</span>
@@ -16,40 +15,40 @@
 			</span>
 		</template>
 		<template v-else-if="isAction()">
-			<span class="from"/>
+			<span class="from" />
 			<component
 				:is="messageComponent"
 				:network="network"
-				:message="message"/>
+				:message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
-			<span class="from"/>
+			<span class="from" />
 			<span class="content">
-				<span class="text"><Username :user="message.from"/> <ParsedMessage
+				<span class="text"><Username :user="message.from" /> <ParsedMessage
 					:network="network"
-					:message="message"/></span>
+					:message="message" /></span>
 				<LinkPreview
 					v-for="preview in message.previews"
-					:keep-scroll-position="keepScrollPosition"
 					:key="preview.link"
-					:link="preview"/>
+					:keep-scroll-position="keepScrollPosition"
+					:link="preview" />
 			</span>
 		</template>
 		<template v-else>
 			<span class="from">
 				<template v-if="message.from && message.from.nick">
-					<Username :user="message.from"/>
+					<Username :user="message.from" />
 				</template>
 			</span>
 			<span class="content">
 				<span class="text"><ParsedMessage
 					:network="network"
-					:message="message"/></span>
+					:message="message" /></span>
 				<LinkPreview
 					v-for="preview in message.previews"
-					:keep-scroll-position="keepScrollPosition"
 					:key="preview.link"
-					:link="preview"/>
+					:keep-scroll-position="keepScrollPosition"
+					:link="preview" />
 			</span>
 		</template>
 	</div>

client/components/MessageCondensed.vue

@@ -1,19 +1,19 @@
 <template>
 	<div :class="[ 'msg', 'condensed', { closed: isCollapsed } ]">
 		<div class="condensed-summary">
-			<span class="time"/>
+			<span class="time" />
-			<span class="from"/>
+			<span class="from" />
 			<span
 				class="content"
 				@click="isCollapsed = !isCollapsed">{{ condensedText }}<button
 					class="toggle-button"
-					aria-label="Toggle status messages"/></span>
+					aria-label="Toggle status messages" /></span>
 		</div>
 		<Message
 			v-for="message in messages"
+			:key="message.id"
 			:network="network"
-			:message="message"
+			:message="message" />
-			:key="message.id"/>
 	</div>
 </template>
 

client/components/MessageList.vue

@@ -1,15 +1,13 @@
 <template>
 	<div
 		ref="chat"
-		class="chat"
+		class="chat">
-	>
 		<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
 			<button
 				ref="loadMoreButton"
 				:disabled="channel.historyLoading || !$root.connected"
 				class="btn"
-				@click="onShowMoreClick"
+				@click="onShowMoreClick">
-			>
 				<span v-if="channel.historyLoading">Loading…</span>
 				<span v-else>Show older messages</span>
 			</button>
@@ -19,42 +17,40 @@
 			role="log"
 			aria-live="polite"
 			aria-relevant="additions"
-			@copy="onCopy"
+			@copy="onCopy">
-		>
 			<template v-for="(message, id) in condensedMessages">
 				<div
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
 					:data-time="message.time"
 					:aria-label="message.time | localedate"
-					class="date-marker-container tooltipped tooltipped-s"
+					class="date-marker-container tooltipped tooltipped-s">
-				>
 					<div class="date-marker">
 						<span
 							:data-label="message.time | friendlydate"
-							class="date-marker-text"/>
+							class="date-marker-text" />
 					</div>
 				</div>
 				<div
 					v-if="shouldDisplayUnreadMarker(id)"
 					:key="message.id + '-unread'"
-					class="unread-marker"
+					class="unread-marker">
-				>
+					<span class="unread-marker-text" />
-					<span class="unread-marker-text"/>
 				</div>
 
 				<MessageCondensed
 					v-if="message.type === 'condensed'"
 					:key="message.id"
 					:network="network"
-					:messages="message.messages"/>
+					:keep-scroll-position="keepScrollPosition"
+					:messages="message.messages" />
 				<Message
 					v-else
+					:key="message.id"
 					:network="network"
 					:message="message"
-					:key="message.id"
 					:keep-scroll-position="keepScrollPosition"
-					@linkPreviewToggle="onLinkPreviewToggle"/>
+					@linkPreviewToggle="onLinkPreviewToggle" />
 			</template>
 		</div>
 
@@ -63,7 +59,7 @@
 				v-if="!channel.scrolledToBottom"
 				class="scroll-down"
 				@click="jumpToBottom()">
-				<div class="scroll-down-arrow"/>
+				<div class="scroll-down-arrow" />
 				<div
 					v-if="channel.unread > 0"
 					class="scroll-down-number">{{ channel.unread }}</div>

client/components/MessageTypes/away.vue

@@ -3,13 +3,13 @@
 		<ParsedMessage
 			v-if="message.self"
 			:network="network"
-			:message="message"/>
+			:message="message" />
 		<template v-else>
-			<Username :user="message.from"/>
+			<Username :user="message.from" />
 			is away
 			<i class="away-message">(<ParsedMessage
 				:network="network"
-				:message="message"/>)</i>
+				:message="message" />)</i>
 		</template>
 	</span>
 </template>

client/components/MessageTypes/back.vue

@@ -3,9 +3,9 @@
 		<ParsedMessage
 			v-if="message.self"
 			:network="network"
-			:message="message"/>
+			:message="message" />
 		<template v-else>
-			<Username :user="message.from"/>
+			<Username :user="message.from" />
 			is back
 		</template>
 	</span>

client/components/MessageTypes/chghost.vue

@@ -1,6 +1,6 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		has changed
 		<span v-if="message.new_ident">username to <b>{{ message.new_ident }}</b></span>
 		<span v-if="message.new_host">hostname to <i class="hostmask">{{ message.new_host }}</i></span>

client/components/MessageTypes/ctcp.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
-		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
+		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
 	</span>
 </template>
 

client/components/MessageTypes/ctcp_request.vue

@@ -1,8 +1,8 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		sent a <abbr title="Client-to-client protocol">CTCP</abbr> request:
-		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
+		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
 	</span>
 </template>
 

client/components/MessageTypes/invite.vue

@@ -1,14 +1,14 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		invited
 		<span v-if="message.invitedYou">you</span>
 		<Username
 			v-else
-			:user="message.target"/>
+			:user="message.target" />
 		to <ParsedMessage
 			:network="network"
-			:text="message.channel"/>
+			:text="message.channel" />
 	</span>
 </template>
 

client/components/MessageTypes/join.vue

@@ -1,6 +1,6 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		<i class="hostmask">({{ message.hostmask }})</i>
 		has joined the channel
 	</span>

client/components/MessageTypes/kick.vue

@@ -1,13 +1,13 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		has kicked
-		<Username :user="message.target"/>
+		<Username :user="message.target" />
 		<i
 			v-if="message.text"
 			class="part-reason">(<ParsedMessage
 				:network="network"
-				:message="message"/>)</i>
+				:message="message" />)</i>
 	</span>
 </template>
 

client/components/MessageTypes/mode.vue

@@ -1,8 +1,8 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		sets mode
-		<ParsedMessage :message="message"/>
+		<ParsedMessage :message="message" />
 	</span>
 </template>
 

client/components/MessageTypes/motd.vue

@@ -2,7 +2,7 @@
 	<span class="content">
 		<span class="text"><ParsedMessage
 			:network="network"
-			:text="cleanText"/></span>
+			:text="cleanText" /></span>
 	</span>
 </template>
 

client/components/MessageTypes/nick.vue

@@ -1,8 +1,8 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		is now known as
-		<Username :user="{nick: message.new_nick, mode: message.from.mode}"/>
+		<Username :user="{nick: message.new_nick, mode: message.from.mode}" />
 	</span>
 </template>
 

client/components/MessageTypes/part.vue

@@ -1,13 +1,13 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		<i class="hostmask">({{ message.hostmask }})</i>
 		has left the channel
 		<i
 			v-if="message.text"
 			class="part-reason">(<ParsedMessage
 				:network="network"
-				:message="message"/>)</i>
+				:message="message" />)</i>
 	</span>
 </template>
 

client/components/MessageTypes/quit.vue

@@ -1,13 +1,13 @@
 <template>
 	<span class="content">
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		<i class="hostmask">({{ message.hostmask }})</i>
 		has quit
 		<i
 			v-if="message.text"
 			class="quit-reason">(<ParsedMessage
 				:network="network"
-				:message="message"/>)</i>
+				:message="message" />)</i>
 	</span>
 </template>
 

client/components/MessageTypes/topic.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		<template v-if="message.from && message.from.nick">
-			<Username :user="message.from"/>
+			<Username :user="message.from" />
 			has changed the topic to:
 		</template>
 		<template v-else>
@@ -11,7 +11,7 @@
 			v-if="message.text"
 			class="new-topic"><ParsedMessage
 				:network="network"
-				:message="message"/></span>
+				:message="message" /></span>
 	</span>
 </template>
 

client/components/MessageTypes/topic_set_by.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		Topic set by
-		<Username :user="message.from"/>
+		<Username :user="message.from" />
 		on {{ message.when | localetime }}
 	</span>
 </template>

client/components/MessageTypes/whois.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		<p>
-			<Username :user="{nick: message.whois.nick}"/>
+			<Username :user="{nick: message.whois.nick}" />
 			<span v-if="message.whois.whowas"> is offline, last information:</span>
 		</p>
 
@@ -29,7 +29,7 @@
 				<dt>Real name:</dt>
 				<dd><ParsedMessage
 					:network="network"
-					:text="message.whois.real_name"/></dd>
+					:text="message.whois.real_name" /></dd>
 			</template>
 
 			<template v-if="message.whois.registered_nick">
@@ -41,7 +41,7 @@
 				<dt>Channels:</dt>
 				<dd><ParsedMessage
 					:network="network"
-					:text="message.whois.channels"/></dd>
+					:text="message.whois.channels" /></dd>
 			</template>
 
 			<template v-if="message.whois.modes">
@@ -73,7 +73,7 @@
 				<dt>Away:</dt>
 				<dd><ParsedMessage
 					:network="network"
-					:text="message.whois.away"/></dd>
+					:text="message.whois.away" /></dd>
 			</template>
 
 			<template v-if="message.whois.secure">

client/components/NetworkList.vue

@@ -15,30 +15,27 @@
 	>
 		<div
 			v-for="network in networks"
+			:id="'network-' + network.uuid"
 			:key="network.uuid"
 			:class="{
 				collapsed: network.isCollapsed,
 				'not-connected': !network.status.connected,
 				'not-secure': !network.status.secure,
 			}"
-			:id="'network-' + network.uuid"
 			:data-uuid="network.uuid"
 			:data-nick="network.nick"
 			class="network"
-			role="region"
+			role="region">
-		>
 			<NetworkLobby
 				:network="network"
 				:active-channel="activeChannel"
 				:is-join-channel-shown="network.isJoinChannelShown"
-				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown" />
-			/>
 			<JoinChannel
 				v-if="network.isJoinChannelShown"
 				:network="network"
 				:channel="network.channels[0]"
-				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown" />
-			/>
 
 			<Draggable
 				:options="{ draggable: '.chan', ghostClass: 'chan-placeholder' }"
@@ -49,13 +46,11 @@
 				@end="onDragEnd"
 			>
 				<Channel
-					v-for="(channel, index) in network.channels"
+					v-for="channel in getChannelsWithoutLobby(network)"
-					v-if="index > 0"
 					:key="channel.id"
 					:channel="channel"
 					:network="network"
-					:active-channel="activeChannel"
+					:active-channel="activeChannel" />
-				/>
 			</Draggable>
 		</div>
 	</Draggable>

client/components/NetworkLobby.vue

@@ -9,11 +9,10 @@
 			:aria-label="getExpandLabel(network)"
 			:aria-expanded="!network.isCollapsed"
 			class="collapse-network"
-			@click.stop="onCollapseClick"
+			@click.stop="onCollapseClick"><span class="collapse-network-icon" /></button>
-		><span class="collapse-network-icon"/></button>
 		<span
 			v-else
-			class="collapse-network"/>
+			class="collapse-network" />
 		<div class="lobby-wrap">
 			<span
 				:title="channel.name"
@@ -21,12 +20,12 @@
 			<span
 				class="not-secure-tooltip tooltipped tooltipped-w"
 				aria-label="Insecure connection">
-				<span class="not-secure-icon"/>
+				<span class="not-secure-icon" />
 			</span>
 			<span
 				class="not-connected-tooltip tooltipped tooltipped-w"
 				aria-label="Disconnected">
-				<span class="not-connected-icon"/>
+				<span class="not-connected-icon" />
 			</span>
 			<span
 				v-if="channel.unread"
@@ -40,7 +39,7 @@
 				:class="['add-channel', { opened: isJoinChannelShown }]"
 				:aria-controls="'join-channel-' + channel.id"
 				:aria-label="joinChannelLabel"
-				@click.stop="$emit('toggleJoinChannel')"/>
+				@click.stop="$emit('toggleJoinChannel')" />
 		</span>
 	</ChannelWrapper>
 </template>

client/components/Special/ListChannels.vue

@@ -16,11 +16,11 @@
 				:key="chan.channel">
 				<td class="channel"><ParsedMessage
 					:network="network"
-					:text="chan.channel"/></td>
+					:text="chan.channel" /></td>
 				<td class="users">{{ chan.num_users }}</td>
 				<td class="topic"><ParsedMessage
 					:network="network"
-					:text="chan.topic"/></td>
+					:text="chan.topic" /></td>
 			</tr>
 		</tbody>
 	</table>

client/components/UsernameFiltered.vue

@@ -4,7 +4,7 @@
 		:data-name="user.original.nick"
 		role="button"
 		@mouseover="hover"
-		v-html="user.original.mode + user.string"/>
+		v-html="user.original.mode + user.string" />
 </template>
 
 <script>

package.json

@@ -80,8 +80,7 @@
     "css.escape": "1.5.1",
     "emoji-regex": "7.0.3",
     "eslint": "5.13.0",
-    "eslint-plugin-vue": "4.5.0",
+    "eslint-plugin-vue": "5.0.0",
-    "eslint-plugin-vue": "4.7.1",
     "fuzzy": "0.1.3",
     "graphql-request": "1.8.2",
     "handlebars": "4.1.0",

yarn.lock

@@ -760,25 +760,15 @@ acorn-dynamic-import@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  dependencies:
-    acorn "^3.0.4"
-
 acorn-jsx@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.0.tgz#958584ddb60990c02c97c1bd9d521fce433bb101"
 
-acorn@^3.0.4:
+acorn@^6.0.2:
-  version "3.3.0"
+  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.2.tgz#6a459041c320ab17592c6317abbfdf4bbaa98ca4"
 
-acorn@^5.5.0:
+acorn@^6.0.5:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
-
-acorn@^6.0.2, acorn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.5.tgz#81730c0815f3f3b34d8efa95cb7430965f4d887a"
 
@@ -2586,18 +2576,12 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-eslint-plugin-vue@4.7.1:
+eslint-plugin-vue@5.0.0:
-  version "4.7.1"
+  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.7.1.tgz#c829b9fc62582c1897b5a0b94afd44ecca511e63"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-5.0.0.tgz#4a2cc1c0e71ea45e1bd9c1a60f925bfe68bb5710"
+  integrity sha512-mSv2Ebz3RaPP+XJO/mu7F+SdR9lrMyGISSExnarLFqqf3pF5wTmwWNrhHW1o9zKzKI811UVTIIkWJJvgO6SsUQ==
   dependencies:
-    vue-eslint-parser "^2.0.3"
+    vue-eslint-parser "^4.0.2"
-
-eslint-scope@^3.7.1:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
 
 eslint-scope@^4.0.0:
   version "4.0.0"
@@ -2655,12 +2639,14 @@ eslint@5.13.0:
     table "^5.0.2"
     text-table "^0.2.0"
 
-espree@^3.5.2:
+espree@^4.1.0:
-  version "3.5.4"
+  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-4.1.0.tgz#728d5451e0fd156c04384a7ad89ed51ff54eb25f"
+  integrity sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==
   dependencies:
-    acorn "^5.5.0"
+    acorn "^6.0.2"
-    acorn-jsx "^3.0.0"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
 
 espree@^5.0.0:
   version "5.0.0"
@@ -2678,7 +2664,7 @@ esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
 
-esquery@^1.0.0, esquery@^1.0.1:
+esquery@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   dependencies:
@@ -7641,16 +7627,17 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-eslint-parser@^2.0.3:
+vue-eslint-parser@^4.0.2:
-  version "2.0.3"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-4.0.3.tgz#80cf162e484387b2640371ad21ba1f86e0c10a61"
+  integrity sha512-AUeQsYdO6+7QXCems+WvGlrXd37PHv/zcRQSQdY1xdOMwdFAPEnMBsv7zPvk0TPGulXkK/5p/ITgrjiYB7k3ag==
   dependencies:
-    debug "^3.1.0"
+    debug "^4.1.0"
-    eslint-scope "^3.7.1"
+    eslint-scope "^4.0.0"
     eslint-visitor-keys "^1.0.0"
-    espree "^3.5.2"
+    espree "^4.1.0"
-    esquery "^1.0.0"
+    esquery "^1.0.1"
-    lodash "^4.17.4"
+    lodash "^4.17.11"
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.0"