Merge pull request #3083 from thelounge/astorije/eslint-vue-closing-bracket-newline

Move closing brackets on a new line in Vue files

.eslintrc.yml

@@ -92,7 +92,7 @@ rules:
   vue/require-default-prop: off
   vue/no-v-html: off
   vue/no-use-v-if-with-v-for: off
-  vue/html-closing-bracket-newline: [error, {singleline: never, multiline: never}]
+  vue/html-closing-bracket-newline: error
   vue/multiline-html-element-content-newline: off
   vue/singleline-html-element-content-newline: off
 

client/components/App.vue

@@ -1,60 +1,72 @@
 <template>
 	<div
 		id="viewport"
-		role="tablist">
+		role="tablist"
+	>
 		<aside id="sidebar">
 			<div class="scrollable-area">
 				<div class="logo-container">
 					<img
 						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
 						class="logo"
-						alt="The Lounge">
+						alt="The Lounge"
+					>
 					<img
 						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
 						class="logo-inverted"
-						alt="The Lounge">
+						alt="The Lounge"
+					>
 				</div>
 				<NetworkList
 					:networks="networks"
-					:active-channel="activeChannel" />
+					:active-channel="activeChannel"
+				/>
 			</div>
 			<footer id="footer">
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Sign in"><button
+					aria-label="Sign in"
-						class="icon sign-in"
+				><button
-						data-target="#sign-in"
+					class="icon sign-in"
-						aria-label="Sign in"
+					data-target="#sign-in"
-						role="tab"
+					aria-label="Sign in"
-						aria-controls="sign-in"
+					role="tab"
-						aria-selected="false" /></span>
+					aria-controls="sign-in"
+					aria-selected="false"
+				/></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Connect to network"><button
+					aria-label="Connect to network"
-						class="icon connect"
+				><button
-						data-target="#connect"
+					class="icon connect"
-						aria-label="Connect to network"
+					data-target="#connect"
-						role="tab"
+					aria-label="Connect to network"
-						aria-controls="connect"
+					role="tab"
-						aria-selected="false" /></span>
+					aria-controls="connect"
+					aria-selected="false"
+				/></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Settings"><button
+					aria-label="Settings"
-						class="icon settings"
+				><button
-						data-target="#settings"
+					class="icon settings"
-						aria-label="Settings"
+					data-target="#settings"
-						role="tab"
+					aria-label="Settings"
-						aria-controls="settings"
+					role="tab"
-						aria-selected="false" /></span>
+					aria-controls="settings"
+					aria-selected="false"
+				/></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Help"><button
+					aria-label="Help"
-						class="icon help"
+				><button
-						data-target="#help"
+					class="icon help"
-						aria-label="Help"
+					data-target="#help"
-						role="tab"
+					aria-label="Help"
-						aria-controls="help"
+					role="tab"
-						aria-selected="false" /></span>
+					aria-controls="help"
+					aria-selected="false"
+				/></span>
 			</footer>
 		</aside>
 		<div id="sidebar-overlay" />
@@ -62,31 +74,37 @@
 			<Chat
 				v-if="activeChannel"
 				: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

@@ -2,12 +2,14 @@
 	<ChannelWrapper
 		:network="network"
 		:channel="channel"
-		:active-channel="activeChannel">
+		:active-channel="activeChannel"
+	>
 		<span class="name">{{ channel.name }}</span>
 		<span
 			v-if="channel.unread"
 			:class="{ highlight: channel.highlight }"
-			class="badge">{{ channel.unread | roundBadgeNumber }}</span>
+			class="badge"
+		>{{ channel.unread | roundBadgeNumber }}</span>
 		<template v-if="channel.type === 'channel'">
 			<span
 				v-if="channel.state === 0"
@@ -17,19 +19,23 @@
 			</span>
 			<span
 				class="close-tooltip tooltipped tooltipped-w"
-				aria-label="Leave">
+				aria-label="Leave"
+			>
 				<button
 					class="close"
-					aria-label="Leave" />
+					aria-label="Leave"
+				/>
 			</span>
 		</template>
 		<template v-else>
 			<span
 				class="close-tooltip tooltipped tooltipped-w"
-				aria-label="Close">
+				aria-label="Close"
+			>
 				<button
 					class="close"
-					aria-label="Close" />
+					aria-label="Close"
+				/>
 			</span>
 		</template>
 	</ChannelWrapper>

client/components/ChannelWrapper.vue

@@ -14,11 +14,13 @@
 		: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

@@ -1,7 +1,8 @@
 <template>
 	<div
 		id="chat-container"
-		class="window">
+		class="window"
+	>
 		<div
 			id="chat"
 			:data-id="channel.id"
@@ -9,78 +10,94 @@
 				'hide-motd': !this.$root.settings.motd,
 				'colored-nicks': this.$root.settings.coloredNicks,
 				'show-seconds': this.$root.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
+						class="topic"
-							v-if="channel.topic"
+					><ParsedMessage
-							:network="network"
+						v-if="channel.topic"
-							:text="channel.topic" /></span>
+						:network="network"
+						: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">
+						aria-label="Toggle user list"
+					>
 						<button
 							class="rt"
-							aria-label="Toggle user list" />
+							aria-label="Toggle user list"
+						/>
 					</span>
 				</div>
 				<div
 					v-if="channel.type === 'special'"
-					class="chat-content">
+					class="chat-content"
+				>
 					<div class="chat">
 						<div class="messages">
 							<div class="msg">
 								<Component
 									:is="specialComponent"
 									:network="network"
-									:channel="channel" />
+									:channel="channel"
+								/>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div
 					v-else
-					class="chat-content">
+					class="chat-content"
+				>
 					<div
 						:class="['scroll-down tooltipped tooltipped-w', {'scroll-down-shown': !channel.scrolledToBottom}]"
 						aria-label="Jump to recent messages"
-						@click="$refs.messageList.jumpToBottom()">
+						@click="$refs.messageList.jumpToBottom()"
+					>
 						<div class="scroll-down-arrow" />
 					</div>
 					<MessageList
 						ref="messageList"
 						:network="network"
-						:channel="channel" />
+						:channel="channel"
+					/>
 					<ChatUserList
 						v-if="channel.type === 'channel'"
-						:channel="channel" />
+						:channel="channel"
+					/>
 				</div>
 			</div>
 		</div>
 		<div
 			v-if="this.$root.currentUserVisibleError"
 			id="user-visible-error"
-			@click="hideUserVisibleError">{{ this.$root.currentUserVisibleError }}</div>
+			@click="hideUserVisibleError"
+		>{{ this.$root.currentUserVisibleError }}</div>
 		<span id="upload-progressbar" />
 		<ChatInput
 			:network="network"
-			:channel="channel" />
+			:channel="channel"
+		/>
 	</div>
 </template>
 

client/components/ChatInput.vue

@@ -3,7 +3,8 @@
 		id="form"
 		method="post"
 		action=""
-		@submit.prevent="onSubmit">
+		@submit.prevent="onSubmit"
+	>
 		<span id="nick">{{ network.nick }}</span>
 		<textarea
 			id="input"
@@ -13,33 +14,39 @@
 			:aria-label="getInputPlaceholder(channel)"
 			class="mousetrap"
 			@input="setPendingMessage"
-			@keypress.enter.exact.prevent="onSubmit" />
+			@keypress.enter.exact.prevent="onSubmit"
+		/>
 		<span
 			v-if="this.$root.isFileUploadEnabled"
 			id="upload-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
 			aria-label="Upload file"
-			@click="openFileUpload">
+			@click="openFileUpload"
+		>
 			<input
 				id="upload-input"
 				ref="uploadInput"
 				type="file"
-				multiple>
+				multiple
+			>
 			<button
 				id="upload"
 				type="button"
 				aria-label="Upload file"
-				:disabled="!this.$root.isConnected" />
+				:disabled="!this.$root.isConnected"
+			/>
 		</span>
 		<span
 			id="submit-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
-			aria-label="Send message">
+			aria-label="Send message"
+		>
 			<button
 				id="submit"
 				type="submit"
 				aria-label="Send message"
-				:disabled="!this.$root.isConnected" />
+				:disabled="!this.$root.isConnected"
+			/>
 		</span>
 	</form>
 </template>

client/components/ChatUserList.vue

@@ -2,7 +2,8 @@
 	<aside
 		ref="userlist"
 		class="userlist"
-		@mouseleave="removeHoverUser">
+		@mouseleave="removeHoverUser"
+	>
 		<div class="count">
 			<input
 				ref="input"
@@ -17,20 +18,23 @@
 				@keydown.down="navigateUserList($event, 1)"
 				@keydown.page-up="navigateUserList($event, -10)"
 				@keydown.page-down="navigateUserList($event, 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"
 						:key="user.original.nick"
 						:on-hover="hoverUser"
 						:active="user.original === activeUser"
-						:user="user" />
+						:user="user"
+					/>
 				</template>
 				<template v-else>
 					<Username
@@ -38,7 +42,8 @@
 						:key="user.nick"
 						:on-hover="hoverUser"
 						:active="user === activeUser"
-						:user="user" />
+						:user="user"
+					/>
 				</template>
 			</div>
 		</div>

client/components/DateMarker.vue

@@ -1,11 +1,13 @@
 <template>
 	<div
 		:aria-label="localeDate"
-		class="date-marker-container tooltipped tooltipped-s">
+		class="date-marker-container tooltipped tooltipped-s"
+	>
 		<div class="date-marker">
 			<span
 				:data-label="friendlyDate()"
-				class="date-marker-text" />
+				class="date-marker-text"
+			/>
 		</div>
 	</div>
 </template>

client/components/JoinChannel.vue

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

client/components/LinkPreview.vue

@@ -3,17 +3,20 @@
 		v-if="link.shown"
 		v-show="link.canDisplay"
 		ref="container"
-		class="preview">
+		class="preview"
+	>
 		<div
 			ref="content"
-			:class="['toggle-content', 'toggle-type-' + link.type, { opened: isContentShown }]">
+			:class="['toggle-content', 'toggle-type-' + link.type, { opened: isContentShown }]"
+		>
 			<template v-if="link.type === 'link'">
 				<a
 					v-if="link.thumb"
 					:href="link.link"
 					class="toggle-thumbnail"
 					target="_blank"
-					rel="noopener">
+					rel="noopener"
+				>
 					<img
 						:src="link.thumb"
 						decoding="async"
@@ -21,7 +24,8 @@
 						class="thumb"
 						@error="onThumbnailError"
 						@abort="onThumbnailError"
-						@load="onPreviewReady">
+						@load="onPreviewReady"
+					>
 				</a>
 				<div class="toggle-text">
 					<div class="head">
@@ -30,7 +34,8 @@
 								:href="link.link"
 								:title="link.head"
 								target="_blank"
-								rel="noopener">{{ link.head }}</a>
+								rel="noopener"
+							>{{ link.head }}</a>
 						</div>
 
 						<button
@@ -38,7 +43,8 @@
 							:aria-expanded="isContentShown"
 							:aria-label="moreButtonLabel"
 							class="more"
-							@click="onMoreClick"><span class="more-caret" /></button>
+							@click="onMoreClick"
+						><span class="more-caret" /></button>
 					</div>
 
 					<div class="body overflowable">
@@ -46,7 +52,8 @@
 							:href="link.link"
 							:title="link.body"
 							target="_blank"
-							rel="noopener">{{ link.body }}</a>
+							rel="noopener"
+						>{{ link.body }}</a>
 					</div>
 				</div>
 			</template>
@@ -55,32 +62,38 @@
 					:href="link.link"
 					class="toggle-thumbnail"
 					target="_blank"
-					rel="noopener">
+					rel="noopener"
+				>
 					<img
 						:src="link.thumb"
 						decoding="async"
 						alt=""
-						@load="onPreviewReady">
+						@load="onPreviewReady"
+					>
 				</a>
 			</template>
 			<template v-else-if="link.type === 'video'">
 				<video
 					preload="metadata"
 					controls
-					@canplay="onPreviewReady">
+					@canplay="onPreviewReady"
+				>
 					<source
 						:src="link.media"
-						:type="link.mediaType">
+						:type="link.mediaType"
+					>
 				</video>
 			</template>
 			<template v-else-if="link.type === 'audio'">
 				<audio
 					controls
 					preload="metadata"
-					@canplay="onPreviewReady">
+					@canplay="onPreviewReady"
+				>
 					<source
 						:src="link.media"
-						:type="link.mediaType">
+						:type="link.mediaType"
+					>
 				</audio>
 			</template>
 			<template v-else-if="link.type === 'error'">
@@ -90,7 +103,8 @@
 					<a
 						:href="link.link"
 						target="_blank"
-						rel="noopener">Click here</a>
+						rel="noopener"
+					>Click here</a>
 					to open it in a new window.
 				</em>
 				<template v-else-if="link.error === 'message'">
@@ -100,7 +114,8 @@
 							<a
 								:href="link.link"
 								target="_blank"
-								rel="noopener">Click here</a>
+								rel="noopener"
+							>Click here</a>
 							to open it in a new window.
 						</em>
 						<br>
@@ -111,7 +126,8 @@
 						:aria-expanded="isContentShown"
 						:aria-label="moreButtonLabel"
 						class="more"
-						@click="onMoreClick"><span class="more-caret" /></button>
+						@click="onMoreClick"
+					><span class="more-caret" /></button>
 				</template>
 			</template>
 		</div>

client/components/LinkPreviewToggle.vue

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

client/components/Message.vue

@@ -2,16 +2,19 @@
 	<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">{{ messageTime }} </span>
+			class="time tooltipped tooltipped-e"
+		>{{ messageTime }} </span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
 			<span class="content">
 				<span
 					v-for="(param, id) in message.params"
-					:key="id">{{ param }} </span>
+					:key="id"
+				>{{ param }} </span>
 			</span>
 		</template>
 		<template v-else-if="isAction()">
@@ -19,25 +22,29 @@
 			<Component
 				:is="messageComponent"
 				:network="network"
-				:message="message" />
+				:message="message"
+			/>
 		</template>
 		<template v-else-if="message.type === 'action'">
 			<span class="from"><span class="only-copy">* </span></span>
 			<span class="content">
 				<Username :user="message.from" />&#32;<ParsedMessage
 					:network="network"
-					:message="message" />
+					:message="message"
+				/>
 				<LinkPreview
 					v-for="preview in message.previews"
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
-					:link="preview" />
+					:link="preview"
+				/>
 			</span>
 		</template>
 		<template v-else>
 			<span
 				v-if="message.type === 'message'"
-				class="from">
+				class="from"
+			>
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy">&lt;</span>
 					<Username :user="message.from" />
@@ -46,7 +53,8 @@
 			</span>
 			<span
 				v-else
-				class="from">
+				class="from"
+			>
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy">-</span>
 					<Username :user="message.from" />
@@ -56,12 +64,14 @@
 			<span class="content">
 				<ParsedMessage
 					:network="network"
-					:message="message" />
+					:message="message"
+				/>
 				<LinkPreview
 					v-for="preview in message.previews"
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
-					:link="preview" />
+					:link="preview"
+				/>
 			</span>
 		</template>
 	</div>

client/components/MessageCondensed.vue

@@ -5,15 +5,18 @@
 			<span class="from" />
 			<span
 				class="content"
-				@click="onCollapseClick">{{ condensedText }}<button
+				@click="onCollapseClick"
-					class="toggle-button"
+			>{{ condensedText }}<button
-					aria-label="Toggle status messages" /></span>
+				class="toggle-button"
+				aria-label="Toggle status messages"
+			/></span>
 		</div>
 		<Message
 			v-for="message in messages"
 			:key="message.id"
 			:network="network"
-			:message="message" />
+			:message="message"
+		/>
 	</div>
 </template>
 

client/components/MessageList.vue

@@ -2,13 +2,15 @@
 	<div
 		ref="chat"
 		class="chat"
-		tabindex="-1">
+		tabindex="-1"
+	>
 		<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
 			<button
 				ref="loadMoreButton"
 				:disabled="channel.historyLoading || !$root.isConnected"
 				class="btn"
-				@click="onShowMoreClick">
+				@click="onShowMoreClick"
+			>
 				<span v-if="channel.historyLoading">Loading…</span>
 				<span v-else>Show older messages</span>
 			</button>
@@ -18,16 +20,19 @@
 			role="log"
 			aria-live="polite"
 			aria-relevant="additions"
-			@copy="onCopy">
+			@copy="onCopy"
+		>
 			<template v-for="(message, id) in condensedMessages">
 				<DateMarker
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
-					:message="message" />
+					:message="message"
+				/>
 				<div
 					v-if="shouldDisplayUnreadMarker(message.id)"
 					:key="message.id + '-unread'"
-					class="unread-marker">
+					class="unread-marker"
+				>
 					<span class="unread-marker-text" />
 				</div>
 
@@ -36,14 +41,16 @@
 					:key="message.id"
 					:network="network"
 					:keep-scroll-position="keepScrollPosition"
-					:messages="message.messages" />
+					:messages="message.messages"
+				/>
 				<Message
 					v-else
 					:key="message.id"
 					:network="network"
 					:message="message"
 					:keep-scroll-position="keepScrollPosition"
-					@linkPreviewToggle="onLinkPreviewToggle" />
+					@linkPreviewToggle="onLinkPreviewToggle"
+				/>
 			</template>
 		</div>
 	</div>

client/components/MessageTypes/away.vue

@@ -3,13 +3,15 @@
 		<ParsedMessage
 			v-if="message.self"
 			:network="network"
-			:message="message" />
+			:message="message"
+		/>
 		<template v-else>
 			<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,7 +3,8 @@
 		<ParsedMessage
 			v-if="message.self"
 			:network="network"
-			:message="message" />
+			:message="message"
+		/>
 		<template v-else>
 			<Username :user="message.from" />
 			is back

client/components/MessageTypes/invite.vue

@@ -5,10 +5,12 @@
 		<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/kick.vue

@@ -5,9 +5,11 @@
 		<Username :user="message.target" />
 		<i
 			v-if="message.text"
-			class="part-reason"> (<ParsedMessage
+			class="part-reason"
-				:network="network"
+		> (<ParsedMessage
-				:message="message" />)</i>
+			:network="network"
+			:message="message"
+		/>)</i>
 	</span>
 </template>
 

client/components/MessageTypes/motd.vue

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

client/components/MessageTypes/part.vue

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

client/components/MessageTypes/quit.vue

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

client/components/MessageTypes/topic.vue

@@ -4,9 +4,11 @@
 		<template v-else>The topic is: </template>
 		<span
 			v-if="message.text"
-			class="new-topic"><ParsedMessage
+			class="new-topic"
-				:network="network"
+		><ParsedMessage
-				:message="message" /></span>
+			:network="network"
+			:message="message"
+		/></span>
 	</span>
 </template>
 

client/components/MessageTypes/whois.vue

@@ -20,7 +20,8 @@
 					<a
 						:href="'https://ipinfo.io/' + message.whois.actual_ip"
 						target="_blank"
-						rel="noopener">{{ message.whois.actual_ip }}</a>
+						rel="noopener"
+					>{{ message.whois.actual_ip }}</a>
 					<i v-if="message.whois.actual_hostname != message.whois.actual_ip"> ({{ message.whois.actual_hostname }})</i>
 				</dd>
 			</template>
@@ -29,7 +30,8 @@
 				<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 +43,8 @@
 				<dt>Channels:</dt>
 				<dd><ParsedMessage
 					:network="network"
-					:text="message.whois.channels" /></dd>
+					:text="message.whois.channels"
+				/></dd>
 			</template>
 
 			<template v-if="message.whois.modes">
@@ -75,7 +78,8 @@
 				<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

@@ -1,7 +1,8 @@
 <template>
 	<div
 		v-if="networks.length === 0"
-		class="empty">
+		class="empty"
+	>
 		You are not connected to any networks yet.
 	</div>
 	<Draggable
@@ -11,7 +12,8 @@
 		class="networks"
 		@change="onNetworkSort"
 		@start="onDragStart"
-		@end="onDragEnd">
+		@end="onDragEnd"
+	>
 		<div
 			v-for="network in networks"
 			:id="'network-' + network.uuid"
@@ -24,17 +26,20 @@
 			: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', disabled: isSortingEnabled }"
@@ -42,14 +47,16 @@
 				class="channels"
 				@change="onChannelSort"
 				@start="onDragStart"
-				@end="onDragEnd">
+				@end="onDragEnd"
+			>
 				<Channel
 					v-for="(channel, index) in network.channels"
 					v-if="index > 0"
 					:key="channel.id"
 					:channel="channel"
 					:network="network"
-					:active-channel="activeChannel" />
+					:active-channel="activeChannel"
+				/>
 			</Draggable>
 		</div>
 	</Draggable>

client/components/NetworkLobby.vue

@@ -2,44 +2,53 @@
 	<ChannelWrapper
 		:network="network"
 		:channel="channel"
-		:active-channel="activeChannel">
+		:active-channel="activeChannel"
+	>
 		<button
 			v-if="network.channels.length > 1"
 			:aria-controls="'network-' + network.uuid"
 			:aria-label="getExpandLabel(network)"
 			:aria-expanded="!network.isCollapsed"
 			class="collapse-network"
-			@click.stop="onCollapseClick"><span class="collapse-network-icon" /></button>
+			@click.stop="onCollapseClick"
+		><span class="collapse-network-icon" /></button>
 		<span
 			v-else
-			class="collapse-network" />
+			class="collapse-network"
+		/>
 		<div class="lobby-wrap">
 			<span
 				:title="channel.name"
-				class="name">{{ channel.name }}</span>
+				class="name"
+			>{{ channel.name }}</span>
 			<span
 				class="not-secure-tooltip tooltipped tooltipped-w"
-				aria-label="Insecure connection">
+				aria-label="Insecure connection"
+			>
 				<span class="not-secure-icon" />
 			</span>
 			<span
 				class="not-connected-tooltip tooltipped tooltipped-w"
-				aria-label="Disconnected">
+				aria-label="Disconnected"
+			>
 				<span class="not-connected-icon" />
 			</span>
 			<span
 				v-if="channel.unread"
 				:class="{ highlight: channel.highlight }"
-				class="badge">{{ channel.unread | roundBadgeNumber }}</span>
+				class="badge"
+			>{{ channel.unread | roundBadgeNumber }}</span>
 		</div>
 		<span
 			:aria-label="joinChannelLabel"
-			class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch">
+			class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
+		>
 			<button
 				: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/ListBans.vue

@@ -10,7 +10,8 @@
 		<tbody>
 			<tr
 				v-for="ban in channel.data"
-				:key="ban.hostmask">
+				:key="ban.hostmask"
+			>
 				<td class="hostmask">{{ ban.hostmask }}</td>
 				<td class="banned_by">{{ ban.banned_by }}</td>
 				<td class="banned_at">{{ ban.banned_at | localetime }}</td>

client/components/Special/ListChannels.vue

@@ -2,7 +2,8 @@
 	<span v-if="channel.data.text">{{ channel.data.text }}</span>
 	<table
 		v-else
-		class="channel-list">
+		class="channel-list"
+	>
 		<thead>
 			<tr>
 				<th class="channel">Channel</th>
@@ -13,14 +14,17 @@
 		<tbody>
 			<tr
 				v-for="chan in channel.data"
-				:key="chan.channel">
+				: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/Special/ListIgnored.vue

@@ -9,7 +9,8 @@
 		<tbody>
 			<tr
 				v-for="user in channel.data"
-				:key="user.hostmask">
+				:key="user.hostmask"
+			>
 				<td class="hostmask">{{ user.hostmask }}</td>
 				<td class="when">{{ user.when | localetime }}</td>
 			</tr>

client/components/Username.vue

@@ -3,7 +3,8 @@
 		:class="['user', $options.filters.colorClass(user.nick), { active: active }]"
 		:data-name="user.nick"
 		role="button"
-		v-on="onHover ? { mouseover: hover } : {}">{{ user.mode }}{{ user.nick }}</span>
+		v-on="onHover ? { mouseover: hover } : {}"
+	>{{ user.mode }}{{ user.nick }}</span>
 </template>
 
 <script>

client/components/UsernameFiltered.vue

@@ -4,7 +4,8 @@
 		: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>

test/client/components/ParsedMessageTestWrapper.vue

@@ -3,7 +3,8 @@
 		<ParsedMessage
 			:text="text"
 			:message="message"
-			:network="network" />
+			:network="network"
+		/>
 	</div>
 </template>