Update to nextcloud/vue 8

Signed-off-by: hamza mahjoubi <hamzamahjoubi221@gmail.com>

package.json

@@ -47,7 +47,7 @@
     "@nextcloud/moment": "^1.2.2",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.2.0",
-    "@nextcloud/vue": "^7.12.7",
+    "@nextcloud/vue": "^8.3.0",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@vue/babel-preset-app": "^5.0.8",

src/components/AccountSettings.vue

@@ -27,45 +27,45 @@
 		:open="open"
 		:show-navigation="true"
 		:additional-trap-elements="trapElements"
-		:title="t('mail', 'Account settings')"
+		:name="t('mail', 'Account settings')"
 		@update:open="updateOpen">
 		<AppSettingsSection id="alias-settings"
-			:title="t('mail', 'Aliases')">
+			:name="t('mail', 'Aliases')">
 			<AliasSettings :account="account" @rename-primary-alias="scrollToAccountSettings" />
 		</AppSettingsSection>
 		<AppSettingsSection id="certificate-settings"
-			:title="t('mail', 'Alias to S/MIME certificate mapping')">
+			:name="t('mail', 'Alias to S/MIME certificate mapping')">
 			<CertificateSettings :account="account" />
 		</AppSettingsSection>
-		<AppSettingsSection id="signature" :title="t('mail', 'Signature')">
+		<AppSettingsSection id="signature" :name="t('mail', 'Signature')">
 			<p class="settings-hint">
 				{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
 			</p>
 			<SignatureSettings :account="account" @show-toolbar="handleShowToolbar" />
 		</AppSettingsSection>
-		<AppSettingsSection id="writing-mode" :title="t('mail', 'Writing mode')">
+		<AppSettingsSection id="writing-mode" :name="t('mail', 'Writing mode')">
 			<p class="settings-hint">
 				{{ t('mail', 'Preferred writing mode for new messages and replies.') }}
 			</p>
 			<EditorSettings :account="account" />
 		</AppSettingsSection>
-		<AppSettingsSection id="default-folders" :title=" t('mail', 'Default folders')">
+		<AppSettingsSection id="default-folders" :name=" t('mail', 'Default folders')">
 			<p class="settings-hint">
 				{{
 					t('mail', 'The folders to use for drafts, sent messages, deleted messages, archived messages and junk messages.')
 				}}
 			</p>
 			<AccountDefaultsSettings :account="account" />
 		</AppSettingsSection>
-		<AppSettingsSection id="trash-retention" :title=" t('mail', 'Automatic trash deletion')">
+		<AppSettingsSection id="trash-retention" :name=" t('mail', 'Automatic trash deletion')">
 			<p class="settings-hint">
 				{{ t('mail', 'Days after which messages in Trash will automatically be deleted:') }}
 			</p>
 			<TrashRetentionSettings :account="account" />
 		</AppSettingsSection>
 		<AppSettingsSection v-if="account"
 			id="out-of-office-replies"
-			:title="t('mail', 'Autoresponder')">
+			:name="t('mail', 'Autoresponder')">
 			<p class="settings-hint">
 				{{ t('mail', 'Automated reply to incoming messages. If someone sends you several messages, this automated reply will be sent at most once every 4 days.') }}
 			</p>
@@ -76,7 +76,7 @@
 		</AppSettingsSection>
 		<AppSettingsSection v-if="account && account.sieveEnabled"
 			id="sieve-filter"
-			:title="t('mail', 'Sieve filter rules')">
+			:name="t('mail', 'Sieve filter rules')">
 			<div id="sieve-filter">
 				<SieveFilterForm :key="account.accountId"
 					ref="sieveFilterForm"
@@ -85,7 +85,7 @@
 		</AppSettingsSection>
 		<AppSettingsSection v-if="account && !account.provisioningId"
 			id="mail-server"
-			:title="t('mail', 'Mail server')">
+			:name="t('mail', 'Mail server')">
 			<div id="mail-settings">
 				<AccountForm :key="account.accountId"
 					ref="accountForm"
@@ -96,14 +96,14 @@
 		</AppSettingsSection>
 		<AppSettingsSection v-if="account && !account.provisioningId"
 			id="sieve-settings"
-			:title="t('mail', 'Sieve filter server')">
+			:name="t('mail', 'Sieve filter server')">
 			<div id="sieve-settings">
 				<SieveAccountForm :key="account.accountId"
 					ref="sieveAccountForm"
 					:account="account" />
 			</div>
 		</AppSettingsSection>
-		<AppSettingsSection id="mailbox_search" :title="t('mail', 'Mailbox search')">
+		<AppSettingsSection id="mailbox_search" :name="t('mail', 'Mailbox search')">
 			<SearchSettings :account="account" />
 		</AppSettingsSection>
 	</AppSettingsDialog>
@@ -227,9 +227,4 @@ h2 {
 .app-settings-section {
 margin-bottom: 45px;
 }
-// Fix weird modal glitches on Firefox when toggling autoresponder
-:deep(.modal-container),
-:deep(.app-settings__wrapper) {
-	position: unset !important;
-}
 </style>

src/components/AliasForm.vue

@@ -46,7 +46,7 @@
 					:aria-label="t('mail', 'Update alias')"
 					native-type="submit"
 					:form="formId"
-					:title="t('mail', 'Update alias')">
+					:name="t('mail', 'Update alias')">
 					<template #icon>
 						<IconLoading v-if="loading" :size="20" />
 						<IconCheck v-else :size="20" />
@@ -60,7 +60,7 @@
 				<NcButton v-if="enableUpdate"
 					type="tertiary-no-background"
 					:aria-label="t('mail', 'Rename alias')"
-					:title="t('mail', 'Show update alias form')"
+					:name="t('mail', 'Show update alias form')"
 					@click.prevent="showForm = true">
 					<template #icon>
 						<IconRename :size="20" />
@@ -69,7 +69,7 @@
 				<NcButton v-if="enableDelete && !alias.provisioned"
 					type="tertiary-no-background"
 					:aria-label="t('mail', 'Delete alias')"
-					:title="t('mail', 'Delete alias')"
+					:name="t('mail', 'Delete alias')"
 					@click.prevent="deleteAlias">
 					<template #icon>
 						<IconLoading v-if="loading" :size="20" />

src/components/AliasSettings.vue

@@ -31,7 +31,7 @@
 					<ButtonVue v-if="!account.provisioningId"
 						type="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
-						:title="t('mail', 'Change name')"
+						:name="t('mail', 'Change name')"
 						@click="$emit('rename-primary-alias')">
 						<template #icon>
 							<IconRename :size="20" />

src/components/AppSettingsMenu.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="app-settings">
 		<NcAppSettingsDialog id="app-settings-dialog"
-			:title="t('mail', 'Mail settings')"
+			:name="t('mail', 'Mail settings')"
 			:show-navigation="true"
 			:open.sync="showSettings">
-			<NcAppSettingsSection id="account-settings" :title="t('mail', 'Account creation')">
+			<NcAppSettingsSection id="account-settings" :name="t('mail', 'Account creation')">
 				<NcButton v-if="allowNewMailAccounts"
 					type="primary"
 					to="/setup"
@@ -16,7 +16,7 @@
 					{{ t('mail', 'Add mail account') }}
 				</NcButton>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="body-settings" :title="t('mail', 'Activate body search')">
+			<NcAppSettingsSection id="body-settings" :name="t('mail', 'Activate body search')">
 				<p v-if="loadingPrioritySettings" class="app-settings">
 					{{ prioritySettingsText }}
 				</p>
@@ -29,7 +29,7 @@
 					<label for="priority-inbox-toggle">{{ prioritySettingsText }}</label>
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="data-settings" :title="t('mail', 'Data collection consent')">
+			<NcAppSettingsSection id="data-settings" :name="t('mail', 'Data collection consent')">
 				<p class="settings-hint">
 					{{ t('mail', 'Allow the app to collect data about your interactions. Based on this data, the app will adapt to your preferences. The data will only be stored locally.') }}
 				</p>
@@ -46,7 +46,7 @@
 					<label for="data-collection-toggle">{{ optOutSettingsText }}</label>
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="autotagging-settings" :title="t('mail', 'Auto tagging text')">
+			<NcAppSettingsSection id="autotagging-settings" :name="t('mail', 'Auto tagging text')">
 				<p v-if="toggleAutoTagging" class="app-settings">
 					<IconLoading :size="20" />
 					{{ autoTaggingText }}
@@ -60,10 +60,10 @@
 					<label for="auto-tagging-toggle">{{ autoTaggingText }}</label>
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="trusted-sender" :title="t('mail', 'Trusted senders')">
+			<NcAppSettingsSection id="trusted-sender" :name="t('mail', 'Trusted senders')">
 				<TrustedSenders />
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="gravatar-settings" :title="t('mail', 'Gravatar settings')">
+			<NcAppSettingsSection id="gravatar-settings" :name="t('mail', 'Gravatar settings')">
 				<p v-if="loadingAvatarSettings" class="app-settings avatar-settings">
 					<IconLoading :size="20" />
 					{{ t('mail', 'Use Gravatar and favicon avatars') }}
@@ -77,7 +77,7 @@
 					<label for="gravatar-enabled">{{ t('mail', 'Use Gravatar and favicon avatars') }}</label>
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="reply-settings" :title="t('mail', 'Reply text position')">
+			<NcAppSettingsSection id="reply-settings" :name="t('mail', 'Reply text position')">
 				<p v-if="loadingReplySettings" class="app-settings reply-settings">
 					<IconLoading :size="20" />
 					{{ replySettingsText }}
@@ -91,7 +91,7 @@
 					<label for="bottom-reply-enabled">{{ replySettingsText }}</label>
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="mailto-settings" :title="t('mail', 'Mailto')">
+			<NcAppSettingsSection id="mailto-settings" :name="t('mail', 'Mailto')">
 				<p class="settings-hint">
 					{{ t('mail', 'Register as application for mail links') }}
 				</p>
@@ -105,7 +105,7 @@
 					{{ t('mail', 'Register') }}
 				</NcButton>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="smime-settings" :title="t('mail', 'S/MIME')">
+			<NcAppSettingsSection id="smime-settings" :name="t('mail', 'S/MIME')">
 				<NcButton class="app-settings-button"
 					type="secondary"
 					:aria-label="t('mail', 'Manage S/MIME certificates')"
@@ -118,7 +118,7 @@
 				<SmimeCertificateModal v-if="displaySmimeCertificateModal"
 					@close="displaySmimeCertificateModal = false" />
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="sorting-settings" :title="t('mail', 'Sorting')">
+			<NcAppSettingsSection id="sorting-settings" :name="t('mail', 'Sorting')">
 				<div class="sorting">
 					<CheckboxRadioSwitch class="sorting__switch"
 						:checked="sortOrder"
@@ -138,7 +138,7 @@
 					</CheckboxRadioSwitch>
 				</div>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="mailvelope-settings" :title="t('mail', 'Mailvelope')">
+			<NcAppSettingsSection id="mailvelope-settings" :name="t('mail', 'Mailvelope')">
 				<p class="mailvelope-section">
 					{{ t('mail', 'Looking for a way to encrypt your emails?') }}
 				</p>
@@ -149,7 +149,7 @@
 				</a>
 			</NcAppSettingsSection>
 			<NcAppSettingsSection id="keyboard-settings"
-				:title="t('mail', 'Keyboard')">
+				:name="t('mail', 'Keyboard')">
 				<dl>
 					<div>
 						<dt><kbd>C</kbd></dt>
@@ -406,7 +406,6 @@ p.app-settings {
 	background-position: 10px center;
 	text-align: left;
 	margin-top: 6px;
-	width: 100%;
 }
 .app-settings-button.button.primary.new-button {
 	color: var(--color-primary-element-text);

src/components/Avatar.vue

@@ -21,26 +21,26 @@
   -->
 
 <template>
-	<BaseAvatar v-if="loading || !hasAvatar"
+	<NcAvatar v-if="loading || !hasAvatar"
 		:display-name="displayName"
 		:size="size"
 		:disable-tooltip="disableTooltip" />
-	<BaseAvatar v-else
+	<NcAvatar v-else
 		:display-name="displayName"
 		:url="avatarUrl"
 		:size="size"
 		:disable-tooltip="disableTooltip" />
 </template>
 
 <script>
-import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import { fetchAvatarUrlMemoized } from '../service/AvatarService.js'
 import logger from '../logger.js'
 
 export default {
 	name: 'Avatar',
 	components: {
-		BaseAvatar,
+		NcAvatar,
 	},
 	props: {
 		displayName: {

src/components/CertificateSettings.vue

@@ -22,15 +22,14 @@
 
 <template>
 	<div>
-		<Multiselect :allow-empty="false"
-			:options="aliases"
+		<NcSelect :options="aliases"
 			:searchable="false"
 			:value="alias"
 			:placeholder="t('mail', 'Select an alias')"
 			label="name"
 			track-by="id"
 			@select="handleAlias" />
-		<Multiselect v-if="alias !== null"
+		<NcSelect v-if="alias !== null"
 			v-model="savedCertificate"
 			:options="smimeCertOptions"
 			:searchable="false"
@@ -47,7 +46,7 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect, NcButton as ButtonVue } from '@nextcloud/vue'
+import { NcSelect, NcButton as ButtonVue } from '@nextcloud/vue'
 import { compareSmimeCertificates } from '../util/smime.js'
 import { mapGetters } from 'vuex'
 import { showError, showSuccess } from '@nextcloud/dialogs'
@@ -57,7 +56,7 @@ import moment from '@nextcloud/moment'
 export default {
 	name: 'CertificateSettings',
 	components: {
-		Multiselect,
+		NcSelect,
 		ButtonVue,
 	},
 	props: {