Bump @nextcloud/vue v7.0.0-beta.1

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

38 files changed, 212 insertions, 155 deletions

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index 6de3a51c..5e1157e8 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -29,7 +29,7 @@
 	</ActionButton>
 </template>
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionsMixin from '../../mixins/ActionsMixin'
 import IconCopy from 'vue-material-design-icons/ContentCopy'
 
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index 9da87b0c..eb169880 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -28,7 +28,7 @@
 	</ActionCheckbox>
 </template>
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 3cfdcbc0..90619e90 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -22,18 +22,19 @@
 
 <template>
 	<AppContent v-if="!circle">
-		<EmptyContent>
+		<EmptyContent :title="t('contacts', 'Please select a circle')">
 			<template #icon>
 				<IconCircles
 					:size="20" />
 			</template>
-			{{ t('contacts', 'Please select a circle') }}
 		</EmptyContent>
 	</AppContent>
 
 	<AppContent v-else-if="loading">
-		<EmptyContent icon="icon-loading">
-			{{ t('contacts', 'Loading circle …') }}
+		<EmptyContent :title="t('contacts', 'Loading circle …')">
+			<template #icon>
+				<IconLoading :size="20" />
+			</template>
 		</EmptyContent>
 	</AppContent>
 
@@ -51,16 +52,17 @@
 			<!-- not a member -->
 			<template v-if="!circle.isMember">
 				<!-- Pending request validation -->
-				<EmptyContent v-if="circle.isPendingMember" icon="icon-loading">
-					{{ t('contacts', 'Your request to join this circle is pending approval') }}
+				<EmptyContent v-if="circle.isPendingMember" :title="t('contacts', 'Your request to join this circle is pending approval')">
+					<template #icon>
+						<IconLoading :size="20" />
+					</template>
 				</EmptyContent>
 
-				<EmptyContent v-else>
+				<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
 					<template #icon>
 						<IconCircles
 							:size="20" />
 					</template>
-					{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
 				</EmptyContent>
 			</template>
 		</CircleDetails>
@@ -68,8 +70,9 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import IconCircles from '../Icons/IconCircles'
 import CircleDetails from '../CircleDetails'
@@ -85,6 +88,7 @@ export default {
 		EmptyContent,
 		MemberList,
 		IconCircles,
+		IconLoading,
 	},
 
 	mixins: [isMobile, RouterMixin],
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index a5dceb2c..9f5b2c1a 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -22,18 +22,19 @@
 
 <template>
 	<AppContent v-if="loading">
-		<EmptyContent icon="icon-loading">
-			{{ t('contacts', 'Loading contacts …') }}
+		<EmptyContent :title="t('contacts', 'Loading contacts …')">
+			<template #icon>
+				<IconLoading :size="20" />
+			</template>
 		</EmptyContent>
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
-		<EmptyContent>
+		<EmptyContent :title="t('contacts', 'There are no contacts yet')">
 			<template #icon>
 				<IconContact
 					:size="20" />
 			</template>
-			{{ t('contacts', 'There are no contacts yet') }}
 			<template #desc>
 				<Button type="primary" @click="newContact">
 					{{ t('contacts', 'Create contact') }}
@@ -43,12 +44,11 @@
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
-		<EmptyContent>
+		<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
 				<IconContact
 					:size="20" />
 			</template>
-			{{ t('contacts', 'There are no contacts in this group') }}
 			<template #desc>
 				<Button v-if="contacts.length === 0" type="primary" @click="addContactsToGroup(selectedGroup)">
 					{{ t('contacts', 'Create contacts') }}
@@ -75,9 +75,10 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import ContactDetails from '../ContactDetails'
 import ContactsList from '../ContactsList'
@@ -94,6 +95,7 @@ export default {
 		ContactsList,
 		EmptyContent,
 		IconContact,
+		IconLoading,
 	},
 
 	mixins: [RouterMixin],
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 5ca67554..96f98b5f 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -29,7 +29,10 @@
 				:size="20" />
 		</template>
 		<template v-if="loadingAction" slot="actions">
-			<ActionText icon="icon-loading-small">
+			<ActionText>
+				<template #icon>
+					<IconLoading :size="20" />
+				</template>
 				{{ t('contacts', 'Loading …') }}
 			</ActionText>
 		</template>
@@ -94,17 +97,17 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconDelete from 'vue-material-design-icons/Delete'
 import LocationEnter from 'vue-material-design-icons/LocationEnter'
 import IconCircles from '../Icons/IconCircles'
-
 import Circle from '../../models/circle.ts'
 import CircleActionsMixin from '../../mixins/CircleActionsMixin'
 
@@ -122,6 +125,7 @@ export default {
 		IconDelete,
 		LocationEnter,
 		IconCircles,
+		IconLoading,
 	},
 
 	mixins: [CircleActionsMixin],
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index bf922aa5..cbefe26f 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -68,9 +68,9 @@ import { emit } from '@nextcloud/event-bus'
 import download from 'downloadjs'
 import moment from 'moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconDownload from 'vue-material-design-icons/Download'
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 91e753ec..8a10be12 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -21,7 +21,10 @@
   -->
 
 <template>
-	<AppNavigation :class="{'icon-loading': loading}">
+	<AppNavigation>
+		<template #icon>
+			<IconLoading v-if="loading" :size="20" />
+		</template>
 		<slot />
 
 		<!-- groups list -->
@@ -169,14 +172,15 @@
 <script>
 import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import naturalCompare from 'string-natural-compare'
 
@@ -214,6 +218,7 @@ export default {
 		IconUser,
 		IconAdd,
 		IconError,
+		IconLoading,
 		IconRecentlyContacted,
 		NewCircleIntro,
 		SettingsSection,
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 00dd3969..29f6c378 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -73,9 +73,13 @@
 					<ActionInput v-else
 						ref="renameInput"
 						:disabled="renameLoading"
-						:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
 						:value="addressbook.displayName"
-						@submit="updateAddressbookName" />
+						@submit="updateAddressbookName">
+						<template #icon>
+							<IconLoading v-if="renameLoading" :size="20" />
+							<IconRename :size="20" />
+						</template>
+					</ActionInput>
 
 					<!-- enable/disable addressbook -->
 					<ActionCheckbox v-if="!toggleEnabledLoading"
@@ -83,16 +87,21 @@
 						@change.stop.prevent="toggleAddressbookEnabled">
 						{{ t('contacts', 'Enabled') }}
 					</ActionCheckbox>
-					<ActionButton v-else
-						icon="icon-loading-small">
+					<ActionButton v-else>
+						<template #icon>
+							<IconLoading :size="20" />
+						</template>
 						{{ t('contacts', 'Enabled') }}
 					</ActionButton>
 				</template>
 
 				<!-- delete addressbook -->
 				<ActionButton v-if="hasMultipleAddressbooks"
-					:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
 					@click="confirmDeletion">
+					<template #icon>
+						<IconLoading v-if="deleteAddressbookLoading" :size="20" />
+						<IconDelete :size="20" />
+					</template>
 					{{ t('contacts', 'Delete') }}
 				</ActionButton>
 			</Actions>
@@ -104,14 +113,16 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 import IconDownload from 'vue-material-design-icons/Download'
 import IconRename from 'vue-material-design-icons/Pencil'
+import IconDelete from 'vue-material-design-icons/Delete'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconShare from 'vue-material-design-icons/ShareVariant'
 import ShareAddressBook from './SettingsAddressbookShare'
@@ -129,10 +140,12 @@ export default {
 		ActionLink,
 		Actions,
 		Button,
+		IconDelete,
 		IconDownload,
 		IconRename,
 		IconContact,
 		IconShare,
+		IconLoading,
 		ShareAddressBook,
 	},
 
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index ac2789ee..1ec31a5c 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import client from '../../../services/cdav'
 
 import addressBookSharee from './SettingsAddressbookSharee'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index 5870fd33..75a8c043 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -22,12 +22,9 @@
 
 <template>
 	<li class="addressbook-sharee">
-		<span :class="{
-				'icon-loading-small': loading,
-				'icon-group': sharee.isGroup && !loading,
-				'icon-user': !sharee.isGroup && !loading
-			}"
-			class="icon" />
+		<IconLoading v-if="loading" :size="20" />
+		<IconGroup v-else-if="sharee.isGroup && !loading" />
+		<IconUser v-else-if="!sharee.isGroup && !loading" />
 		<span class="addressbook-sharee__identifier"
 			:title="sharee.displayName">
 			{{ sharee.displayName }}
@@ -60,13 +57,19 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import IconDelete from 'vue-material-design-icons/Delete'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import IconGroup from 'vue-material-design-icons/AccountMultiple'
+import IconUser from 'vue-material-design-icons/Account'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 export default {
 	name: 'SettingsAddressbookSharee',
 	components: {
 		Button,
 		IconDelete,
+		IconGroup,
+		IconLoading,
+		IconUser,
 	},
 
 	props: {
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 5b8efa22..2eac8403 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -69,11 +69,11 @@
 					</Button>
 					<Button
 						type="primary"
-						:class="{'icon-loading': loading}"
 						:disabled="loading"
 						class="import-contact__button import-contact__button--files"
 						@click="openPicker">
 						<template #icon>
+							<IconLoading v-if="loading" :size="20" />
 							<IconFolder :size="20" />
 						</template>
 						<span class="import-contact__button-icon" />
@@ -95,9 +95,10 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import { encodePath } from '@nextcloud/paths'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
@@ -127,6 +128,7 @@ export default {
 		IconUpload,
 		IconError,
 		IconFolder,
+		IconLoading,
 	},
 
 	data() {
diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
index d3a1fb22..52de5e4e 100644
--- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -25,10 +25,10 @@
 		<IconAdd class="settings-line__icon" />
 		<form id="new-addressbook-form"
 			:disabled="loading"
-			:class="{'icon-loading-small': loading}"
 			name="new-addressbook-form"
 			class="new-addressbook"
 			@submit.prevent.stop="addAddressbook">
+			<IconLoading v-if="loading" :size="20" />
 			<input id="new-addressbook"
 				ref="addressbook"
 				v-model="displayName"
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index f9087e01..839bd770 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import IconList from 'vue-material-design-icons/FormatListBulletedSquare'
 
 export default {
diff --git a/src/components/AppNavigation/SettingsSection.vue b/src/components/AppNavigation/SettingsSection.vue
index 58f80ed4..2a33fd4a 100644
--- a/src/components/AppNavigation/SettingsSection.vue
+++ b/src/components/AppNavigation/SettingsSection.vue
@@ -58,7 +58,7 @@ import SettingsAddressbook from './Settings/SettingsAddressbook'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
 import SettingsImportContacts from './Settings/SettingsImportContacts'
 import SettingsSortContacts from './Settings/SettingsSortContacts'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 export default {
 	name: 'SettingsSe