Upgrade to Nextcloud vue 8.0.0

Signed-off-by: greta <gretadoci@gmail.com>

18 files changed, 68 insertions, 48 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 657e8636..55269ee3 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<AppContent v-if="!circle">
-		<EmptyContent :title="t('contacts', 'Please select a circle')">
+		<EmptyContent :name="t('contacts', 'Please select a circle')">
 			<template #icon>
 				<IconCircles :size="20" />
 			</template>
@@ -30,7 +30,7 @@
 	</AppContent>
 
 	<AppContent v-else-if="loading">
-		<EmptyContent :title="t('contacts', 'Loading circle …')">
+		<EmptyContent class="empty-content" :name="t('contacts', 'Loading circle …')">
 			<template #icon>
 				<IconLoading :size="20" />
 			</template>
@@ -50,13 +50,13 @@
 			<!-- not a member -->
 			<template v-if="!circle.isMember">
 				<!-- Pending request validation -->
-				<EmptyContent v-if="circle.isPendingMember" :title="t('contacts', 'Your request to join this circle is pending approval')">
+				<EmptyContent v-if="circle.isPendingMember" :name="t('contacts', 'Your request to join this circle is pending approval')">
 					<template #icon>
 						<IconLoading :size="20" />
 					</template>
 				</EmptyContent>
 
-				<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
+				<EmptyContent v-else :name="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
 					<template #icon>
 						<IconCircles :size="20" />
 					</template>
@@ -176,4 +176,7 @@ button {
 		margin-right: 10px;
 	}
 }
+.empty-content {
+  height: 100%;
+}
 </style>
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 6162f561..3a82ced2 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<AppContent v-if="loading">
-		<EmptyContent :title="t('contacts', 'Loading contacts …')">
+		<EmptyContent class="empty-content" :name="t('contacts', 'Loading contacts …')">
 			<template #icon>
 				<IconLoading :size="20" />
 			</template>
@@ -30,7 +30,7 @@
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
-		<EmptyContent :title="t('contacts', 'There are no contacts yet')">
+		<EmptyContent class="empty-content" :name="t('contacts', 'There are no contacts yet')">
 			<template #icon>
 				<IconContact :size="20" />
 			</template>
@@ -43,7 +43,7 @@
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
-		<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
+		<EmptyContent class="empty-content" :name=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
 				<IconContact :size="20" />
 			</template>
@@ -192,3 +192,8 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.empty-content {
+  height: 100%;
+}
+</style>
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 75f93153..3a4c650b 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -21,7 +21,7 @@
   -->
 <template>
 	<AppNavigationItem :key="circle.key"
-		:title="circle.displayName"
+		:name="circle.displayName"
 		:to="circle.router">
 		<template #icon>
 			<AccountStar v-if="circle.isOwner" :size="20" />
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index a731abbc..486a4389 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -22,10 +22,10 @@
 
 <template>
 	<AppSettingsDialog id="app-settings-dialog"
-		:title="t('contacts', 'Contacts settings')"
+		:name="t('contacts', 'Contacts settings')"
 		:show-navigation="true"
 		:open.sync="showSettings">
-		<AppSettingsSection id="general-settings" :title="t('contacts', 'General settings')">
+		<AppSettingsSection id="general-settings" :name="t('contacts', 'General settings')">
 			<CheckboxRadioSwitch :checked="enableSocialSync"
 				:loading="enableSocialSyncLoading"
 				:disabled="enableSocialSyncLoading"
@@ -40,7 +40,7 @@
 			</CheckboxRadioSwitch>
 			<SettingsSortContacts class="contacts-settings-modal__form__row" />
 		</AppSettingsSection>
-		<AppSettingsSection id="address-books" :title="t('contacts', 'Address books')">
+		<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
 			<div class="contacts-settings-modal__form">
 				<div class="contacts-settings-modal__form__row">
 					<ul id="addressbook-list" class="addressbook-list">
@@ -150,6 +150,7 @@ export default {
 
 .app-settings-section {
 	margin-bottom: 45px;
+	padding: 25px 25px 0 25px;
 }
 
 .social-sync__checkbox, .settings-new-addressbook  {
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 968210f1..798eb4bb 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -22,7 +22,7 @@
 <template>
 	<AppNavigationItem :key="group.key"
 		:to="group.router"
-		:title="group.name">
+		:name="group.name">
 		<template #icon>
 			<IconContact :size="20" />
 		</template>
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 1bb39119..24fc14b8 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -34,7 +34,7 @@
 		<template #list>
 			<!-- All contacts group -->
 			<AppNavigationItem id="everyone"
-				:title="GROUP_ALL_CONTACTS"
+				:name="GROUP_ALL_CONTACTS"
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_ALL_CONTACTS },
@@ -52,7 +52,7 @@
 			<!-- Organization chart -->
 			<AppNavigationItem v-if="existChart"
 				id="chart"
-				:title="CHART_ALL_CONTACTS"
+				:name="CHART_ALL_CONTACTS"
 				:to="{
 					name: 'chart',
 					params: { selectedChart: GROUP_ALL_CONTACTS },
@@ -62,7 +62,7 @@
 			<!-- Not grouped group -->
 			<AppNavigationItem v-if="ungroupedContacts.length > 0"
 				id="notgrouped"
-				:title="GROUP_NO_GROUP_CONTACTS"
+				:name="GROUP_NO_GROUP_CONTACTS"
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_NO_GROUP_CONTACTS },
@@ -80,7 +80,7 @@
 			<!-- Recently contacted group -->
 			<AppNavigationItem v-if="isContactsInteractionEnabled && recentlyContactedContacts && recentlyContactedContacts.contacts.length > 0"
 				id="recentlycontacted"
-				:title="GROUP_RECENTLY_CONTACTED"
+				:name="GROUP_RECENTLY_CONTACTED"
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_RECENTLY_CONTACTED },
@@ -98,7 +98,7 @@
 			<AppNavigationCaption id="newgroup"
 				:force-menu="true"
 				:menu-open.sync="isNewGroupMenuOpen"
-				:title="t('contacts', 'Contact groups')"
+				:name="t('contacts', 'Contact groups')"
 				@click.prevent.stop="toggleNewGroupMenu">
 				<template #actionsTriggerIcon>
 					<IconAdd :size="20" />
@@ -125,14 +125,14 @@
 			<template v-if="isCirclesEnabled">
 				<!-- Toggle groups ellipsis -->
 				<AppNavigationItem v-if="groupsMenu.length > ELLIPSIS_COUNT"
-					:title="collapseGroupsTitle"
+					:name="collapseGroupsTitle"
 					class="app-navigation__collapse"
 					icon=""
 					@click="onToggleGroups" />
 
 				<!-- New circle button caption and modal -->
 				<AppNavigationCaption id="newcircle"
-					:title="t('contacts', 'Circles')">
+					:name="t('contacts', 'Circles')">
 					<template #actions>
 						<NcActionButton @click="toggleNewCircleModal">
 							<template #icon>
@@ -155,7 +155,7 @@
 
 					<!-- Toggle circles ellipsis -->
 					<AppNavigationItem v-if="circlesMenu.length > ELLIPSIS_COUNT"
-						:title="collapseCirclesTitle"
+						:name="collapseCirclesTitle"
 						class="app-navigation__collapse"
 						icon=""
 						@click="onToggleCircles" />
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 0287e033..c972b202 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -44,7 +44,7 @@
 			<Button v-if="!addressbook.readOnly"
 				v-tooltip.top="sharedWithTooltip"
 				:class="{'addressbook__share--shared': hasShares}"
-				:title="sharedWithTooltip"
+				:name="sharedWithTooltip"
 				href="#"
 				class="addressbook__share"
 				@click="toggleShare">
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index eb28dd23..b57f0f92 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -32,7 +32,7 @@
 			<Modal v-if="isOpened"
 				ref="modal"
 				class="import-contact__modal"
-				:title="t('contacts', 'Import contacts')"
+				:name="t('contacts', 'Import contacts')"
 				@close="toggleModal">
 				<section class="import-contact__modal-addressbook">
 					<h2>{{ t('contacts', 'Import contacts') }}</h2>
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 1c39e260..d94f3c18 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -25,7 +25,8 @@
 	<AppContentDetails>
 		<!-- nothing selected or contact not found -->
 		<EmptyContent v-if="!contact"
-			:title="t('contacts', 'No contact selected')"
+			class="empty-content"
+			:name="t('contacts', 'No contact selected')"
 			:description="t('contacts', 'Select a contact on the list to begin')">
 			<template #icon>
 				<IconContact :size="20" />
@@ -188,7 +189,7 @@
 				id="qrcode-modal"
 				size="small"
 				:clear-view-delay="-1"
-				:title="contact.displayName"
+				:name="contact.displayName"
 				:close-button-contained="false"
 				@close="closeQrModal">
 				<img :src="`data:image/svg+xml;base64,${qrcode}`"
@@ -201,10 +202,11 @@
 			<Modal v-if="showPickAddressbookModal"
 				id="pick-addressbook-modal"
 				:clear-view-delay="-1"
-				:title="t('contacts', 'Pick an address book')"
+				:name="t('contacts', 'Pick an address book')"
 				@close="closePickAddressbookModal">
 				<NcSelect ref="pickAddressbook"
 					v-model="pickedAddressbook"
+					class="address-book"
 					:allow-empty="false"
 					:options="copyableAddressbooksOptions"
 					:placeholder="t('contacts', 'Select address book')"
@@ -253,12 +255,12 @@
 					</Actions>
 					<NcButton v-if="isTalkEnabled && isInSystemAddressBook"
 						:aria-label="(t('contacts', 'Go to talk conversation'))"
-						:title="(t('contacts', 'Go to talk conversation'))"
+						:name="(t('contacts', 'Go to talk conversation'))"
 						class="icon-talk"
 						:href="callUrl" />
 					<NcButton v-if="profilePageLink"
 						:aria-label="(t('contacts','View profile'))"
-						:title="(t('contacts','View profile'))"
+						:name="(t('contacts','View profile'))"
 						:href="profilePageLink">
 						<template #icon>
 							<IconAccount :size="20" />
@@ -1026,7 +1028,7 @@ section.contact-details {
 	}
 }
 ::v-deep .v-select.select {
-	min-width: 0 !important;
+	min-width: 0;
 	flex: 1 auto;
 	.vs__actions {
 		display: none;
@@ -1057,5 +1059,10 @@ section.contact-details {
 		background-color: var(--color-primary-element-light-hover) !important;
 
 	}
-
+.address-book {
+  min-width: 260px !important;
+}
+.empty-content {
+	height: 100%;
+}
 </style>
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index e49c16df..3d882ad6 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -31,7 +31,7 @@
 			<Actions menu-align="right"
 				event=""
 				type="secondary"
-				:menu-title="t('contacts', 'Add more info')"
+				:menu-name="t('contacts', 'Add more info')"
 				@click.native.prevent>
 				<template #icon>
 					<IconAdd :size="20" />
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index faec1765..2bb93fe5 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -180,7 +180,8 @@ export default {
 
 // Search field
 .search-contacts-field {
-	padding: 5px 10px 5px 40px;
+	padding: 5px 10px 5px 50px;
+	margin-top: 4px;
 
 	> input {
 		width: 100%;
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index e9d2284d..f3bc3d1a 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -2,7 +2,7 @@
 	<ListItem :id="id"
 		:key="source.key"
 		class="list-item-style envelope"
-		:title="source.displayName"
+		:name="source.displayName"
 		:to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
 		<!-- @slot Icon slot -->
 
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 1d20b3d6..391e45e4 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -36,7 +36,7 @@
 			</div>
 
 			<!-- Loading -->
-			<EmptyContent v-if="loading" :title="t('contacts', 'Loading …')">
+			<EmptyContent v-if="loading" :name="t('contacts', 'Loading …')">
 				<template #icon>
 					<IconLoading :size="20" />
 				</template>
@@ -55,7 +55,7 @@
 				</transition-group>
 
 				<!-- No recommendations -->
-				<EmptyContent v-if="dataSet.length === 0" :title="t('contacts', 'Search for people to add')">
+				<EmptyContent v-if="dataSet.length === 0" :name="t('contacts', 'Search for people to add')">
 					<template #icon>
 						<IconSearch :size="20" />
 					</template>
@@ -70,7 +70,7 @@
 					:estimate-size="44"
 					:extra-props="{ selection: selectionSet, onClick }" />
 
-				<EmptyContent v-else-if="searchQuery" :title="t('contacts', 'No results')">
+				<EmptyContent v-else-if="searchQuery" :name="t('contacts', 'No results')">
 					<template #icon>
 						<IconSearch :size="20" />
 					</template>
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index eb3ac4f3..27a5a138 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -23,21 +23,21 @@
 <template>
 	<AppContentList v-if="!hasMembers" class="members-list">
 		<template v-if="loading">
-			<EmptyContent :title="t('contacts', 'Loading members list …')">
+			<EmptyContent class="empty-content" :name="t('contacts', 'Loading members list …')">
 				<template #icon>
 					<IconLoading :size="20" />
 				</template>
 			</EmptyContent>
 		</template>
 		<template v-else-if="!circle.isMember">
-			<EmptyContent :title="t('contacts', 'The list of members is only visible to members of this circle')">
+			<EmptyContent class="empty-content" :name="t('contacts', 'The list of members is only visible to members of this circle')">
 				<template #icon>
 					<IconContact :size="20" />
 				</template>
 			</EmptyContent>
 		</template>
 		<template v-else>
-			<EmptyContent :title="t('contacts', 'You currently have no access to the member list')">
+			<EmptyContent class="empty-content" :name="t('contacts', 'You currently have no access to the member list')">
 				<template #icon>
 					<IconContact :size="20" />
 				</template>
@@ -339,4 +339,7 @@ export default {
 		margin: auto;
 	}
 }
+.empty-content {
+  height: 100%;
+}
 </style>
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index 84a21874..669c85c9 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -30,8 +30,8 @@
 		:key="source.singleId"
 		:avatar-size="44"
 		:is-no-user="!source.isUser"
-		:subtitle="levelName"
-		:title="source.displayName"
+		:subname="levelName"
+		:name="source.displayName"
 		:user="source.userId"
 		class="members-list__item">
 		<!-- Accept invite -->
diff --git a/src/components/OrgChart.vue b/src/components/OrgChart.vue
index 289eac52..63f03bd4 100644
--- a/src/components/OrgChart.vue
+++ b/src/components/OrgChart.vue
@@ -4,14 +4,14 @@
 			<h3>
 				{{ t('contacts', 'Chart') }}:
 			</h3>
-			<Multiselect v-model="chart"
+			<NcSelect v-model="chart"
 				class="chart-selection"
 				:disabled="data.length === 1"
 				:options="charts"
 				:allow-empty="false"
 				:searchable="false"
 				:placeholder="placeholder"
-				track-by="id"
+				input-id="select-chart-input"
 				label="label"
 				@input="chartChanged" />
 		</div>
@@ -23,7 +23,7 @@
 import * as d3 from 'd3'
 import ChartTemplate from './ChartTemplate.vue'
 import { getLocale } from '@nextcloud/l10n'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import { OrgChart } from 'd3-org-chart'
 import router from './../router/index.js'
 import Vue from 'vue'
@@ -31,7 +31,7 @@ import Vue from 'vue'
 export default {
 	name: 'OrgChart',
 	components: {
-		Multiselect,
+		NcSelect,
 	},
 	props: {
 		data: {
diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue
index 059fe85d..42ca511b 100644
--- a/src/components/ProcessingScreen.vue
+++ b/src/components/ProcessingScreen.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<EmptyContent :description="desc"
-			:title="title"
+			:name="title"
 			class="processing-screen__wrapper">
 			<template #icon>
 				<IconContact :size="20" />
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index bc3be549..4d24b9d2 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -58,7 +58,7 @@
 
 			<div class="property__value">
 				<!-- Real input where the picker shows -->
-				<DatetimePicker v-if="!isReadOnly"
+				<DateTimePicker v-if="!isReadOnly"
 					:value="vcardTimeLocalValue.toJSDate()"
 					:minute-step="10"
 					:lang="lang"
@@ -89,7 +89,7 @@
 import debounce from 'debounce'
 import moment from 'moment'
 import {
-	NcDatetimePicker as DatetimePicker,
+	NcDateTimePicker as DateTimePicker,
 	NcSelect,
 } from '@nextcloud/vue'
 import { getLocale } from '@nextcloud/l10n'
@@ -104,7 +104,7 @@ export default {
 
 	components: {
 		NcSelect,
-		DatetimePicker,
+		DateTimePicker,
 		PropertyTitle,
 		PropertyActions,
 	},