chore(vue3): migrate deprecated slot syntax

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

7 files changed, 101 insertions, 76 deletions

diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index d0769e08..b9b6475f 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -28,59 +28,58 @@
 			<AccountGroup v-else-if="circle.isMember" :size="20" />
 			<AccountGroupOutline v-else :size="20" />
 		</template>
-		<template v-if="loadingAction" slot="actions">
-			<ActionText>
+		<template #actions>
+			<ActionText v-if="loadingAction">
 				<template #icon>
 					<IconLoading :size="20" />
 				</template>
 				{{ t('contacts', 'Loading …') }}
 			</ActionText>
-		</template>
-
-		<template v-else slot="actions">
-			<ActionButton v-if="circle.canManageMembers"
-				:close-after-click="true"
-				@click="addMemberToCircle">
-				<template #icon>
-					<IconAdd :size="20" />
-				</template>
-				{{ t('contacts', 'Add member') }}
-			</ActionButton>
-
-			<!-- copy circle link -->
-			<ActionLink :href="circleUrl"
-				:icon="copyLinkIcon"
-				@click.stop.prevent="copyToClipboard(circleUrl)">
-				{{ copyButtonText }}
-			</ActionLink>
-
-			<!-- leave circle -->
-			<ActionButton v-if="circle.canLeave"
-				@click="confirmLeaveCircle">
-				{{ t('contacts', 'Leave team') }}
-				<ExitToApp slot="icon"
-					:size="16"
-					decorative />
-			</ActionButton>
-
-			<!-- join circle -->
-			<ActionButton v-else-if="!circle.isMember && circle.canJoin"
-				:disabled="loadingJoin"
-				@click="joinCircle">
-				{{ joinButtonTitle }}
-				<LocationEnter slot="icon"
-					:size="16"
-					decorative />
-			</ActionButton>
-
-			<!-- delete circle -->
-			<ActionButton v-if="circle.canDelete"
-				@click="confirmDeleteCircle">
-				<template #icon>
-					<IconDelete :size="20" />
-				</template>
-				{{ t('contacts', 'Delete team') }}
-			</ActionButton>
+			<template v-else>
+				<ActionButton v-if="circle.canManageMembers"
+					:close-after-click="true"
+					@click="addMemberToCircle">
+					<template #icon>
+						<IconAdd :size="20" />
+					</template>
+					{{ t('contacts', 'Add member') }}
+				</ActionButton>
+
+				<!-- copy circle link -->
+				<ActionLink :href="circleUrl"
+					:icon="copyLinkIcon"
+					@click.stop.prevent="copyToClipboard(circleUrl)">
+					{{ copyButtonText }}
+				</ActionLink>
+
+				<!-- leave circle -->
+				<ActionButton v-if="circle.canLeave"
+					@click="confirmLeaveCircle">
+					{{ t('contacts', 'Leave team') }}
+					<template #icon>
+						<ExitToApp :size="16" />
+					</template>
+				</ActionButton>
+
+				<!-- join circle -->
+				<ActionButton v-else-if="!circle.isMember && circle.canJoin"
+					:disabled="loadingJoin"
+					@click="joinCircle">
+					{{ joinButtonTitle }}
+					<template  #icon>
+						<LocationEnter :size="16" />
+					</template>
+				</ActionButton>
+
+				<!-- delete circle -->
+				<ActionButton v-if="circle.canDelete"
+					@click="confirmDeleteCircle">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
+					{{ t('contacts', 'Delete team') }}
+				</ActionButton>
+			</template>
 		</template>
 
 		<template #counter>
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 798eb4bb..273395ad 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -26,7 +26,7 @@
 		<template #icon>
 			<IconContact :size="20" />
 		</template>
-		<template slot="actions">
+		<template #actions>
 			<ActionButton :close-after-click="true"
 				@click="addContactsToGroup(group)">
 				<template #icon>
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 07fde312..727a6b68 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -2,6 +2,7 @@
 	- @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
 	-
 	- @author Team Popcorn <teampopcornberlin@gmail.com>
+	- @author Richard Steinmetz <richard@steinmetz.cloud>
 	-
 	- @license GNU AGPL version 3 or any later version
 	-
@@ -38,15 +39,16 @@
 					<h2>{{ t('contacts', 'Import contacts') }}</h2>
 					<NcSelect v-if="!isSingleAddressbook"
 						id="select-addressbook"
-						v-model="importDestination"
+						v-model="selectedAddressbookOption"
 						:allow-empty="false"
+						:clearable="false"
 						:options="options"
 						:disabled="isSingleAddressbook || isImporting"
 						:placeholder="t('contacts', 'Contacts')"
 						label="displayName"
-						class="import-contact__multiselect">
-						<template slot="singleLabel" slot-scope="{ option }">
-							{{ t('contacts', 'Import into the {addressbookName} address book', { addressbookName: option.displayName }) }}
+						class="import-contact__modal-addressbook__select">
+						<template #selected-option="{ displayName }">
+							<span>{{ t('contacts', 'Import into the {addressbookName} address book', { addressbookName: displayName }) }}</span>
 						</template>
 					</NcSelect>
 				</section>
@@ -172,6 +174,20 @@ export default {
 			},
 		},
 
+		/**
+		 * The selected address book option for the select component.
+		 * We can't use the actual address book here as it can't be converted to JSON.
+		 */
+		selectedAddressbookOption: {
+			get() {
+				return this.options.find((option) => option.id === this.selectedAddressbook.id)
+			},
+			set(value) {
+				this.selectedAddressbook = this.availableAddressbooks
+					.find((addressbook) => addressbook.id === value.id)
+			},
+		},
+
 		// disable multiselect when there is only one address book
 		isSingleAddressbook() {
 			return this.options.length === 1
@@ -320,6 +336,13 @@ export default {
 			padding-top: 0 !important;
 		}
 	}
+
+	&__modal-addressbook {
+		&__select {
+			width: 100%;
+		}
+	}
+
 	&__button {
 		display: flex;
 		align-items: center;
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index e6a5ddd6..fbe3c006 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -66,9 +66,9 @@
 					:disabled="loadingJoin"
 					class="primary"
 					@click="joinCircle">
-					<Login slot="icon"
-						:size="16"
-						decorative />
+					<template #icon>
+						<Login :size="16" />
+					</template>
 					{{ t('contacts', 'Request to join') }}
 				</Button>
 			</template>
@@ -179,9 +179,9 @@
 				<Button v-if="circle.canLeave"
 					type="warning"
 					@click="confirmLeaveCircle">
-					<Logout slot="icon"
-						:size="16"
-						decorative />
+					<template #icon>
+						<Logout :size="16" />
+					</template>
 					{{ t('contacts', 'Leave team') }}
 				</Button>
 
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 414f039c..7154b2e0 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -38,11 +38,12 @@
 			<!-- contact header -->
 			<DetailsHeader>
 				<!-- avatar and upload photo -->
-				<ContactAvatar slot="avatar"
-					:contact="contact"
-					:is-read-only="isReadOnly"
-					:reload-bus="reloadBus"
-					@update-local-contact="updateLocalContact" />
+				<template #avatar>
+					<ContactAvatar :contact="contact"
+						:is-read-only="isReadOnly"
+						:reload-bus="reloadBus"
+						@update-local-contact="updateLocalContact" />
+				</template>
 
 				<!-- fullname -->
 				<template #title>
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index ea5a50c1..649d5940 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -65,9 +65,9 @@
 				<template v-if="canChangeLevel">
 					<ActionText>
 						{{ t('contacts', 'Manage level') }}
-						<ShieldCheck slot="icon"
-							:size="16"
-							decorative />
+						<template #icon>
+							<ShieldCheck :size="16" />
+						</template>
 					</ActionText>
 					<ActionButton v-for="level in availableLevelsChange"
 						:key="level"
@@ -82,9 +82,9 @@
 				<!-- Leave or delete member from circle -->
 				<ActionButton v-if="isCurrentUser && !circle.isOwner" @click="deleteMember">
 					{{ t('contacts', 'Leave team') }}
-					<ExitToApp slot="icon"
-						:size="16"
-						decorative />
+					<template #icon>
+						<ExitToApp :size="16" />
+					</template>
 				</ActionButton>
 				<ActionButton v-else-if="canDelete" @click="deleteMember">
 					<template #icon>
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index c054c814..55abd064 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -49,12 +49,14 @@
 					@option:deselected="updateValue"
 					@close="updateValue">
 					<!-- show how many groups are hidden and add tooltip -->
-					<span slot="limit" v-tooltip.auto="formatGroupsTitle" class="multiselect__limit">
-						+{{ localValue.length - 3 }}
-					</span>
-					<span slot="noResult">
-						{{ t('contacts', 'No results') }}
-					</span>
+					<template #limit>
+						<span v-tooltip.auto="formatGroupsTitle" class="multiselect__limit">
+							+{{ localValue.length - 3 }}
+						</span>
+					</template>
+					<template #no-options>
+						<span>{{ t('contacts', 'No results') }}</span>
+					</template>
 				</NcSelect>
 				<p v-else>
 					{{ localValue.length === 0 ? t('contacts','None'): localValue.toString() }}