use newer libraries and clean up eslint

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

4 files changed, 95 insertions, 95 deletions

diff --git a/src/App.vue b/src/App.vue
index 5bad6bf2a..8b994ffd3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,24 @@
 <template>
-	<Content app-name="news">
+	<NcContent app-name="news">
 		<Sidebar />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
 <script lang="ts">
 
 import Vue from 'vue'
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
 import Sidebar from './components/Sidebar.vue'
 
 export default Vue.extend({
 	components: {
-		Content,
+		NcContent,
 		Sidebar,
-		AppContent,
+		NcAppContent,
 	},
 	created() {
 		this.$store.dispatch('loadFolder')
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index ff872a0de..d0744ed6e 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal @close="$emit('close')">
+	<NcModal @close="$emit('close')">
 		<div id="new-feed" news-add-feed="Navigation.feed">
 			<form ng-submit="Navigation.createFeed(Navigation.feed)"
 				ng-init="Navigation.feed.autoDiscover=true"
@@ -25,15 +25,15 @@
 					</p>
 
 					<!-- select a folder -->
-					<CheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
 						{{ t("news", "New folder") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
-					<!--Multiselect v-if="!createNewFolder"
+					<NcMultiselect v-if="!createNewFolder && folders"
 						v-model="folder"
 						:options="folders"
 						track-by="id"
-						label="name" /-->
+						label="name" />
 
 					<!-- add a folder -->
 					<input v-if="createNewFolder"
@@ -58,9 +58,9 @@
 
 					<!-- basic auth -->
 
-					<CheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
 						{{ t("news", "Credentials") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
 					<div v-if="withBasicAuth" class="add-feed-basicauth">
 						<p class="warning">
@@ -69,7 +69,7 @@
 									"news",
 									"HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
 								)
-							}}>
+							}}
 						</p>
 						<input type="text"
 							ng-model="Navigation.feed.user"
@@ -84,11 +84,11 @@
 							autocomplete="new-password">
 					</div>
 
-					<CheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
 						{{ t("news", "Auto discover Feed") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
-					<Button :wide="true"
+					<NcButton :wide="true"
 						type="primary"
 						ng-disabled="Navigation.feedUrlExists(Navigation.feed.url) ||
 													(
@@ -97,20 +97,20 @@
 													)"
 						@click="addFeed()">
 						{{ t("news", "Subscribe") }}
-					</Button>
+					</NcButton>
 				</fieldset>
 			</form>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script lang="ts">
 
 import Vue from 'vue'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Button from '@nextcloud/vue/dist/Components/Button'
-// import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { Folder } from '../types/Folder.vue'
 import { Feed } from '../types/Feed.vue'
 
@@ -126,10 +126,10 @@ type AddFeedState = {
 
 export default Vue.extend({
 	components: {
-		Modal,
-		CheckboxRadioSwitch,
-		Button,
-		// Multiselect,
+		NcModal,
+		NcCheckboxRadioSwitch,
+		NcButton,
+		NcMultiselect,
 	},
 	props: {
 		feed: {
diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index 67d67272c..81ce3c060 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -22,9 +22,9 @@
 						<img :src="entry.image">
 					</div>
 				</div>
-				<Button @click="subscribe(entry.feed)">
+				<NcButton @click="subscribe(entry.feed)">
 					{{ t("news", "Subscribe to") }} {{ entry.title }}
-				</Button>
+				</NcButton>
 			</div>
 		</div>
 	</div>
@@ -33,7 +33,7 @@
 <script lang="ts">
 
 import Vue from 'vue'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import axios from '@nextcloud/axios'
 import AddFeed from './AddFeed.vue'
 import * as router from '@nextcloud/router'
@@ -42,7 +42,7 @@ import { Feed } from '../types/Feed.vue'
 
 const ExploreComponent = Vue.extend({
 	components: {
-		Button,
+		NcButton,
 		AddFeed,
 	},
 	data: () => {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 131023179..a1280d8c3 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,46 +1,46 @@
 <template>
-	<AppNavigation>
+	<NcAppNavigation>
 		<AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" />
-		<AppNavigationNew :text="t('news', 'Subscribe')"
+		<NcAppNavigationNew :text="t('news', 'Subscribe')"
 			button-id="new-feed-button"
 			button-class="icon-add"
 			@click="showShowAddFeed()" />
 
 		<ul id="locations" class="with-icon">
-			<AppNavigationNewItem :title="t('news', 'New folder')"
+			<NcAppNavigationNewItem :title="t('news', 'New folder')"
 				icon="icon-add-folder"
 				@new-item="newFolder" />
 
-			<AppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss">
+			<NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss">
 				<template #actions>
-					<ActionButton icon="icon-checkmark" @click="alert('Edit')">
+					<NcActionButton icon="icon-checkmark" @click="alert('Edit')">
 						t('news','Mark read')
-					</ActionButton>
+					</NcActionButton>
 				</template>
 				<template #counter>
 					<CounterBubble>5</CounterBubble>
 				</template>
-			</AppNavigationItem>
-			<AppNavigationItem :title="t('news', 'All articles')" icon="icon-rss">
+			</NcAppNavigationItem>
+			<NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss">
 				<template #actions>
 					<ActionButton icon="icon-checkmark" @click="alert('Edit')">
 						t('news','Mark read')
 					</ActionButton>
 				</template>
-			</AppNavigationItem>
-			<AppNavigationItem :title="t('news', 'Starred')" icon="icon-starred">
+			</NcAppNavigationItem>
+			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred">
 				<template #counter>
-					<CounterBubble>35</CounterBubble>
+					<NcCounterBubble>35</NcCounterBubble>
 				</template>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 
-			<AppNavigationItem v-for="folder in folders"
+			<NcAppNavigationItem v-for="folder in folders"
 				:key="folder.name"
 				:title="folder.name"
 				icon="icon-folder"
 				:allow-collapse="true">
 				<template #default>
-					<AppNavigationItem v-for="feed in folder.feeds"
+					<NcAppNavigationItem v-for="feed in folder.feeds"
 						:key="feed.name"
 						:title="feed.title">
 						<template #icon>
@@ -50,102 +50,102 @@
 							<div v-if="!feed.faviconLink" class="icon-rss" />
 						</template>
 						<template #actions>
-							<ActionButton icon="icon-checkmark" @click="alert('Mark read')">
+							<NcActionButton icon="icon-checkmark" @click="alert('Mark read')">
 								{{ t("news", "Mark read") }}
-							</ActionButton>
-							<ActionButton icon="icon-pinned" @click="alert('Rename')">
+							</NcActionButton>
+							<NcActionButton icon="icon-pinned" @click="alert('Rename')">
 								{{ t("news", "Unpin from top") }}
-							</ActionButton>
-							<ActionButton icon="icon-caret-dark"
+							</NcActionButton>
+							<NcActionButton icon="icon-caret-dark"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Newest first") }}
-							</ActionButton>
-							<ActionButton icon="icon-caret-dark"
+							</NcActionButton>
+							<NcActionButton icon="icon-caret-dark"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Oldest first") }}
-							</ActionButton>
-							<ActionButton icon="icon-caret-dark"
+							</NcActionButton>
+							<NcActionButton icon="icon-caret-dark"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Default order") }}
-							</ActionButton>
-							<ActionButton icon="icon-full-text-disabled"
+							</NcActionButton>
+							<NcActionButton icon="icon-full-text-disabled"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Enable full text") }}
-							</ActionButton>
-							<ActionButton icon="icon-full-text-enabled"
+							</NcActionButton>
+							<NcActionButton icon="icon-full-text-enabled"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Disable full text") }}
-							</ActionButton>
-							<ActionButton icon="icon-updatemode-default"
+							</NcActionButton>
+							<NcActionButton icon="icon-updatemode-default"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Unread updated") }}
-							</ActionButton>
-							<ActionButton icon="icon-updatemode-unread"
+							</NcActionButton>
+							<NcActionButton icon="icon-updatemode-unread"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Ignore updated") }}
-							</ActionButton>
-							<ActionButton icon="icon-icon-rss" @click="deleteFolder(folder)">
+							</NcActionButton>
+							<NcActionButton icon="icon-icon-rss" @click="deleteFolder(folder)">
 								{{ t("news", "Open feed URL") }}
-							</ActionButton>
-							<ActionButton icon="icon-icon-rename"
+							</NcActionButton>
+							<NcActionButton icon="icon-icon-rename"
 								@click="deleteFolder(folder)">
 								{{ t("news", "Rename") }}
-							</ActionButton>
-							<ActionButton icon="icon-delete" @click="deleteFolder(folder)">
+							</NcActionButton>
+							<NcActionButton icon="icon-delete" @click="deleteFolder(folder)">
 								{{ t("news", "Delete") }}
-							</ActionButton>
+							</NcActionButton>
 						</template>
-					</AppNavigationItem>
+					</NcAppNavigationItem>
 				</template>
 				<template v-if="folder.feedCount > 0" #counter>
 					<CounterBubble>{{ folder.feedCount }}</CounterBubble>
 				</template>
 				<template #actions>
-					<ActionButton icon="icon-checkmark" @click="alert('Mark read')">
+					<NcActionButton icon="icon-checkmark" @click="alert('Mark read')">
 						{{ t("news", "Mark read") }}
-					</ActionButton>
-					<ActionButton icon="icon-rename" @click="alert('Rename')">
+					</NcActionButton>
+					<NcActionButton icon="icon-rename" @click="alert('Rename')">
 						{{ t("news", "Rename") }}
-					</ActionButton>
-					<ActionButton icon="icon-delete" @click="deleteFolder(folder)">
+					</NcActionButton>
+					<NcActionButton icon="icon-delete" @click="deleteFolder(folder)">
 						{{ t("news", "Delete") }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 
-			<AppNavigationItem :title="t('news', 'Explore')"
+			<NcAppNavigationItem :title="t('news', 'Explore')"
 				icon="icon-link"
 				:to="{ name: 'explore' }">
 				<template #counter>
-					<CounterBubble>35</CounterBubble>
+					<NcCounterBubble>35</NcCounterBubble>
 				</template>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 		</ul>
-	</AppNavigation>
+	</NcAppNavigation>
 </template>
 
 <script lang="ts">
 
 import Vue from 'vue'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationNewItem from '@nextcloud/vue/dist/Components/AppNavigationNewItem'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem'
 // import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import AddFeed from './AddFeed.vue'
 import { Folder } from '../types/Folder.vue'
 
 export default Vue.extend({
 	components: {
-		AppNavigation,
-		AppNavigationNew,
-		AppNavigationItem,
-		AppNavigationNewItem,
+		NcAppNavigation,
+		NcAppNavigationNew,
+		NcAppNavigationItem,
+		NcAppNavigationNewItem,
 		// AppNavigationCounter,
-		CounterBubble,
-		ActionButton,
+		NcCounterBubble,
+		NcActionButton,
 		AddFeed,
 	},
 	data: () => {