chore: Update nextcloud-vue to v8 beta2 and renamed changed properties

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

apps/comments/src/components/Comment.vue

@@ -91,12 +91,13 @@
 
 			<!-- Message content -->
 			<!-- The html is escaped and sanitized before rendering -->
-			<!-- eslint-disable-next-line vue/no-v-html-->
+			<!-- eslint-disable vue/no-v-html-->
 			<div v-else
 				:class="{'comment__message--expanded': expanded}"
 				class="comment__message"
 				@click="onExpand"
 				v-html="renderedContent" />
+			<!-- eslint-enable vue/no-v-html-->
 		</div>
 	</component>
 </template>

apps/comments/src/views/Comments.vue

@@ -22,9 +22,9 @@
   -->
 
 <template>
-	<div class="comments"
+	<div v-observe-visibility="onVisibilityChange"
-		:class="{ 'icon-loading': isFirstLoading }"
+		class="comments"
-		v-observe-visibility="onVisibilityChange">
+		:class="{ 'icon-loading': isFirstLoading }">
 		<!-- Editor -->
 		<Comment v-bind="editorData"
 			:auto-complete="autoComplete"
@@ -37,7 +37,7 @@
 		<template v-if="!isFirstLoading">
 			<NcEmptyContent v-if="!hasComments && done"
 				class="comments__empty"
-				:title="t('comments', 'No comments yet, start the conversation!')">
+				:name="t('comments', 'No comments yet, start the conversation!')">
 				<template #icon>
 					<MessageReplyTextIcon />
 				</template>
@@ -65,7 +65,7 @@
 
 			<!-- Error message -->
 			<template v-else-if="error">
-				<NcEmptyContent class="comments__error" :title="error">
+				<NcEmptyContent class="comments__error" :name="error">
 					<template #icon>
 						<AlertCircleOutlineIcon />
 					</template>
@@ -191,8 +191,8 @@ export default {
 		/**
 		 * Make sure we have all mentions as Array of objects
 		 *
-		 * @param {Array} mentions the mentions list
+		 * @param {any[]} mentions the mentions list
-		 * @return {Object<string, object>}
+		 * @return {Record<string, object>}
 		 */
 		genMentionsData(mentions) {
 			Object.values(mentions)

apps/dav/src/views/Availability.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="$t('dav', 'Availability')"
+	<NcSettingsSection :name="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
 			<strong>

apps/dav/src/views/CalDavSettings.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="$t('dav', 'Calendar server')"
+	<NcSettingsSection :name="$t('dav', 'Calendar server')"
 		:doc-url="userSyncCalendarsDocUrl">
 		<!-- Can use v-html as:
 			- $t passes the translated string through DOMPurify.sanitize,

apps/federatedfilesharing/src/components/AdminSettings.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud Sharing')"
+	<NcSettingsSection :name="t('federatedfilesharing', 'Federated Cloud Sharing')"
 		:description="t('federatedfilesharing', 'Adjust how people can share between servers. This includes shares between users on this server as well if they are using federated sharing.')"
 		:doc-url="sharingFederatedDocUrl">
 		<NcCheckboxRadioSwitch type="switch"

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud')"
+	<NcSettingsSection :name="t('federatedfilesharing', 'Federated Cloud')"
 		:description="t('federatedfilesharing', 'You can share with anyone who uses a Nextcloud server or other Open Cloud Mesh (OCM) compatible servers and services! Just put their Federated Cloud ID in the share dialog. It looks like person@cloud.example.com')"
 		:doc-url="docUrlFederated">
 		<p class="cloud-id-text">

apps/files/src/components/FileEntry.vue

@@ -105,7 +105,7 @@
 				:boundaries-element="boundariesElement"
 				:container="boundariesElement"
 				:disabled="source._loading"
-				:force-title="true"
+				:force-name="true"
 				:force-menu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
 				:inline="enabledInlineActions.length"
 				:open.sync="openedMenu">

apps/files/src/components/FilesListHeaderActions.vue

@@ -23,9 +23,9 @@
 	<th class="files-list__column files-list__row-actions-batch" colspan="2">
 		<NcActions ref="actionsMenu"
 			:disabled="!!loading || areSomeNodesLoading"
-			:force-title="true"
+			:force-name="true"
 			:inline="inlineActions"
-			:menu-title="inlineActions <= 1 ? t('files', 'Actions') : null"
+			:menu-name="inlineActions <= 1 ? t('files', 'Actions') : null"
 			:open.sync="openedMenu">
 			<NcActionButton v-for="action in enabledActions"
 				:key="action.id"

apps/files/src/views/FilesList.vue

@@ -35,11 +35,11 @@
 		<NcLoadingIcon v-if="loading && !isRefreshing"
 			class="files-list__loading-icon"
 			:size="38"
-			:title="t('files', 'Loading current folder')" />
+			:name="t('files', 'Loading current folder')" />
 
 		<!-- Empty content placeholder -->
 		<NcEmptyContent v-else-if="!loading && isEmptyDir"
-			:title="currentView?.emptyTitle || t('files', 'No files in here')"
+			:name="currentView?.emptyTitle || t('files', 'No files in here')"
 			:description="currentView?.emptyCaption || t('files', 'Upload some content or sync with your devices!')"
 			data-cy-files-content-empty>
 			<template #action>

apps/files/src/views/Navigation.vue

@@ -29,7 +29,7 @@
 				:icon="view.iconClass"
 				:open="isExpanded(view)"
 				:pinned="view.sticky"
-				:title="view.name"
+				:name="view.name"
 				:to="generateToNavigation(view)"
 				@update:open="onToggleExpand(view)">
 				<!-- Sanitized icon as svg if provided -->
@@ -41,7 +41,7 @@
 					:data-cy-files-navigation-item="child.id"
 					:exact="true"
 					:icon="child.iconClass"
-					:title="child.name"
+					:name="child.name"
 					:to="generateToNavigation(child)">
 					<!-- Sanitized icon as svg if provided -->
 					<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
@@ -57,7 +57,7 @@
 
 				<!-- Files settings modal toggle-->
 				<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
-					:title="t('files', 'Files settings')"
+					:name="t('files', 'Files settings')"
 					data-cy-files-navigation-settings-button
 					@click.prevent.stop="openSettings">
 					<Cog slot="icon" :size="20" />

apps/files/src/views/Settings.vue

@@ -22,10 +22,10 @@
 <template>
 	<NcAppSettingsDialog :open="open"
 		:show-navigation="true"
-		:title="t('files', 'Files settings')"
+		:name="t('files', 'Files settings')"
 		@update:open="onClose">
 		<!-- Settings API-->
-		<NcAppSettingsSection id="settings" :title="t('files', 'Files settings')">
+		<NcAppSettingsSection id="settings" :name="t('files', 'Files settings')">
 			<NcCheckboxRadioSwitch :checked="userConfig.sort_favorites_first"
 				@update:checked="setConfig('sort_favorites_first', $event)">
 				{{ t('files', 'Sort favorites first') }}
@@ -43,14 +43,14 @@
 		<!-- Settings API-->
 		<NcAppSettingsSection v-if="settings.length !== 0"
 			id="more-settings"
-			:title="t('files', 'Additional settings')">
+			:name="t('files', 'Additional settings')">
 			<template v-for="setting in settings">
 				<Setting :key="setting.name" :el="setting.el" />
 			</template>
 		</NcAppSettingsSection>
 
 		<!-- Webdav URL-->
-		<NcAppSettingsSection id="webdav" :title="t('files', 'WebDAV')">
+		<NcAppSettingsSection id="webdav" :name="t('files', 'WebDAV')">
 			<NcInputField id="webdav-url-input"
 				:show-trailing-button="true"
 				:success="webdavUrlCopied"

apps/files/src/views/Sidebar.vue

@@ -244,15 +244,15 @@ export default {
 					compact: this.hasLowHeight || !this.fileInfo.hasPreview || this.isFullScreen,
 					loading: this.loading,
 					starred: this.fileInfo.isFavourited,
-					subtitle: this.subtitle,
+					subname: this.subtitle,
-					subtitleTooltip: this.fullTime,
+					subtitle: this.fullTime,
+					name: this.fileInfo.name,
 					title: this.fileInfo.name,
-					titleTooltip: this.fileInfo.name,
 				}
 			} else if (this.error) {
 				return {
 					key: 'error', // force key to re-render
-					subtitle: '',
+					subname: '',
 					title: '',
 					class: {
 						'app-sidebar--full': this.isFullScreen,
@@ -262,7 +262,7 @@ export default {
 			// no fileInfo yet, showing empty data
 			return {
 				loading: this.loading,
-				subtitle: '',
+				subname: '',
 				title: '',
 				class: {
 					'app-sidebar--full': this.isFullScreen,

apps/files_versions/src/components/Version.vue

@@ -18,7 +18,7 @@
 <template>
 	<div>
 		<NcListItem class="version"
-			:title="versionLabel"
+			:name="versionLabel"
 			:href="downloadURL"
 			:force-display-actions="true"
 			data-files-versions-version>
@@ -37,7 +37,7 @@
 					<ImageOffOutline :size="20" />
 				</div>
 			</template>
-			<template #subtitle>
+			<template #subname>
 				<div class="version__info">
 					<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
 					<!-- Separate dot to improve alignement -->

apps/oauth2/src/App.vue

@@ -20,7 +20,7 @@
   -
   -->
 <template>
-	<NcSettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
+	<NcSettingsSection :name="t('oauth2', 'OAuth 2.0 clients')"
 		:description="t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName })"
 		:doc-url="oauthDocLink">
 		<table v-if="clients.length > 0" class="grid">

apps/settings/src/components/AdminAI.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcSettingsSection :title="t('settings', 'Machine translation')"
+		<NcSettingsSection :name="t('settings', 'Machine translation')"
 			:description="t('settings', 'Machine translation can be implemented by different apps. Here you can define the precedence of the machine translation apps you have installed at the moment.')">
 			<draggable v-model="settings['ai.translation_provider_preferences']" @change="saveChanges">
 				<div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item">
@@ -18,7 +18,7 @@
 				</div>
 			</draggable>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('settings', 'Speech-To-Text')"
+		<NcSettingsSection :name="t('settings', 'Speech-To-Text')"
 			:description="t('settings', 'Speech-To-Text can be implemented by different apps. Here you can set which app should be used.')">
 			<template v-for="provider in sttProviders">
 				<NcCheckboxRadioSwitch :key="provider.class"
@@ -36,7 +36,7 @@
 				</NcCheckboxRadioSwitch>
 			</template>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('settings', 'Text processing')"
+		<NcSettingsSection :name="t('settings', 'Text processing')"
 			:description="t('settings', 'Text processing tasks can be implemented by different apps. Here you can set which app should be used for which task.')">
 			<template v-for="type in Object.keys(settings['ai.textprocessing_provider_preferences'])">
 				<div :key="type">

apps/settings/src/components/AdminDelegating.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="t('settings', 'Administration privileges')"
+	<NcSettingsSection :name="t('settings', 'Administration privileges')"
 		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">

apps/settings/src/components/AdminTwoFactor.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="t('settings', 'Two-Factor Authentication')"
+	<NcSettingsSection :name="t('settings', 'Two-Factor Authentication')"
 		:description="t('settings', 'Two-factor authentication can be enforced for all users and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')"
 		:doc-url="twoFactorAdminDoc">
 		<p v-if="loading">

apps/settings/src/components/BasicSettings/BackgroundJob.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('settings', 'Background jobs')"
+	<NcSettingsSection :name="t('settings', 'Background jobs')"
 		:description="t('settings', 'For the server to work properly, it\'s important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.')"
 		:doc-url="backgroundJobsDocUrl">
 		<template v-if="lastCron !== 0">

apps/settings/src/components/Encryption.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('settings', 'Server-side encryption')"
+	<NcSettingsSection :name="t('settings', 'Server-side encryption')"
 		:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
 		:doc-url="encryptionAdminDoc">
 		<NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"

apps/settings/src/components/GroupListItem.vue

@@ -23,7 +23,7 @@
 <template>
 	<NcAppNavigationItem :key="id"
 		:exact="true"
-		:title="title"
+		:name="name"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
 		icon="icon-group"
 		:loading="loadingRenameGroup"
@@ -40,7 +40,7 @@
 				ref="displayNameInput"
 				icon="icon-edit"
 				type="text"
-				:value="title"
+				:value="name"
 				@submit="renameGroup(id)">
 				{{ t('settings', 'Rename group') }}
 			</NcActionInput>
@@ -90,9 +90,9 @@ export default {
 			required: true,
 		},
 		/**
-		 * Title of this group
+		 * Name of this group
 		 */
-		title: {
+		name: {
 			type: String,
 			required: true,
 		},

apps/settings/src/components/PasswordSection.vue

@@ -17,7 +17,7 @@
   - along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
 <template>
-	<NcSettingsSection :title="t('settings', 'Password')">
+	<NcSettingsSection :name="t('settings', 'Password')">
 		<form id="passwordform" method="POST" @submit.prevent="changePassword">
 			<NcPasswordField id="old-pass"
 				:label="t('settings', 'Current password')"

apps/settings/src/components/UserList.vue

@@ -31,10 +31,10 @@
 
 		<NcEmptyContent v-if="filteredUsers.length === 0"
 			class="empty"
-			:title="isInitialLoad && loading.users ? null : t('settings', 'No users')">
+			:name="isInitialLoad && loading.users ? null : t('settings', 'No users')">
 			<template #icon>
 				<NcLoadingIcon v-if="isInitialLoad && loading.users"
-					:title="t('settings', 'Loading users …')"
+					:name="t('settings', 'Loading users …')"
 					:size="64" />
 				<NcIconSvgWrapper v-else
 					:svg="usersSvg" />

apps/settings/src/components/Users/UserRow.vue

@@ -27,7 +27,7 @@
 	<Fragment>
 		<td class="row__cell row__cell--avatar">
 			<NcLoadingIcon v-if="isLoadingUser"
-				:title="t('settings', 'Loading user …')"
+				:name="t('settings', 'Loading user …')"
 				:size="32" />
 			<NcAvatar v-else
 				:key="user.id"

apps/settings/src/components/Users/UserSettingsDialog.vue

@@ -23,9 +23,9 @@
 <template>
 	<NcAppSettingsDialog :open.sync="isModalOpen"
 		:show-navigation="true"
-		:title="t('settings', 'User management settings')">
+		:name="t('settings', 'User management settings')">
 		<NcAppSettingsSection id="visibility-settings"
-			:title="t('settings', 'Visibility')">
+			:name="t('settings', 'Visibility')">
 			<NcCheckboxRadioSwitch type="switch"
 				data-test="showLanguages"
 				:checked.sync="showLanguages">
@@ -49,7 +49,7 @@
 		</NcAppSettingsSection>
 
 		<NcAppSettingsSection id="email-settings"
-			:title="t('settings', 'Send email')">
+			:name="t('settings', 'Send email')">
 			<NcCheckboxRadioSwitch type="switch"
 				data-test="sendWelcomeMail"
 				:checked.sync="sendWelcomeMail"
@@ -59,7 +59,7 @@
 		</NcAppSettingsSection>
 
 		<NcAppSettingsSection id="default-settings"
-			:title="t('settings', 'Defaults')">
+			:name="t('settings', 'Defaults')">
 			<label for="default-quota-select">{{ t('settings', 'Default quota') }}</label>
 			<NcSelect v-model="defaultQuota"
 				input-id="default-quota-select"

apps/settings/src/views/Apps.vue

@@ -32,20 +32,20 @@
 					:to="{ name: 'apps' }"
 					:exact="true"
 					icon="icon-category-installed"
-					:title="t('settings', 'Your apps')" />
+					:name="t('settings', 'Your apps')" />
 				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
-					:title="$options.APPS_SECTION_ENUM.enabled" />
+					:name="$options.APPS_SECTION_ENUM.enabled" />
 				<NcAppNavigationItem id="app-category-disabled"
 					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
 					icon="icon-category-disabled"
-					:title="$options.APPS_SECTION_ENUM.disabled" />
+					:name="$options.APPS_SECTION_ENUM.disabled" />
 				<NcAppNavigationItem v-if="updateCount > 0"
 					id="app-category-updates"
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
-					:title="$options.APPS_SECTION_ENUM.updates">
+					:name="$options.APPS_SECTION_ENUM.updates">
 					<template #counter>
 						<NcCounterBubble>{{ updateCount }}</NcCounterBubble>
 					</template>
@@ -61,7 +61,7 @@
 				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
 					icon="icon-category-app-bundles"
-					:title="$options.APPS_SECTION_ENUM['app-bundles']" />
+					:name="$options.APPS_SECTION_ENUM['app-bundles']" />
 
 				<NcAppNavigationSpacer />
 
@@ -70,7 +70,7 @@
 					<NcAppNavigationItem id="app-category-featured"
 						:to="{ name: 'apps-category', params: { category: 'featured' } }"
 						icon="icon-favorite"
-						:title="$options.APPS_SECTION_ENUM.featured" />
+						:name="$options.APPS_SECTION_ENUM.featured" />
 
 					<NcAppNavigationItem v-for="cat in categories"
 						:key="'icon-category-' + cat.ident"
@@ -79,11 +79,11 @@
 							name: 'apps-category',
 							params: { category: cat.ident },
 						}"
-						:title="cat.displayName" />
+						:name="cat.displayName" />
 				</template>
 
 				<NcAppNavigationItem id="app-developer-docs"
-					:title="t('settings', 'Developer documentation') + ' ↗'"
+					:name="t('settings', 'Developer documentation') + ' ↗'"
 					@click="openDeveloperDocumentation" />
 			</template>
 		</NcAppNavigation>
@@ -250,16 +250,15 @@ export default {
 				: authorName(this.app.author)
 			const license = t('settings', '{license}-licensed', { license: ('' + this.app.licence).toUpperCase() })
 
-			const subtitle = t('settings', 'by {author}\n{license}', { author, license })
+			const subname = t('settings', 'by {author}\n{license}', { author, license })
 
 			return {
-				subtitle,
 				background: this.app.screenshot && this.screenshotLoaded
 					? this.app.screenshot
 					: this.app.preview,
 				compact: !(this.app.screenshot && this.screenshotLoaded),
-				title: this.app.name,
+				name: this.app.name,
-
+				subname,
 			}
 		},
 		changelog() {

apps/settings/src/views/Users.vue

@@ -37,7 +37,7 @@
 						:edit-placeholder="t('settings', 'Enter group name')"
 						:editable="true"
 						:loading="loadingAddGroup"
-						:title="t('settings', 'Add group')"
+						:name="t('settings', 'Add group')"
 						@click="showAddGroupForm"
 						@new-item="createGroup">
 						<template #icon>
@@ -46,7 +46,7 @@
 					</NcAppNavigationNewItem>
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
-						:title="t('settings', 'Active users')"
+						:name="t('settings', 'Active users')"
 						:to="{ name: 'users' }"
 						icon="icon-contacts-dark">
 						<template #counter>
@@ -58,7 +58,7 @@
 					<NcAppNavigationItem v-if="settings.isAdmin"
 						id="admin"
 						:exact="true"
-						:title="t('settings', 'Admins')"
+						:name="t('settings', 'Admins')"
 						:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
 						icon="icon-user-admin">
 						<template v-if="adminGroupMenu.count > 0" #counter>
@@ -72,7 +72,7 @@
 					<NcAppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
 						id="disabled"
 						:exact="true"
-						:title="t('settings', 'Disabled users')"
+						:name="t('settings', 'Disabled users')"
 						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
 						icon="icon-disabled-users">
 						<template v-if="disabledGroupMenu.usercount > 0" #counter>
@@ -82,18 +82,18 @@
 						</template>
 					</NcAppNavigationItem>
 
-					<NcAppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
+					<NcAppNavigationCaption v-if="groupList.length > 0" :name="t('settings', 'Groups')" />
 					<GroupListItem v-for="group in groupList"
 						:id="group.id"
 						:key="group.id"
 						:active="selectedGroupDecoded === group.id"
-						:title="group.title"
+						:name="group.title"
 						:count="group.count" />
 				</template>
 
 				<template #footer>
 					<ul class="app-navigation-entry__settings">
-						<NcAppNavigationItem :title="t('settings', 'User management settings')"
+						<NcAppNavigationItem :name="t('settings', 'User management settings')"
 							@click="isDialogOpen = true">
 							<template #icon>
 								<Cog :size="20" />

apps/sharebymail/src/components/AdminSettings.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('sharebymail', 'Share by mail')"
+	<NcSettingsSection :name="t('sharebymail', 'Share by mail')"
 		:description="t('sharebymail', 'Allows users to share a personalized link to a file or folder by putting in an email address.')">
 		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="sendPasswordMail"

apps/theming/src/AdminTheming.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<NcSettingsSection :title="t('theming', 'Theming')"
+		<NcSettingsSection :name="t('theming', 'Theming')"
 			:description="t('theming', 'Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users.')"
 			:doc-url="docUrl"
 			data-admin-theming-settings>
@@ -70,7 +70,7 @@
 				</div>
 			</div>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('theming', 'Advanced options')">
+		<NcSettingsSection :name="t('theming', 'Advanced options')">
 			<div class="admin-theming-advanced">
 				<TextField v-for="field in advancedTextFields"
 					:key="field.name"

apps/theming/src/UserThemes.vue

@@ -23,7 +23,7 @@
 
 <template>
 	<section>
-		<NcSettingsSection :title="t('theming', 'Appearance and accessibility')"
+		<NcSettingsSection :name="t('theming', 'Appearance and accessibility')"
 			:limit-width="false"
 			class="theming">
 			<p v-html="description" />
@@ -51,7 +51,7 @@
 			</div>
 		</NcSettingsSection>
 
-		<NcSettingsSection :title="t('theming', 'Keyboard shortcuts')">
+		<NcSettingsSection :name="t('theming', 'Keyboard shortcuts')">
 			<p>{{ t('theming', 'In some cases keyboard shortcuts can interfere with accessibility tools. In order to allow focusing on your tool correctly you can disable all keyboard shortcuts here. This will also disable all available shortcuts in apps.') }}</p>
 			<NcCheckboxRadioSwitch class="theming__preview-toggle"
 				:checked.sync="shortcutsDisabled"
@@ -62,7 +62,7 @@
 			</NcCheckboxRadioSwitch>
 		</NcSettingsSection>
 
-		<NcSettingsSection :title="t('theming', 'Background')"
+		<NcSettingsSection :name="t('theming', 'Background')"
 			class="background"
 			data-user-theming-background-disabled>
 			<template v-if="isUserThemingDisabled">

apps/updatenotification/src/components/UpdateNotification.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection id="updatenotification" :title="t('updatenotification', 'Update')">
+	<NcSettingsSection id="updatenotification" :name="t('updatenotification', 'Update')">
 		<div class="update">
 			<template v-if="isNewVersionAvailable">
 				<NcNoteCard v-if="versionIsEol" type="warning">
@@ -60,13 +60,13 @@
 					</span>
 					<NcActions v-if="whatsNewData || changelogURL"
 						:force-menu="true"
-						:menu-title="t('updatenotification', 'What\'s new?')"
+						:menu-name="t('updatenotification', 'What\'s new?')"
 						type="tertiary">
 						<template #icon>
 							<IconNewBox :size="20" />
 						</template>
 						<template #default>
-							<NcActionCaption v-for="changes,index in whatsNewData" :key="index" :title="changes" />
+							<NcActionCaption v-for="changes,index in whatsNewData" :key="index" :name="changes" />
 							<NcActionLink v-if="changelogURL"
 								:href="changelogURL"
 								close-after-click
@@ -102,7 +102,7 @@
 		<div class="update-channel-selector">
 			<span>{{ t('updatenotification', 'Current update channel:') }}</span>
 			<NcActions :force-menu="true"
-				:menu-title="localizedChannelName"
+				:menu-name="localizedChannelName"
 				type="tertiary">
 				<template #icon>
 					<IconChevronDown :size="20" />

apps/user_status/src/components/SetStatusModal.vue

@@ -21,7 +21,7 @@
 
 <template>
 	<NcModal size="normal"
-		:title="$t('user_status', 'Set status')"
+		:name="$t('user_status', 'Set status')"
 		@close="closeModal">
 		<div class="set-status-modal">
 			<!-- Status selector -->

apps/weather_status/src/App.vue

@@ -65,7 +65,7 @@
 					{{ t('weather_status', 'Set custom address') }}
 				</NcActionInput>
 				<template v-if="favorites.length > 0">
-					<NcActionCaption :title="t('weather_status', 'Favorites')" />
+					<NcActionCaption :name="t('weather_status', 'Favorites')" />
 					<NcActionButton v-for="favorite in favorites"
 						:key="favorite"
 						:aria-hidden="true"

apps/workflowengine/src/components/Workflow.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="workflowengine">
-		<NcSettingsSection :title="t('workflowengine', 'Available flows')"
+		<NcSettingsSection :name="t('workflowengine', 'Available flows')"
 			:doc-url="workflowDocUrl">
 			<p v-if="scope === 0" class="settings-hint">
 				<a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a>

package.json

@@ -41,7 +41,7 @@
     "@nextcloud/axios": "^2.3.0",
     "@nextcloud/browser-storage": "^0.2.0",
     "@nextcloud/browserslist-config": "^2.3.0",
-    "@nextcloud/calendar-availability-vue": "^1.0.0",
+    "@nextcloud/calendar-availability-vue": "^2.0.0-beta.1",
     "@nextcloud/capabilities": "^1.0.4",
     "@nextcloud/dialogs": "^4.1.0",
     "@nextcloud/event-bus": "^3.1.0",
@@ -54,7 +54,7 @@
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/sharing": "^0.1.0",
-    "@nextcloud/vue": "^7.12.1",
+    "@nextcloud/vue": "^8.0.0-beta.2",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@skjnldsv/sanitize-svg": "^1.0.2",
     "@vueuse/components": "^10.2.0",