Bugfix/fix vue eslint issues

src/App.vue

@@ -31,18 +31,18 @@
       </q-page-container>
 
       <Footer
-        :standalone="config.standalone"
         :projectcolors="config.colors"
+        :standalone="config.standalone"
       />
     </q-layout>
   </div>
 </template>
 
 <script>
+import { colors } from 'quasar';
 import Footer from '@/components/footer.vue';
 import Header from '@/components/header.vue';
 import PanelsMixin from '@/config/panels.js';
-import { colors } from 'quasar';
 
 export default {
   name: 'Viewer',
@@ -73,9 +73,10 @@ export default {
   created() {
     this.getConfig();
     this.init();
-    this.$q.dark.set('auto');
     this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
 
+    this.$q.dark.set('auto');
+
     if (this.config.colors.primary && this.config.colors.secondary && this.config.colors.accent) {
       colors.setBrand('primary', this.config.colors.primary);
       colors.setBrand('secondary', this.config.colors.secondary);
@@ -144,11 +145,6 @@ export default {
           this.collection = data;
           this.label = this.getLabel(data);
 
-          this.request(data.annotationCollection)
-            .then((annotations) => {
-              this.annotations = annotations.annotationCollection;
-            });
-
           this.tree.push(
             {
               children: [],

src/components/annotations.vue

@@ -23,11 +23,15 @@
 export default {
   name: 'Annotations',
   props: {
-    annotations: Object,
+    annotations: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {};
   },
+  created() {},
   mounted() {},
   methods: {},
 };

src/components/color.vue

@@ -17,7 +17,7 @@
           <q-item
             v-close-popup
             clickable
-            @click="() => changeColorsTo('default')"
+            @click="changeColorsTo('default')"
           >
             <q-item-section>Default</q-item-section>
           </q-item>
@@ -25,14 +25,14 @@
             v-if="projectcolors.primary && projectcolors.secondary && projectcolors.accent"
             v-close-popup
             clickable
-            @click="() => changeColorsTo('emo')"
+            @click="changeColorsTo('emo')"
           >
             <q-item-section>EMo</q-item-section>
           </q-item>
           <q-item
             v-close-popup
             clickable
-            @click="() => changeColorsTo('unicorn')"
+            @click="changeColorsTo('unicorn')"
           >
             <q-item-section>Unicorn</q-item-section>
           </q-item>

src/components/content.vue

@@ -34,7 +34,14 @@
         </q-btn>
       </div>
     </div>
+    <!-- FIXME: => 'v-html' directive can lead to XSS attack  vue/no-v-html
 
+      Vue v1 supported triple braces to show html ({{{ ... }}}).
+      This has been considered deprecated and isn't available anymore.
+      Also Vue's directive "v-text" is considered deprecated (won't be available in v3).
+      It represents text *as is* anyways and therefor isn't an alternative, since it would show html tags in the text.
+      Atm there doesn't seem to be an alternative to "v-html" in regards to presenting xml/html.
+    -->
     <div class="row">
       <div
         :id="nodeid"
@@ -52,10 +59,22 @@ import { fasSearchPlus, fasSearchMinus } from '@quasar/extras/fontawesome-v5';
 export default {
   name: 'Content',
   props: {
-    contenturl: String,
-    fontsize: Number,
-    manifests: Array,
-    request: Function,
+    contenturl: {
+      type: String,
+      default: () => '',
+    },
+    fontsize: {
+      type: Number,
+      default: () => 14,
+    },
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
+    request: {
+      type: Function,
+      default: null,
+    },
   },
   data() {
     return {

src/components/footer.vue

 <template>
   <q-footer
     bordered
-    reveal
     class="row justify-start items-center"
+    reveal
     :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
   >
     <Language v-if="standalone" />
@@ -12,20 +12,23 @@
 </template>
 
 <script>
+import Color from '@/components/color.vue';
 import Language from '@/components/language.vue';
 import Softwareinfo from '@/components/softwareinfo.vue';
-import Color from '@/components/color.vue';
 
 export default {
   name: 'Footer',
   components: {
+    Color,
     Language,
     Softwareinfo,
-    Color,
   },
   props: {
+    projectcolors: {
+      type: Object,
+      default: () => {},
+    },
     standalone: Boolean,
-    projectcolors: Object,
   },
 };
 </script>

src/components/header.vue

@@ -58,13 +58,34 @@ export default {
     ToggleIndex,
   },
   props: {
-    collectiontitle: String,
-    config: Object,
-    imageurl: String,
-    itemlabel: String,
-    itemurls: Array,
-    manifests: Array,
-    panels: Array,
+    collectiontitle: {
+      type: String,
+      default: () => '',
+    },
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    imageurl: {
+      type: String,
+      default: () => '',
+    },
+    itemlabel: {
+      type: String,
+      default: () => '',
+    },
+    itemurls: {
+      type: Array,
+      default: () => [],
+    },
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
+    panels: {
+      type: Array,
+      default: () => [],
+    },
   },
 };
 </script>

src/components/infobar.vue

@@ -22,9 +22,18 @@ import { fasChevronRight } from '@quasar/extras/fontawesome-v5';
 export default {
   name: 'Infobar',
   props: {
-    collectiontitle: String,
-    itemlabel: String,
-    manifests: Array,
+    collectiontitle: {
+      type: String,
+      default: () => '',
+    },
+    itemlabel: {
+      type: String,
+      default: () => '',
+    },
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {

src/components/metadata.vue

@@ -171,12 +171,30 @@
 export default {
   name: 'Metadata',
   props: {
-    config: Object,
-    collection: Object,
-    itemlabel: String,
-    labels: Object,
-    language: String,
-    manifests: Array,
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    collection: {
+      type: Object,
+      default: () => {},
+    },
+    itemlabel: {
+      type: String,
+      default: () => '',
+    },
+    labels: {
+      type: Object,
+      default: () => {},
+    },
+    language: {
+      type: String,
+      default: () => '',
+    },
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {

src/components/openseadragon.vue

@@ -33,7 +33,10 @@ import {
 export default {
   name: 'OpenSeadragon',
   props: {
-    imageurl: String,
+    imageurl: {
+      type: String,
+      default: () => '',
+    },
   },
   data() {
     return {

src/components/togglebar/panelsposition.vue

@@ -49,7 +49,10 @@ export default {
     Dragpanelboxes,
   },
   props: {
-    panelboxes: Array,
+    panelboxes: {
+      type: Array,
+      default: () => [],
+    },
   },
   data: () => ({
     status: false,

src/components/togglebar/toggleIndex.vue

@@ -62,7 +62,10 @@ export default {
     ToggleFilter,
   },
   props: {
-    panels: Array,
+    panels: {
+      type: Array,
+      default: () => [],
+    },
   },
   created() {
     // mount the fonts

src/components/tree.vue

@@ -11,7 +11,7 @@
       :selected.sync="selected"
     >
       <template
-        v-slot:default-body="{node}"
+        #default-body="{node}"
       >
         <div
           v-if="!node.children"
@@ -29,8 +29,14 @@ import treestore from '@/stores/treestore.js';
 export default {
   name: 'Treeview',
   props: {
-    manifests: Array,
-    tree: Array,
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
+    tree: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {

src/components/util/panelboxes.vue

@@ -82,7 +82,10 @@ export default {
     Panelsdraggable,
   },
   props: {
-    data: Array,
+    data: {
+      type: Array,
+      default: () => [],
+    },
   },
   data: () => ({
     dragged: null,

src/views/mainview.vue

@@ -5,9 +5,9 @@
       class="row panels-target"
     >
       <div
-        v-for="(p, i) in panels"
+        v-for="(p, index) in panels"
         v-show="p.show && p.connector.length"
-        :key="`pc${i}`"
+        :key="`pc${index}`"
         class="col-12 col-sm-6 col-md-3"
       >
         <Toolbar :heading="p.panel_label" />
@@ -44,9 +44,9 @@
               keep-alive
             >
               <q-tab-panel
-                v-for="(tab, i) in p.connector"
-                :key="`co${i}`"
-                :name="`tab${i}`"
+                v-for="(tab, idx) in p.connector"
+                :key="`co${idx}`"
+                :name="`tab${idx}`"
               >
                 <component
                   :is="tab.component"
@@ -83,18 +83,54 @@ export default {
     Toolbar,
   },
   props: {
-    collection: Object,
-    config: Object,
-    contenturl: String,
-    fontsize: Number,
-    imageurl: String,
-    itemlabel: String,
-    labels: Object,
-    language: String,
-    manifests: Array,
-    panels: Array,
-    request: Function,
-    tree: Array,
+    collection: {
+      type: Object,
+      default: () => {},
+    },
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    contenturl: {
+      type: String,
+      default: () => '',
+    },
+    fontsize: {
+      type: Number,
+      default: () => 14,
+    },
+    imageurl: {
+      type: String,
+      default: () => '',
+    },
+    itemlabel: {
+      type: String,
+      default: () => '',
+    },
+    labels: {
+      type: Object,
+      default: () => {},
+    },
+    language: {
+      type: String,
+      default: () => '',
+    },
+    manifests: {
+      type: Array,
+      default: () => [],
+    },
+    panels: {
+      type: Array,
+      default: () => [],
+    },
+    request: {
+      type: Function,
+      default: () => null,
+    },
+    tree: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     ready() {