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

Use nextcloud/vue@6

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",

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,

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;
 			}
 		}
 

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;

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 {

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 {

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'