feat(vue3): migrate to vue3

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

lib/components/FilePicker/FileList.spec.ts

@@ -79,7 +79,7 @@ describe('FilePicker FileList', () => {
 		const consoleWarning = vi.spyOn(console, 'warn')
 
 		const wrapper = shallowMount(FileList, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				multiselect: false,
 				allowPickDirectory: false,
@@ -97,7 +97,7 @@ describe('FilePicker FileList', () => {
 
 	it('header checkbox is not shown if multiselect is `false`', () => {
 		const wrapper = shallowMount(FileList, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				multiselect: false,
 				allowPickDirectory: false,
@@ -112,7 +112,7 @@ describe('FilePicker FileList', () => {
 
 	it('header checkbox is shown if multiselect is `true`', () => {
 		const wrapper = shallowMount(FileList, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				multiselect: true,
 				allowPickDirectory: false,
@@ -122,18 +122,18 @@ describe('FilePicker FileList', () => {
 				path: '/',
 			},
 		})
-		const selectAll = wrapper.find('[data-testid="select-all-checkbox"]')
+		const selectAll = wrapper.getComponent('[data-testid="select-all-checkbox"]')
 		expect(selectAll.exists()).toBe(true)
 		// there is an aria label
-		expect(selectAll.attributes('aria-label')).toBeTruthy()
+		expect(selectAll.attributes('arialabel')).toBeTruthy()
 		// no checked
-		expect(selectAll.props('checked')).toBe(false)
+		expect(selectAll.props('modelValue')).toBe(false)
 	})
 
 	it('header checkbox is checked when all nodes are selected', async () => {
 		const nodes = [...exampleNodes]
 		const wrapper = shallowMount(FileList, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				multiselect: true,
 				allowPickDirectory: false,
@@ -144,15 +144,15 @@ describe('FilePicker FileList', () => {
 			},
 		})
 
-		const selectAll = wrapper.find('[data-testid="select-all-checkbox"]')
-		expect(selectAll.props('checked')).toBe(true)
+		const selectAll = wrapper.getComponent('[data-testid="select-all-checkbox"]')
+		expect(selectAll.props('modelValue')).toBe(true)
 	})
 
 	describe('file list sorting', () => {
 		it('is sorted initially by name', async () => {
 			const nodes = [...exampleNodes]
 			const wrapper = mount(FileList, {
-				propsData: {
+				props: {
 					currentView: 'files',
 					multiselect: true,
 					allowPickDirectory: false,
@@ -183,7 +183,7 @@ describe('FilePicker FileList', () => {
 		it('can sort descending by name', async () => {
 			const nodes = [...exampleNodes]
 			const wrapper = mount(FileList, {
-				propsData: {
+				props: {
 					currentView: 'files',
 					multiselect: true,
 					allowPickDirectory: false,

lib/components/FilePicker/FileList.vue

@@ -9,9 +9,9 @@
 						</span>
 						<NcCheckboxRadioSwitch v-if="multiselect"
 							:aria-label="t('Select all entries')"
-							:checked="allSelected"
+							:model-value="allSelected"
 							data-testid="select-all-checkbox"
-							@update:checked="onSelectAll" />
+							@update:model-value="onSelectAll" />
 					</th>
 					<th :aria-sort="sortByName" class="row-name">
 						<div class="header-wrapper">

lib/components/FilePicker/FileListRow.spec.ts

@@ -45,7 +45,7 @@ describe('FilePicker: FileListRow', () => {
 		const consoleError = vi.spyOn(console, 'error')
 
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: true,
 				selected: false,
 				showCheckbox: true,
@@ -66,7 +66,7 @@ describe('FilePicker: FileListRow', () => {
 
 	it('shows checkbox based on `showCheckbox` property', async () => {
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: true,
 				selected: false,
 				showCheckbox: true,
@@ -83,17 +83,19 @@ describe('FilePicker: FileListRow', () => {
 
 	it('Click checkbox triggers select', async () => {
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: false,
 				selected: false,
 				showCheckbox: true,
 				canPick: true,
 				node,
 				cropImagePreviews: true,
 			},
-			stubs: {
-				NcCheckboxRadioSwitch: {
-					template: '<label><input type="checkbox" @click="$emit(\'update:checked\', true)" ></label>',
+			global: {
+				stubs: {
+					NcCheckboxRadioSwitch: {
+						template: '<label><input type="checkbox" @click="$emit(\'update:modelValue\', true)" ></label>',
+					},
 				},
 			},
 		})
@@ -106,7 +108,7 @@ describe('FilePicker: FileListRow', () => {
 
 	it('Click element triggers select', async () => {
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: false,
 				selected: false,
 				showCheckbox: true,
@@ -124,7 +126,7 @@ describe('FilePicker: FileListRow', () => {
 
 	it('Click element without checkbox triggers select', async () => {
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: false,
 				selected: false,
 				showCheckbox: false,
@@ -142,7 +144,7 @@ describe('FilePicker: FileListRow', () => {
 
 	it('Enter triggers select', async () => {
 		const wrapper = shallowMount(FileListRow, {
-			propsData: {
+			props: {
 				allowPickDirectory: false,
 				selected: false,
 				showCheckbox: false,

lib/components/FilePicker/FileListRow.vue

@@ -13,10 +13,10 @@
 		}">
 		<td v-if="showCheckbox" class="row-checkbox" @click.stop="() => {/* Stop the click event */}">
 			<NcCheckboxRadioSwitch :aria-label="t('Select the row for {nodename}', { nodename: displayName })"
-				:checked="selected"
+				:model-value="selected"
 				:disabled="!isPickable"
 				data-testid="row-checkbox"
-				@update:checked="toggleSelected" />
+				@update:model-value="toggleSelected" />
 		</td>
 		<td class="row-name">
 			<div class="file-picker__name-container" data-testid="row-name">

lib/components/FilePicker/FilePicker.vue

@@ -1,13 +1,13 @@
 <template>
-	<NcDialog v-bind="dialogProps" :open.sync="isOpen" @update:open="handleClose">
+	<NcDialog v-bind="dialogProps" v-model:open="isOpen" @update:open="handleClose">
 		<template #navigation="{ isCollapsed }">
-			<FilePickerNavigation :is-collapsed="isCollapsed" :current-view.sync="currentView" :filter-string.sync="filterString" />
+			<FilePickerNavigation v-model:current-view="currentView" v-model:filter-string="filterString" :is-collapsed="isCollapsed" />
 		</template>
 
 		<div class="file-picker__main">
 			<!-- Header title / file list breadcrumbs -->
 			<FilePickerBreadcrumbs v-if="currentView === 'files'"
-				:path.sync="currentPath"
+				v-model:path="currentPath"
 				:show-menu="allowPickDirectory"
 				@create-node="onCreateFolder" />
 			<div v-else class="file-picker__view">
@@ -17,13 +17,13 @@
 			<!-- File list -->
 			<!-- If loading or files found show file list, otherwise show empty content-->
 			<FileList v-if="isLoading || filteredFiles.length > 0"
+				v-model:path="currentPath"
+				v-model:selected-files="selectedFiles"
 				:allow-pick-directory="allowPickDirectory"
 				:current-view="currentView"
 				:files="filteredFiles"
 				:multiselect="multiselect"
 				:loading="isLoading"
-				:path.sync="currentPath"
-				:selected-files.sync="selectedFiles"
 				:name="viewHeadline"
 				@update:path="currentView = 'files'" />
 			<NcEmptyContent v-else-if="filterString"

lib/components/FilePicker/FilePickerBreadcrumbs.vue

@@ -25,7 +25,7 @@
 					<IconPlus :size="20" />
 				</template>
 				<NcActionInput ref="nameInput"
-					:value.sync="newNodeName"
+					v-model="newNodeName"
 					:label="t('New folder')"
 					:placeholder="t('New folder name')"
 					@submit="onSubmit"

lib/components/FilePicker/FilePickerNavigation.vue

@@ -2,10 +2,10 @@
 	<Fragment>
 		<!-- Filter for the file list -->
 		<NcTextField class="file-picker__filter-input"
-			:value="filterString"
+			:model-value="filterString"
 			:label="t('Filter file list')"
 			:show-trailing-button="!!filterString"
-			@update:value="updateFilterValue"
+			@update:model-value="updateFilterValue"
 			@trailing-button-click="updateFilterValue('')">
 			<IconMagnify :size="16" />
 			<template #trailing-button-icon>
@@ -32,7 +32,7 @@
 			:searchable="false"
 			:options="allViews"
 			:value="currentViewObject"
-			@input="v => emit('update:currentView', v.id)" />
+			@update:model-value="v => emit('update:currentView', v.id)" />
 	</Fragment>
 </template>
 
@@ -45,8 +45,7 @@ import IconStar from 'vue-material-design-icons/Star.vue'
 
 import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
 import { t } from '../../utils/l10n'
-import { computed } from 'vue'
-import { Fragment } from 'vue-frag'
+import { computed, Fragment } from 'vue'
 
 const allViews = [{
 	id: 'files',

lib/components/FilePicker/index.ts

@@ -20,7 +20,7 @@
  *
  */
 
-import type { AsyncComponent } from 'vue'
+import type { Component } from 'vue'
 import type { DefaultComputed, DefaultData, DefaultMethods } from 'vue/types/options.js'
 import { defineAsyncComponent } from 'vue'
 
@@ -42,4 +42,4 @@ type IFilePickerProps = (typeof import ('./FilePicker.vue').default)['props']
  *   }]
  * </script>
  */
-export const FilePickerVue = defineAsyncComponent(() => import('./FilePicker.vue')) as AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, IFilePickerProps>
+export const FilePickerVue = defineAsyncComponent(() => import('./FilePicker.vue')) as Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, IFilePickerProps>

lib/components/types.ts

@@ -62,6 +62,6 @@ export interface IFilePickerButton extends Omit<IDialogButton, 'callback'> {
 export type IFilePickerButtonFactory = (selectedNodes: Node[], currentPath: string, currentView: string) => IFilePickerButton[]
 
 /**
-* Type of filter functions to filter the FilePicker's file list
-*/
+ * Type of filter functions to filter the FilePicker's file list
+ */
 export type IFilePickerFilter = (node: Node) => boolean

lib/composables/dav.spec.ts

@@ -22,7 +22,7 @@
 
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import { defineComponent, ref, toRef } from 'vue'
+import { defineComponent, h, ref, toRef } from 'vue'
 import { useDAVFiles } from './dav'
 
 const nextcloudFiles = vi.hoisted(() => ({
@@ -51,7 +51,7 @@ const TestComponent = defineComponent({
 			...dav,
 		}
 	},
-	render: (h) => h('div'),
+	render: () => h('div'),
 })
 
 describe('dav composable', () => {
@@ -64,7 +64,7 @@ describe('dav composable', () => {
 		nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
 
 		const vue = shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				currentPath: '/',
 			},
@@ -89,7 +89,7 @@ describe('dav composable', () => {
 		nextcloudFiles.davResultToNode.mockImplementation((v) => `node ${v}`)
 
 		const vue = shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				currentPath: '/',
 			},
@@ -108,7 +108,7 @@ describe('dav composable', () => {
 		nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
 
 		const vue = shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				currentPath: '/',
 			},
@@ -135,7 +135,7 @@ describe('dav composable', () => {
 		nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
 
 		const vue = shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 				currentPath: '/',
 			},

lib/composables/filesSettings.spec.ts

@@ -22,7 +22,7 @@
 
 import { describe, it, expect, vi, afterEach, beforeAll, afterAll } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import { useFilesSettings } from './filesSettings'
 
 const axios = vi.hoisted(() => ({
@@ -37,7 +37,7 @@ const TestComponent = defineComponent({
 			...settings,
 		}
 	},
-	render: (h) => h('div'),
+	render: () => h('div'),
 })
 
 describe('files app settings composable', () => {

lib/composables/filesViews.spec.ts

@@ -22,7 +22,7 @@
 
 import { describe, it, expect, vi, afterEach, beforeAll, afterAll } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import { defineComponent, type PropType } from 'vue'
+import { defineComponent, h, type PropType } from 'vue'
 import { useFilesViews, type FileListViews } from './filesSettings'
 
 const axios = vi.hoisted(() => ({
@@ -34,15 +34,15 @@ const TestComponent = defineComponent({
 	props: {
 		currentView: {
 			type: String as PropType<FileListViews>,
-		}
+		},
 	},
 	setup(props) {
 		const settings = useFilesViews(props.currentView)
 		return {
 			...settings,
 		}
 	},
-	render: (h) => h('div'),
+	render: () => h('div'),
 })
 
 describe('files app views config composable', () => {
@@ -55,7 +55,7 @@ describe('files app views config composable', () => {
 			return new Promise(() => {})
 		})
 		const vue = await shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 			},
 		})
@@ -79,7 +79,7 @@ describe('files app views config composable', () => {
 			}), 400))
 		})
 		const vue = await shallowMount(TestComponent, {
-			propsData: {
+			props: {
 				currentView: 'files',
 			},
 		})

lib/composables/preview.spec.ts

@@ -59,7 +59,7 @@ describe('preview composable', () => {
 					return () => h('div', previewURL.value?.href)
 				},
 			}), {
-				propsData: { node: text },
+				props: { node: text },
 			})
 
 			expect(wrapper.text()).toMatch('/core/preview?fileId=1')