Skip to content

Commit 8b4b309

Browse files
raimund-schluesslersusnux
raimund-schluessler
authored and
susnux
committed
feat(vue3): migrate to vue3
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
1 parent 7a8ebe2 commit 8b4b309

18 files changed

+3714
-3358
lines changed

‎lib/components/FilePicker/FileList.spec.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ describe('FilePicker FileList', () => {
7979
const consoleWarning = vi.spyOn(console, 'warn')
8080

8181
const wrapper = shallowMount(FileList, {
82-
propsData: {
82+
props: {
8383
currentView: 'files',
8484
multiselect: false,
8585
allowPickDirectory: false,
@@ -97,7 +97,7 @@ describe('FilePicker FileList', () => {
9797

9898
it('header checkbox is not shown if multiselect is `false`', () => {
9999
const wrapper = shallowMount(FileList, {
100-
propsData: {
100+
props: {
101101
currentView: 'files',
102102
multiselect: false,
103103
allowPickDirectory: false,
@@ -112,7 +112,7 @@ describe('FilePicker FileList', () => {
112112

113113
it('header checkbox is shown if multiselect is `true`', () => {
114114
const wrapper = shallowMount(FileList, {
115-
propsData: {
115+
props: {
116116
currentView: 'files',
117117
multiselect: true,
118118
allowPickDirectory: false,
@@ -122,18 +122,18 @@ describe('FilePicker FileList', () => {
122122
path: '/',
123123
},
124124
})
125-
const selectAll = wrapper.find('[data-testid="select-all-checkbox"]')
125+
const selectAll = wrapper.getComponent('[data-testid="select-all-checkbox"]')
126126
expect(selectAll.exists()).toBe(true)
127127
// there is an aria label
128-
expect(selectAll.attributes('aria-label')).toBeTruthy()
128+
expect(selectAll.attributes('arialabel')).toBeTruthy()
129129
// no checked
130-
expect(selectAll.props('checked')).toBe(false)
130+
expect(selectAll.props('modelValue')).toBe(false)
131131
})
132132

133133
it('header checkbox is checked when all nodes are selected', async () => {
134134
const nodes = [...exampleNodes]
135135
const wrapper = shallowMount(FileList, {
136-
propsData: {
136+
props: {
137137
currentView: 'files',
138138
multiselect: true,
139139
allowPickDirectory: false,
@@ -144,15 +144,15 @@ describe('FilePicker FileList', () => {
144144
},
145145
})
146146

147-
const selectAll = wrapper.find('[data-testid="select-all-checkbox"]')
148-
expect(selectAll.props('checked')).toBe(true)
147+
const selectAll = wrapper.getComponent('[data-testid="select-all-checkbox"]')
148+
expect(selectAll.props('modelValue')).toBe(true)
149149
})
150150

151151
describe('file list sorting', () => {
152152
it('is sorted initially by name', async () => {
153153
const nodes = [...exampleNodes]
154154
const wrapper = mount(FileList, {
155-
propsData: {
155+
props: {
156156
currentView: 'files',
157157
multiselect: true,
158158
allowPickDirectory: false,
@@ -183,7 +183,7 @@ describe('FilePicker FileList', () => {
183183
it('can sort descending by name', async () => {
184184
const nodes = [...exampleNodes]
185185
const wrapper = mount(FileList, {
186-
propsData: {
186+
props: {
187187
currentView: 'files',
188188
multiselect: true,
189189
allowPickDirectory: false,

‎lib/components/FilePicker/FileList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
</span>
1010
<NcCheckboxRadioSwitch v-if="multiselect"
1111
:aria-label="t('Select all entries')"
12-
:checked="allSelected"
12+
:model-value="allSelected"
1313
data-testid="select-all-checkbox"
14-
@update:checked="onSelectAll" />
14+
@update:model-value="onSelectAll" />
1515
</th>
1616
<th :aria-sort="sortByName" class="row-name">
1717
<div class="header-wrapper">

‎lib/components/FilePicker/FileListRow.spec.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('FilePicker: FileListRow', () => {
4545
const consoleError = vi.spyOn(console, 'error')
4646

4747
const wrapper = shallowMount(FileListRow, {
48-
propsData: {
48+
props: {
4949
allowPickDirectory: true,
5050
selected: false,
5151
showCheckbox: true,
@@ -66,7 +66,7 @@ describe('FilePicker: FileListRow', () => {
6666

6767
it('shows checkbox based on `showCheckbox` property', async () => {
6868
const wrapper = shallowMount(FileListRow, {
69-
propsData: {
69+
props: {
7070
allowPickDirectory: true,
7171
selected: false,
7272
showCheckbox: true,
@@ -83,17 +83,19 @@ describe('FilePicker: FileListRow', () => {
8383

8484
it('Click checkbox triggers select', async () => {
8585
const wrapper = shallowMount(FileListRow, {
86-
propsData: {
86+
props: {
8787
allowPickDirectory: false,
8888
selected: false,
8989
showCheckbox: true,
9090
canPick: true,
9191
node,
9292
cropImagePreviews: true,
9393
},
94-
stubs: {
95-
NcCheckboxRadioSwitch: {
96-
template: '<label><input type="checkbox" @click="$emit(\'update:checked\', true)" ></label>',
94+
global: {
95+
stubs: {
96+
NcCheckboxRadioSwitch: {
97+
template: '<label><input type="checkbox" @click="$emit(\'update:modelValue\', true)" ></label>',
98+
},
9799
},
98100
},
99101
})
@@ -106,7 +108,7 @@ describe('FilePicker: FileListRow', () => {
106108

107109
it('Click element triggers select', async () => {
108110
const wrapper = shallowMount(FileListRow, {
109-
propsData: {
111+
props: {
110112
allowPickDirectory: false,
111113
selected: false,
112114
showCheckbox: true,
@@ -124,7 +126,7 @@ describe('FilePicker: FileListRow', () => {
124126

125127
it('Click element without checkbox triggers select', async () => {
126128
const wrapper = shallowMount(FileListRow, {
127-
propsData: {
129+
props: {
128130
allowPickDirectory: false,
129131
selected: false,
130132
showCheckbox: false,
@@ -142,7 +144,7 @@ describe('FilePicker: FileListRow', () => {
142144

143145
it('Enter triggers select', async () => {
144146
const wrapper = shallowMount(FileListRow, {
145-
propsData: {
147+
props: {
146148
allowPickDirectory: false,
147149
selected: false,
148150
showCheckbox: false,

‎lib/components/FilePicker/FileListRow.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
}">
1414
<td v-if="showCheckbox" class="row-checkbox" @click.stop="() => {/* Stop the click event */}">
1515
<NcCheckboxRadioSwitch :aria-label="t('Select the row for {nodename}', { nodename: displayName })"
16-
:checked="selected"
16+
:model-value="selected"
1717
:disabled="!isPickable"
1818
data-testid="row-checkbox"
19-
@update:checked="toggleSelected" />
19+
@update:model-value="toggleSelected" />
2020
</td>
2121
<td class="row-name">
2222
<div class="file-picker__name-container" data-testid="row-name">

‎lib/components/FilePicker/FilePicker.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<NcDialog v-bind="dialogProps" :open.sync="isOpen" @update:open="handleClose">
2+
<NcDialog v-bind="dialogProps" v-model:open="isOpen" @update:open="handleClose">
33
<template #navigation="{ isCollapsed }">
4-
<FilePickerNavigation :is-collapsed="isCollapsed" :current-view.sync="currentView" :filter-string.sync="filterString" />
4+
<FilePickerNavigation v-model:current-view="currentView" v-model:filter-string="filterString" :is-collapsed="isCollapsed" />
55
</template>
66

77
<div class="file-picker__main">
88
<!-- Header title / file list breadcrumbs -->
99
<FilePickerBreadcrumbs v-if="currentView === 'files'"
10-
:path.sync="currentPath"
10+
v-model:path="currentPath"
1111
:show-menu="allowPickDirectory"
1212
@create-node="onCreateFolder" />
1313
<div v-else class="file-picker__view">
@@ -17,13 +17,13 @@
1717
<!-- File list -->
1818
<!-- If loading or files found show file list, otherwise show empty content-->
1919
<FileList v-if="isLoading || filteredFiles.length > 0"
20+
v-model:path="currentPath"
21+
v-model:selected-files="selectedFiles"
2022
:allow-pick-directory="allowPickDirectory"
2123
:current-view="currentView"
2224
:files="filteredFiles"
2325
:multiselect="multiselect"
2426
:loading="isLoading"
25-
:path.sync="currentPath"
26-
:selected-files.sync="selectedFiles"
2727
:name="viewHeadline"
2828
@update:path="currentView = 'files'" />
2929
<NcEmptyContent v-else-if="filterString"

‎lib/components/FilePicker/FilePickerBreadcrumbs.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<IconPlus :size="20" />
2626
</template>
2727
<NcActionInput ref="nameInput"
28-
:value.sync="newNodeName"
28+
v-model="newNodeName"
2929
:label="t('New folder')"
3030
:placeholder="t('New folder name')"
3131
@submit="onSubmit"

‎lib/components/FilePicker/FilePickerNavigation.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<Fragment>
33
<!-- Filter for the file list -->
44
<NcTextField class="file-picker__filter-input"
5-
:value="filterString"
5+
:model-value="filterString"
66
:label="t('Filter file list')"
77
:show-trailing-button="!!filterString"
8-
@update:value="updateFilterValue"
8+
@update:model-value="updateFilterValue"
99
@trailing-button-click="updateFilterValue('')">
1010
<IconMagnify :size="16" />
1111
<template #trailing-button-icon>
@@ -32,7 +32,7 @@
3232
:searchable="false"
3333
:options="allViews"
3434
:value="currentViewObject"
35-
@input="v => emit('update:currentView', v.id)" />
35+
@update:model-value="v => emit('update:currentView', v.id)" />
3636
</Fragment>
3737
</template>
3838

@@ -45,8 +45,7 @@ import IconStar from 'vue-material-design-icons/Star.vue'
4545
4646
import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
4747
import { t } from '../../utils/l10n'
48-
import { computed } from 'vue'
49-
import { Fragment } from 'vue-frag'
48+
import { computed, Fragment } from 'vue'
5049
5150
const allViews = [{
5251
id: 'files',

‎lib/components/FilePicker/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
*
2121
*/
2222

23-
import type { AsyncComponent } from 'vue'
23+
import type { Component } from 'vue'
2424
import type { DefaultComputed, DefaultData, DefaultMethods } from 'vue/types/options.js'
2525
import { defineAsyncComponent } from 'vue'
2626

@@ -42,4 +42,4 @@ type IFilePickerProps = (typeof import ('./FilePicker.vue').default)['props']
4242
* }]
4343
* </script>
4444
*/
45-
export const FilePickerVue = defineAsyncComponent(() => import('./FilePicker.vue')) as AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, IFilePickerProps>
45+
export const FilePickerVue = defineAsyncComponent(() => import('./FilePicker.vue')) as Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, IFilePickerProps>

‎lib/components/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,6 @@ export interface IFilePickerButton extends Omit<IDialogButton, 'callback'> {
6262
export type IFilePickerButtonFactory = (selectedNodes: Node[], currentPath: string, currentView: string) => IFilePickerButton[]
6363

6464
/**
65-
* Type of filter functions to filter the FilePicker's file list
66-
*/
65+
* Type of filter functions to filter the FilePicker's file list
66+
*/
6767
export type IFilePickerFilter = (node: Node) => boolean

‎lib/composables/dav.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
import { describe, it, expect, vi, afterEach } from 'vitest'
2424
import { shallowMount } from '@vue/test-utils'
25-
import { defineComponent, ref, toRef } from 'vue'
25+
import { defineComponent, h, ref, toRef } from 'vue'
2626
import { useDAVFiles } from './dav'
2727

2828
const nextcloudFiles = vi.hoisted(() => ({
@@ -51,7 +51,7 @@ const TestComponent = defineComponent({
5151
...dav,
5252
}
5353
},
54-
render: (h) => h('div'),
54+
render: () => h('div'),
5555
})
5656

5757
describe('dav composable', () => {
@@ -64,7 +64,7 @@ describe('dav composable', () => {
6464
nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
6565

6666
const vue = shallowMount(TestComponent, {
67-
propsData: {
67+
props: {
6868
currentView: 'files',
6969
currentPath: '/',
7070
},
@@ -89,7 +89,7 @@ describe('dav composable', () => {
8989
nextcloudFiles.davResultToNode.mockImplementation((v) => `node ${v}`)
9090

9191
const vue = shallowMount(TestComponent, {
92-
propsData: {
92+
props: {
9393
currentView: 'files',
9494
currentPath: '/',
9595
},
@@ -108,7 +108,7 @@ describe('dav composable', () => {
108108
nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
109109

110110
const vue = shallowMount(TestComponent, {
111-
propsData: {
111+
props: {
112112
currentView: 'files',
113113
currentPath: '/',
114114
},
@@ -135,7 +135,7 @@ describe('dav composable', () => {
135135
nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
136136

137137
const vue = shallowMount(TestComponent, {
138-
propsData: {
138+
props: {
139139
currentView: 'files',
140140
currentPath: '/',
141141
},

0 commit comments

Comments
 (0)