Bump @nextcloud/eslint-config from 6.1.2 to 8.1.2

Fix all file extension related to new rules from eslint-config-8.1.2

Bumps [@nextcloud/eslint-config](https://github.com/nextcloud/eslint-config) from 6.1.2 to 8.1.2.
- [Release notes](https://github.com/nextcloud/eslint-config/releases)
- [Changelog](https://github.com/nextcloud/eslint-config/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nextcloud/eslint-config/compare/v6.1.2...v8.1.2)

---
updated-dependencies:
- dependency-name: "@nextcloud/eslint-config"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

66 files changed, 406 insertions, 495 deletions

diff --git a/src/admin-settings.js b/src/admin-settings.js
index 2a7ebf85..6fd86dec 100644
--- a/src/admin-settings.js
+++ b/src/admin-settings.js
@@ -21,7 +21,7 @@
  */
 
 import Vue from 'vue'
-import AdminSettings from './components/AdminSettings'
+import AdminSettings from './components/AdminSettings.vue'
 
 document.addEventListener('DOMContentLoaded', main)
 
diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index 5e1157e8..aeeb3917 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -29,9 +29,9 @@
 	</ActionButton>
 </template>
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionsMixin from '../../mixins/ActionsMixin'
-import IconCopy from 'vue-material-design-icons/ContentCopy'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionsMixin from '../../mixins/ActionsMixin.js'
+import IconCopy from 'vue-material-design-icons/ContentCopy.vue'
 
 export default {
 	name: 'ActionCopyNtoFN',
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index eb169880..f74a2cf4 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -28,8 +28,8 @@
 	</ActionCheckbox>
 </template>
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionsMixin from '../../mixins/ActionsMixin'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import ActionsMixin from '../../mixins/ActionsMixin.js'
 
 export default {
 	name: 'ActionToggleYear',
diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 415048ce..32ad9a64 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -24,8 +24,7 @@
 	<div id="contacts" class="section">
 		<h2>{{ t('contacts', 'Contacts') }}</h2>
 		<p>
-			<input
-				id="allow-social-sync"
+			<input id="allow-social-sync"
 				v-model="allowSocialSync"
 				type="checkbox"
 				class="checkbox"
diff --git a/src/components/AppContent/ChartContent.vue b/src/components/AppContent/ChartContent.vue
index e9c3b82f..a4fe165e 100644
--- a/src/components/AppContent/ChartContent.vue
+++ b/src/components/AppContent/ChartContent.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 
 import OrgChart from '../OrgChart.vue'
-import { getChart, transformNode } from '../../utils/chartUtils'
+import { getChart, transformNode } from '../../utils/chartUtils.js'
 
 export default {
 	name: 'ChartContent',
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 90619e90..57c9e6cd 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -24,8 +24,7 @@
 	<AppContent v-if="!circle">
 		<EmptyContent :title="t('contacts', 'Please select a circle')">
 			<template #icon>
-				<IconCircles
-					:size="20" />
+				<IconCircles :size="20" />
 			</template>
 		</EmptyContent>
 	</AppContent>
@@ -41,8 +40,7 @@
 	<AppContent v-else :show-details.sync="showDetails">
 		<!-- member list -->
 		<template #list>
-			<MemberList
-				:list="members"
+			<MemberList :list="members"
 				:loading="loadingList"
 				:show-details.sync="showDetails" />
 		</template>
@@ -60,8 +58,7 @@
 
 				<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
 					<template #icon>
-						<IconCircles
-							:size="20" />
+						<IconCircles :size="20" />
 					</template>
 				</EmptyContent>
 			</template>
@@ -70,14 +67,14 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
-import IconCircles from '../Icons/IconCircles'
-import CircleDetails from '../CircleDetails'
-import MemberList from '../MemberList'
-import RouterMixin from '../../mixins/RouterMixin'
+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 IconCircles from '../Icons/IconCircles.vue'
+import CircleDetails from '../CircleDetails.vue'
+import MemberList from '../MemberList.vue'
+import RouterMixin from '../../mixins/RouterMixin.js'
 
 export default {
 	name: 'CircleContent',
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index cf029546..60c3a5c1 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -32,8 +32,7 @@
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
 		<EmptyContent :title="t('contacts', 'There are no contacts yet')">
 			<template #icon>
-				<IconContact
-					:size="20" />
+				<IconContact :size="20" />
 			</template>
 			<template #desc>
 				<Button type="primary" @click="newContact">
@@ -46,8 +45,7 @@
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
 		<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
-				<IconContact
-					:size="20" />
+				<IconContact :size="20" />
 			</template>
 			<template #desc>
 				<Button v-if="contacts.length === 0" type="primary" @click="addContactsToGroup(selectedGroup)">
@@ -63,8 +61,7 @@
 	<AppContent v-else :show-details="showDetails" @update:showDetails="hideDetails">
 		<!-- contacts list -->
 		<template #list>
-			<ContactsList
-				:list="contactsList"
+			<ContactsList :list="contactsList"
 				:contacts="contacts"
 				:search-query="searchQuery" />
 		</template>
@@ -75,15 +72,15 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-
-import ContactDetails from '../ContactDetails'
-import ContactsList from '../ContactsList'
-import IconContact from 'vue-material-design-icons/AccountMultiple'
-import RouterMixin from '../../mixins/RouterMixin'
+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 ContactDetails from '../ContactDetails.vue'
+import ContactsList from '../ContactsList.vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import RouterMixin from '../../mixins/RouterMixin.js'
 
 export default {
 	name: 'ContactsContent',
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index d276bad1..22be2dad 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -20,13 +20,11 @@
   -
   -->
 <template>
-	<AppNavigationItem
-		:key="circle.key"
+	<AppNavigationItem :key="circle.key"
 		:title="circle.displayName"
 		:to="circle.router">
 		<template #icon>
-			<IconCircles
-				:size="20" />
+			<IconCircles :size="20" />
 		</template>
 		<template v-if="loadingAction" slot="actions">
 			<ActionText>
@@ -38,28 +36,24 @@
 		</template>
 
 		<template v-else slot="actions">
-			<ActionButton
-				v-if="circle.canManageMembers"
+			<ActionButton v-if="circle.canManageMembers"
 				:close-after-click="true"
 				@click="addMemberToCircle">
 				<template #icon>
-					<IconAdd
-						:size="20" />
+					<IconAdd :size="20" />
 				</template>
 				{{ t('contacts', 'Add member') }}
 			</ActionButton>
 
 			<!-- copy circle link -->
-			<ActionLink
-				:href="circleUrl"
+			<ActionLink :href="circleUrl"
 				:icon="copyLinkIcon"
 				@click.stop.prevent="copyToClipboard(circleUrl)">
 				{{ copyButtonText }}
 			</ActionLink>
 
 			<!-- leave circle -->
-			<ActionButton
-				v-if="circle.canLeave"
+			<ActionButton v-if="circle.canLeave"
 				@click="confirmLeaveCircle">
 				{{ t('contacts', 'Leave circle') }}
 				<ExitToApp slot="icon"
@@ -68,8 +62,7 @@
 			</ActionButton>
 
 			<!-- join circle -->
-			<ActionButton
-				v-else-if="!circle.isMember && circle.canJoin"
+			<ActionButton v-else-if="!circle.isMember && circle.canJoin"
 				:disabled="loadingJoin"
 				@click="joinCircle">
 				{{ joinButtonTitle }}
@@ -79,12 +72,10 @@
 			</ActionButton>
 
 			<!-- delete circle -->
-			<ActionButton
-				v-if="circle.canDelete"
+			<ActionButton v-if="circle.canDelete"
 				@click="confirmDeleteCircle">
 				<template #icon>
-					<IconDelete
-						:size="20" />
+					<IconDelete :size="20" />
 				</template>
 				{{ t('contacts', 'Delete circle') }}
 			</ActionButton>
@@ -99,19 +90,19 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import ExitToApp from 'vue-material-design-icons/ExitToApp'
-import IconAdd from 'vue-material-design-icons/Plus'
-import IconDelete from 'vue-material-design-icons/Delete'
-import LocationEnter from 'vue-material-design-icons/LocationEnter'
-import IconCircles from '../Icons/IconCircles'
+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 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'
+import LocationEnter from 'vue-material-design-icons/LocationEnter.vue'
+import IconCircles from '../Icons/IconCircles.vue'
 import Circle from '../../models/circle.ts'
-import CircleActionsMixin from '../../mixins/CircleActionsMixin'
+import CircleActionsMixin from '../../mixins/CircleActionsMixin.js'
 
 export default {
 	name: 'CircleNavigationItem',
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index a355bde3..9cb402f6 100644
--- a/