chore: update deprecated Vue 3 component props

src/components/AccountForm.vue

@@ -239,34 +239,34 @@
 			{{ t('mail', 'Microsoft requires OAuth authentication. Ask your Nextcloud admin to configure Microsoft OAuth in the admin settings.') }}
 		</div>
 		<div class="account-form__submit-buttons">
-			<ButtonVue
+			<NcButton
 				v-if="mode === 'auto'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledAuto || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ submitButtonText }}
-			</ButtonVue>
-			<ButtonVue
+			</NcButton>
+			<NcButton
 				v-else-if="mode === 'manual'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledManual || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ submitButtonText }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div v-if="feedback" class="account-form--feedback">
 			{{ feedback }}
@@ -276,8 +276,8 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-import { translate as t } from '@nextcloud/l10n'
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcCheckboxRadioSwitch, NcInputField, NcPasswordField } from '@nextcloud/vue'
+import { t } from '@nextcloud/l10n'
+import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
 import { Tab, Tabs } from 'vue-tabs-component'
 import IconCheck from 'vue-material-design-icons/Check.vue'
@@ -299,8 +299,8 @@ export default {
 		NcCheckboxRadioSwitch,
 		Tab,
 		Tabs,
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 	},
 

src/components/AccountSettings.vue

@@ -4,50 +4,50 @@
 -->
 
 <template>
-	<AppSettingsDialog
+	<NcAppSettingsDialog
 		id="app-settings-dialog"
 		:open="open"
 		:show-navigation="true"
 		:additional-trap-elements="trapElements"
 		:name="t('mail', 'Account settings')"
 		@update:open="updateOpen">
-		<AppSettingsSection
+		<NcAppSettingsSection
 			id="alias-settings"
 			:name="t('mail', 'Aliases')">
 			<AliasSettings :account="account" @rename-primary-alias="scrollToAccountSettings" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			id="certificate-settings"
 			:name="t('mail', 'Alias to S/MIME certificate mapping')">
 			<CertificateSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection id="writing-mode" :name="t('mail', 'Writing mode')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection 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="signature" :name="t('mail', 'Signature')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection 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" />
-		</AppSettingsSection>
-		<AppSettingsSection id="default-folders" :name=" t('mail', 'Default folders')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection 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" :name=" t('mail', 'Automatic trash deletion')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection 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
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="out-of-office-replies"
 			:name="t('mail', 'Autoresponder')">
@@ -61,14 +61,14 @@
 					{{ t('mail', 'Go to Sieve settings') }}
 				</NcButton>
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && systemVersion >= 33"
 			id="calendar-settings"
 			:name="t('mail', 'Calendar settings')">
 			<CalendarSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="classification"
 			:name="t('mail', 'Classification settings')">
@@ -79,22 +79,22 @@
 				@update:checked="onToggleClassification">
 				{{ t('mail', 'Enable mark as important classification') }}
 			</NcCheckboxRadioSwitch>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && account.sieveEnabled"
 			id="mail-filters"
 			:name="t('mail', 'Filters')">
 			<div id="mail-filters">
 				<MailFilters :key="account.accountId" ref="mailFilters" :account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="quick-actions-settings"
 			:name="t('mail', 'Quick actions')">
 			<Settings :key="account.accountId" ref="quickActions" :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && account.sieveEnabled"
 			id="sieve-filter"
 			:name="t('mail', 'Sieve script editor')">
@@ -104,8 +104,8 @@
 					ref="sieveFilterForm"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && !account.provisioningId && !account.isDelegated"
 			id="mail-server"
 			ref="mail-server"
@@ -118,8 +118,8 @@
 					:email="email"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && !account.provisioningId"
 			id="sieve-settings"
 			:name="t('mail', 'Sieve server')">
@@ -129,16 +129,16 @@
 					ref="sieveAccountForm"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 		<!-- TRANSLATORS: Settings for searching in a folder -->
-		<AppSettingsSection id="mailbox_search" :name="t('mail', 'Folder search')">
+		<NcAppSettingsSection id="mailbox_search" :name="t('mail', 'Folder search')">
 			<SearchSettings :account="account" />
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
-import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings.vue'
 import AccountForm from '../components/AccountForm.vue'
@@ -166,8 +166,8 @@
 		AliasSettings,
 		EditorSettings,
 		SignatureSettings,
-		AppSettingsDialog,
-		AppSettingsSection,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
 		AccountDefaultsSettings,
 		CalendarSettings,
 		OutOfOfficeForm,
@@ -224,7 +224,7 @@
 	},
 
 	watch: {
 		open(newState, oldState) {
 			if (newState === true && this.fetchActiveSieveScript === true) {
 				logger.debug(`Load active sieve script for account ${this.account.accountId}`)
 				this.fetchActiveSieveScript = false

src/components/AliasForm.vue

@@ -37,7 +37,7 @@
 					:form="formId"
 					:name="t('mail', 'Update alias')">
 					<template #icon>
-						<IconLoading v-if="loading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 						<IconCheck v-else :size="20" />
 					</template>
 				</NcButton>
@@ -63,7 +63,7 @@
 					:name="t('mail', 'Delete alias')"
 					@click.prevent="deleteAlias">
 					<template #icon>
-						<IconLoading v-if="loading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 						<IconDelete v-else :size="20" />
 					</template>
 				</NcButton>
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { NcLoadingIcon as IconLoading, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -83,13 +83,13 @@
 	components: {
 		NcButton,
 		IconRename,
-		IconLoading,
+		NcLoadingIcon,
 		IconDelete,
 		IconCheck,
 	},
 
 	props: {
 		account: {
 			type: Object,
 			required: true,
 		},
@@ -101,22 +101,22 @@
 
 		enableUpdate: {
 			type: Boolean,
 			default: true,
 		},
 
 		enableDelete: {
 			type: Boolean,
 			default: true,
 		},
 
 		onUpdateAlias: {
 			type: Function,
 			default: async (aliasId, { alias, name }) => {},
 		},
 
 		onDelete: {
 			type: Function,
 			default: async (aliasId) => {},
 		},
 	},
 

src/components/AliasSettings.vue

@@ -13,16 +13,16 @@
 					:alias="accountAlias"
 					:enable-update="false"
 					:enable-delete="false">
-					<ButtonVue
+					<NcButton
 						v-if="!account.provisioningId"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
 						:name="t('mail', 'Change name')"
 						@click="$emit('rename-primary-alias')">
 						<template #icon>
 							<IconRename :size="20" />
 						</template>
-					</ButtonVue>
+					</NcButton>
 				</AliasForm>
 			</li>
 
@@ -52,41 +52,41 @@
 		</ul>
 
 		<div v-if="!account.provisioningId" class="aliases-controls">
-			<ButtonVue
+			<NcButton
 				v-if="!showForm"
-				type="primary"
+				variant="primary"
 				:aria-label="t('mail', 'Add alias')"
 				@click="showForm = true">
 				{{ t('mail', 'Add alias') }}
-			</ButtonVue>
+			</NcButton>
 
-			<ButtonVue
+			<NcButton
 				v-if="showForm"
-				native-type="submit"
-				type="primary"
+				type="submit"
+				variant="primary"
 				form="createAliasForm"
 				:aria-label="t('mail', 'Create alias')"
 				:disabled="loading">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ t('mail', 'Create alias') }}
-			</ButtonVue>
-			<ButtonVue
+			</NcButton>
+			<NcButton
 				v-if="showForm"
-				type="tertiary-no-background"
+				variant="tertiary-no-background"
 				class="button-text"
 				:aria-label="t('mail', 'Cancel')"
 				@click="resetCreate">
 				{{ t("mail", "Cancel") }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
@@ -98,8 +98,8 @@ export default {
 	name: 'AliasSettings',
 	components: {
 		AliasForm,
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 		IconRename,
 	},