chore: update eslint config to Vue 3

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

eslint.config.mjs

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { recommendedVue2 } from '@nextcloud/eslint-config'
+import { recommended } from '@nextcloud/eslint-config'
 
 export default [
-	...recommendedVue2,
+	...recommended,
 	{
 		name: 'logreader/disabled-during-migration',
 		rules: {

src/App.vue

@@ -45,7 +45,7 @@
 			</template>
 		</NcEmptyContent>
 		<!-- App settings dialog will be mounted on page body -->
-		<AppSettingsDialog :open.sync="areSettingsShown" />
+		<AppSettingsDialog v-model:open="areSettingsShown" />
 	</div>
 </template>
 

src/components/LogDetailsModal.vue

@@ -9,9 +9,9 @@
 		size="large"
 		:has-previous="index > 0"
 		:has-next="index < logEntries.length - 1"
-		@next="$emit('update:currentEntry', logEntries[index + 1])"
-		@previous="$emit('update:currentEntry', logEntries[index - 1])"
-		@update:show="$emit('update:open', false)">
+		@next="emit('update:currentEntry', logEntries[index + 1])"
+		@previous="emit('update:currentEntry', logEntries[index - 1])"
+		@update:show="emit('update:open', false)">
 		<template #default>
 			<div class="log-details">
 				<dl :class="cssLevelClass">
@@ -82,6 +82,11 @@ const props = defineProps<{
 	logEntries: readonly ILogEntry[]
 }>()
 
+const emit = defineEmits<{
+	(event: 'update:currentEntry', value: ILogEntry): void
+	(event: 'update:open', value: false): void
+}>()
+
 hljs.registerLanguage('json', json)
 
 const { formatTime, formatLogEntry } = useLogFormatting()

src/components/LogSearch.vue

@@ -5,8 +5,8 @@
 
 <template>
 	<NcActions
+		v-model:open="isOpen"
 		:force-menu="true"
-		:open.sync="isOpen"
 		:aria-label="t('logreader', 'Search log entries')"
 		:type="buttonType">
 		<template #icon>

src/components/table/LogTable.vue

@@ -7,24 +7,24 @@
 	<div class="log-table">
 		<LogDetailsModal
 			v-if="currentRow"
-			:open.sync="isModalOpen"
-			:current-entry.sync="currentRow"
+			v-model:open="isModalOpen"
+			v-model:current-entry="currentRow"
 			:log-entries="sortedRows" />
 		<table ref="tableRoot" class="log-table__table">
 			<thead role="rowgroup" class="log-table__header">
 				<tr>
 					<LogTableHeader
-						:name="t('logreader', 'Level')"
-						:sorted.sync="sortedByLevel" />
+						v-model:sorted="sortedByLevel"
+						:name="t('logreader', 'Level')" />
 					<LogTableHeader
-						:name="t('logreader', 'Application')"
-						:sorted.sync="sortedByApp" />
+						v-model:sorted="sortedByApp"
+						:name="t('logreader', 'Application')" />
 					<LogTableHeader :name="t('logreader', 'Message')" :sortable="false">
 						<LogSearch />
 					</LogTableHeader>
 					<LogTableHeader
-						:name="t('logreader', 'Time')"
-						:sorted.sync="sortedByTime" />
+						v-model:sorted="sortedByTime"
+						:name="t('logreader', 'Time')" />
 					<th><span class="hidden-visually">{{ t('logreader', 'Log entry actions') }}</span></th>
 				</tr>
 			</thead>

src/components/table/LogTableRow.vue

@@ -47,7 +47,7 @@
 		</td>
 		<td>
 			<NcActions placement="left-start">
-				<NcActionButton close-after-click @click="$emit('show-details', row)">
+				<NcActionButton close-after-click @click="emit('showDetails', row)">
 					<template #icon>
 						<IconViewList />
 					</template>
@@ -100,6 +100,10 @@ const props = withDefaults(
 	},
 )
 
+const emit = defineEmits<{
+	(event: 'showDetails', value: ILogEntry): void
+}>()
+
 const settingsStore = useSettingsStore()
 const isRawDate = computed(() => settingsStore.dateTimeFormat === 'raw')
 const isRelativeDate = computed(() => settingsStore.dateTimeFormat === 'relative')