chore: adjust code for new code style

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

lib/components/ConflictPicker/ConflictPicker.vue

@@ -203,15 +203,15 @@ function onSubmit() {
 					{{ t('Select all checkboxes') }}
 				</legend>
 				<NcCheckboxRadioSwitch
-					:model-value="areAllNewSelected"
+					:modelValue="areAllNewSelected"
 					:indeterminate="areSomeNewSelected"
-					@update:model-value="onSelectAllNew">
+					@update:modelValue="onSelectAllNew">
 					{{ t('Select all new files') }}
 				</NcCheckboxRadioSwitch>
 				<NcCheckboxRadioSwitch
-					:model-value="areAllOldSelected"
+					:modelValue="areAllOldSelected"
 					:indeterminate="areSomeOldSelected"
-					@update:model-value="onSelectAllOld">
+					@update:modelValue="onSelectAllOld">
 					{{ t('Select all existing files') }}
 				</NcCheckboxRadioSwitch>
 			</fieldset>
@@ -223,10 +223,10 @@ function onSubmit() {
 				:key="node.fileid"
 				:incoming="incoming[index]!"
 				:existing="node"
-				:incoming-selected="newSelected.includes(incoming[index]!)"
-				:existing-selected="oldSelected.includes(incoming[index]!)"
-				@update:existing-selected="toggleOldSelected(incoming[index]!)"
-				@update:incoming-selected="toggleNewSelected(incoming[index]!)" />
+				:incomingSelected="newSelected.includes(incoming[index]!)"
+				:existingSelected="oldSelected.includes(incoming[index]!)"
+				@update:existingSelected="toggleOldSelected(incoming[index]!)"
+				@update:incomingSelected="toggleNewSelected(incoming[index]!)" />
 		</form>
 
 		<!-- Controls -->

lib/components/ConflictPicker/ConflictPickerEntry.vue

@@ -183,7 +183,7 @@ function validate() {
 		<NcCheckboxRadioSwitch
 			v-model="incomingSelected"
 			:error="!!validationMessage"
-			:helper-text="validationMessage"
+			:helperText="validationMessage"
 			:required="!conflictResolved">
 			<span :class="$style.pickerEntryItem">
 				<!-- Icon or preview -->
@@ -207,7 +207,7 @@ function validate() {
 					<NcDateTime
 						v-if="incomingMTime"
 						:timestamp="incomingMTime"
-						:relative-time="false"
+						:relativeTime="false"
 						:format="{ timeStyle: 'short', dateStyle: 'medium' }" />
 					<span v-else>
 						{{ t('Last modified date unknown') }}
@@ -223,7 +223,7 @@ function validate() {
 		<NcCheckboxRadioSwitch
 			v-model="existingSelected"
 			:error="!!validationMessage"
-			:helper-text="validationMessage"
+			:helperText="validationMessage"
 			:required="!conflictResolved">
 			<span :class="$style.pickerEntryItem">
 				<!-- Icon or preview -->
@@ -247,7 +247,7 @@ function validate() {
 					<NcDateTime
 						v-if="existingMTime"
 						:timestamp="existingMTime"
-						:relative-time="false"
+						:relativeTime="false"
 						:format="{ timeStyle: 'short', dateStyle: 'medium' }" />
 					<span v-else>
 						{{ t('Last modified date unknown') }}

lib/components/FilePicker/FileList.vue

@@ -15,8 +15,8 @@
 							v-if="multiselect"
 							:aria-label="t('Select all entries')"
 							data-testid="select-all-checkbox"
-							:model-value="allSelected"
-							@update:model-value="onSelectAll" />
+							:modelValue="allSelected"
+							@update:modelValue="onSelectAll" />
 					</th>
 					<th :aria-sort="sortByName" class="row-name">
 						<div class="header-wrapper">
@@ -59,20 +59,20 @@
 			</thead>
 			<tbody>
 				<template v-if="loading">
-					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect" />
+					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :showCheckbox="multiselect" />
 				</template>
 				<template v-else>
 					<FileListRow
 						v-for="file of sortedFiles"
 						:key="file.fileid || file.path"
-						:allow-pick-directory="allowPickDirectory"
-						:show-checkbox="multiselect"
-						:can-pick="(multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)) && (canPick === undefined || canPick(file))"
+						:allowPickDirectory="allowPickDirectory"
+						:showCheckbox="multiselect"
+						:canPick="(multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)) && (canPick === undefined || canPick(file))"
 						:selected="selectedFiles.includes(file)"
 						:node="file"
-						:crop-image-previews="cropImagePreviews"
+						:cropImagePreviews="cropImagePreviews"
 						@update:selected="onNodeSelected(file)"
-						@enter-directory="onChangeDirectory" />
+						@enterDirectory="onChangeDirectory" />
 				</template>
 			</tbody>
 		</table>

lib/components/FilePicker/FileListRow.spec.ts

@@ -1,10 +1,9 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import type { VueWrapper } from '@vue/test-utils'
-import type { ComponentProps } from 'vue-component-type-helpers'
 
 import { File, Folder, Permission } from '@nextcloud/files'
 import { shallowMount } from '@vue/test-utils'
@@ -14,7 +13,7 @@ import FileListRow from './FileListRow.vue'
 
 type SubmitAction = (wrapper: VueWrapper<any>) => Promise<void>
 type ElementEvent = { 'update:selected': boolean | undefined, enterDirectory: Folder | undefined }
-
+type FileListRowProps = InstanceType<typeof FileListRow>['$props']
 async function clickCheckboxAction(wrapper: VueWrapper<any>) {
 	wrapper.find('input[type="checkbox"]').trigger('click')
 }
@@ -28,7 +27,7 @@ async function pressEnterAction(wrapper: VueWrapper<any>) {
 	await nextTick()
 }
 
-function testSubmitNode(name: string, props: ComponentProps<typeof FileListRow>, eventPayload: ElementEvent, actionCallback: SubmitAction) {
+function testSubmitNode(name: string, props: FileListRowProps, eventPayload: ElementEvent, actionCallback: SubmitAction) {
 	it(name, async () => {
 		const wrapper = shallowMount(FileListRow, {
 			props,

lib/components/FilePicker/FileListRow.vue

@@ -26,12 +26,12 @@
 				:aria-label="t('Select the row for {nodename}', { nodename: displayName })"
 				:disabled="!isPickable"
 				data-testid="row-checkbox"
-				:model-value="selected"
-				@update:model-value="toggleSelected" />
+				:modelValue="selected"
+				@update:modelValue="toggleSelected" />
 		</td>
 		<td class="row-name">
 			<div class="file-picker__name-container" data-testid="row-name">
-				<FilePreview :node="node" :crop-image-previews="cropImagePreviews" />
+				<FilePreview :node="node" :cropImagePreviews="cropImagePreviews" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
 				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
@@ -40,7 +40,7 @@
 			{{ formatFileSize(node.size || 0) }}
 		</td>
 		<td class="row-modified">
-			<NcDateTime :timestamp ignore-seconds />
+			<NcDateTime :timestamp ignoreSeconds />
 		</td>
 	</tr>
 </template>

lib/components/FilePicker/FilePicker.vue

@@ -8,25 +8,25 @@
 		:buttons="dialogButtons"
 		:name="name"
 		size="large"
-		content-classes="file-picker__content"
-		dialog-classes="file-picker"
-		navigation-classes="file-picker__navigation"
+		contentClasses="file-picker__content"
+		dialogClasses="file-picker"
+		navigationClasses="file-picker__navigation"
 		@update:open="handleClose">
 		<template #navigation="{ isCollapsed }">
 			<FilePickerNavigation
-				v-model:current-view="currentView"
-				v-model:filter-string="filterString"
-				:is-collapsed
-				:disabled-navigation />
+				v-model:currentView="currentView"
+				v-model:filterString="filterString"
+				:isCollapsed
+				:disabledNavigation />
 		</template>
 
 		<div class="file-picker__main">
 			<!-- Header title / file list breadcrumbs -->
 			<FilePickerBreadcrumbs
 				v-if="currentView === 'files'"
 				v-model:path="currentPath"
-				:show-menu="!noMenu"
-				@create-node="onCreateFolder" />
+				:showMenu="!noMenu"
+				@createNode="onCreateFolder" />
 			<div v-else class="file-picker__view">
 				<h3>{{ viewHeadline }}</h3>
 			</div>
@@ -36,14 +36,14 @@
 			<FileList
 				v-if="isLoading || filteredFiles.length > 0"
 				v-model:path="currentPath"
-				v-model:selected-files="selectedFiles"
-				:allow-pick-directory="allowPickDirectory"
-				:current-view="currentView"
+				v-model:selectedFiles="selectedFiles"
+				:allowPickDirectory="allowPickDirectory"
+				:currentView="currentView"
 				:files="filteredFiles"
 				:multiselect="multiselect"
 				:loading="isLoading"
 				:name="viewHeadline"
-				:can-pick="canPickFn"
+				:canPick="canPickFn"
 				@update:path="currentView = 'files'" />
 			<NcEmptyContent
 				v-else-if="filterString"

lib/components/FilePicker/FilePickerBreadcrumbs.vue

@@ -8,7 +8,7 @@
 			<NcBreadcrumb
 				:name="t('All files')"
 				:title="t('Home')"
-				@click="emit('update:path', '/')">
+				@click="path = '/'">
 				<template #icon>
 					<IconHome :size="20" />
 				</template>
@@ -18,15 +18,15 @@
 				:key="dir.path"
 				:name="dir.name"
 				:title="dir.path"
-				@click="emit('update:path', dir.path)" />
+				@click="path = dir.path" />
 		</template>
 		<template v-if="showMenu" #actions>
 			<NcActions
 				v-model:open="actionsOpen"
 				:aria-label="t('Create directory')"
-				:force-menu="true"
-				:force-name="true"
-				:menu-name="t('New')"
+				:forceMenu="true"
+				:forceName="true"
+				:menuName="t('New')"
 				variant="secondary"
 				@close="newNodeName = ''">
 				<template #icon>
@@ -38,7 +38,7 @@
 					:label="t('New folder')"
 					:placeholder="t('New folder name')"
 					@submit="onSubmit"
-					@update:model-value="validateInput">
+					@update:modelValue="validateInput">
 					<template #icon>
 						<IconFolder :size="20" />
 					</template>
@@ -60,22 +60,19 @@ import IconHome from 'vue-material-design-icons/Home.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 import { t } from '../../utils/l10n.ts'
 
-const props = defineProps<{
-	/** Current path to display */
-	path: string
+/** Current path to display */
+const path = defineModel<string>('path', { required: true })
+
+defineProps<{
 	/** Whether to show the "new node" menu or not */
-	showMenu: boolean
+	showMenu?: boolean
 }>()
 
 const emit = defineEmits<{
-	/**
-	 * Triggered when the path was changed by using the breadcrumbs
-	 */
-	(e: 'update:path', path: string): void
 	/**
 	 * Triggered when a new directory on the current path should be created
 	 */
-	(e: 'create-node', name: string): void
+	createNode: [name: string]
 }>()
 
 const actionsOpen = ref(false)
@@ -129,15 +126,15 @@ function onSubmit() {
 
 	if (validateInput()) {
 		actionsOpen.value = false
-		emit('create-node', name)
+		emit('createNode', name)
 		newNodeName.value = ''
 	}
 }
 
 /**
  * Split current path and provide the path and the basename
  */
-const pathElements = computed(() => props.path.split('/')
+const pathElements = computed(() => path.value.split('/')
 	.filter((v) => v !== '')
 	.map((v, i, elements) => ({
 		name: v,

lib/components/FilePicker/FilePickerNavigation.vue

@@ -7,10 +7,10 @@
 	<NcTextField
 		class="file-picker__filter-input"
 		:label="t('Filter file list')"
-		:show-trailing-button="!!filterString"
-		:model-value="filterString"
-		@update:model-value="updateFilterValue"
-		@trailing-button-click="updateFilterValue('')">
+		:showTrailingButton="!!filterString"
+		:modelValue="filterString"
+		@update:modelValue="updateFilterValue"
+		@trailingButtonClick="updateFilterValue('')">
 		<IconMagnify :size="16" />
 		<template #trailing-button-icon>
 			<IconClose :size="16" />
@@ -39,8 +39,8 @@
 			:clearable="false"
 			:searchable="false"
 			:options="availableViews"
-			:model-value="currentViewObject"
-			@update:model-value="emit('update:currentView', $event.id)" />
+			:modelValue="currentViewObject"
+			@update:modelValue="emit('update:currentView', $event.id)" />
 	</template>
 </template>
 

lib/components/GenericDialog.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<NcDialog
-		dialog-classes="nc-generic-dialog"
+		dialogClasses="nc-generic-dialog"
 		:buttons="dialogButtons"
 		:name
 		:message="text"

lib/components/PublicAuthPrompt.vue

@@ -179,8 +179,8 @@ function setCustomValidity(message: string) {
 		:buttons
 		class="public-auth-prompt"
 		data-cy-public-auth-prompt-dialog
-		is-form
-		no-close
+		isForm
+		noClose
 		:name="title"
 		@submit="onSubmit">
 		<p v-if="text" class="public-auth-prompt__text">