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: {

package.json

@@ -1,34 +1,20 @@
 {
   "name": "logreader",
+  "version": "6.0.0-dev.0",
   "type": "module",
   "scripts": {
     "build": "vite --mode production build",
     "dev": "vite --mode development build",
     "dev:watch": "vite --mode development build --watch",
-    "lint": "eslint src *.ts",
-    "lint:fix": "eslint --fix src *.ts",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "test": "TZ='Etc/GMT+1' vitest run",
-    "test:watch": "TZ='Etc/GMT+1' vitest watch",
-    "test:coverage": "TZ='Etc/GMT+1' vitest run --coverage"
-  },
-  "devDependencies": {
-    "@nextcloud/browserslist-config": "^3.1.2",
-    "@nextcloud/eslint-config": "^9.0.0-rc.5",
-    "@nextcloud/vite-config": "^2.5.2",
-    "@pinia/testing": "^1.0.3",
-    "@vitest/coverage-istanbul": "^4.0.13",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
-    "browserslist": "^4.28.0",
-    "happy-dom": "^20.0.10",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vitest": "^4.0.13"
-  },
-  "engines": {
-    "node": "^24.0.0",
-    "npm": "^11.3.0"
+    "test:coverage": "TZ='Etc/GMT+1' vitest run --coverage",
+    "test:watch": "TZ='Etc/GMT+1' vitest watch"
   },
+  "browserslist": [
+    "extends @nextcloud/browserslist-config"
+  ],
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@mdi/svg": "^7.4.47",
@@ -46,8 +32,22 @@
     "vue": "^3.5.24",
     "vue-material-design-icons": "^5.3.1"
   },
-  "browserslist": [
-    "extends @nextcloud/browserslist-config"
-  ],
-  "version": "6.0.0-dev.0"
+  "devDependencies": {
+    "@nextcloud/browserslist-config": "^3.1.2",
+    "@nextcloud/eslint-config": "^9.0.0-rc.5",
+    "@nextcloud/vite-config": "^2.5.2",
+    "@pinia/testing": "^1.0.3",
+    "@vitest/coverage-istanbul": "^4.0.13",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "browserslist": "^4.28.0",
+    "happy-dom": "^20.0.10",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.13"
+  },
+  "engines": {
+    "node": "^24.0.0",
+    "npm": "^11.3.0"
+  }
 }

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')