pkp/pkp-lib#9538 Apply recommended lint rules for vue3

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
 		node: true,
 	},
 	extends: [
-		'plugin:vue/vue3-essential',
+		'plugin:vue/vue3-recommended',
 		'eslint:recommended',
 		'@vue/eslint-config-prettier/skip-formatting',
 		'plugin:storybook/recommended',

src/App.vue

@@ -2,8 +2,8 @@
 	<vue-announcer class="sr-only" />
 	<PkpDialog
 		:open="$store.dialog.dialogOpened"
-		@close="$store.dialog.closeDialog()"
 		v-bind="$store.dialog.dialogProps"
+		@close="$store.dialog.closeDialog()"
 	></PkpDialog>
 	<nav class="nav" aria-label="Primary Navigation">
 		<nav-group>

src/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue

@@ -5,7 +5,7 @@
 		</template>
 
 		<div>
-			<badge :isPrimary="true">
+			<badge :is-primary="true">
 				<icon icon="comment-o" :inline="true" />
 				Ongoing review - request accepted
 			</badge>
@@ -23,11 +23,11 @@
 			.
 		</div>
 		<div>
-			<PkpButton :isLink="true">Edit due date</PkpButton>
+			<PkpButton :is-link="true">Edit due date</PkpButton>
 		</div>
 		<div class="mt-4">
 			<PkpButton>View details</PkpButton>
-			<PkpButton class="ml-4" :isWarnable="true">Unassign</PkpButton>
+			<PkpButton class="ml-4" :is-warnable="true">Unassign</PkpButton>
 		</div>
 	</PkpPopover>
 </template>

src/components/Button/Button.vue

@@ -15,7 +15,7 @@
 
 <script>
 export default {
-	name: 'pkpButton',
+	name: 'PkpButton',
 	props: {
 		element: {
 			type: String,

src/components/Composer/Composer.vue

@@ -12,11 +12,11 @@
 					</div>
 					<search
 						v-if="emailTemplatesApiUrl"
-						:searchLabel="findTemplateLabel"
+						:search-label="findTemplateLabel"
 						class="composer__templates__search"
-						:searchPhrase="searchPhrase"
+						:search-phrase="searchPhrase"
 						@search-phrase-changed="
-							(newSearchPhrase) => (this.searchPhrase = newSearchPhrase)
+							(newSearchPhrase) => (searchPhrase = newSearchPhrase)
 						"
 					/>
 					<ul
@@ -113,12 +113,12 @@
 						class="composer__recipients"
 						name="to"
 						:label="recipientsLabel"
-						:isLabelInline="true"
-						:deselectLabel="deselectLabel"
+						:is-label-inline="true"
+						:deselect-label="deselectLabel"
 						:all-errors="errors"
-						groupId="composer"
-						:formId="id"
-						:selectedLabel="recipientsLabel"
+						group-id="composer"
+						:form-id="id"
+						:selected-label="recipientsLabel"
 						:options="localizedRecipientOptions"
 						:selected="recipientsSelected"
 						:value="recipients"
@@ -127,8 +127,8 @@
 					/>
 					<button
 						v-if="!ccIsEnabled"
-						class="composer__ccToggle -linkButton"
 						ref="ccButtons"
+						class="composer__ccToggle -linkButton"
 						@click="enableCC"
 					>
 						{{ addCCLabel }}
@@ -142,14 +142,14 @@
 				>
 					<label :for="id + '-cc'">{{ ccLabel }}</label>
 					<input
-						type="text"
-						name="cc"
 						:id="id + '-cc'"
 						v-model="ccBinded"
+						type="text"
+						name="cc"
 						:aria-described-by="!!errors.cc ? id + '-cc-error' : ''"
 						:aria-invalid="!!errors.cc"
-						@focus="() => (this.isFocused = 'cc')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'cc')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -165,14 +165,14 @@
 				>
 					<label :for="id + '-bcc'">{{ bccLabel }}</label>
 					<input
-						type="text"
-						name="bcc"
 						:id="id + '-bcc'"
 						v-model="bccBinded"
+						type="text"
+						name="bcc"
 						:aria-described-by="!!errors.bcc ? id + '-bcc-error' : ''"
 						:aria-invalid="!!errors.bcc"
-						@focus="() => (this.isFocused = 'bcc')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'bcc')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -187,14 +187,14 @@
 				>
 					<label :for="id + '-subject'">{{ subjectLabel }}</label>
 					<input
-						type="text"
-						name="subject"
 						:id="id + '-subject'"
 						v-model="subjectBinded"
+						type="text"
+						name="subject"
 						:aria-described-by="!!errors.subject ? id + '-subject-error' : ''"
 						:aria-invalid="!!errors.subject"
-						@focus="() => (this.isFocused = 'subject')"
-						@blur="() => (this.isFocused = '')"
+						@focus="() => (isFocused = 'subject')"
+						@blur="() => (isFocused = '')"
 					/>
 				</div>
 				<field-error
@@ -206,27 +206,27 @@
 					class="composer__body"
 					name="body"
 					:label="bodyLabel"
-					groupId="message"
-					primaryLocale="en"
+					group-id="message"
+					primary-locale="en"
 					:all-errors="errors"
 					:init="bodyInit"
-					:formId="id"
+					:form-id="id"
 					plugins="link"
 					size="large"
 					toolbar="bold italic superscript subscript | link"
 					:value="body"
-					:preparedContent="compiledVariables"
-					:insertLabel="insertLabel"
-					:insertModalLabel="insertModalLabel"
-					:preparedContentLabel="insertContentLabel"
-					:searchLabel="insertSearchLabel"
-					@change="(name, prop, value) => this.emitChange({body: value})"
+					:prepared-content="compiledVariables"
+					:insert-label="insertLabel"
+					:insert-modal-label="insertModalLabel"
+					:prepared-content-label="insertContentLabel"
+					:search-label="insertSearchLabel"
+					@change="(name, prop, value) => emitChange({body: value})"
 				>
 					<template #footer>
 						<div
 							v-if="attachments.length"
-							class="composer__attachments"
 							ref="attachedFiles"
+							class="composer__attachments"
 						>
 							<span class="-screenReader">
 								{{ attachedFilesLabel }}
@@ -256,7 +256,7 @@
 					</template>
 				</field-prepared-content>
 				<modal
-					:closeLabel="t('common.close')"
+					:close-label="t('common.close')"
 					:name="fileAttacherModalId"
 					:title="attachFilesLabel"
 					:open="isModalOpenedFileAttacher"
@@ -298,7 +298,6 @@ import preparedContent from '@/mixins/preparedContent';
 
 export default {
 	name: 'Composer',
-	mixins: [ajaxErrorCallback, dialog, preparedContent],
 	components: {
 		FieldAutosuggestPreset,
 		FieldError,
@@ -307,6 +306,7 @@ export default {
 		Modal,
 		Search,
 	},
+	mixins: [ajaxErrorCallback, dialog, preparedContent],
 	props: {
 		addCCLabel: {
 			type: String,
@@ -664,6 +664,19 @@ export default {
 			);
 		},
 	},
+	watch: {
+		searchPhrase() {
+			this.$nextTick(() => this.search());
+		},
+	},
+	created() {
+		if (this.initialTemplateKey) {
+			this.loadTemplate(this.initialTemplateKey);
+		}
+	},
+	mounted() {
+		this.updateToPadding();
+	},
 	methods: {
 		/**
 		 * Add file attachments to the email
@@ -986,19 +999,6 @@ export default {
 			});
 		},
 	},
-	created() {
-		if (this.initialTemplateKey) {
-			this.loadTemplate(this.initialTemplateKey);
-		}
-	},
-	mounted() {
-		this.updateToPadding();
-	},
-	watch: {
-		searchPhrase() {
-			this.$nextTick(() => this.search());
-		},
-	},
 };
 </script>
 

src/components/Container/AccessPage.vue

@@ -4,23 +4,15 @@ import NotifyUsersForm from '@/components/Form/context/NotifyUsersForm.vue';
 
 export default {
 	name: 'AccessPage',
-	extends: Page,
 	components: {
 		NotifyUsersForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			totalBulkJobs: 0,
 		};
 	},
-	methods: {
-		/**
-		 * Reload the page to send another email
-		 */
-		reload() {
-			window.location.reload();
-		},
-	},
 	mounted() {
 		pkp.eventBus.$on('form-success', (formId, data) => {
 			if (formId !== pkp.const.FORM_NOTIFY_USERS) {
@@ -33,6 +25,14 @@ export default {
 	unmounted() {
 		pkp.eventBus.$off('form-success');
 	},
+	methods: {
+		/**
+		 * Reload the page to send another email
+		 */
+		reload() {
+			window.location.reload();
+		},
+	},
 };
 </script>
 

src/components/Container/AddContextContainer.vue

@@ -4,9 +4,9 @@ import AddContextForm from '@/components/Form/context/AddContextForm.vue';
 
 export default {
 	name: 'AddContextContainer',
-	extends: Container,
 	components: {
 		AddContextForm,
 	},
+	extends: Container,
 };
 </script>

src/components/Container/AdminPage.vue

@@ -6,14 +6,14 @@ import ActionPanel from '../ActionPanel/ActionPanel.vue';
 import AnnouncementsListPanel from '../ListPanel/announcements/AnnouncementsListPanel.vue';
 
 export default {
-	extends: Page,
 	name: 'AdminPage',
 	components: {
 		ActionPanel,
 		HighlightsListPanel,
 		AnnouncementsListPanel,
 		ThemeForm,
 	},
+	extends: Page,
 	data() {
 		return {
 			announcementsEnabled: false,

src/components/Container/AdvancedSearchReviewerContainer.vue

@@ -5,26 +5,26 @@
 			<div class="list_outline">
 				<ol class="list_box">
 					<li
-						class="author_row"
 						v-for="(affiliations, author) in displayedItems"
 						:key="author"
+						class="author_row"
 					>
 						<strong>{{ author }}</strong>
-						<span v-if="affiliations"> - </span>
+						<span v-if="affiliations">-</span>
 						<span>{{ affiliations }}</span>
 					</li>
 				</ol>
-				<div class="action_container" v-if="authorCount > 4">
+				<div v-if="authorCount > 4" class="action_container">
 					<span
-						class="show_authors_action"
 						v-if="!showAllAuthors"
+						class="show_authors_action"
 						@click="toggleShowAllAuthors"
 					>
 						{{ `${labels.showAll} ${authorCount} ${labels.authorsLabel}` }}
 					</span>
 					<span
-						class="show_authors_action"
 						v-if="showAllAuthors"
+						class="show_authors_action"
 						@click="toggleShowAllAuthors"
 					>
 						{{ labels.showLess }}
@@ -49,11 +49,6 @@ export default {
 			showAllAuthors: false,
 		};
 	},
-	methods: {
-		toggleShowAllAuthors() {
-			this.showAllAuthors = !this.showAllAuthors;
-		},
-	},
 	computed: {
 		displayedItems() {
 			if (this.showAllAuthors) {
@@ -73,6 +68,11 @@ export default {
 			return Object.keys(this.authors).length;
 		},
 	},
+	methods: {
+		toggleShowAllAuthors() {
+			this.showAllAuthors = !this.showAllAuthors;
+		},
+	},
 };
 </script>
 <style lang="less">