allow to and href properties in tabs

components/AppBarTabsExtension.vue

@@ -34,12 +34,31 @@ permissions and limitations under the Licence.
     background-color="grey lighten-3"
     @change="changeTab"
   >
-    <v-tab
+    <template
       v-for="(tab, index) in tabs"
-      :key="index"
     >
-      {{ tab }}
-    </v-tab>
+      <v-tab
+        v-if="isString(tab)"
+        :key="index"
+      >
+        {{ tab }}
+      </v-tab>
+      <v-tab
+        v-else-if="isRoute(tab)"
+        :key="index"
+        nuxt
+        :to="tab.to"
+      >
+        {{ tab.name }}
+      </v-tab>
+      <v-tab
+        v-else-if="isLink(tab)"
+        :key="index"
+        :href="tab.href"
+      >
+        {{ tab.name }}
+      </v-tab>
+    </template>
   </v-tabs>
 </template>
 
@@ -49,6 +68,7 @@ permissions and limitations under the Licence.
  * @author <marc.hanisch@gfz-potsdam.de>
  */
 import { Vue, Component, Prop } from 'nuxt-property-decorator'
+import { TabItemConfiguration } from '@/models/TabItemConfiguration'
 
 /**
  * A class component to provide tabs to an app-bar extension
@@ -71,11 +91,11 @@ export default class AppBarTabsExtension extends Vue {
    * an array of tabs
    */
   @Prop({
-    default: () => [],
+    default: () => [] as TabItemConfiguration[],
     type: Array
   })
   // @ts-ignore
-  readonly tabs: string[]
+  readonly tabs: TabItemConfiguration[]
 
   /**
    * changes the current tab
@@ -91,5 +111,17 @@ export default class AppBarTabsExtension extends Vue {
      */
     this.$emit('change', tab)
   }
+
+  isRoute (tab: TabItemConfiguration): boolean {
+    return typeof tab === 'object' && 'to' in tab
+  }
+
+  isLink (tab: TabItemConfiguration): boolean {
+    return typeof tab === 'object' && 'href' in tab
+  }
+
+  isString (tab: TabItemConfiguration): boolean {
+    return typeof tab === 'string'
+  }
 }
 </script>

models/TabItemConfiguration.ts

+export interface ITabItemRoute {
+  name: string
+  to: string
+}
+
+export interface ITabItemLink {
+  name: string
+  href: string
+}
+
+export type TabItemConfiguration = string | ITabItemRoute | ITabItemLink

store/appbar.ts

@@ -29,13 +29,15 @@
  * implied. See the Licence for the specific language governing
  * permissions and limitations under the Licence.
  */
+import { TabItemConfiguration } from '@/models/TabItemConfiguration'
+
 export interface IAppbarStore {
   activeTab: null | number,
   cancelBtnDisabled: boolean,
   cancelBtnHidden: boolean,
   saveBtnDisabled: boolean,
   saveBtnHidden: boolean,
-  tabs: string[],
+  tabs: TabItemConfiguration[],
   title: string
 }
 
@@ -51,7 +53,7 @@ export const state = (): IAppbarStore => {
     cancelBtnHidden: true,
     saveBtnDisabled: false,
     saveBtnHidden: true,
-    tabs: [],
+    tabs: [] as TabItemConfiguration[],
     title: ''
   }
 }
@@ -75,7 +77,7 @@ export const mutations = {
    * @param {IAppbarStore} state - the current state
    * @param {string[]} tabs - the tabs to set
    */
-  setTabs (state: IAppbarStore, tabs: string[]): void {
+  setTabs (state: IAppbarStore, tabs: TabItemConfiguration[]): void {
     state.tabs = tabs
     state.activeTab = tabs.length > 0 ? 0 : null
   },