Merge pull request #2127 from nextcloud/dependencies/nextcloud-vue-6.0.0

Use nextcloud/vue@6

8 files changed, 45 insertions, 37 deletions

diff --git a/package-lock.json b/package-lock.json
index 0b298c2c..0ee737e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
 				"@nextcloud/logger": "^2.3.0",
 				"@nextcloud/moment": "^1.2.1",
 				"@nextcloud/router": "^2.0.0",
-				"@nextcloud/vue": "^6.0.0-beta.8",
+				"@nextcloud/vue": "^6.0.0",
 				"color-convert": "^2.0.1",
 				"debounce": "^1.2.1",
 				"ical.js": "^1.5.0",
@@ -2969,9 +2969,9 @@
 			}
 		},
 		"node_modules/@nextcloud/vue": {
-			"version": "6.0.0-beta.8",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.8.tgz",
-			"integrity": "sha512-Z/5jhZ8EvZ7nyjINEUhqU8Y8dJ3u8+SF+CMChw5S94/VrTO+zGr4uwoU5FK3IukqwQntfqjwVzPfbFqotJ/w8A==",
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0.tgz",
+			"integrity": "sha512-K77ndsRIkvHHWG3rqPhZO57KQxDWjsAi1yr5vxoiqNzkh2/sgvpsgYscXNl8yxKgpmDMQYyf1JBoReRtlypvig==",
 			"dependencies": {
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
@@ -18103,9 +18103,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "6.0.0-beta.8",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.8.tgz",
-			"integrity": "sha512-Z/5jhZ8EvZ7nyjINEUhqU8Y8dJ3u8+SF+CMChw5S94/VrTO+zGr4uwoU5FK3IukqwQntfqjwVzPfbFqotJ/w8A==",
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0.tgz",
+			"integrity": "sha512-K77ndsRIkvHHWG3rqPhZO57KQxDWjsAi1yr5vxoiqNzkh2/sgvpsgYscXNl8yxKgpmDMQYyf1JBoReRtlypvig==",
 			"requires": {
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
diff --git a/package.json b/package.json
index 5fe465c6..cdb68ecc 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
 		"@nextcloud/logger": "^2.3.0",
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^6.0.0-beta.8",
+		"@nextcloud/vue": "^6.0.0",
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.1",
 		"ical.js": "^1.5.0",
diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index 7346c61c..b183dff9 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -32,14 +32,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				size="large"
 				@close="showModal = false">
 				<div class="modal__content">
-					<NcEmptyContent v-if="loading" icon="icon-loading">
-						{{ t('tasks', 'Loading deleted calendars, tasks and events.') }}
+					<NcEmptyContent v-if="loading" :description="t('tasks', 'Loading deleted calendars, tasks and events.')">
+						<template #icon>
+							<NcLoadingIcon :size="64" />
+						</template>
 					</NcEmptyContent>
-					<NcEmptyContent v-else-if="!items.length">
+					<NcEmptyContent v-else-if="!items.length" :description="t('tasks', 'You do not have any deleted calendars, tasks or events.')">
 						<template #icon>
 							<Delete :size="64" />
 						</template>
-						{{ t('tasks', 'You do not have any deleted calendars, tasks or events.') }}
 					</NcEmptyContent>
 					<template v-else>
 						<h2>{{ t('tasks', 'Trash bin') }}</h2>
@@ -118,6 +119,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -132,6 +134,7 @@ export default {
 		NcAppNavigationItem,
 		Delete,
 		NcEmptyContent,
+		NcLoadingIcon,
 		NcModal,
 		Moment,
 		NcActions,
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
index 711c328d..e49135f0 100644
--- a/src/components/AppSidebar/CalendarPickerItem.vue
+++ b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -121,6 +121,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 
 			.multiselect__single {
 				padding: 0;
@@ -133,6 +134,7 @@ export default {
 				position: absolute !important;
 				font-weight: bold;
 				font-size: var(--default-font-size);
+				line-height: 44px;
 			}
 		}
 
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
index 35847876..6f3633a1 100644
--- a/src/components/AppSidebar/MultiselectItem.vue
+++ b/src/components/AppSidebar/MultiselectItem.vue
@@ -131,6 +131,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 
 			.multiselect__single {
 				padding: 0;
diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
index 18251fa9..0b190fe8 100644
--- a/src/components/AppSidebar/TagsItem.vue
+++ b/src/components/AppSidebar/TagsItem.vue
@@ -148,6 +148,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 			flex-grow: 1;
 
 			.multiselect__single {
@@ -166,6 +167,7 @@ export default {
 				position: absolute !important;
 				font-weight: bold;
 				font-size: var(--default-font-size);
+				line-height: 44px;
 			}
 
 			.multiselect__tags-wrap {
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index 5c22c0d7..f5a5ad36 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -63,19 +63,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 		<div v-else id="modal-inner">
-			<NcEmptyContent v-if="creating" key="creating">
-				{{ t('tasks', 'Creating the new task…') }}
+			<NcEmptyContent v-if="creating" key="creating" :description="t('tasks', 'Creating the new task…')">
 				<template #icon>
 					<NcLoadingIcon />
 				</template>
 			</NcEmptyContent>
-			<NcEmptyContent v-else-if="created" key="created">
-				{{ t('tasks', '"{task}" was added to "{calendar}"', { task: pendingTitle, calendar: pendingCalendar.displayName }, undefined, { sanitize: false, escape: false }) }}
+			<NcEmptyContent v-else-if="created" key="created" :description="createdMessage">
 				<template #icon>
 					<Check />
 				</template>
-				<template #desc>
-&nbsp;
+				<template #action>
 					<NcButton @click="close">
 						{{ t('tasks', 'Close') }}
 					</NcButton>
@@ -146,6 +143,9 @@ export default {
 			writableCalendars: 'getSortedWritableCalendars',
 			defaultCalendar: 'getDefaultCalendar',
 		}),
+		createdMessage() {
+			return t('tasks', '"{task}" was added to "{calendar}"', { task: this.pendingTitle, calendar: this.pendingCalendar.displayName }, undefined, { sanitize: false, escape: false })
+		},
 	},
 
 	beforeMount() {
@@ -219,9 +219,8 @@ export default {
 		.empty-content {
 			margin: 10vh 0;
 
-			::v-deep p {
+			:deep(.empty-content__action) {
 				display: flex;
-				justify-content: flex-end;
 			}
 		}
 	}
@@ -230,9 +229,8 @@ export default {
 		border-bottom: none;
 		margin-bottom: 3px;
 
-		:deep(.multiselect) {
-			border: 1px solid var(--color-border-dark);
-			border-radius: var(--border-radius);
+		:deep(.multiselect .multiselect__tags) {
+			border: 2px solid var(--color-border-dark);
 		}
 	}
 
@@ -241,15 +239,14 @@ export default {
 
 		.material-design-icon {
 			position: absolute;
-			top: 12px;
-			left: 12px;
+			top: 14px;
+			left: 14px;
 		}
 
 		input,
 		textarea {
 			width: 100%;
-			font-size: var(--default-font-size);
-			padding-left: 44px;
+			padding-left: 44px !important;
 		}
 
 		input {
@@ -264,10 +261,10 @@ export default {
 		}
 	}
 
-	.modal-buttons {
-		display: flex;
-		justify-content: flex-end;
-	}
+.modal-buttons {
+	display: flex;
+	justify-content: flex-end;
+}
 
 	:deep(.calendar-picker-option__label),
 	:deep(.property__item .multiselect__tags) input.multiselect__input {
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 0f3809f4..20e941e8 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -192,9 +192,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					@set-tags="updateTags" />
 			</div>
 		</NcAppSidebarTab>
-		<NcEmptyContent v-else
-			:icon="taskStatusIcon">
-			{{ taskStatusLabel }}
+		<NcEmptyContent v-else :description="taskStatusLabel">
+			<template #icon>
+				<NcLoadingIcon v-if="loading" />
+				<Magnify v-else />
+			</template>
 		</NcEmptyContent>
 		<NcAppSidebarTab v-if="task && (!readOnly || task.note)"
 			id="app-sidebar-tab-notes"
@@ -249,6 +251,7 @@ import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { generateUrl } from '@nextcloud/router'
 
 import Calendar from 'vue-material-design-icons/Calendar.vue'
@@ -257,6 +260,7 @@ import CalendarStart from 'vue-material-design-icons/CalendarStart.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Percent from 'vue-material-design-icons/Percent.vue'
 import Pin from 'vue-material-design-icons/Pin.vue'
@@ -273,6 +277,7 @@ export default {
 		NcAppSidebarTab,
 		NcActionButton,
 		NcActionLink,
+		NcLoadingIcon,
 		CheckboxItem,
 		DatetimePickerItem,
 		Calendar,
@@ -281,6 +286,7 @@ export default {
 		Delete,
 		Download,
 		InformationOutline,
+		Magnify,
 		Pencil,
 		Percent,
 		Pin,
@@ -501,9 +507,6 @@ export default {
 		taskStatusLabel() {
 			return this.loading ? t('tasks', 'Loading task from server.') : t('tasks', 'Task not found!')
 		},
-		taskStatusIcon() {
-			return this.loading ? 'icon-loading' : 'icon-search'
-		},
 		/**
 		 * Whether we treat the task as read-only.
 		 * We also treat tasks in shared calendars with an access class other than 'PUBLIC'