fix: Adapt to new nextcloud vue version

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/cards/AvatarList.vue

@@ -22,37 +22,52 @@
 
 <template>
 	<div class="avatars">
-		<div class="avatar-list" @click.stop="togglePopover">
-			<div v-if="popover.length > 0">
-				<AccountMultiple class="avatardiv more-avatars" :size="24" />
-			</div>
-			<div v-for="user in firstUsers" :key="user.id">
-				<NcAvatar v-if="user.type === 0"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:disable-menu="true"
-					:show-user-status="false"
-					:size="32" />
-				<NcAvatar v-if="user.type === 1"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
-					:is-no-user="true"
-					:disable-="true"
-					:size="32" />
-				<NcAvatar v-if="user.type === 7"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Team)')"
-					:is-no-user="true"
-					:disable-="true"
-					:size="32" />
-			</div>
-		</div>
-
-		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<NcPopoverMenu :menu="popover" />
-			<slot />
+		<div>
+			<NcPopover>
+				<template #trigger="{ attrs }">
+					<button class="avatar-list" v-bind="attrs" @click.stop>
+						<div v-if="popover.length > 0">
+							<AccountMultiple class="avatardiv more-avatars" :size="24" />
+						</div>
+						<div v-for="user in firstUsers" :key="user.id">
+							<NcAvatar v-if="user.type === 0"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:disable-menu="true"
+								:show-user-status="false"
+								:size="32" />
+							<NcAvatar v-if="user.type === 1"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
+								:is-no-user="true"
+								:disable-="true"
+								:size="32" />
+							<NcAvatar v-if="user.type === 7"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Team)')"
+								:is-no-user="true"
+								:disable-="true"
+								:size="32" />
+						</div>
+					</button>
+				</template>
+				<div>
+					<div v-for="user in users"
+						:key="user.id"
+						class="avatar-list-entry">
+						<NcAvatar :user="user.participant.uid"
+							:display-name="user.participant.displayname"
+							:disable-menu="true"
+							:is-no-user="user.type !== 0"
+							:size="32" />
+						<div class="avatar-list-entry__label">
+							{{ user.participant.displayname }}
+						</div>
+					</div>
+				</div>
+			</NcPopover>
 		</div>
 
 		<div class="avatar-print-list">
@@ -70,7 +85,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
@@ -78,7 +93,7 @@ export default {
 	name: 'AvatarList',
 	components: {
 		NcAvatar,
-		NcPopoverMenu,
+		NcPopover,
 		AccountMultiple,
 	},
 	directives: {
@@ -172,8 +187,12 @@ export default {
 	.avatar-list {
 		float: right;
 		display: inline-flex;
-		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
+		padding: 0;
+		padding-right: $avatar-offset;
+		margin: 0;
+		border: 0;
+		background: transparent;
 
 		& > div {
 			height: 32px;
@@ -199,6 +218,15 @@ export default {
 
 	}
 
+	.avatar-list-entry {
+		display: flex;
+		padding: 6px 12px;
+
+		&__label {
+			padding: 4px 12px;
+		}
+	}
+
 	.popovermenu {
 		display: block;
 		margin: 40px -6px;

src/components/cards/CardItem.vue

@@ -68,7 +68,7 @@
 					tag="ul"
 					class="labels"
 					@click.stop="openCard">
-					<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
+					<li v-for="label in labelsSorted" :key="label?.id ?? label?.title" :style="labelStyle(label)">
 						<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
 					</li>
 				</transition-group>

src/components/cards/badges/DueDate.vue

@@ -23,7 +23,7 @@
 <template>
 	<div v-if="card" class="duedate" :data-due-state="dueState">
 		<transition name="zoom">
-			<div v-if="card.duedate || card.done" class="due" :title="absoluteDate">
+			<div v-if="card.duedate || card.done" class="due" :name="absoluteDate">
 				<CheckCircle v-if="card.done" :size="16" />
 				<Clock v-else-if="overdue" :size="16" />
 				<ClockOutline v-else :size="16" />