chore: change the button type to variant

src/components/AccountForm.vue

@@ -243,8 +243,8 @@
 				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>
@@ -257,8 +257,8 @@
 				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>
@@ -277,7 +277,7 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcLoadingIcon, NcCheckboxRadioSwitch, NcInputField, NcPasswordField } from '@nextcloud/vue'
+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'

src/components/AliasForm.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { NcLoadingIcon, 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'
@@ -89,7 +89,7 @@
 	},
 
 	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

@@ -15,7 +15,7 @@
 					:enable-delete="false">
 					<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')">
@@ -54,16 +54,16 @@
 		<div v-if="!account.provisioningId" class="aliases-controls">
 			<NcButton
 				v-if="!showForm"
-				type="primary"
+				variant="primary"
 				:aria-label="t('mail', 'Add alias')"
 				@click="showForm = true">
 				{{ t('mail', 'Add alias') }}
 			</NcButton>
 
 			<NcButton
 				v-if="showForm"
-				native-type="submit"
-				type="primary"
+				type="submit"
+				variant="primary"
 				form="createAliasForm"
 				:aria-label="t('mail', 'Create alias')"
 				:disabled="loading">
@@ -75,7 +75,7 @@
 			</NcButton>
 			<NcButton
 				v-if="showForm"
-				type="tertiary-no-background"
+				variant="tertiary-no-background"
 				class="button-text"
 				:aria-label="t('mail', 'Cancel')"
 				@click="resetCreate">

src/components/Composer.vue

@@ -47,7 +47,7 @@
 				<label class="to-label" for="to">
 					{{ t('mail', 'To') }}
 				</label>
-				<NcButton size="small" type="tertiary-no-background" @click.prevent="toggleViewMode">
+				<NcButton size="small" variant="tertiary-no-background" @click.prevent="toggleViewMode">
 					{{ t('mail', 'Cc/Bcc') }}
 				</NcButton>
 			</div>
@@ -295,7 +295,7 @@
 				<NcButton
 					v-if="!savingDraft && !canSaveDraft"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Save draft')"
 					@click="saveDraft">
 					<template #icon>
@@ -305,7 +305,7 @@
 				<NcButton
 					v-if="!savingDraft && draftSaved"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Discard & close draft')"
 					@click="$emit('discard-draft')">
 					<template #icon>
@@ -316,7 +316,7 @@
 			<div class="composer-actions--secondary-actions">
 				<NcButton
 					v-if="!encrypt && editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Enable formatting')"
 					@click="setEditorModeHtml()">
 					<template #icon>
@@ -325,7 +325,7 @@
 				</NcButton>
 				<NcButton
 					v-if="!encrypt && !editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:pressed="true"
 					:aria-label="t('mail', 'Disable formatting')"
 					@click="setEditorModeText()">
@@ -391,29 +391,29 @@
 							}}
 						</NcActionButton>
 						<NcActionCheckbox
-							:checked="requestMdnVal"
+							:model-value="requestMdnVal"
 							@check="requestMdnVal = true"
 							@uncheck="requestMdnVal = false">
 							{{ t('mail', 'Request a read receipt') }}
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeSign"
+							:model-value="wantsSmimeSign"
 							@check="smimeSignCheck(true)"
 							@uncheck="smimeSignCheck(false)">
 							{{ t('mail', 'Sign message with S/MIME') }}
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeEncrypt"
+							:model-value="wantsSmimeEncrypt"
 							:disabled="encrypt"
 							@check="wantsSmimeEncrypt = true"
 							@uncheck="wantsSmimeEncrypt = false">
 							{{ t('mail', 'Encrypt message with S/MIME') }}
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="mailvelope.available"
-							:checked="encrypt"
+							:model-value="encrypt"
 							:disabled="wantsSmimeEncrypt"
 							@change="isActionsOpen = false"
 							@check="encrypt = true"
@@ -486,8 +486,8 @@
 
 				<NcButton
 					:disabled="!canSend || sending"
-					native-type="submit"
-					type="primary"
+					type="submit"
+					variant="primary"
 					:aria-label="submitButtonTitle"
 					@click="onSend">
 					<template #icon>
@@ -506,7 +506,7 @@
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getCanonicalLocale, getFirstDay, getLocale, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcListItemIcon, NcIconSvgWrapper, NcSelect } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcIconSvgWrapper, NcListItemIcon, NcSelect } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import debounce from 'lodash/fp/debounce.js'
 import trimStart from 'lodash/fp/trimCharsStart.js'

src/components/Envelope.vue

@@ -542,10 +542,10 @@ import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import {
 	NcActionButton,
-	NcActionLink,
-	NcActionText,
 	NcActionInput,
+	NcActionLink,
 	NcActionSeparator,
+	NcActionText,
 	NcAssistantIcon,
 	NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'

src/components/InternalAddress.vue

@@ -50,7 +50,7 @@
 		</NcListItem>
 
 		<NcButton
-			type="secondary"
+			variant="secondary"
 			wide
 			@click="openDialog = true">
 			<template #icon>
@@ -73,7 +73,7 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton, NcActionButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
 import { mapStores } from 'pinia'

src/components/MailboxPicker.vue

@@ -55,7 +55,7 @@
 			</div>
 			<div class="buttons">
 				<NcButton
-					type="primary"
+					variant="primary"
 					:disabled="loading || (!allowRoot && !selectedMailboxId)"
 					:aria-label="loading ? labelSelectLoading : labelSelect"
 					@click="onSelect">

src/components/MailboxThread.vue

@@ -40,7 +40,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
@@ -87,7 +87,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
@@ -121,7 +121,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Follow up info')"
 										class="button">
 										<template #icon>
@@ -152,7 +152,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Important info')"
 										class="button">
 										<template #icon>
@@ -200,7 +200,7 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList, NcButton, isMobile, NcPopover } from '@nextcloud/vue'
+import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'

src/components/MessageAttachments.vue

@@ -84,7 +84,7 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl } from '@nextcloud/router'
-import { NcLoadingIcon, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'

src/components/MessageHTMLBody.vue

@@ -11,7 +11,7 @@
 			@translate="$emit('translate')" />
 		<div v-if="hasBlockedContent" id="mail-message-has-blocked-content" style="color: #000000">
 			{{ t('mail', 'The images have been blocked to protect your privacy.') }}
-			<NcActions type="tertiary" :menu-name="t('mail', 'Show images')">
+			<NcActions variant="tertiary" :menu-name="t('mail', 'Show images')">
 				<NcActionButton @click="displayIframe">
 					<template #icon>
 						<IconImage :size="20" />

src/components/NavigationAccount.vue

@@ -49,7 +49,7 @@
 						{{ t('mail', 'Delegate account') }}
 					</NcActionButton>
 					<NcActionCheckbox
-						:checked="account.showSubscribedOnly"
+						:model-value="account.showSubscribedOnly"
 						:disabled="savingShowOnlySubscribed"
 						@update:checked="changeShowSubscribedOnly">
 						{{ t('mail', 'Show only subscribed folders') }}
@@ -62,7 +62,7 @@
 					</NcActionButton>
 					<NcActionInput
 						v-if="editing && nameInput"
-						:value.sync="createMailboxName"
+						v-model="createMailboxName"
 						@submit.prevent.stop="createMailbox">
 						<template #icon>
 							<IconFolderAdd :size="20" />
@@ -109,7 +109,7 @@
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcLoadingIcon, NcAppNavigationCaption, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationCaption, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { Fragment } from 'vue-frag'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'

src/components/NavigationMailbox.vue

@@ -120,7 +120,7 @@
 			</NcActionButton>
 			<NcActionInput
 				v-if="subfolderInput"
-				:value.sync="createMailboxName"
+				v-model="createMailboxName"
 				@submit.prevent.stop="createMailbox">
 				<template #icon>
 					<IconAdd :size="20" />
@@ -142,7 +142,7 @@
 			</NcActionButton>
 			<NcActionInput
 				v-if="renameInput"
-				:value.sync="mailboxName"
+				v-model="mailboxName"
 				@submit.prevent.stop="renameMailbox">
 				<template #icon>
 					<IconEdit
@@ -188,15 +188,15 @@
 
 			<NcActionCheckbox
 				v-if="notVirtual"
-				:checked="mailbox.isSubscribed"
+				:model-value="mailbox.isSubscribed"
 				:disabled="changeSubscription"
 				@update:checked="changeFolderSubscription">
 				{{ t('mail', 'Subscribed') }}
 			</NcActionCheckbox>
 
 			<NcActionCheckbox
 				v-if="notVirtual && notInbox"
-				:checked="mailbox.syncInBackground"
+				:model-value="mailbox.syncInBackground"
 				:disabled="changingSyncInBackground"
 				@update:checked="changeSyncInBackground">
 				{{ t('mail', 'Sync in background') }}
@@ -326,7 +326,7 @@ export default {
 		IconInboxOutline,
 		IconWrench,
 		ImportantIcon,
-		IconLoading,
+		NcLoadingIcon,
 		MoveMailboxModal,
 		AlarmIcon,
 	},

src/components/NewMessageButtonHeader.vue

@@ -6,7 +6,7 @@
 	<div class="header">
 		<NcButton
 			:aria-label="t('mail', 'New message')"
-			type="secondary"
+			variant="secondary"
 			button-id="mail_new_message"
 			:wide="true"
 			@click="onNewMessage">
@@ -18,15 +18,15 @@
 		<NcButton
 			v-if="showRefresh && currentMailbox"
 			:aria-label="t('mail', 'Refresh')"
-			type="tertiary-no-background"
+			variant="tertiary-no-background"
 			class="refresh__button"
 			:disabled="refreshing"
 			@click="refreshMailbox">
 			<template #icon>
 				<IconRefresh
 					v-if="!refreshing"
 					:size="20" />
-				<IconLoading
+				<NcLoadingIcon
 					v-if="refreshing"
 					:size="20" />
 			</template>
@@ -37,7 +37,7 @@
 <script>
 import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
-import IconLoading from '@nextcloud/vue/components/NcLoadingIcon'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
 import logger from '../logger.js'
@@ -49,7 +49,7 @@ export default {
 		NcButton,
 		IconAdd,
 		IconRefresh,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {