From 69a29d9203382d0d86cd13e4ec03fc5cf79b205c Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 28 Apr 2023 15:10:07 +0200
Subject: [PATCH] perf(bundles): migrate nc-vue imports

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 jest.config.js                                |  7 +++++--
 package-lock.json                             | 13 ++++++++++++
 package.json                                  |  1 +
 src/components/Actions/ActionCopyNtoFN.vue    |  2 +-
 src/components/Actions/ActionToggleYear.vue   |  2 +-
 src/components/AppContent/ChartContent.vue    |  2 +-
 src/components/AppContent/CircleContent.vue   | 10 ++++++----
 src/components/AppContent/ContactsContent.vue | 10 ++++++----
 .../AppNavigation/CircleNavigationItem.vue    | 14 +++++++------
 .../AppNavigation/ContactsSettings.vue        |  3 +--
 .../AppNavigation/GroupNavigationItem.vue     |  8 +++++---
 .../AppNavigation/RootNavigation.vue          | 20 ++++++++++---------
 .../Settings/SettingsAddressbook.vue          | 16 ++++++++-------
 .../Settings/SettingsAddressbookShare.vue     |  2 +-
 .../Settings/SettingsAddressbookSharee.vue    |  6 ++++--
 .../Settings/SettingsImportContacts.vue       | 10 ++++++----
 .../Settings/SettingsSortContacts.vue         |  2 +-
 src/components/ChartTemplate.vue              |  2 +-
 src/components/CircleDetails.vue              | 10 ++++++----
 .../CircleDetails/CircleConfigs.vue           |  2 +-
 .../CircleDetails/CirclePasswordSettings.vue  |  6 ++++--
 src/components/ContactDetails.vue             | 19 +++++++++---------
 .../ContactDetails/ContactDetailsAvatar.vue   | 14 +++++++------
 src/components/ContactsList.vue               |  2 +-
 .../ContactsList/ContactsListItem.vue         |  6 ++++--
 src/components/DetailsHeader.vue              |  2 +-
 .../EntityPicker/ContactsPicker.vue           |  2 +-
 src/components/EntityPicker/EntityBubble.vue  |  2 +-
 src/components/EntityPicker/EntityPicker.vue  |  9 +++++----
 .../EntityPicker/EntitySearchResult.vue       |  2 +-
 .../EntityPicker/NewCircleIntro.vue           |  6 ++++--
 src/components/MemberList.vue                 | 12 ++++++-----
 .../MembersList/MembersListItem.vue           | 12 ++++++-----
 src/components/OrgChart.vue                   |  2 +-
 src/components/ProcessingScreen.vue           |  2 +-
 src/components/Properties/PropertyActions.vue |  6 ++++--
 .../Properties/PropertyDateTime.vue           |  6 ++++--
 src/components/Properties/PropertyGroups.vue  |  2 +-
 .../Properties/PropertyMultipleText.vue       |  2 +-
 src/components/Properties/PropertySelect.vue  |  2 +-
 src/components/Properties/PropertyText.vue    |  2 +-
 src/components/Properties/PropertyTitle.vue   |  6 ++++--
 src/main.js                                   |  2 +-
 src/views/Contacts.vue                        | 10 ++++++----
 src/views/Processing/AddToGroupView.vue       |  2 +-
 src/views/Processing/ImportView.vue           |  2 +-
 46 files changed, 169 insertions(+), 113 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 4f535d90..c422505d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,6 @@
-const esModules = ['p-limit', 'yocto-queue', 'vue-material-design-icons'].join('|')
+const esModules = [
+	'p-limit',
+].join('|')
 
 module.exports = {
 	preset: 'ts-jest',
@@ -15,6 +17,7 @@ module.exports = {
 		'^.+\\.ts$': 'ts-jest',
 		'^.+\\.js$': 'babel-jest',
 		'^.+\\.vue$': '@vue/vue2-jest',
+		'^.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$': 'jest-transform-stub',
 	},
-	transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+	transformIgnorePatterns: [`/node_modules/(?!${esModules})/.+\\.js$`],
 }
diff --git a/package-lock.json b/package-lock.json
index 80888203..cbcb7947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
 				"eslint-import-resolver-typescript": "^3.5.5",
 				"jest": "^29.5.0",
 				"jest-environment-jsdom": "^29.5.0",
+				"jest-transform-stub": "^2.0.0",
 				"stylelint": "^14.16.1",
 				"stylelint-config-recommended-scss": "^7.0.0",
 				"ts-jest": "^29.1.0",
@@ -11560,6 +11561,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/jest-transform-stub": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+			"integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==",
+			"dev": true
+		},
 		"node_modules/jest-util": {
 			"version": "29.5.0",
 			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
@@ -26327,6 +26334,12 @@
 				}
 			}
 		},
+		"jest-transform-stub": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+			"integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==",
+			"dev": true
+		},
 		"jest-util": {
 			"version": "29.5.0",
 			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
diff --git a/package.json b/package.json
index 981351b1..3c3aee45 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
 		"eslint-import-resolver-typescript": "^3.5.5",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
+		"jest-transform-stub": "^2.0.0",
 		"stylelint": "^14.16.1",
 		"stylelint-config-recommended-scss": "^7.0.0",
 		"ts-jest": "^29.1.0",
diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index aeeb3917..fd669399 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/NcActionButton.js'
+import { NcActionButton as ActionButton } from '@nextcloud/vue'
 import ActionsMixin from '../../mixins/ActionsMixin.js'
 import IconCopy from 'vue-material-design-icons/ContentCopy.vue'
 
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index f74a2cf4..e00802c3 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/NcActionCheckbox.js'
+import { NcActionCheckbox as ActionCheckbox } from '@nextcloud/vue'
 import ActionsMixin from '../../mixins/ActionsMixin.js'
 
 export default {
diff --git a/src/components/AppContent/ChartContent.vue b/src/components/AppContent/ChartContent.vue
index a4fe165e..0a3fb7d5 100644
--- a/src/components/AppContent/ChartContent.vue
+++ b/src/components/AppContent/ChartContent.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import { NcAppContent as AppContent } from '@nextcloud/vue'
 
 import OrgChart from '../OrgChart.vue'
 import { getChart, transformNode } from '../../utils/chartUtils.js'
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 57c9e6cd..657e8636 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -67,10 +67,12 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import {
+	NcAppContent as AppContent,
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+	isMobile,
+} from '@nextcloud/vue'
 import IconCircles from '../Icons/IconCircles.vue'
 import CircleDetails from '../CircleDetails.vue'
 import MemberList from '../MemberList.vue'
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 60c3a5c1..cd0b538b 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -72,10 +72,12 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcAppContent as AppContent,
+	NcButton as Button,
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 import ContactDetails from '../ContactDetails.vue'
 import ContactsList from '../ContactsList.vue'
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 22be2dad..c299e709 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -90,12 +90,14 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcActionText as ActionText,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 import ExitToApp from 'vue-material-design-icons/ExitToApp.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index 9cb402f6..bb2f1d3b 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -66,9 +66,8 @@ import SettingsAddressbook from './Settings/SettingsAddressbook.vue'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook.vue'
 import SettingsImportContacts from './Settings/SettingsImportContacts.vue'
 import SettingsSortContacts from './Settings/SettingsSortContacts.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import { NcCheckboxRadioSwitch as CheckboxRadioSwitch, NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 import { CONTACTS_SETTINGS } from '../../models/constants.ts'
-import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 
 export default {
 	name: 'ContactsSettings',
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 3e86abec..968210f1 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -68,9 +68,11 @@ import { emit } from '@nextcloud/event-bus'
 import download from 'downloadjs'
 import moment from 'moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import {
+	NcActionButton as ActionButton,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+} from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 0f23e1d6..08a61378 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -191,15 +191,17 @@
 <script>
 import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC, CONTACTS_SETTINGS } from '../../models/constants.ts'
 
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcActionInput as ActionInput,
+	NcActionText as ActionText,
+	NcActionButton,
+	NcAppNavigation as AppNavigation,
+	NcButton as Button,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+	NcAppNavigationCaption as AppNavigationCaption,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 import naturalCompare from 'string-natural-compare'
 
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index cd976f96..73794716 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -111,13 +111,15 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcActions as Actions,
+	NcActionLink as ActionLink,
+	NcActionButton as ActionButton,
+	NcActionInput as ActionInput,
+	NcActionCheckbox as ActionCheckbox,
+	NcLoadingIcon as IconLoading,
+	NcButton as Button,
+} from '@nextcloud/vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconRename from 'vue-material-design-icons/Pencil.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index f54d50fb..b419640e 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import client from '../../../services/cdav.js'
 
 import addressBookSharee from './SettingsAddressbookSharee.vue'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index 91cb9a6d..c77eca3e 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -58,8 +58,10 @@ import { showError } from '@nextcloud/dialogs'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconGroup from 'vue-material-design-icons/AccountMultiple.vue'
 import IconUser from 'vue-material-design-icons/Account.vue'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcButton as Button,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 export default {
 	name: 'SettingsAddressbookSharee',
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 837a4fb5..8721820e 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -92,10 +92,12 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcButton as Button,
+	NcModal as Modal,
+	NcMultiselect as Multiselect,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 import { encodePath } from '@nextcloud/paths'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index 9f40df50..40bba15e 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
diff --git a/src/components/ChartTemplate.vue b/src/components/ChartTemplate.vue
index a48dded8..c52147cf 100644
--- a/src/components/ChartTemplate.vue
+++ b/src/components/ChartTemplate.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { NcAvatar as Avatar } from '@nextcloud/vue'
 
 export default {
 	name: 'ChartTemplate',
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 90078a77..62b97d0b 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -126,10 +126,12 @@
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails.js'
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import RichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import {
+	NcAppContentDetails as AppContentDetails,
+	NcAvatar as Avatar,
+	NcButton as Button,
+	NcRichContenteditable as RichContenteditable,
+} from '@nextcloud/vue'
 
 import Login from 'vue-material-design-icons/Login.vue'
 import Logout from 'vue-material-design-icons/Logout.vue'
diff --git a/src/components/CircleDetails/CircleConfigs.vue b/src/components/CircleDetails/CircleConfigs.vue
index aeeb0f03..7067f438 100644
--- a/src/components/CircleDetails/CircleConfigs.vue
+++ b/src/components/CircleDetails/CircleConfigs.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import { NcCheckboxRadioSwitch as CheckboxRadioSwitch } from '@nextcloud/vue'
 import ContentHeading from './ContentHeading.vue'
 
 import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
diff --git a/src/components/CircleDetails/CirclePasswordSettings.vue b/src/components/CircleDetails/CirclePasswordSettings.vue
index f24911e2..916f5577 100644
--- a/src/components/CircleDetails/CirclePasswordSettings.vue
+++ b/src/components/CircleDetails/CirclePasswordSettings.vue
@@ -75,8 +75,10 @@
 
 <script>
 import ContentHeading from './ContentHeading.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcCheckboxRadioSwitch as CheckboxRadioSwitch,
+	NcButton as Button,
+} from '@nextcloud/vue'
 
 // Circle setting keys
 const ENFORCE_PASSWORD_PROTECTION = 'enforce_password'
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 5ccfcad1..edd84c71 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -277,16 +277,17 @@ import { showError } from '@nextcloud/dialogs'
 import { stringify } from 'ical.js'
 import qr from 'qr-image'
 import Vue from 'vue'
-
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import {
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcAppContentDetails as AppContentDetails,
+	NcEmptyContent as EmptyContent,
+	NcModal as Modal,
+	NcMultiselect as Multiselect,
+	NcLoadingIcon as IconLoading,
+	NcButton,
+} from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconQr from 'vue-material-design-icons/Qrcode.vue'
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index de5746ba..3902ac76 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -110,19 +110,21 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import {
+	NcAvatar as Avatar,
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcButton,
+	NcModal,
+} from '@nextcloud/vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconCloudDownload from 'vue-material-design-icons/CloudDownload.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconUpload from 'vue-material-design-icons/Upload.vue'
 import IconFolder from 'vue-material-design-icons/Folder.vue'
 import IconImage from 'vue-material-design-icons/Image.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import VueCropper from 'vue-cropperjs'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
 
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 80c95620..18979dee 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList.js'
+import { NcAppContentList as AppContentList } from '@nextcloud/vue'
 import ContactsListItem from './ContactsList/ContactsListItem.vue'
 import VirtualList from 'vue-virtual-scroll-list'
 
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 37204df4..b8cd24ff 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -22,8 +22,10 @@
 </template>
 
 <script>
-import { NcListItem as ListItem } from '@nextcloud/vue'
-import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import {
+	NcListItem as ListItem,
+	NcAvatar as BaseAvatar,
+} from '@nextcloud/vue'
 
 export default {
 	name: 'ContactsListItem',
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index e922acba..6f0a705b 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import { NcActions as Actions } from '@nextcloud/vue'
 
 export default {
 	name: 'DetailsHeader',
diff --git a/src/components/EntityPicker/ContactsPicker.vue b/src/components/EntityPicker/ContactsPicker.vue
index 0ef7334b..edb5463d 100644
--- a/src/components/EntityPicker/ContactsPicker.vue
+++ b/src/components/EntityPicker/ContactsPicker.vue
@@ -20,7 +20,7 @@
 import { subscribe } from '@nextcloud/event-bus'
 import pLimit from 'p-limit'
 
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { NcModal as Modal } from '@nextcloud/vue'
 
 import AddToGroupView from '../../views/Processing/AddToGroupView.vue'
 import appendContactToGroup from '../../services/appendContactToGroup.js'
diff --git a/src/components/EntityPicker/EntityBubble.vue b/src/components/EntityPicker/EntityBubble.vue
index d06f4d99..4864a86f 100644
--- a/src/components/EntityPicker/EntityBubble.vue
+++ b/src/components/EntityPicker/EntityBubble.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+import { NcUserBubble as UserBubble } from '@nextcloud/vue'
 
 export default {
 	name: 'EntityBubble',
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 7ec92b1b..1d20b3d6 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -96,11 +96,12 @@
 <script>
 import debounce from 'debounce'
 import VirtualList from 'vue-virtual-scroll-list'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+	NcModal as Modal,
+} from '@nextcloud/vue'
 import IconSearch from 'vue-material-design-icons/Magnify.vue'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
-
 import EntityBubble from './EntityBubble.vue'
 import EntitySearchResult from './EntitySearchResult.vue'
 
diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue
index 0b1d8f19..62a8869f 100644
--- a/src/components/EntityPicker/EntitySearchResult.vue
+++ b/src/components/EntityPicker/EntitySearchResult.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+import { NcUserBubble as UserBubble } from '@nextcloud/vue'
 
 export default {
 	name: 'EntitySearchResult',
diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index 9a247a9b..3b99b5e7 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -79,8 +79,10 @@
 
 <script>
 import { getCapabilities } from '@nextcloud/capabilities'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import {
+	NcCheckboxRadioSwitch as CheckboxRadioSwitch,
+	NcModal as Modal,
+} from '@nextcloud/vue'
 
 import { CIRCLE_DESC } from '../../models/constants.ts'
 
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 6cabe451..eb3ac4f3 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -85,11 +85,13 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import {
+	NcAppContentList as AppContentList,
+	NcButton as Button,
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+	isMobile,
+} from '@nextcloud/vue'
 import VirtualList from 'vue-virtual-scroll-list'
 
 import MembersListItem from './MembersList/MembersListItem.vue'
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index 52b7f833..84a21874 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -100,11 +100,13 @@
 <script>
 import { CIRCLES_MEMBER_LEVELS, MemberLevels, MemberStatus } from '../../models/constants.ts'
 
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import {
+	NcActions as Actions,
+	NcListItemIcon as ListItemIcon,
+	NcActionSeparator as ActionSeparator,
+	NcActionButton as ActionButton,
+	NcActionText as ActionText,
+} from '@nextcloud/vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/OrgChart.vue b/src/components/OrgChart.vue
index 3b2dd21f..87f2e233 100644
--- a/src/components/OrgChart.vue
+++ b/src/components/OrgChart.vue
@@ -23,7 +23,7 @@
 import * as d3 from 'd3'
 import ChartTemplate from './ChartTemplate.vue'
 import { getLocale } from '@nextcloud/l10n'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import { OrgChart } from 'd3-org-chart'
 import router from './../router/index.js'
 import Vue from 'vue'
diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue
index 084b7208..059fe85d 100644
--- a/src/components/ProcessingScreen.vue
+++ b/src/components/ProcessingScreen.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 export default {
 	name: 'ProcessingScreen',
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index 25d15627..6a3ce25d 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -37,8 +37,10 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+} from '@nextcloud/vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 
 export default {
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 0c43ecfe..f437cb18 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -88,8 +88,10 @@
 <script>
 import debounce from 'debounce'
 import moment from 'moment'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import {
+	NcDatetimePicker as DatetimePicker,
+	NcMultiselect as Multiselect,
+} from '@nextcloud/vue'
 import { getLocale } from '@nextcloud/l10n'
 import { VCardTime } from 'ical.js'
 
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index a71a55ed..459563c9 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -65,7 +65,7 @@
 
 <script>
 import debounce from 'debounce'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import Contact from '../../models/contact.js'
 import PropertyTitle from './PropertyTitle.vue'
 import naturalCompare from 'string-natural-compare'
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 67e613d4..976713c8 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -127,7 +127,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
 import PropertyActions from './PropertyActions.vue'
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index ba4f9e18..8c13ff9b 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
 import PropertyActions from './PropertyActions.vue'
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 9dfcb911..c8e710c0 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import debounce from 'debounce'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index 6764efb3..ec17f730 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -48,8 +48,10 @@
 
 <script>
 import PropertyTitleIcon from './PropertyTitleIcon.vue'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import {
+	NcActionButton as ActionButton,
+	NcActions as Actions,
+} from '@nextcloud/vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 export default {
 	name: 'PropertyTitle',
diff --git a/src/main.js b/src/main.js
index 85a3e7d0..3806703c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,7 +32,7 @@ import logger from './services/logger.js'
 
 /** GLOBAL COMPONENTS AND DIRECTIVE */
 import ClickOutside from 'vue-click-outside'
-import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import { Tooltip as VTooltip } from '@nextcloud/vue'
 
 // Global scss sheets
 import '../css/contacts.scss'
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 00c4d0bd..5f7efc17 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -70,10 +70,12 @@
 <script>
 import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, ROUTE_CIRCLE } from '../models/constants.ts'
 
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import Content from '@nextcloud/vue/dist/Components/NcContent.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import {
+	isMobile,
+	NcButton as Button,
+	NcContent as Content,
+	NcModal as Modal,
+} from '@nextcloud/vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { VCardTime } from 'ical.js'
diff --git a/src/views/Processing/AddToGroupView.vue b/src/views/Processing/AddToGroupView.vue
index 3eb8495c..518d907f 100644
--- a/src/views/Processing/AddToGroupView.vue
+++ b/src/views/Processing/AddToGroupView.vue
@@ -38,7 +38,7 @@
 
 <script>
 import ProcessingScreen from '../../components/ProcessingScreen.vue'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton as Button } from '@nextcloud/vue'
 export default {
 	name: 'AddToGroupView',
 
diff --git a/src/views/Processing/ImportView.vue b/src/views/Processing/ImportView.vue
index ca5891fc..bbea7be9 100644
--- a/src/views/Processing/ImportView.vue
+++ b/src/views/Processing/ImportView.vue
@@ -38,7 +38,7 @@
 
 <script>
 import ProcessingScreen from '../../components/ProcessingScreen.vue'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton as Button } from '@nextcloud/vue'
 export default {
 	name: 'ImportView',