refactor(files): migrate to Vue 3

apps/files/src/FilesApp.vue

@@ -5,15 +5,14 @@
 <template>
 	<NcContent app-name="files">
 		<FilesNavigation v-if="!isPublic" />
-		<FilesList :is-public="isPublic" />
+		<RouterView />
 		<FilesSidebar v-if="!isPublic" />
 	</NcContent>
 </template>
 
 <script setup lang="ts">
 import { isPublicShare } from '@nextcloud/sharing/public'
 import NcContent from '@nextcloud/vue/components/NcContent'
-import FilesList from './views/FilesList.vue'
 import FilesNavigation from './views/FilesNavigation.vue'
 import FilesSidebar from './views/FilesSidebar.vue'
 import { useHotKeys } from './composables/useHotKeys.ts'

apps/files/src/actions/deleteUtils.ts

@@ -11,7 +11,7 @@ import { getCapabilities } from '@nextcloud/capabilities'
 import { emit } from '@nextcloud/event-bus'
 import { FileType } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
 
 export const isTrashbinEnabled = () => (getCapabilities() as Capabilities)?.files?.undelete === true
@@ -134,7 +134,7 @@ export function displayName({ nodes, view }: { nodes: INode[], view: IView }) {
  *
  */
 export function shouldAskForConfirmation() {
-	const userConfig = useUserConfigStore(getPinia())
+	const userConfig = useUserConfigStore(pinia)
 	return userConfig.userConfig.show_dialog_deletion !== false
 }
 

apps/files/src/actions/downloadAction.ts

@@ -12,7 +12,7 @@ import { emit } from '@nextcloud/event-bus'
 import { DefaultType, FileType } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { logger } from '../utils/logger.ts'
 import { isDownloadable } from '../utils/permissions.ts'
@@ -161,8 +161,8 @@ async function downloadNodes(nodes: INode[]) {
  * @return The current directory node or null if not found
  */
 function getCurrentDirectory(view: IView, directory: string): INode | null {
-	const filesStore = useFilesStore(getPinia())
-	const pathsStore = usePathsStore(getPinia())
+	const filesStore = useFilesStore(pinia)
+	const pathsStore = usePathsStore(pinia)
 	if (!view?.id) {
 		return null
 	}

apps/files/src/actions/favoriteAction.ts

@@ -15,7 +15,6 @@ import { encodePath } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
 import { isPublicShare } from '@nextcloud/sharing/public'
 import PQueue from 'p-queue'
-import Vue from 'vue'
 import { logger } from '../utils/logger.ts'
 
 const queue = new PQueue({ concurrency: 5 })
@@ -107,7 +106,7 @@ export async function favoriteNode(node: INode, view: IView, willFavorite: boole
 		}
 
 		// Update the node webdav attribute
-		Vue.set(node.attributes, 'favorite', willFavorite ? 1 : 0)
+		node.attributes.favorite = willFavorite ? 1 : 0
 		emit('files:node:updated', node)
 
 		// Dispatch event to whoever is interested

apps/files/src/actions/moveOrCopyAction.ts

@@ -16,9 +16,8 @@ import { FileType, getUniqueName, NodeStatus, Permission } from '@nextcloud/file
 import { defaultRootPath, getClient, getDefaultPropfind, resultToNode } from '@nextcloud/files/dav'
 import { n, t } from '@nextcloud/l10n'
 import { basename, join } from '@nextcloud/paths'
-import { getConflicts } from '@nextcloud/upload'
-import Vue from 'vue'
 import { getContents } from '../services/Files.ts'
+import { getConflicts } from '../utils/conflicts.ts'
 import { logger } from '../utils/logger.ts'
 import { canCopy, canMove, getQueue, MoveCopyAction } from './moveOrCopyActionUtils.ts'
 
@@ -165,7 +164,7 @@ export async function* handleCopyMoveNodesTo(nodes: INode[], destination: IFolde
 	try {
 		for (const node of nodes) {
 			// Set loading state
-			Vue.set(node, 'status', NodeStatus.LOADING)
+			node.status = NodeStatus.LOADING
 			yield queue.add(async () => {
 				try {
 					const client = getClient()
@@ -211,7 +210,7 @@ export async function* handleCopyMoveNodesTo(nodes: INode[], destination: IFolde
 					}
 					throw error
 				} finally {
-					Vue.set(node, 'status', undefined)
+					node.status = undefined
 				}
 			})
 		}

apps/files/src/actions/renameAction.spec.ts

@@ -9,7 +9,7 @@ import * as eventBus from '@nextcloud/event-bus'
 import { File, Folder, Permission } from '@nextcloud/files'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { action } from './renameAction.ts'
 
 const view = {
@@ -25,7 +25,7 @@ beforeEach(() => {
 		permissions: Permission.CREATE,
 		root: '/files/admin',
 	})
-	const files = useFilesStore(getPinia())
+	const files = useFilesStore(pinia)
 	files.setRoot({ service: 'files', root })
 })
 

apps/files/src/actions/renameAction.ts

@@ -11,7 +11,7 @@ import { Permission } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import { dirname } from 'path'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 
 export const ACTION_RENAME = 'rename'
 
@@ -31,7 +31,7 @@ export const action: IFileAction = {
 		}
 
 		const node = nodes[0]
-		const filesStore = useFilesStore(getPinia())
+		const filesStore = useFilesStore(pinia)
 		const parentNode = node.dirname === '/'
 			? filesStore.getRoot(view.id)
 			: filesStore.getNode(dirname(node.source))

apps/files/src/components/BreadCrumbs.vue

@@ -18,10 +18,10 @@
 			:to="section.to"
 			:force-icon-text="index === 0 && !isNarrow"
 			force-menu
-			:open.sync="isMenuOpen"
+			v-model:open="isMenuOpen"
 			:title="titleForSection(index, section)"
 			:aria-description="ariaForSection(section)"
-			@dragover.native="onDragOver($event, section.dir)"
+			@dragover="onDragOver($event, section.dir)"
 			@drop="onDrop($event, section.dir)">
 			<template v-if="index === 0" #icon>
 				<NcIconSvgWrapper

apps/files/src/components/DragAndDropNotice.vue

@@ -32,8 +32,8 @@ import type { PropType } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { Permission } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
-import { UploadStatus } from '@nextcloud/upload'
+import { UploadStatus } from '@nextcloud/files/upload'
+import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'

apps/files/src/components/DragAndDropPreview.vue

@@ -17,19 +17,21 @@
 import type { Node } from '@nextcloud/files'
 
 import { FileType, formatFileSize } from '@nextcloud/files'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FileMultipleIcon from 'vue-material-design-icons/FileMultiple.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import { getSummaryFor } from '../utils/fileUtils.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'DragAndDropPreview',
 
 	components: {
 		FileMultipleIcon,
 		FolderIcon,
 	},
 
+	emits: ['loaded'],
+
 	data() {
 		return {
 			nodes: [] as Node[],

apps/files/src/components/FileEntry.vue

@@ -33,24 +33,24 @@
 				ref="preview"
 				:source="source"
 				:dragover="dragover"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 
 			<FileEntryName
 				ref="name"
 				:basename="basename"
 				:extension="extension"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 		</td>
 
 		<!-- Actions -->
 		<FileEntryActions
 			v-show="!isRenamingSmallScreen"
 			ref="actions"
 			:class="`files-list__row-actions-${uniqueId}`"
-			:opened.sync="openedMenu"
+			v-model:opened="openedMenu"
 			:source="source" />
 
 		<!-- Mime -->

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -40,12 +40,13 @@
 
 <script lang="ts">
 import type { IFileAction, Node, TFileType } from '@nextcloud/files'
-import type { PropType } from 'vue'
+import type { ComponentPublicInstance, PropType } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { FileType, NodeStatus } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import { basename } from '@nextcloud/paths'
+import { vOnClickOutside } from '@vueuse/components'
 import { defineComponent, inject } from 'vue'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import { useFileListWidth } from '../../composables/useFileListWidth.ts'
@@ -62,6 +63,10 @@ export default defineComponent({
 		NcTextField,
 	},
 
+	directives: {
+		onClickOutside: vOnClickOutside,
+	},
+
 	props: {
 		/**
 		 * The filename without extension
@@ -185,7 +190,7 @@ export default defineComponent({
 		newName() {
 			// Check validity of the new name
 			const newName = this.newName.trim?.() || ''
-			const input = (this.$refs.renameInput as Vue | undefined)?.$el.querySelector('input')
+			const input = (this.$refs.renameInput as ComponentPublicInstance | undefined)?.$el.querySelector('input')
 			if (!input) {
 				return
 			}
@@ -213,7 +218,7 @@ export default defineComponent({
 		startRenaming() {
 			this.$nextTick(() => {
 				// Using split to get the true string length
-				const input = (this.$refs.renameInput as Vue | undefined)?.$el.querySelector('input')
+				const input = (this.$refs.renameInput as ComponentPublicInstance | undefined)?.$el.querySelector('input')
 				if (!input) {
 					logger.error('Could not find the rename input')
 					return

apps/files/src/components/FileEntryGrid.vue

@@ -35,16 +35,16 @@
 				:dragover="dragover"
 				:grid-mode="true"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 
 			<FileEntryName
 				ref="name"
 				:basename="basename"
 				:extension="extension"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 		</td>
 
 		<!-- Mtime -->
@@ -63,7 +63,7 @@
 		<!-- Actions -->
 		<FileEntryActions
 			ref="actions"
-			:opened.sync="openedMenu"
+			v-model:opened="openedMenu"
 			:class="`files-list__row-actions-${uniqueId}`"
 			:grid-mode="true"
 			:source="source" />

apps/files/src/components/FileEntryMixin.ts

@@ -11,18 +11,15 @@ import { FileType, Folder, File as NcFile, Node, NodeStatus, Permission } from '
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { isPublicShare } from '@nextcloud/sharing/public'
-import { vOnClickOutside } from '@vueuse/components'
 import { extname } from 'path'
-import Vue, { computed, defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { dataTransferToFileTree, onDropExternalFiles, onDropInternalFiles } from '../services/DropService.ts'
 import { getDragAndDropPreview } from '../utils/dragUtils.ts'
 import { hashCode } from '../utils/hashUtils.ts'
 import { logger } from '../utils/logger.ts'
 import { isDownloadable } from '../utils/permissions.ts'
 
-Vue.directive('onClickOutside', vOnClickOutside)
-
 export default defineComponent({
 	props: {
 		source: {
@@ -287,7 +284,7 @@ export default defineComponent({
 		},
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.resetState()
 	},
 

apps/files/src/components/FileListFilter/FileListFilterToSearch.vue

@@ -13,10 +13,10 @@
 import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import { getPinia } from '../../store/index.ts'
+import { pinia } from '../../store/index.ts'
 import { useSearchStore } from '../../store/search.ts'
 
-const searchStore = useSearchStore(getPinia())
+const searchStore = useSearchStore(pinia)
 
 const isVisible = computed(() => searchStore.query.length >= 3 && searchStore.scope === 'filter')
 

apps/files/src/components/FilesListHeader.vue

@@ -86,7 +86,7 @@ export default {
 		})
 	},
 
-	destroyed() {
+	unmounted() {
 		logger.debug(`Destroyed ${this.header.id} FilesListHeader`, { header: this.header })
 	},
 

apps/files/src/components/FilesListTableHeader.vue

@@ -11,7 +11,7 @@
 				v-bind="selectAllBind"
 				:id="FILES_LIST_HEADER_SELECT_ALL_CHECKBOX_ID"
 				data-cy-files-list-selection-checkbox
-				@update:model-value="onToggleAll" />
+				@update:modelValue="onToggleAll" />
 		</th>
 
 		<!-- Columns display -->
@@ -86,9 +86,9 @@ import { defineComponent } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import { FILE_LIST_HEAD_FIRST_BATCH_ACTION_ID } from './FilesListTableHeaderActions.vue'
 import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+import { useFilesSorting } from '../composables/filesSorting.ts'
 import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
-import filesSortingMixin from '../mixins/filesSorting.ts'
 import { useActiveStore } from '../store/active.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
@@ -104,10 +104,6 @@ export default defineComponent({
 		NcCheckboxRadioSwitch,
 	},
 
-	mixins: [
-		filesSortingMixin,
-	],
-
 	props: {
 		isMimeAvailable: {
 			type: Boolean,
@@ -146,6 +142,8 @@ export default defineComponent({
 			directory,
 			isNarrow,
 
+			...useFilesSorting(),
+
 			FILES_LIST_HEADER_SELECT_ALL_CHECKBOX_ID,
 		}
 	},