chore: update to ESLint v9 and apply new rules

REUSE.toml

@@ -6,7 +6,7 @@ SPDX-PackageSupplier = "Nextcloud <[email protected]>"
 SPDX-PackageDownloadLocation = "https://github.com/nextcloud-libraries/nextcloud-dialogs"
 
 [[annotations]]
-path = ["package-lock.json", "package.json", "tsconfig-typedoc.json", "tsconfig.json", "test/tsconfig.json", ".eslintrc.json"]
+path = ["package-lock.json", "package.json", "tsconfig-typedoc.json", "tsconfig.json", "test/tsconfig.json"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2019-2024 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

eslint.config.js

@@ -0,0 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: CC0-1.0
+ */
+import { recommendedLibrary } from '@nextcloud/eslint-config'
+
+export default [
+	...recommendedLibrary,
+]

lib/components/FilePicker/FileList.spec.ts

@@ -3,12 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { File, Folder } from '@nextcloud/files'
 import { mount, shallowMount } from '@vue/test-utils'
 import { beforeAll, describe, expect, it, vi } from 'vitest'
-
-import FileList from './FileList.vue'
-import { File, Folder } from '@nextcloud/files'
 import { nextTick } from 'vue'
+import FileList from './FileList.vue'
 
 const axios = vi.hoisted(() => ({
 	get: vi.fn(() => new Promise(() => {})),

lib/components/FilePicker/FileList.vue

@@ -11,7 +11,8 @@
 						<span class="hidden-visually">
 							{{ t('Select entry') }}
 						</span>
-						<NcCheckboxRadioSwitch v-if="multiselect"
+						<NcCheckboxRadioSwitch
+							v-if="multiselect"
 							:aria-label="t('Select all entries')"
 							data-testid="select-all-checkbox"
 							:model-value="allSelected"
@@ -20,7 +21,8 @@
 					<th :aria-sort="sortByName" class="row-name">
 						<div class="header-wrapper">
 							<span class="file-picker__header-preview" />
-							<NcButton data-test="file-picker_sort-name"
+							<NcButton
+								data-test="file-picker_sort-name"
 								variant="tertiary"
 								wide
 								@click="toggleSorting('basename')">
@@ -60,7 +62,8 @@
 					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect" />
 				</template>
 				<template v-else>
-					<FileListRow v-for="file of sortedFiles"
+					<FileListRow
+						v-for="file of sortedFiles"
 						:key="file.fileid || file.path"
 						:allow-pick-directory="allowPickDirectory"
 						:show-checkbox="multiselect"
@@ -77,28 +80,48 @@
 </template>
 
 <script setup lang="ts">
-import type { INode } from '@nextcloud/files'
-import type { FileListViews } from '../../composables/filesSettings'
+import type { FilesSortingMode, INode } from '@nextcloud/files'
+import type { FileListViews } from '../../composables/filesSettings.ts'
 
-import { FileType, FilesSortingMode, sortNodes } from '@nextcloud/files'
+import { FileType, sortNodes } from '@nextcloud/files'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
-import { useFilesSettings, useFilesViews } from '../../composables/filesSettings'
-import { t } from '../../utils/l10n'
-
-import IconSortAscending from 'vue-material-design-icons/MenuUp.vue'
 import IconSortDescending from 'vue-material-design-icons/MenuDown.vue'
-import LoadingTableRow from './LoadingTableRow.vue'
+import IconSortAscending from 'vue-material-design-icons/MenuUp.vue'
 import FileListRow from './FileListRow.vue'
+import LoadingTableRow from './LoadingTableRow.vue'
+import { useFilesSettings, useFilesViews } from '../../composables/filesSettings.ts'
+import { t } from '../../utils/l10n.ts'
 
 const props = defineProps<{
-	currentView: FileListViews,
+	/**
+	 * Current view
+	 */
+	currentView: FileListViews
+	/**
+	 * Allow selecting multiple elements
+	 */
 	multiselect: boolean
+	/**
+	 * Allow picking directories
+	 */
 	allowPickDirectory: boolean
+	/**
+	 * Is in loading state (WebDAV request ongoing)
+	 */
 	loading: boolean
+	/**
+	 * Files to show
+	 */
 	files: INode[]
+	/**
+	 * Currently selected files
+	 */
 	selectedFiles: INode[]
+	/**
+	 * Current path
+	 */
 	path: string
 }>()
 
@@ -175,6 +198,7 @@ function onSelectAll() {
 
 /**
  * Handle selecting a node on the files list
+ *
  * @param file the selected node
  */
 function onNodeSelected(file: INode) {
@@ -192,6 +216,7 @@ function onNodeSelected(file: INode) {
 
 /**
  * Emit the new current path
+ *
  * @param dir The directory that is entered
  */
 function onChangeDirectory(dir: INode) {

lib/components/FilePicker/FileListRow.spec.ts

@@ -3,12 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { afterEach, describe, expect, it, vi } from 'vitest'
 import { File } from '@nextcloud/files'
 import { shallowMount } from '@vue/test-utils'
-
-import FileListRow from './FileListRow.vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import FileListRow from './FileListRow.vue'
 
 describe('FilePicker: FileListRow', () => {
 	const node = new File({

lib/components/FilePicker/FileListRow.vue

@@ -3,20 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<tr :tabindex="(showCheckbox && !isDirectory) ? undefined : 0"
+	<tr
+		:tabindex="(showCheckbox && !isDirectory) ? undefined : 0"
 		:aria-selected="!isPickable ? undefined : selected"
-		:class="['file-picker__row', {
-			'file-picker__row--selected': selected && !showCheckbox
-		}]"
+		:class="[
+			'file-picker__row', {
+				'file-picker__row--selected': selected && !showCheckbox,
+			},
+		]"
 		:data-filename="node.basename"
 		data-testid="file-list-row"
 		v-on="{
 			click: handleClick,
 			/* same as tabindex -> if we hide the checkbox or this is a directory we need keyboard access to enter the directory or select the node */
 			...(!showCheckbox || isDirectory ? { keydown: handleKeyDown } : {}),
 		}">
-		<td v-if="showCheckbox" class="row-checkbox" @click.stop="() => {/* Stop the click event */}">
-			<NcCheckboxRadioSwitch :aria-label="t('Select the row for {nodename}', { nodename: displayName })"
+		<td v-if="showCheckbox" class="row-checkbox" @click.stop="() => { /* Stop the click event */ }">
+			<NcCheckboxRadioSwitch
+				:aria-label="t('Select the row for {nodename}', { nodename: displayName })"
 				:disabled="!isPickable"
 				data-testid="row-checkbox"
 				:model-value="selected"
@@ -37,16 +41,16 @@
 		</td>
 	</tr>
 </template>
+
 <script setup lang="ts">
 import type { INode } from '@nextcloud/files'
 
-import { formatFileSize, FileType } from '@nextcloud/files'
+import { FileType, formatFileSize } from '@nextcloud/files'
+import { computed } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
-import { computed } from 'vue'
-import { t } from '../../utils/l10n'
-
 import FilePreview from './FilePreview.vue'
+import { t } from '../../utils/l10n.ts'
 
 const props = defineProps<{
 	/** Can directories be picked */
@@ -112,6 +116,7 @@ function handleClick() {
 
 /**
  * Handle keydown on the table row, pressing the enter key will be similar to clicking for keyboard navigation
+ *
  * @param event The Keydown event
  */
 function handleKeyDown(event: KeyboardEvent) {