Merge pull request #4491 from nextcloud/dependabot/npm_and_yarn/nextcloud/vue-7.0.0-beta.1v4.0.0-alpha1

Bump @nextcloud/vue from 6.0.0-beta.7 to 7.0.0-beta.2

17 files changed, 246 insertions, 267 deletions

diff --git a/css/app-navigation.scss b/css/app-navigation.scss
index ede0733c..839c9124 100644
--- a/css/app-navigation.scss
+++ b/css/app-navigation.scss
@@ -181,6 +181,7 @@
 
 		.multiselect {
 			width: 100%;
+		  	border-radius: var(--border-radius-large);
 
 			&__content-wrapper {
 				z-index: 200 !important;
diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
index b3243085..c9082336 100644
--- a/css/app-sidebar.scss
+++ b/css/app-sidebar.scss
@@ -22,7 +22,7 @@
  */
 
 .app-sidebar,
-.event-popover .popover__inner {
+.event-popover .event-popover__inner {
 	.app-sidebar-header__figure {
 		height: unset !important;
 	}
@@ -88,17 +88,15 @@
 		height: auto !important;
 
 		&__buttons {
-			padding-top: 14px;
 			position: fixed;
-			bottom: 0px;
+			bottom: var(--body-container-margin);;
 			z-index: 2;
 			width: calc(27vw - 11px);
 			min-width: 300px - 11px;
 			max-width: 500px - 11px;
-			right: 10px;
 			background-color: var(--color-main-background);
-			padding-left: 22px;
-			padding-right: 22px;
+			border-radius: 0 0 var(--body-container-radius) 0;
+			padding: 0 8px 6px 0;
 
 			button {
 				width: 100%;
@@ -601,7 +599,7 @@
 			}
 
 			textarea {
-				max-height: calc(100vh - 600px);
+				max-height: calc(100vh - 500px);
 				vertical-align: top;
 				margin: 0;
 			}
@@ -639,6 +637,13 @@
 		}
 	}
 
+	.property-select,
+	.property-select-multiple {
+		.multiselect {
+			min-width: unset !important;
+		}
+	}
+
 	.property-color {
 
 		&__input {
@@ -725,10 +730,10 @@
 }
 
 .event-popover {
-	.popover__inner {
+	.event-popover__inner {
 		text-align: left;
-		max-width: 450px;
-		width: 450px;
+		max-width: 480px;
+		width: 480px;
 		padding: 5px 8px;
 
 		.empty-content {
@@ -742,17 +747,12 @@
 			margin-bottom: 5px;
 			background-color: var(--color-background-dark);
 			// There is probably a more elegant solution for this
-			margin-top: -5px;
-			margin-left: -8px;
-			width: 466px;
+			margin: -5px 0 5px -8px;
+			width: 496px;
 			border-top-left-radius: var(--border-radius);
 			border-top-right-radius: var(--border-radius);
 		}
 
-		.popover__inner {
-			max-width: unset !important;
-		}
-
 		.property-title-time-picker {
 			margin-bottom: 12px;
 		}
diff --git a/package-lock.json b/package-lock.json
index fba43ad4..94412347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@nextcloud/logger": "^2.3.0",
         "@nextcloud/moment": "^1.2.1",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue": "^6.0.0-beta.7",
+        "@nextcloud/vue": "^7.0.0-beta.3",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "autosize": "^5.0.1",
         "closest-css-color": "^1.0.0",
@@ -1600,7 +1600,7 @@
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
       "hasInstallScript": true
     },
     "node_modules/@babel/polyfill/node_modules/regenerator-runtime": {
@@ -2726,6 +2726,7 @@
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
       "integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3028,9 +3029,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "6.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.7.tgz",
-      "integrity": "sha512-wRXnTSMm55CElCu5W0XUtMf32BmtMG4aiFAYDY9PpT19pru2blLXu0LzjVPNkRZ5bFISpp83H9YVYrNFbbkwBA==",
+      "version": "7.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.3.tgz",
+      "integrity": "sha512-lnEVzPPt4eGLHrSwsft5oBg7pEqVZA2DteWR/Bq02+jptqE7at6W8sV7PMBR0N5VRI2yNsm7sMIJLsHXvxmpfg==",
       "dependencies": {
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
@@ -3263,11 +3264,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/initial-state": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-2.0.0.tgz",
-      "integrity": "sha512-xmNP30v/RnkJ2z1HcuEo7YfcLJJa+FdWTwgNldXHOlMeMbl/ESpsGkWL2sULrhYurz64L0JpfwEdi/cHcmyuZQ=="
-    },
     "node_modules/@nextcloud/vue/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -4880,7 +4876,7 @@
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
       "dev": true,
       "hasInstallScript": true
     },
@@ -8188,9 +8184,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -14419,6 +14415,7 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
       "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
       "dev": true,
       "dependencies": {
         "atob": "^2.1.2",
@@ -14451,6 +14448,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
       "dev": true
     },
     "node_modules/spdx-correct": {
@@ -19103,9 +19101,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "6.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.7.tgz",
-      "integrity": "sha512-wRXnTSMm55CElCu5W0XUtMf32BmtMG4aiFAYDY9PpT19pru2blLXu0LzjVPNkRZ5bFISpp83H9YVYrNFbbkwBA==",
+      "version": "7.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.3.tgz",
+      "integrity": "sha512-lnEVzPPt4eGLHrSwsft5oBg7pEqVZA2DteWR/Bq02+jptqE7at6W8sV7PMBR0N5VRI2yNsm7sMIJLsHXvxmpfg==",
       "requires": {
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
@@ -19146,11 +19144,6 @@
             "regenerator-runtime": "^0.13.4"
           }
         },
-        "@nextcloud/initial-state": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-2.0.0.tgz",
-          "integrity": "sha512-xmNP30v/RnkJ2z1HcuEo7YfcLJJa+FdWTwgNldXHOlMeMbl/ESpsGkWL2sULrhYurz64L0JpfwEdi/cHcmyuZQ=="
-        },
         "ansi-regex": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -23243,9 +23236,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
       "peer": true,
       "requires": {
diff --git a/package.json b/package.json
index 80645e5d..f2dbfa9f 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@nextcloud/logger": "^2.3.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^6.0.0-beta.7",
+    "@nextcloud/vue": "^7.0.0-beta.3",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "autosize": "^5.0.1",
     "closest-css-color": "^1.0.0",
diff --git a/src/components/AppNavigation/AppointmentConfigList.vue b/src/components/AppNavigation/AppointmentConfigList.vue
index d9f6fe98..ea7d7f32 100644
--- a/src/components/AppNavigation/AppointmentConfigList.vue
+++ b/src/components/AppNavigation/AppointmentConfigList.vue
@@ -33,7 +33,9 @@
 				#actions>
 				<ActionButton :close-after-click="true"
 					@click="showModalForNewConfig = true">
-					<PlusIcon slot="icon" :size="20" decorative />
+					<template #icon>
+						<PlusIcon :size="20" decorative />
+					</template>
 					{{ t('calendar', 'Add new') }}
 				</ActionButton>
 			</template>
diff --git a/src/components/AppNavigation/CalendarList/Trashbin.vue b/src/components/AppNavigation/CalendarList/Trashbin.vue
index c0f91f2b..55539ba6 100644
--- a/src/components/AppNavigation/CalendarList/Trashbin.vue
+++ b/src/components/AppNavigation/CalendarList/Trashbin.vue
@@ -34,19 +34,14 @@
 					<h2>{{ t('calendar', 'Trash bin') }}</h2>
 					<EmptyContent v-if="loading"
 						icon="icon-loading"
-						class="modal__content__loading">
-						<template #desc>
-							{{ t('calendar', 'Loading deleted elements.') }}
-						</template>
-					</EmptyContent>
+						class="modal__content__loading"
+						:description="t('calendar', 'Loading deleted elements.')" />
 					<EmptyContent v-else-if="!items.length"
-						class="modal__content__empty">
+						class="modal__content__empty"
+						:description="t('calendar', 'You do not have any deleted elements.')">
 						<template #icon>
 							<Delete :size="20" decorative />
 						</template>
-						<template #desc>
-							{{ t('calendar', 'You do not have any deleted elements.') }}
-						</template>
 					</EmptyContent>
 					<template v-else>
 						<table>
@@ -68,7 +63,9 @@
 										</div>
 
 										<div>
-											<div class="item-name">{{ item.name }}</div>
+											<div class="item-name">
+												{{ item.name }}
+											</div>
 											<div v-if="item.subline" class="item-subline">
 												{{ item.subline }}
 											</div>
diff --git a/src/components/AppointmentConfigModal/Confirmation.vue b/src/components/AppointmentConfigModal/Confirmation.vue
index 75eecf81..6f4037eb 100644
--- a/src/components/AppointmentConfigModal/Confirmation.vue
+++ b/src/components/AppointmentConfigModal/Confirmation.vue
@@ -22,10 +22,9 @@
 
 <template>
 	<div class="app-config-modal-confirmation">
-		<EmptyContent>
-			<CheckIcon slot="icon" decorative />
-			<template #desc>
-				{{ title }}
+		<EmptyContent :title="title">
+			<template #icon>
+				<CheckIcon />
 			</template>
 		</EmptyContent>
 		<div class="app-config-modal-confirmation__buttons">
diff --git a/src/components/Appointments/AppointmentBookingConfirmation.vue b/src/components/Appointments/AppointmentBookingConfirmation.vue
index 6da96b65..776e1872 100644
--- a/src/components/Appointments/AppointmentBookingConfirmation.vue
+++ b/src/components/Appointments/AppointmentBookingConfirmation.vue
@@ -22,16 +22,10 @@
 
 <template>
 	<div class="appointment-booking-confirmation">
-		<EmptyContent title="foobar">
+		<EmptyContent :title="$t('calendar', 'Please confirm your reservation')" :description="$t('calendar', 'We sent you an email with details. Please confirm your appointment using the link in the email. You can close this page now.')">
 			<template #icon>
 				<CheckIcon decorative />
 			</template>
-			{{ $t('calendar', 'Please confirm your reservation') }}
-			<template #desc>
-				<div class="appointment-booking-confirmation__desc">
-					{{ $t('calendar', 'We sent you an email with details. Please confirm your appointment using the link in the email. You can close this page now.') }}
-				</div>
-			</template>
 		</EmptyContent>
 	</div>
 </template>
diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index 5f4030f0..1ed8fbe3 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -54,29 +54,29 @@
 					:title="endTimezone"
 					:class="{ 'highlighted-timezone-icon': highlightStartTimezone }"
 					:size="20" />
-				<div class="property-title-time-picker-read-only-wrapper">
-					<div class="property-title-time-picker-read-only-wrapper__label">
-						{{ formattedEnd }}
-					</div>
-					<IconTimezone v-if="!isAllDay"
-						:title="endTimezone"
-						:class="{ 'highlighted-timezone-icon': highlightStartTimezone }"
-						:size="20" />
+			</div>
+			<div class="property-title-time-picker-read-only-wrapper">
+				<div class="property-title-time-picker-read-only-wrapper__label">
+					{{ formattedEnd }}
 				</div>
+				<IconTimezone v-if="!isAllDay"
+					:title="endTimezone"
+					:class="{ 'highlighted-timezone-icon': highlightStartTimezone }"
+					:size="20" />
 			</div>
+		</div>
 
-			<div v-if="!isReadOnly" class="property-title-time-picker__all-day">
-				<input id="allDay"
-					:checked="isAllDay"
-					type="checkbox"
-					class="checkbox"
-					:disabled="!canModifyAllDay"
-					@change="toggleAllDay">
-				<label v-tooltip="allDayTooltip"
-					for="allDay">
-					{{ $t('calendar', 'All day') }}
-				</label>
-			</div>
+		<div v-if="!isReadOnly" class="property-title-time-picker__all-day">
+			<input id="allDay"
+				:checked="isAllDay"
+				type="checkbox"
+				class="checkbox"
+				:disabled="!canModifyAllDay"
+				@change="toggleAllDay">
+			<label v-tooltip="allDayTooltip"
+				for="allDay">
+				{{ $t('calendar', 'All day') }}
+			</label>
 		</div>
 	</div>
 </template>
diff --git a/src/components/EmptyCalendar.vue b/src/components/EmptyCalendar.vue
index 8d31d3dc..41dde856 100644
--- a/src/components/EmptyCalendar.vue
+++ b/src/components/EmptyCalendar.vue
@@ -21,14 +21,11 @@
   -->
 
 <template>
-	<EmptyContent>
-		{{ $t('calendar', 'Public calendar does not exist') }}
+	<EmptyContent :title="$t('calendar', 'Public calendar does not exist')"
+		:description="$t('calendar', 'Maybe the share was deleted or has expired?' )">
 		<template #icon>
 			<CalendarBlank :size="20" decorative />
 		</template>
-		<template #desc>
-			{{ $t('calendar', 'Maybe the share was deleted or has expired?' ) }}
-		</template>
 	</EmptyContent>
 </template>
 
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 8978fc07..c4031c74 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -53,7 +53,7 @@
 						:size="20" />
 				</template>
 			</Button>
-			<Popover :open.sync="showTimezonePopover"
+			<Popover :shown.sync="showTimezonePopover"
 				open-class="timezone-popover-wrapper">
 				<div class="timezone-popover-wrapper__title">
 					<strong>
@@ -417,10 +417,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-::v-deep .button-vue__icon {
-		margin-top: 16px;
-}
 .highlighted-timezone-icon {
-opacity: .7;
+	opacity: .7;
+}
+::v-deep .mx-icon-calendar {
+	right: 0;
 }
 </style>
diff --git a/src/fullcalendar/localization/momentPlugin.js b/src/fullcalendar/localization/momentPlugin.js
index c0db2052..5bde5999 100644
--- a/src/fullcalendar/localization/momentPlugin.js
+++ b/src/fullcalendar/localization/momentPlugin.js
@@ -38,6 +38,7 @@ const momentFactory = ($store, { array }) => {
 /**
  * Construct a cmdFormatter that can be used to construct a FullCalendar plugin
  *
+ * @param $store
  * @return {function(string, string):string} cmdFormatter function
  */
 const cmdFormatterFactory = ($store) => (cmdStr, arg) => {
diff --git a/src/fullcalendar/rendering/noEventsDidMount.js b/src/fullcalendar/rendering/noEventsDidMount.js
index 6dc17d0b..7314b20b 100644
--- a/src/fullcalendar/rendering/noEventsDidMount.js
+++ b/src/fullcalendar/rendering/noEventsDidMount.js
@@ -21,6 +21,7 @@
  */
 import Vue from 'vue'
 import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import CalendarIcon from 'vue-material-design-icons/CalendarBlank'
 import { translate as t } from '@nextcloud/l10n'
 
 /**
@@ -33,11 +34,11 @@ export default function({ el }) {
 	const EmptyContentClass = Vue.extend(EmptyContent)
 	const instance = new EmptyContentClass({
 		propsData: {
-			icon: 'icon-calendar-dark',
+			title: t('calendar', 'No events'),
+			description: t('calendar', 'Create a new event or change the visible time-range'),
 		},
 	})
-	instance.$slots.default = [t('calendar', 'No events')]
-	instance.$slots.desc = [t('calendar', 'Create a new event or change the visible time-range')]
+	instance.$slots.icon = [instance.$createElement(CalendarIcon)]
 	instance.$mount()
 	el.appendChild(instance.$el)
 }
diff --git a/src/views/Appointments/Overview.vue b/src/views/Appointments/Overview.vue
index 5c808e6f..da4b8b25 100644
--- a/src/views/Appointments/Overview.vue
+++ b/src/views/Appointments/Overview.vue
@@ -48,13 +48,10 @@
 				</div>
 			</template>
 			<div v-else>
-				<EmptyContent>
+				<EmptyContent :title="$t('calendar', 'No public appointments found for {name}', { name: userInfo.displayName })">
 					<template #icon>
 						<CalendarBlankIcon decorative />
 					</template>
-					<template #desc>
-						{{ $t('calendar', 'No public appointments found for {name}', { name: userInfo.displayName }) }}
-					</template>
 				</EmptyContent>
 			</div>
 		</div>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c1c3a631..a5e85833 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -27,13 +27,11 @@
 		<template #default="{ item }">
 			<EmptyContent v-if="item.isEmptyItem"
 				id="calendar-widget-empty-content"
-				class="half-screen">
+				class="half-screen"
+				:title="t('calendar', 'No more events today')">
 				<template #icon>
 					<IconCheck :size="67" />
 				</template>
-				<template #desc>
-					{{ t('calendar', 'No more events today') }}
-				</template>
 			</EmptyContent>
 			<DashboardWidgetItem v-else
 				:main-text="item.mainText"
@@ -52,17 +50,17 @@
 			</DashboardWidgetItem>
 		</template>
 		<template #empty-content>
-			<EmptyContent id="calendar-widget-empty-content">
+			<EmptyContent id="calendar-widget-empty-content"
+				:title="t('calendar', 'No upcoming events')">
 				<template #icon>
 					<EmptyCalendar />
 				</template>
-				<template #desc>
-					{{ t('calendar', 'No upcoming events') }}
-					<div class="empty-label">
-						<a class="button" :href="clickStartNew"> {{ t('calendar', 'Create a new event') }} </a>
-					</div>
-				</template>
 			</EmptyContent>
+			<div class="empty-label">
+				<NcButton type="secondary" :href="clickStartNew">
+					{{ t('calendar', 'Create a new event') }}
+				</NcButton>
+			</div>
 		</template>
 	</DashboardWidget>
 </template>
@@ -74,6 +72,7 @@ import EmptyCalendar from 'vue-material-design-icons/CalendarBlankOutline'
 import IconCheck from 'vue-material-design-icons/Check'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import { imagePath, generateUrl } from '@nextcloud/router'
 import { initializeClientForUserView } from '../services/caldavService'
 import { dateFactory } from '../utils/date'
@@ -88,6 +87,7 @@ export default {
 	components: {
 	  DashboardWidget,
 		DashboardWidgetItem,
+	  NcButton,
 		EmptyContent,
 	  EmptyCalendar,
 	  IconCheck,
@@ -320,10 +320,12 @@ export default {
 			margin-bottom: 2vh;
 		}
 
-		.empty-label {
-			margin-top: 5vh;
-			margin-right: 5px;
-		}
+	}
+
+	.empty-label {
+		display: flex;
+		justify-content: center;
+		margin-top: 5vh;
 	}
 }
 </style>
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 2232cf99..52d0e553 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -39,14 +39,10 @@
 		</template>
 
 		<template v-else-if="isError">
-			<EmptyContent>
-				{{ $t('calendar', 'Event does not exist') }}
+			<EmptyContent :title="$t('calendar', 'Event does not exist')" :description="error">
 				<template #icon>
 					<CalendarBlank :size="20" decorative />
 				</template>
-				<template #desc>
-					{{ error }}
-				</template>
 			</EmptyContent>
 		</template>
 
diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
index 1fac95c2..fe55b393 100644
--- a/src/views/EditSimple.vue
+++ b/src/views/EditSimple.vue
@@ -1,5 +1,6 @@
 <!--
   - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
+  -
   - @author Georg Ehrke <oc.list@georgehrke.com>
   - @author Richard Steinmetz <richard@steinmetz.cloud>
   -
@@ -22,143 +23,141 @@
 
 <template>
 	<Popover ref="popover"
-		:open="isVisible"
+		:shown="isVisible"
 		:auto-hide="false"
 		:placement="placement"
-		:boundaries-element="boundaryElement"
-		open-class="event-popover"
-		trigger="manual">
-		<template v-if="isLoading">
-			<PopoverLoadingIndicator />
-		</template>
+		:boundary="boundaryElement"
+		popover-base-class="event-popover"
+		:triggers="[]">
+		<div class="event-popover__inner">
+			<template v-if="isLoading">
+				<PopoverLoadingIndicator />
+			</template>
 
-		<template v-else-if="isError">
-			<div class="event-popover__top-right-actions">
-				<Actions>
-					<ActionButton @click="cancel">
-						<template #icon>
-							<Close :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Close') }}
-					</ActionButton>
-				</Actions>
-			</div>
+			<template v-else-if="isError">
+				<div class="event-popover__top-right-actions">
+					<Actions>
+						<ActionButton @click="cancel">
+							<template #icon>
+								<Close :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Close') }}
+						</ActionButton>
+					</Actions>
+				</div>
 
-			<EmptyContent>
-				{{ $t('calendar', 'Event does not exist') }}
-				<template #icon>
-					<CalendarBlank :size="20" decorative />
-				</template>
-				<template #desc>
-					{{ error }}
-				</template>
-			</EmptyContent>
-		</template>
+				<EmptyContent :title="$t('calendar', 'Event does not exist')" :description="error">
+					<template #icon>
+						<CalendarBlank :size="20" decorative />
+					</template>
+				</EmptyContent>
+			</template>
 
-		<template v-else>
-			<div class="event-popover__top-right-actions">
-				<Actions v-if="isReadOnly">
-					<ActionButton @click="showMore">
-						<template #icon>
-							<ArrowExpand :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Show more details') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="!isLoading && !isError && !isNew" :force-menu="true">
-					<ActionLink v-if="!hideEventExport && hasDownloadURL"
-						:href="downloadURL">
-						<template #icon>
-							<Download :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Export') }}
-					</ActionLink>
-					<ActionButton v-if="!canCreateRecurrenceException && !isReadOnly" @click="duplicateEvent()">
-						<template #icon>
-							<ContentDuplicate :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Duplicate') }}
-					</ActionButton>
-					<ActionButton v-if="canDelete && !canCreateRecurrenceException" @click="deleteAndLeave(false)">
-						<template #icon>
-							<Delete :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Delete') }}
-					</ActionButton>
-					<ActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(false)">
-						<template #icon>
-							<Delete :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Delete this occurrence') }}
-					</ActionButton>
-					<ActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(true)">
-						<template #icon>
-							<Delete :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Delete this and all future') }}
-					</ActionButton>
-				</Actions>
-				<Actions>
-					<ActionButton @click="cancel">
-						<template #icon>
-							<Close :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Close') }}
-					</ActionButton>
-				</Actions>
-			</div>
+			<template v-else>
+				<div class="event-popover__top-right-actions">
+					<Actions v-if="isReadOnly">
+						<ActionButton @click="showMore">
+							<template #icon>
+								<ArrowExpand :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Show more details') }}
+						</ActionButton>
+					</Actions>
+					<Actions v-if="!isLoading && !isError && !isNew" :force-menu="true">
+						<ActionLink v-if="!hideEventExport && hasDownloadURL"
+							:href="downloadURL">
+							<template #icon>
+								<Download :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Export') }}
+						</ActionLink>
+						<ActionButton v-if="!canCreateRecurrenceException && !isReadOnly" @click="duplicateEvent()">
+							<template #icon>
+								<ContentDuplicate :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Duplicate') }}
+						</ActionButton>
+						<ActionButton v-if="canDelete && !canCreateRecurrenceException" @click="deleteAndLeave(false)">
+							<template #icon>
+								<Delete :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Delete') }}
+						</ActionButton>
+						<ActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(false)">
+							<template #icon>
+								<Delete :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Delete this occurrence') }}
+						</ActionButton>
+						<ActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(true)">
+							<template #icon>
+								<Delete :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Delete this and all future') }}
+						</ActionButton>
+					</Actions>
+					<Actions>
+						<ActionButton @click="cancel">
+							<template #icon>
+								<Close :size="20" decorative />
+							</template>
+							{{ $t('calendar', 'Close') }}
+						</ActionButton>
+					</Actions>
+				</div>
 
-			<IllustrationHeader :color="illustrationColor"
-				:illustration-url="backgroundImage" />
+				<IllustrationHeader :color="illustrationColor"
+					:illustration-url="backgroundImage" />
 
-			<PropertyTitle :value="title"
-				:is-read-only="isReadOnly"
-				@update:value="updateTitle" />
+				<PropertyTitle :value="title"
+					:is-read-only="isReadOnly"
+					@update:value="updateTitle" />
 
-			<PropertyCalendarPicker v-if="showCalendarPicker"
-				:calendars="calendars"
-				:calendar="selectedCalendar"
-				:is-read-only="isReadOnly"
-				@select-calendar="changeCalendar" />
+				<PropertyCalendarPicker v-if="showCalendarPicker"
+					:calendars="calendars"
+					:calendar="selectedCalendar"
+					:is-read-only="isReadOnly"
+					@select-calendar="changeCalendar" />
 
-			<PropertyTitleTimePicker :start-date="startDate"
-				:start-timezone="startTimezone"
-				:end-date="endDate"
-				:end-timezone="endTimezone"
-				:is-all-day="isAllDay"
-				:is-read-only="isReadOnly"
-				:can-modify-all-day="canModifyAllDay"
-				:user-timezone="currentUserTimezone"
-				@update-start-date="updateStartDate"
-				@update-start-timezone="updateStartTimezone"
-				@update-end-date="updateEndDate"
-				@update-end-timezone="updateEndTimezone"
-				@toggle-all-day="toggleAllDay" />
+				<PropertyTitleTimePicker :start-date="startDate"
+					:start-timezone="startTimezone"
+					:end-date="endDate"
+					:end-timezone="endTimezone"
+					:is-all-day="isAllDay"
+					:is-read-only="isReadOnly"
+					:can-modify-all-day="canModifyAllDay"
+					:user-timezone="currentUserTimezone"
+					@update-start-date="updateStartDate"
+					@update-start-timezone="updateStartTimezone"
+					@update-end-date="updateEndDate"
+					@update-end-timezone="updateEndTimezone"
+					@toggle-all-day="toggleAllDay" />
 
-			<PropertyText :is-read-only="isReadOnly"
-				:prop-model="rfcProps.location"
-				:value="location"
-				@update:value="updateLocation" />
-			<PropertyText :is-read-only="isReadOnly"
-				:prop-model="rfcProps.description"
-				:value="description"
-				@update:value="updateDescription" />
+				<PropertyText :is-read-only="isReadOnly"
+					:prop-model="rfcProps.location"
+					:value="location"
+					@update:value="updateLocation" />
+				<PropertyText :is-read-only="isReadOnly"
+					:prop-model="rfcProps.description"
+					:value="description"
+					@update:value="updateDescription" />
 
-			<InvitationResponseButtons v-if="isViewedByAttendee && userAsAttendee && !isReadOnly"
-				:attendee="userAsAttendee"
-				:calendar-id="calendarId"
-				@close="closeEditorAndSkipAction" />
+				<InvitationResponseButtons v-if="isViewedByAttendee && userAsAttendee && !isReadOnly"
+					:attendee="userAsAttendee"
+					:calendar-id="calendarId"
+					@close="closeEditorAndSkipAction" />
 
-			<SaveButtons v-if="!isReadOnly"
-				class="event-popover__buttons"
-				:can-create-recurrence-exception="canCreateRecurrenceException"
-				:is-new="isNew"
-				:force-this-and-all-future="forceThisAndAllFuture"
-				:show-more-button="true"
-				@save-this-only="saveAndLeave(false)"
-				@save-this-and-all-future="saveAndLeave(true)"
-				@show-more="showMore" />
-		</template>
+				<SaveButtons v-if="!isReadOnly"
+					class="event-popover__buttons"
+					:can-create-recurrence-exception="canCreateRecurrenceException"
+					:is-new="isNew"
+					:force-this-and-all-future="forceThisAndAllFuture"
+					:show-more-button="true"
+					@save-this-only="saveAndLeave(false)"
+					@save-this-and-all-future="saveAndLeave(true)"
+					@show-more="showMore" />
+			</template>
+		</div>
 	</Popover>
 </template>
 <script>
@@ -170,13 +169,17 @@ import Popover from '@nextcloud/vue/dist/Components/NcPopover'
 import EditorMixin from '../mixins/EditorMixin'
 import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
 import PropertyTitle from '../components/Editor/Properties/PropertyTitle.vue'
-import PropertyTitleTimePicker from '../components/Editor/Properties/PropertyTitleTimePicker.vue'
-import PropertyCalendarPicker from '../components/Editor/Properties/PropertyCalendarPicker.vue'
+import PropertyTitleTimePicker
+	from '../components/Editor/Properties/PropertyTitleTimePicker.vue'
+import PropertyCalendarPicker
+	from '../components/Editor/Properties/PropertyCalendarPicker.vue'
 import PropertyText from '../components/Editor/Properties/PropertyText.vue'
 import SaveButtons from '../components/Editor/SaveButtons.vue'
-import PopoverLoadingIndicator from '../components/Popover/PopoverLoadingIndicator.vue'
+import PopoverLoadingIndicator
+	from '../components/Popover/PopoverLoadingIndicator.vue'
 import { getPrefixedRoute } from '../utils/router.js'
-import InvitationResponseButtons from '../components/Editor/InvitationResponseButtons'
+import InvitationResponseButtons
+	from '../components/Editor/InvitationResponseButtons'
 
 import ArrowExpand from 'vue-material-design-icons/ArrowExpand.vue'
 import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
@@ -222,18 +225,13 @@ export default {
 			placement: 'auto',
 			hasLocation: false,
 			hasDescription: false,
-			boundaryElement: document.querySelector('#app-content > .fc'),
+			boundaryElement: document.querySelector('#app-content-vue > .fc'),
 			isVisible: true,
 		}
 	},
 	watch: {
 		$route(to, from) {
-			// Update the popover position by updating its reference element.
-			const isNew = to.name === 'NewPopoverView'
-			const popover = this.$refs.popover.$children[0]
-			popover.$_updatePopper(() => {
-				popover.popperInstance.reference = this.getDomElementForPopover(isNew, to)
-			})
+			this.repositionPopover()
 
 			// Hide popover when changing the view until the user selects a slot again
 			this.isVisible = to.params.view === from.params.view
@@ -255,15 +253,9 @@ export default {
 		window.addEventListener('keydown', this.keyboardSaveEvent)
 		window.addEventListener('keydown', this.keyboardDeleteEvent)
 		window.addEventListener('keydown', this.keyboardDuplicateEvent)
-		this.$nextTick(() => {
-			const isNew = this.$route.name === 'NewPopoverView'
 
-			// V3 of V-Tooltip will have a prop to define the reference element for popper.js
-			// For now we have to stick to this ugly hack
-			// https://github.com/Akryum/v-tooltip/issues/60
-			this.$refs.popover
-				.$children[0]
-				.$refs.trigger = this.getDomElementForPopover(isNew, this.$route)
+		this.$nextTick(() => {
+			this.repositionPopover()
 		})
 	},
 	beforeDestroy() {
@@ -306,7 +298,7 @@ export default {
 			}
 
 			if (!matchingDomObject) {
-				matchingDomObject = document.querySelector('#app-navigation')
+				matchingDomObject = document.querySelector('#app-navigation-vue')
 				this.placement = 'right'
 			}
 
@@ -315,8 +307,15 @@ export default {
 				this.placement = 'auto'
 			}
 
+			console.info('getDomElementForPopover', matchingDomObject, this.placement)
 			return matchingDomObject
 		},
+		repositionPopover() {
+		  const isNew = this.$route.name === 'NewPopoverView'
+		  this.$refs.popover.$children[0].$refs.reference = this.getDomElementForPopover(isNew, this.$route)
+		  this.$refs.popover.$children[0].$refs.popper.dispose()
+		  this.$refs.popover.$children[0].$refs.popper.init()
+		},
 	},
 }
 </script>