chore: Migrate to new @nextcloud/vue API

Signed-off-by: Christopher Ng <chrng8@gmail.com>

src/Photos.vue

@@ -26,55 +26,55 @@
 			<template #list>
 				<NcAppNavigationItem :to="{name: 'all_media'}"
 					class="app-navigation__all_media"
-					:title="t('photos', 'All media')"
+					:name="t('photos', 'All media')"
 					exact>
 					<ImageIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/photos" :title="t('photos', 'Photos')">
+				<NcAppNavigationItem to="/photos" :name="t('photos', 'Photos')">
 					<Camera slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/videos" :title="t('photos', 'Videos')">
+				<NcAppNavigationItem to="/videos" :name="t('photos', 'Videos')">
 					<VideoIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'albums'}" :title="t('photos', 'Albums')">
+				<NcAppNavigationItem :to="{name: 'albums'}" :name="t('photos', 'Albums')">
 					<FolderMultipleImage slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'sharedAlbums'}" :title="t('photos', 'Collaborative albums')">
+				<NcAppNavigationItem :to="{name: 'sharedAlbums'}" :name="t('photos', 'Collaborative albums')">
 					<AccountGroup slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem v-if="showPeopleMenuEntry" :to="{name: 'faces'}" :title="t('photos', 'People')">
+				<NcAppNavigationItem v-if="showPeopleMenuEntry" :to="{name: 'faces'}" :name="t('photos', 'People')">
 					<template #icon>
 						<AccountBoxMultipleOutline :size="20" />
 					</template>
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'folders'}" :title="t('photos', 'Folders')">
+				<NcAppNavigationItem :to="{name: 'folders'}" :name="t('photos', 'Folders')">
 					<Folder slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/favorites" :title="t('photos', 'Favorites')">
+				<NcAppNavigationItem to="/favorites" :name="t('photos', 'Favorites')">
 					<Star slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'thisday'}" :title="t('photos', 'On this day')">
+				<NcAppNavigationItem :to="{name: 'thisday'}" :name="t('photos', 'On this day')">
 					<CalendarToday slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'shared'}" :title="t('photos', 'Shared with you')">
+				<NcAppNavigationItem :to="{name: 'shared'}" :name="t('photos', 'Shared with you')">
 					<ShareVariant slot="icon" :size="20" />
 				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="areTagsInstalled"
 					:to="{name: 'tags'}"
-					:title="t('photos', 'Tags')">
+					:name="t('photos', 'Tags')">
 					<Tag slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'places'}" :title="t('photos', 'Places')">
+				<NcAppNavigationItem :to="{name: 'places'}" :name="t('photos', 'Places')">
 					<MapMarker slot="icon" :size="20" />
 				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="showLocationMenuEntry"
 					:to="{name: 'maps'}"
-					:title="t('photos', 'Map')">
+					:name="t('photos', 'Map')">
 					<MapIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
 			</template>
 			<template #footer>
-				<NcAppNavigationItem :title="t('photos', 'Photos settings')" @click="showSettings">
+				<NcAppNavigationItem :name="t('photos', 'Photos settings')" @click="showSettings">
 					<Cog slot="icon" :size="20" />
 				</NcAppNavigationItem>
 			</template>

src/components/Albums/AlbumPicker.vue

@@ -30,7 +30,7 @@
 			<NcListItem v-for="album in allAlbums"
 				:key="album.filename"
 				class="album"
-				:title="originalName(album)"
+				:name="originalName(album)"
 				:aria-label="t('photos', 'Add selection to album {albumName}', {albumName: album.basename})"
 				@click="pickAlbum(album)">
 				<template slot="icon">
@@ -40,7 +40,7 @@
 					</div>
 				</template>
 
-				<template slot="subtitle">
+				<template #subname>
 					{{ n('photos', '%n item', '%n photos and videos', album.nbItems) }}
 					<template v-if="isSharedAlbum(album)">
 						⸱ {{ t('photos', 'Shared by') }}&nbsp;<NcUserBubble :display-name="album.collaborators[0].label" :user="album.collaborators[0].id" />

src/components/Albums/CollaboratorsSelectionForm.vue

@@ -51,7 +51,7 @@
 				class="manage-collaborators__selection__item">
 				<NcListItemIcon :id="availableCollaborators[collaboratorKey].id"
 					:display-name="availableCollaborators[collaboratorKey].label"
-					:title="availableCollaborators[collaboratorKey].label"
+					:name="availableCollaborators[collaboratorKey].label"
 					:user="availableCollaborators[collaboratorKey].id"
 					:is-no-user="availableCollaborators[collaboratorKey].type !== collaboratorTypes.SHARE_TYPE_USER">
 					<AccountGroup v-if="availableCollaborators[collaboratorKey].type === collaboratorTypes.SHARE_TYPE_GROUP" :title="t('photos', 'Group')" />

src/components/Collection/CollectionContent.vue

@@ -23,10 +23,10 @@
 	<!-- Errors handlers-->
 	<NcEmptyContent v-if="(collection === undefined && !loading) || error === 404"
 		class="empty-content-with-illustration"
-		:title="t('photos', 'This collection does not exist')">
+		:name="t('photos', 'This collection does not exist')">
 		<FolderMultipleImage slot="icon" />
 	</NcEmptyContent>
-	<NcEmptyContent v-else-if="error" :title="t('photos', 'An error occurred')">
+	<NcEmptyContent v-else-if="error" :name="t('photos', 'An error occurred')">
 		<AlertCircle slot="icon" />
 	</NcEmptyContent>
 

src/components/Collection/CollectionsList.vue

@@ -21,7 +21,7 @@
  -->
 <template>
 	<!-- Errors handlers-->
-	<NcEmptyContent v-if="error" :title="t('photos', 'An error occurred') ">
+	<NcEmptyContent v-if="error" :name="t('photos', 'An error occurred') ">
 		<AlertCircle slot="icon" />
 	</NcEmptyContent>
 

src/components/FilesListViewer.vue

@@ -23,7 +23,7 @@
 	<div class="files-list-viewer">
 		<NcEmptyContent v-if="emptyMessage !== '' && itemsBySections.length === 1 && itemsBySections[0].items.length === 0 && !loading"
 			key="emptycontent"
-			:title="emptyMessage">
+			:name="emptyMessage">
 			<PackageVariant slot="icon" />
 		</NcEmptyContent>
 

src/components/Settings/SettingsDialog.vue

@@ -1,13 +1,13 @@
 <template>
 	<NcAppSettingsDialog :open="open"
 		:show-navigation="true"
-		:title="t('photos', 'Photos settings')"
+		:name="t('photos', 'Photos settings')"
 		@update:open="onClose">
-		<NcAppSettingsSection id="layout-settings" :title="t('photos', 'View')">
+		<NcAppSettingsSection id="layout-settings" :name="t('photos', 'View')">
 			<CroppedLayoutSettings />
 		</NcAppSettingsSection>
 
-		<NcAppSettingsSection id="directory-settings" :title="t('photos', 'Photos directory')">
+		<NcAppSettingsSection id="directory-settings" :name="t('photos', 'Photos directory')">
 			<PhotosLocationSettings />
 		</NcAppSettingsSection>
 	</NcAppSettingsDialog>

src/views/AlbumContent.vue

@@ -112,7 +112,7 @@
 			<!-- No content -->
 			<NcEmptyContent v-if="album !== undefined && album.nbItems === 0 && !(loadingCollectionFiles || loadingCollection)"
 				slot="empty-content"
-				:title="t('photos', 'This album does not have any photos or videos yet!')"
+				:name="t('photos', 'This album does not have any photos or videos yet!')"
 				class="album__empty">
 				<ImagePlus slot="icon" />
 
@@ -129,7 +129,7 @@
 
 		<NcModal v-if="showAddPhotosModal"
 			size="large"
-			:title="t('photos', 'Add photos to {albumName}', {albumName: albumName})"
+			:name="t('photos', 'Add photos to {albumName}', {albumName: albumName})"
 			@close="showAddPhotosModal = false">
 			<FilesPicker v-if="album !== undefined"
 				:destination="album.basename"
@@ -138,7 +138,7 @@
 		</NcModal>
 
 		<NcModal v-if="showManageCollaboratorView && album !== undefined"
-			:title="t('photos', 'Manage collaborators')"
+			:name="t('photos', 'Manage collaborators')"
 			@close="showManageCollaboratorView = false">
 			<CollaboratorsSelectionForm :album-name="album.basename"
 				:collaborators="album.collaborators">
@@ -157,7 +157,7 @@
 		</NcModal>
 
 		<NcModal v-if="showEditAlbumForm"
-			:title="t('photos', 'Edit album details')"
+			:name="t('photos', 'Edit album details')"
 			@close="showEditAlbumForm = false">
 			<AlbumForm :album="album" @done="redirectToNewName" />
 		</NcModal>

src/views/Albums.vue

@@ -54,13 +54,13 @@
 				</div>
 			</CollectionCover>
 
-			<NcEmptyContent slot="empty-collections-list" :title="t('photos', 'There is no album yet!')">
+			<NcEmptyContent slot="empty-collections-list" :name="t('photos', 'There is no album yet!')">
 				<FolderMultipleImage slot="icon" />
 			</NcEmptyContent>
 		</CollectionsList>
 
 		<NcModal v-if="showAlbumCreationForm"
-			:title="t('photos', 'New album')"
+			:name="t('photos', 'New album')"
 			@close="showAlbumCreationForm = false">
 			<AlbumForm @done="handleAlbumCreated" />
 		</NcModal>

src/views/FaceContent.vue

@@ -137,7 +137,7 @@
 		</FilesListViewer>
 
 		<NcModal v-if="showRenameModal"
-			:title="t('photos', 'Rename person')"
+			:name="t('photos', 'Rename person')"
 			@close="showRenameModal = false">
 			<div class="rename-form">
 				<input ref="nameInput"
@@ -162,12 +162,12 @@
 		</NcModal>
 
 		<NcModal v-if="showMergeModal"
-			:title="t('photos', 'Merge person')"
+			:name="t('photos', 'Merge person')"
 			@close="showMergeModal = false">
 			<FaceMergeForm :first-face="faceName" @select="handleMerge($event)" />
 		</NcModal>
 		<NcModal v-if="showMoveModal"
-			:title="t('photos', 'Move to different person')"
+			:name="t('photos', 'Move to different person')"
 			@close="showMoveModal = false">
 			<FaceMergeForm :first-face="faceName" @select="handleMove($event, selectedFileIds)" />
 		</NcModal>

src/views/PlaceContent.vue

@@ -39,7 +39,7 @@
 
 			<!-- No content -->
 			<NcEmptyContent slot="empty-content"
-				:title="t('photos', 'This place does not have any photos or videos yet!')"
+				:name="t('photos', 'This place does not have any photos or videos yet!')"
 				class="place__empty">
 				<ImagePlus slot="icon" />
 

src/views/Places.vue

@@ -46,7 +46,7 @@
 				</div>
 			</CollectionCover>
 
-			<NcEmptyContent slot="empty-collections-list" :title="t('photos', 'There is no place yet!')">
+			<NcEmptyContent slot="empty-collections-list" :name="t('photos', 'There is no place yet!')">
 				<FolderMultipleImage slot="icon" />
 			</NcEmptyContent>
 		</CollectionsList>

src/views/PublicAlbumContent.vue

@@ -71,7 +71,7 @@
 
 			<!-- No content -->
 			<NcEmptyContent slot="empty-content"
-				:title="t('photos', 'This album does not have any photos or videos yet!')"
+				:name="t('photos', 'This album does not have any photos or videos yet!')"
 				class="album__empty">
 				<ImageOff slot="icon" />
 

src/views/SharedAlbumContent.vue

@@ -96,7 +96,7 @@
 			<!-- No content -->
 			<NcEmptyContent v-if="album !== undefined && album.nbItems === 0 && !(loadingCollectionFiles || loadingCollection)"
 				slot="empty-content"
-				:title="t('photos', 'This album does not have any photos or videos yet!')"
+				:name="t('photos', 'This album does not have any photos or videos yet!')"
 				class="album__empty">
 				<ImagePlus slot="icon" />
 
@@ -113,7 +113,7 @@
 
 		<NcModal v-if="showAddPhotosModal"
 			size="large"
-			:title="t('photos', 'Add photos to {albumName}', {albumName: albumOriginalName})"
+			:name="t('photos', 'Add photos to {albumName}', {albumName: albumOriginalName})"
 			@close="showAddPhotosModal = false">
 			<FilesPicker v-if="album !== undefined"
 				:destination="album.basename"

src/views/SharedAlbums.vue

@@ -48,7 +48,7 @@
 			</div>
 		</CollectionCover>
 
-		<NcEmptyContent slot="empty-collections-list" :title="t('photos', 'There is no album yet!')">
+		<NcEmptyContent slot="empty-collections-list" :name="t('photos', 'There is no album yet!')">
 			<FolderMultipleImage slot="icon" />
 		</NcEmptyContent>
 	</CollectionsList>

src/views/TagContent.vue

@@ -24,7 +24,7 @@
 
 <template>
 	<!-- Errors handlers-->
-	<NcEmptyContent v-if="error" :title="t('photos', 'An error occurred')" />
+	<NcEmptyContent v-if="error" :name="t('photos', 'An error occurred')" />
 
 	<NcLoadingIcon v-else-if="loading" class="loader" />
 
@@ -46,7 +46,7 @@
 		<div class="heading-subline">
 			{{ n('photos', '%n photo', '%n photos', fileIds.length,) }}
 		</div>
-		<NcEmptyContent v-if="isEmpty" :title="t('photos', 'No photos with this tag yet')" />
+		<NcEmptyContent v-if="isEmpty" :name="t('photos', 'No photos with this tag yet')" />
 
 		<FilesListViewer class="tag__photos"
 			:container-element="appContent"

src/views/Tags.vue

@@ -24,9 +24,9 @@
 <template>
 	<div>
 		<!-- Errors handlers-->
-		<NcEmptyContent v-if="error" :title="t('photos', 'An error occurred')" />
+		<NcEmptyContent v-if="error" :name="t('photos', 'An error occurred')" />
 
-		<NcEmptyContent v-if="!loading && tagsList.length === 0" :title="t('photos', 'No tags yet')" :description="t('photos', 'Photos with tags will show up here')" />
+		<NcEmptyContent v-if="!loading && tagsList.length === 0" :name="t('photos', 'No tags yet')" :description="t('photos', 'Photos with tags will show up here')" />
 
 		<NcLoadingIcon v-if="loading" class="loader" />
 

src/views/Timeline.vue

@@ -40,7 +40,7 @@
 				<!-- TODO: UploadPicker -->
 				<NcActions v-if="selectedFileIds.length === 0"
 					:force-menu="true"
-					:menu-title="t('photos', 'Add')">
+					:menu-name="t('photos', 'Add')">
 					<template #icon>
 						<Plus />
 					</template>
@@ -123,15 +123,15 @@
 		<NcModal v-if="showAlbumCreationForm"
 			key="albumCreationForm"
 			:close-button-contained="false"
-			:title="t('photos', 'New album')"
+			:name="t('photos', 'New album')"
 			@close="showAlbumCreationForm = false">
 			<AlbumForm @done="showAlbumCreationForm = false" />
 		</NcModal>
 
 		<NcModal v-if="showAlbumPicker"
 			key="albumPicker"
 			:close-button-contained="false"
-			:title="t('photos', 'Add to album')"
+			:name="t('photos', 'Add to album')"
 			@close="showAlbumPicker = false">
 			<AlbumPicker @album-picked="addSelectionToAlbum" />
 		</NcModal>

src/views/UnassignedFaces.vue

@@ -97,7 +97,7 @@
 		</FilesListViewer>
 
 		<NcModal v-if="showMoveModal"
-			:title="t('photos', 'Move to different person')"
+			:name="t('photos', 'Move to different person')"
 			@close="showMoveModal = false">
 			<FaceMergeForm :first-face="'-1'" @select="handleMove($event, selectedFileIds)" />
 		</NcModal>