refactor: convert @nextcloud/vue barrel imports to subpath imports

src/components/AccountSettings.vue

@@ -138,8 +138,11 @@
 </template>
 
 <script>
-import { NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings.vue'
 import AccountForm from '../components/AccountForm.vue'
 import AliasSettings from '../components/AliasSettings.vue'

src/components/AliasForm.vue

@@ -73,7 +73,8 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 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 +90,7 @@
 	},
 
 	props: {
 		account: {
 			type: Object,
 			required: true,
 		},
@@ -101,22 +102,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

@@ -85,8 +85,9 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import AliasForm from './AliasForm.vue'

src/components/AppSettingsMenu.vue

@@ -296,25 +296,23 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcAppSettingsShortcutsSection,
-	NcButton,
-	NcDialog,
-	NcFormBox,
-	NcFormBoxButton,
-	NcFormBoxSwitch,
-	NcFormGroup,
-	NcHotkey,
-	NcHotkeyList,
-	NcInputField,
-	NcNoteCard,
-	NcRadioGroup,
-	NcRadioGroupButton,
-} from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
 import IconArrow from 'vue-material-design-icons/ArrowRight.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'

src/components/CalendarSettings.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 

src/components/CertificateSettings.vue

@@ -40,8 +40,10 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcButton, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 import { compareSmimeCertificates } from '../util/smime.js'

src/components/Composer.vue

@@ -551,14 +551,22 @@
 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, 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'
 import uniqBy from 'lodash/fp/uniqBy.js'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
 import { NcReferencePickerModal } from '@nextcloud/vue/components/NcRichText'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import IconFormat from 'vue-material-design-icons/FormatSize.vue'

src/components/ComposerSessionIndicator.vue

@@ -41,8 +41,9 @@
 </template>
 
 <script>
-import { NcActionButton, NcActions } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import ArrowExpandIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'

src/components/ConfirmationModal.vue

@@ -29,7 +29,8 @@
 <script>
 
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcModal } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcModal from '@nextcloud/vue/components/NcModal'
 
 export default {
 	name: 'ConfirmationModal',

src/components/DelegationModal.vue

@@ -98,8 +98,14 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
-import { NcAvatar, NcButton, NcDialog, NcListItem, NcLoadingIcon, NcModal, NcSelectUsers } from '@nextcloud/vue'
 import debounce from 'lodash/fp/debounce.js'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 import logger from '../logger.js'

src/components/Envelope.vue

@@ -532,17 +532,15 @@ import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
 import { isRTL } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionInput,
-	NcActionLink,
-	NcActionSeparator,
-	NcActionText,
-	NcAssistantIcon,
-	NcCheckboxRadioSwitch,
-} from '@nextcloud/vue'
 import escapeHtml from 'escape-html'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAssistantIcon from '@nextcloud/vue/components/NcAssistantIcon'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
@@ -1711,19 +1709,6 @@ export default {
 	margin-bottom: 6px;
 }
 
-:deep(.line-two__subtitle) {
-	display: flex;
-	flex-basis: 100%;
-	padding-inline-start: 40px;
-	width: 450px;
-}
-
-:deep(.line-one__title) {
-	flex-direction: row;
-	display: flex;
-	width: 200px;
-}
-
 .line-two.one-line {
 	display: flex;
 	overflow: hidden;

src/components/EnvelopeList.vue

@@ -167,9 +167,12 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcActions, NcButton, NcDialog } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { differenceWith } from 'ramda'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'

src/components/EnvelopeSingleClickActions.vue

@@ -44,7 +44,7 @@
 
 <script>
 
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
 import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
 import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'

src/components/EnvelopeSkeleton.vue

@@ -126,7 +126,9 @@
 </template>
 
 <script>
-import { NcActions, NcCounterBubble, NcVNodes } from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
+import NcVNodes from '@nextcloud/vue/components/NcVNodes'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import EnvelopeSingleClickActions from './EnvelopeSingleClickActions.vue'
 

src/components/EventModal.vue

@@ -120,9 +120,11 @@ import { AttendeeProperty, createEvent, DateTimeValue, TextProperty } from '@nex
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { getTimezoneManager } from '@nextcloud/timezones'
-import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import jstz from 'jstz'
 import { mapState, mapStores } from 'pinia'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 import RecipientListItem from './RecipientListItem.vue'
 import logger from '../logger.js'

src/components/Imip.vue

@@ -120,10 +120,12 @@
 import { AttendeeProperty, CalendarComponent, DateTimeValue, EventComponent, getParserManager, Parameter, Property } from '@nextcloud/calendar-js'
 import { namespaces as NS } from '@nextcloud/cdav-library'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import pLimit from 'p-limit'
 import { mapState } from 'pinia'
 import { flatten } from 'ramda'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarIcon from 'vue-material-design-icons/CalendarOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CalendarPickerOption from './CalendarPickerOption.vue'

src/components/InternalAddress.vue

@@ -73,10 +73,14 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-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'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'

src/components/Loading.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 export default {
 	name: 'Loading',
 	components: {

src/components/MailboxPicker.vue

@@ -21,8 +21,8 @@
 			<ul>
 				<NcListItem
 					v-for="box in filteredMailboxes"
-					compact
 					:key="box.databaseId"
+					compact
 					:name="getMailboxTitle(box)"
 					@click.prevent="onClickMailbox(box)">
 					<template #icon>
@@ -38,17 +38,26 @@
 				<IconFolder />
 			</template>
 			<template #description>
-				<p v-if="filterName == ''">{{ t('mail', 'No more submailboxes in here') }}</p>
-				<p v-else>{{ t('mail', 'No results') }}</p>
+				<p v-if="filterName == ''">
+					{{ t('mail', 'No more submailboxes in here') }}
+				</p>
+				<p v-else>
+					{{ t('mail', 'No results') }}
+				</p>
 			</template>
 		</NcEmptyContent>
 	</NcDialog>
 </template>
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { NcBreadcrumb, NcBreadcrumbs, NcDialog, NcEmptyContent, NcInputField, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
+import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import MailboxIcon from './icons/MailboxIcon.vue'
 import { translate as translateMailboxName } from '../i18n/MailboxTranslator.js'

src/components/MailboxThread.vue

@@ -200,8 +200,7 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
-import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
@@ -248,6 +247,7 @@ export default {
 		Thread,
 	},
 
+	mixins: [isMobile],
 	props: {
 		account: {
 			type: Object,
@@ -260,12 +260,6 @@ export default {
 		},
 	},
 
-	setup() {
-		return {
-			isMobile: useIsMobile(),
-		}
-	},
-
 	data() {
 		return {
 

src/components/MdnRequest.vue

@@ -22,8 +22,8 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import logger from '../logger.js'
 import { sendMdn } from '../service/MessageService.js'
 import useMainStore from '../store/mainStore.js'

src/components/MenuEnvelope.vue

@@ -288,15 +288,13 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionLink,
-	NcLoadingIcon,
-} from '@nextcloud/vue'
 import { Base64 } from 'js-base64'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'