migrate(nc-vue): Upgrade to v8.x

fixes #2034
fixes #1157

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

package.json

@@ -28,7 +28,7 @@
     "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/l10n": "^2.1.0",
     "@nextcloud/router": "^2.1.2",
-    "@nextcloud/vue": "^7.12.0",
+    "@nextcloud/vue": "8.x",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@nextcloud/vue-richtext": "^2.1.0-beta.6",
     "async-parallel": "^1.2.3",

src/components/BookmarkContent.vue

@@ -8,7 +8,7 @@
 	<div v-if="isActive && scrapingEnabled && archiveEnabled && hasMinLength && !archivedFile && isWebLink" class="bookmark-content">
 		<div v-if="bookmark.textContent" class="content" v-html="content" />
 		<div v-else>
-			<NcEmptyContent :title="t('bookmarks', 'Content pending')"
+			<NcEmptyContent :name="t('bookmarks', 'Content pending')"
 				:description="t('bookmarks', 'This content is being downloaded for offline use. Please check back later.')">
 				<template #icon>
 					<DownloadIcon />

src/components/BulkEditing.vue

@@ -6,7 +6,7 @@
 
 <template>
 	<div class="bulkediting">
-		<NcActions :primary="true" :menu-title="selectionDescription">
+		<NcActions :primary="true" :menu-name="selectionDescription">
 			<NcActionButton close-after-click @click="onBulkOpen">
 				<template #icon>
 					<OpenInNewIcon />

src/components/Controls.vue

@@ -28,7 +28,7 @@
 			</template>
 			<template v-if="$route.name === routes.TAGS">
 				<TagIcon />
-				<NcMultiselect class="controls__tags"
+				<NcSelect class="controls__tags"
 					:value="tags"
 					:auto-limit="false"
 					:limit="7"
@@ -39,7 +39,7 @@
 			</template>
 			<NcActions v-if="!isPublic"
 				v-tooltip="t('bookmarks', 'New')"
-				:title="t('bookmarks', 'New')">
+				:name="t('bookmarks', 'New')">
 				<template #icon>
 					<PlusIcon />
 				</template>
@@ -111,7 +111,7 @@
 	</div>
 </template>
 <script>
-import { NcMultiselect, NcActions, NcActionButton, NcActionInput, NcActionRouter, NcTextField } from '@nextcloud/vue'
+import { NcSelect, NcActions, NcActionButton, NcActionInput, NcActionRouter, NcTextField } from '@nextcloud/vue'
 import MagnifyIcon from 'vue-material-design-icons/Magnify.vue'
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
@@ -136,7 +136,7 @@ export default {
 	name: 'Controls',
 	components: {
 		BulkEditing,
-		NcMultiselect,
+		NcSelect,
 		NcActions,
 		NcActionButton,
 		NcActionInput,
@@ -306,7 +306,7 @@ export default {
 </script>
 <style>
 .controls {
-	padding: 4px 8px 0 44px;
+	padding: 4px 8px 0 50px;
 	display: flex;
 	position: absolute;
 	z-index: 100;
@@ -371,6 +371,6 @@ export default {
 .controls__right .inline-search {
 	max-width: 150px !important;
 	position: relative;
-	top: 4px;
+	top: -4px;
 }
 </style>

src/components/CopyDialog.vue

@@ -5,7 +5,7 @@
   -->
 
 <template>
-	<NcModal v-if="showNcModal" :title="title" @close="onClose">
+	<NcModal v-if="showNcModal" :name="title" @close="onClose">
 		<div class="copy-dialog">
 			<FolderPicker :title="title" :filter="filterFolders" @submit="onSubmit" />
 		</div>

src/components/FirstRun.vue

@@ -6,7 +6,7 @@
 
 <template>
 	<div class="bookmarkslist__emptyBookmarks">
-		<NcEmptyContent :title="t('bookmarks', 'Welcome to Bookmarks')" :description="t('bookmarks', 'This app allows you to manage links to your favorite places on the web. Sort your bookmarks into folders, label them with tags and share them with others! The app will regularly check all your links for availability and display unavailable links. If you add a link to a file on the web, the file will be automatically downloaded to your Nextcloud Files. You can also import bookmarks exported from other services or directly sync bookmarks from all your browsers with this app.')">
+		<NcEmptyContent :name="t('bookmarks', 'Welcome to Bookmarks')" :description="t('bookmarks', 'This app allows you to manage links to your favorite places on the web. Sort your bookmarks into folders, label them with tags and share them with others! The app will regularly check all your links for availability and display unavailable links. If you add a link to a file on the web, the file will be automatically downloaded to your Nextcloud Files. You can also import bookmarks exported from other services or directly sync bookmarks from all your browsers with this app.')">
 			<template #icon>
 				<StarShootingIcon />
 			</template>

src/components/FolderPickerDialog.vue

@@ -5,7 +5,7 @@
   -->
 
 <template>
-	<NcModal v-if="show" :title="t('bookmarks', 'Select folder')" @close="onClose">
+	<NcModal v-if="show" :name="t('bookmarks', 'Select folder')" @close="onClose">
 		<div class="folderpicker-dialog">
 			<FolderPicker :title="t('bookmarks', 'Select folder')" @submit="onSelect" />
 		</div>

src/components/MoveDialog.vue

@@ -5,7 +5,7 @@
   -->
 
 <template>
-	<NcModal v-if="showNcModal" :title="title" @close="onClose">
+	<NcModal v-if="showNcModal" :name="title" @close="onClose">
 		<div class="move-dialog">
 			<FolderPicker :title="title" :filter="filterFolders" @submit="onSubmit" />
 		</div>

src/components/Navigation.vue

@@ -9,59 +9,59 @@
 		<template #list>
 			<NcAppNavigationItem key="menu-home"
 				:to="{ name: routes.HOME }"
-				:title="t('bookmarks', 'All bookmarks')"
+				:name="t('bookmarks', 'All bookmarks')"
 				:exact="true">
 				<HomeIcon slot="icon" />
-				<NcAppNavigationCounter slot="counter">
+				<NcCounterBubble slot="counter">
 					{{ allBookmarksCount | largeNumbers }}
-				</NcAppNavigationCounter>
+				</NcCounterBubble>
 			</NcAppNavigationItem>
 			<NcAppNavigationItem key="menu-recent"
 				:to="{ name: routes.RECENT }"
-				:title="t('bookmarks', 'Recent')">
+				:name="t('bookmarks', 'Recent')">
 				<HistoryIcon slot="icon" />
 			</NcAppNavigationItem>
 			<NcAppNavigationItem key="menu-shared-folders"
 				:to="{ name: routes.SHARED_FOLDERS }"
-				:title="t('bookmarks', 'Shared with you')">
+				:name="t('bookmarks', 'Shared with you')">
 				<ShareVariantIcon slot="icon" />
-				<NcAppNavigationCounter v-show="Boolean(sharedFoldersCount)" slot="counter">
+				<NcCounterBubble v-show="Boolean(sharedFoldersCount)" slot="counter">
 					{{ sharedFoldersCount | largeNumbers }}
-				</NcAppNavigationCounter>
+				</NcCounterBubble>
 			</NcAppNavigationItem>
 			<NcAppNavigationItem key="menu-archived"
 				:to="{ name: routes.ARCHIVED }"
-				:title="t('bookmarks', 'Files')">
+				:name="t('bookmarks', 'Files')">
 				<FileDocumentMultipleIcon slot="icon" />
-				<NcAppNavigationCounter v-show="Boolean(archivedBookmarksCount)" slot="counter">
+				<NcCounterBubble v-show="Boolean(archivedBookmarksCount)" slot="counter">
 					{{ archivedBookmarksCount }}
-				</NcAppNavigationCounter>
+				</NcCounterBubble>
 			</NcAppNavigationItem>
 			<NcAppNavigationItem key="menu-duplicated"
 				:to="{ name: routes.DUPLICATED }"
-				:title="t('bookmarks', 'Duplicates')">
+				:name="t('bookmarks', 'Duplicates')">
 				<VectorLinkIcon slot="icon" />
-				<NcAppNavigationCounter v-show="Boolean(duplicatedBookmarksCount)" slot="counter">
+				<NcCounterBubble v-show="Boolean(duplicatedBookmarksCount)" slot="counter">
 					{{ duplicatedBookmarksCount | largeNumbers }}
-				</NcAppNavigationCounter>
+				</NcCounterBubble>
 			</NcAppNavigationItem>
 			<NcAppNavigationItem key="menu-unavailable"
 				:to="{ name: routes.UNAVAILABLE }"
-				:title="t('bookmarks', 'Broken links')">
+				:name="t('bookmarks', 'Broken links')">
 				<LinkVariantOffIcon slot="icon" />
-				<NcAppNavigationCounter v-show="Boolean(unavailableBookmarksCount)" slot="counter">
+				<NcCounterBubble v-show="Boolean(unavailableBookmarksCount)" slot="counter">
 					{{ unavailableBookmarksCount | largeNumbers }}
-				</NcAppNavigationCounter>
+				</NcCounterBubble>
 			</NcAppNavigationItem>
 			<NcAppNavigationSpacer />
 			<NcAppNavigationNewItem key="menu-new-tag"
-				:title="t('bookmarks', 'New tag')"
+				:name="t('bookmarks', 'New tag')"
 				@new-item="onNewTag">
 				<TagPlusIcon slot="icon" />
 			</NcAppNavigationNewItem>
 			<template v-if="Boolean(tags.length)">
 				<NcAppNavigationItem key="menu-tags"
-					:title="t('bookmarks', 'Search tags')"
+					:name="t('bookmarks', 'Search tags')"
 					@click="onSearchTags">
 					<TagMultipleIcon slot="icon" />
 				</NcAppNavigationItem>
@@ -72,12 +72,12 @@
 					:force-menu="true"
 					:edit-label="t('bookmarks', 'Rename')"
 					:editable="!isPublic"
-					:title="tag.name"
-					@update:title="onRenameTag(tag.name, $event)">
+					:name="tag.name"
+					@update:name="onRenameTag(tag.name, $event)">
 					<TagIcon slot="icon" />
-					<NcAppNavigationCounter slot="counter">
+					<NcCounterBubble slot="counter">
 						{{ tag.count | largeNumbers }}
-					</NcAppNavigationCounter>
+					</NcCounterBubble>
 					<template v-if="!isPublic" slot="actions">
 						<NcActionButton :close-after-click="true" @click="onDeleteTag(tag.name)">
 							<template #icon>
@@ -89,13 +89,13 @@
 				</NcAppNavigationItem>
 				<NcAppNavigationItem key="menu-untagged"
 					:to="{ name: routes.UNTAGGED }"
-					:title="t('bookmarks', 'Untagged')">
+					:name="t('bookmarks', 'Untagged')">
 					<TagOffIcon slot="icon" />
 				</NcAppNavigationItem>
 			</template>
 			<template v-if="Number(bookmarksLimit) > 0">
 				<NcAppNavigationSpacer />
-				<NcAppNavigationItem :pinned="true" :title="t('bookmarks', '{used} bookmarks of {available} available', {used: allBookmarksCount, available: bookmarksLimit})">
+				<NcAppNavigationItem :pinned="true" :name="t('bookmarks', '{used} bookmarks of {available} available', {used: allBookmarksCount, available: bookmarksLimit})">
 					<template #icon>
 						<GaugeIcon />
 					</template>
@@ -112,7 +112,7 @@
 </template>
 
 <script>
-import { NcActionButton, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNewItem, NcAppNavigationCounter, NcAppNavigationSettings, NcAppNavigationSpacer } from '@nextcloud/vue'
+import { NcActionButton, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNewItem, NcCounterBubble, NcAppNavigationSettings, NcAppNavigationSpacer } from '@nextcloud/vue'
 import HomeIcon from 'vue-material-design-icons/Home.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
 import TagOffIcon from 'vue-material-design-icons/TagOff.vue'
@@ -135,7 +135,7 @@ export default {
 		NcAppNavigation,
 		NcAppNavigationItem,
 		NcAppNavigationNewItem,
-		NcAppNavigationCounter,
+		NcCounterBubble,
 		NcAppNavigationSettings,
 		NcAppNavigationSpacer,
 		NcActionButton,

src/components/NoBookmarks.vue

@@ -7,35 +7,35 @@
 <template>
 	<div class="bookmarkslist__emptyBookmarks">
 		<NcEmptyContent v-if="$route.name === routes.ARCHIVED"
-			:title="t('bookmarks', 'No bookmarked files')"
+			:name="t('bookmarks', 'No bookmarked files')"
 			:description="t('bookmarks', 'Bookmarks to files like photos or PDFs will automatically be saved to your Nextcloud files, so you can still find them even when the link goes offline.')">
 			<template #icon>
 				<FileDocumentMultipleIcon />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="$route.name === routes.UNAVAILABLE"
-			:title="t('bookmarks', 'No broken links')"
+			:name="t('bookmarks', 'No broken links')"
 			:description="t('bookmarks', 'Bookmarked links are checked regularly and the ones that cannot be reached are listed here.')">
 			<template #icon>
 				<LinkVariantOffIcon />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="$route.name === routes.SHARED_FOLDERS"
-			:title="t('bookmarks', 'No shared folders')"
+			:name="t('bookmarks', 'No shared folders')"
 			:description="t('bookmarks', 'You can share bookmark folders with others. All folders shared with you are listed here.')">
 			<template #icon>
 				<ShareVariantIcon />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="$route.name === routes.DUPLICATED"
-			:title="t('bookmarks', 'No duplicated bookmarks')"
+			:name="t('bookmarks', 'No duplicated bookmarks')"
 			:description="t('bookmarks', 'One bookmark can be in multiple folders at once. Updating it will update all copies. All duplicated bookmarks are listed here for convenience.')">
 			<template #icon>
 				<VectorLinkIcon />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else
-			:title="t('bookmarks', 'No bookmarks here')"
+			:name="t('bookmarks', 'No bookmarks here')"
 			:description="t('bookmarks', 'Add bookmarks manually or import bookmarks from a HTML file.')">
 			<template #icon>
 				<StarShootingIcon />
@@ -110,6 +110,7 @@ export default {
 .bookmarkslist__emptyBookmarks {
 	width: 500px;
 	margin: 0 auto;
+	margin-top: 100px;
 }
 
 .import {
@@ -122,4 +123,9 @@ export default {
 button {
 	margin-bottom: 15px;
 }
+
+.empty-content {
+	display: flex;
+	height: 100%;
+}
 </style>

src/components/SidebarBookmark.vue

@@ -7,14 +7,14 @@
 <template>
 	<NcAppSidebar v-if="isActive"
 		class="sidebar"
-		:title="bookmark.title"
-		:title-editable="editingTitle"
-		:title-placeholder="t('bookmarks', 'Title')"
+		:name="bookmark.title"
+		:name-editable="editingTitle"
+		:name-placeholder="t('bookmarks', 'Title')"
 		:subtitle="addedDate"
 		:background="background"
 		@update:active="activeTab = $event"
-		@update:title="onEditTitleUpdate"
-		@submit-title="onEditTitleSubmit"
+		@update:name="onEditTitleUpdate"
+		@submit-name="onEditTitleSubmit"
 		@dismiss-editing="onEditTitleCancel"
 		@close="onClose">
 		<template v-if="!editingTitle" slot="secondary-actions">
@@ -81,7 +81,7 @@
 				</div>
 				<div class="details__line">
 					<TagIcon :aria-label="t('bookmarks', 'Tags')" :title="t('bookmarks', 'Tags')" />
-					<NcMultiselect class="tags"
+					<NcSelect class="tags"
 						:value="tags"
 						:auto-limit="false"
 						:limit="7"
@@ -124,7 +124,7 @@
 	</NcAppSidebar>
 </template>
 <script>
-import { NcAppSidebar, NcRichContenteditable, NcActionButton, NcActions, NcMultiselect, NcAppSidebarTab, NcButton } from '@nextcloud/vue'
+import { NcAppSidebar, NcRichContenteditable, NcActionButton, NcActions, NcSelect, NcAppSidebarTab, NcButton } from '@nextcloud/vue'
 import FileDocumentIcon from 'vue-material-design-icons/FileDocument.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import InformationVariantIcon from 'vue-material-design-icons/InformationVariant.vue'
@@ -145,7 +145,7 @@ const MAX_RELATIVE_DATE = 1000 * 60 * 60 * 24 * 7 // one week
 
 export default {
 	name: 'SidebarBookmark',
-	components: { NcAppSidebar, NcAppSidebarTab, NcMultiselect, NcActions, NcActionButton, NcRichContenteditable, FileDocumentIcon, FolderIcon, InformationVariantIcon, PencilIcon, ArrowRightIcon, TagIcon, OpenInNewIcon, CloseIcon, PencilBoxIcon, DownloadIcon, NcButton },
+	components: { NcAppSidebar, NcAppSidebarTab, NcSelect, NcActions, NcActionButton, NcRichContenteditable, FileDocumentIcon, FolderIcon, InformationVariantIcon, PencilIcon, ArrowRightIcon, TagIcon, OpenInNewIcon, CloseIcon, PencilBoxIcon, DownloadIcon, NcButton },
 	data() {
 		return {
 			title: '',

src/components/SidebarFolder.vue

@@ -7,7 +7,7 @@
 <template>
 	<NcAppSidebar v-if="isActive"
 		class="sidebar"
-		:title="folder.title"
+		:name="folder.title"
 		:active.sync="activeTab"
 		@close="onClose">
 		<NcAppSidebarTab id="folder-details"
@@ -30,7 +30,7 @@
 			</template>
 			<div class="participant-select">
 				<AccountIcon :class="{'share__avatar': true }" />
-				<NcMultiselect v-model="participant"
+				<NcSelect v-model="participant"
 					label="displayName"
 					track-by="user"
 					class="participant-select__selection"
@@ -126,7 +126,7 @@
 	</NcAppSidebar>
 </template>
 <script>
-import { NcAppSidebar, NcUserBubble, NcActionSeparator, NcActionCheckbox, NcActionButton, NcActions, NcMultiselect, NcAvatar, NcAppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcUserBubble, NcActionSeparator, NcActionCheckbox, NcActionButton, NcActions, NcSelect, NcAvatar, NcAppSidebarTab } from '@nextcloud/vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
@@ -145,7 +145,7 @@ import AccountIcon from 'vue-material-design-icons/Account.vue'
 
 export default {
 	name: 'SidebarFolder',
-	components: { NcAppSidebar, NcAppSidebarTab, NcAvatar, NcMultiselect, NcActionButton, NcActionCheckbox, NcActions, NcUserBubble, NcActionSeparator, EyeIcon, PencilIcon, ShareAllIcon, ShareVariantIcon, InformationVariantIcon, ClipboardIcon, RssIcon, PlusIcon, DeleteIcon, LinkIcon, AccountIcon },
+	components: { NcAppSidebar, NcAppSidebarTab, NcAvatar, NcSelect, NcActionButton, NcActionCheckbox, NcActions, NcUserBubble, NcActionSeparator, EyeIcon, PencilIcon, ShareAllIcon, ShareVariantIcon, InformationVariantIcon, ClipboardIcon, RssIcon, PlusIcon, DeleteIcon, LinkIcon, AccountIcon },
 	data() {
 		return {
 			participantSearchResults: [],