Techdebt: add ESLint rules to prepare for Vue 3 migration

.eslintrc.js

@@ -10,8 +10,8 @@ module.exports = {
 		IS_DESKTOP: 'readonly',
 	},
 	rules: {
-		'import/newline-after-import': 1,
-		'import/no-named-as-default-member': 0,
+		'import/newline-after-import': 'warn',
+		'import/no-named-as-default-member': 'off',
 		'import/order': [
 			'warn',
 			{
@@ -59,12 +59,26 @@ module.exports = {
 				warnOnUnassignedImports: true,
 			},
 		],
+		// Prepare for Vue 3 Migration
+		'vue/no-deprecated-data-object-declaration': 'warn',
+		'vue/no-deprecated-events-api': 'warn',
+		'vue/no-deprecated-filter': 'warn',
+		'vue/no-deprecated-functional-template': 'warn',
+		'vue/no-deprecated-html-element-is': 'warn',
+		'vue/no-deprecated-props-default-this': 'warn',
+		'vue/no-deprecated-router-link-tag-prop': 'warn',
+		'vue/no-deprecated-scope-attribute': 'warn',
+		'vue/no-deprecated-slot-attribute': 'warn',
+		'vue/no-deprecated-slot-scope-attribute': 'warn',
+		'vue/no-deprecated-v-is': 'warn',
+		'vue/no-deprecated-v-on-number-modifiers': 'warn',
+		'vue/require-explicit-emits': 'warn',
 	},
 	overrides: [
 		{
 			files: ['**/*.spec.js'],
 			rules: {
-				'node/no-unpublished-import': 0,
+				'node/no-unpublished-import': 'off',
 			},
 		},
 	],

src/FilesSidebarCallViewApp.vue

@@ -38,15 +38,14 @@ import PreventUnload from 'vue-prevent-unload'
 import CallView from './components/CallView/CallView.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 
+import { useIsInCall } from './composables/useIsInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
 
 // Styles
 import '@nextcloud/dialogs/dist/index.css'
 
-import { useIsInCall } from './composables/useIsInCall.js'
-
 export default {
 
 	name: 'FilesSidebarCallViewApp',

src/PublicShareSidebarTrigger.vue

@@ -51,6 +51,8 @@ export default {
 		},
 	},
 
+	emits: ['click'],
+
 	computed: {
 		ariaLabel() {
 			if (this.sidebarState.isOpen) {

src/components/AdminSettings/RecordingServer.vue

@@ -103,6 +103,8 @@ export default {
 		},
 	},
 
+	emits: ['remove-server', 'update:server', 'update:verify'],
+
 	data() {
 		return {
 			checked: false,

src/components/AdminSettings/SignalingServer.vue

@@ -102,6 +102,8 @@ export default {
 		},
 	},
 
+	emits: ['remove-server', 'update:server', 'update:verify'],
+
 	data() {
 		return {
 			checked: false,

src/components/AdminSettings/StunServer.vue

@@ -86,6 +86,8 @@ export default {
 		},
 	},
 
+	emits: ['remove-server', 'update:server'],
+
 	computed: {
 		isValidServer() {
 			let server = this.server

src/components/AdminSettings/TurnServer.vue

@@ -156,6 +156,8 @@ export default {
 		},
 	},
 
+	emits: ['remove-server', 'update:schemes', 'update:server', 'update:secret', 'update:protocols'],
+
 	data() {
 		return {
 			testing: false,

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -106,6 +106,8 @@ export default {
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			mode: '1',

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -138,6 +138,8 @@ export default {
 		},
 	},
 
+	emits: ['back', 'close'],
+
 	data() {
 		return {
 			selectedParticipants: [],

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -84,6 +84,8 @@ export default {
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			modalContainerId: null,

src/components/CallView/Grid/Grid.vue

@@ -290,6 +290,8 @@ export default {
 		},
 	},
 
+	emits: ['select-video', 'click-local-video'],
+
 	data() {
 		return {
 			gridWidth: 0,

src/components/ConversationSettings/EditableTextField.vue

@@ -149,6 +149,8 @@ export default {
 		},
 	},
 
+	emits: ['update:editing', 'submit-text'],
+
 	data() {
 		return {
 			text: this.initialText,

src/components/ConversationSettings/ListableSettings.vue

@@ -69,6 +69,8 @@ export default {
 		},
 	},
 
+	emits: ['input'],
+
 	data() {
 		return {
 			listable: null,

src/components/ConversationSettings/Matterbridge/BridgePart.vue

@@ -132,6 +132,8 @@ export default {
 		},
 	},
 
+	emits: ['delete-part', 'edit-clicked'],
+
 	data() {
 		return {
 			readonly: true,

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -45,17 +45,14 @@
 				{{ conversationInformation }}
 			</template>
 		</template>
-		<template v-if="!isSearchResult" slot="actions">
+		<template v-if="!isSearchResult" #actions>
 			<NcActionButton v-if="canFavorite"
 				:close-after-click="true"
 				@click.prevent.exact="toggleFavoriteConversation">
-				<Star v-if="item.isFavorite"
-					slot="icon"
-					:size="20" />
-				<Star v-else
-					slot="icon"
-					:size="20"
-					:fill-color="'#FFCC00'" />
+				<template #icon>
+					<Star v-if="item.isFavorite" :size="20" />
+					<Star v-else :size="20" :fill-color="'#FFCC00'" />
+				</template>
 				{{ labelFavorite }}
 			</NcActionButton>
 			<NcActionButton icon="icon-clippy"
@@ -80,8 +77,9 @@
 			</NcActionButton>
 			<NcActionButton :close-after-click="true"
 				@click.prevent.exact="showConversationSettings">
-				<Cog slot="icon"
-					:size="20" />
+				<template #icon>
+					<Cog :size="20" />
+				</template>
 				{{ t('spreed', 'Conversation settings') }}
 			</NcActionButton>
 			<NcActionButton v-if="canLeaveConversation"
@@ -102,7 +100,7 @@
 				{{ t('spreed', 'Delete conversation') }}
 			</NcActionButton>
 		</template>
-		<template v-else-if="item.token" slot="actions">
+		<template v-else-if="item.token" #actions>
 			<NcActionButton close-after-click @click="onClick">
 				<template #icon>
 					<ArrowRight :size="16" />
@@ -182,6 +180,8 @@ export default {
 		},
 	},
 
+	emits: ['click'],
+
 	computed: {
 		counterType() {
 			if (this.item.unreadMentionDirect || (this.item.unreadMessages !== 0 && (

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -21,8 +21,7 @@
 
 <template>
 	<div class="wrapper">
-		<NcButton slot="trigger"
-			v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
+		<NcButton v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
 			type="tertiary"
 			class="toggle"
 			:aria-label="t('spreed', 'Create a new group conversation')"

src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue

@@ -46,6 +46,8 @@ export default {
 		},
 	},
 
+	emits: ['input', 'click-enter'],
+
 	methods: {
 		handleInput(event) {
 			this.$emit('input', event.target.value)

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -70,6 +70,9 @@ export default {
 			default: false,
 		},
 	},
+
+	emits: ['update:value', 'input', 'submit', 'abort-search'],
+
 	data() {
 		return {
 			localValue: '',

src/components/MediaDevicesSelector.vue

@@ -77,6 +77,8 @@ export default {
 		},
 	},
 
+	emits: ['update:deviceId'],
+
 	data() {
 		return {
 			deviceSelectedOption: null,

src/components/MediaSettings/MediaSettings.vue

@@ -148,8 +148,9 @@
 							:title="t('spreed', 'Call without notification')"
 							@click="silentCall= true">
 							{{ t('spreed', 'The conversation participants will not be notified about this call') }}
-							<BellOff slot="icon"
-								:size="16" />
+							<template #icon>
+								<BellOff :size="16" />
+							</template>
 						</NcActionButton>
 					</template>
 					<template v-else>
@@ -158,8 +159,9 @@
 							:title="t('spreed', 'Normal call')"
 							@click="silentCall= false">
 							{{ t('spreed', 'The conversation participants will be notified about this call') }}
-							<Bell slot="icon"
-								:size="16" />
+							<template #icon>
+								<Bell :size="16" />
+							</template>
 						</NcActionButton>
 					</template>
 				</NcActions>

src/components/MediaSettings/VideoBackgroundEditor.vue

@@ -123,6 +123,8 @@ export default {
 		},
 	},
 
+	emits: ['update-background'],
+
 	setup() {
 		return {
 			canUploadBackgrounds,

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -38,6 +38,10 @@ const RichTextStub = {
 	template: '<div/>',
 }
 
+const NcPopoverStub = {
+	template: '<slot name="trigger" /><slot/>',
+}
+
 describe('Message.vue', () => {
 	const TOKEN = 'XXTOKENXX'
 	let localVue
@@ -842,6 +846,9 @@ describe('Message.vue', () => {
 				store,
 				propsData: messageProps,
 				provide: injected,
+				stubs: {
+					NcPopover: NcPopoverStub,
+				},
 			})
 
 			const reactionsBar = wrapper.find('.message-body__reactions')
@@ -875,6 +882,9 @@ describe('Message.vue', () => {
 				store,
 				propsData: messageProps,
 				provide: injected,
+				stubs: {
+					NcPopover: NcPopoverStub,
+				},
 			})
 
 			const reactionsBar = wrapper.find('.message-body__reactions')
@@ -972,6 +982,9 @@ describe('Message.vue', () => {
 				store,
 				propsData: messagePropsWithReactions,
 				provide: injected,
+				stubs: {
+					NcPopover: NcPopoverStub,
+				},
 			})
 
 			// Click reaction button upon having already reacted

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -137,13 +137,15 @@ the main body of the message as well as a quote.
 					:key="reaction"
 					:delay="200"
 					:triggers="['hover']">
-					<NcButton v-if="simpleReactions[reaction] !== 0"
-						slot="trigger"
-						:type="userHasReacted(reaction) ? 'primary' : 'secondary'"
-						class="reaction-button"
-						@click="handleReactionClick(reaction)">
-						{{ reaction }} {{ simpleReactions[reaction] }}
-					</NcButton>
+					<template #trigger>
+						<NcButton v-if="simpleReactions[reaction] !== 0"
+							:type="userHasReacted(reaction) ? 'primary' : 'secondary'"
+							class="reaction-button"
+							@click="handleReactionClick(reaction)">
+							{{ reaction }} {{ simpleReactions[reaction] }}
+						</NcButton>
+					</template>
+
 					<div v-if="detailedReactions" class="reaction-details">
 						<span>{{ getReactionSummary(reaction) }}</span>
 					</div>

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue

@@ -101,6 +101,8 @@ export default {
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			selectedConversationToken: null,

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -85,8 +85,9 @@
 				</NcActionButton>
 				<NcActionLink v-if="linkToFile"
 					:href="linkToFile">
-					<File slot="icon"
-						:size="20" />
+					<template #icon>
+						<File :size="20" />
+					</template>
 					{{ t('spreed', 'Go to file') }}
 				</NcActionLink>
 				<NcActionButton v-if="canForwardMessage"
@@ -355,6 +356,8 @@ export default {
 		},
 	},
 
+	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen'],
+
 	data() {
 		return {
 			frequentlyUsedEmojis: [],

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -235,6 +235,8 @@ export default {
 		},
 	},
 
+	emits: ['remove-file'],
+
 	setup() {
 		const { openViewer } = useViewer()
 		return { openViewer }

src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue

@@ -102,6 +102,8 @@ export default {
 		},
 	},
 
+	emits: ['recording', 'audio-file'],
+
 	data() {
 		return {
 			// The audio stream object