Tabs: vertical usage & reactive configUrl & configUrl accepts object

public/js/components/Tabs.js

@@ -11,9 +11,14 @@ export default {
 		'changed'
 	],
 	props: {
-		configUrl: String,
+		// TODO(chris): rename to config?
+		configUrl: {
+			type: [String, Object],
+			required: true
+		},
 		default: String,
-		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol]
+		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+		vertical: Boolean
 	},
 	data() {
 		return {
@@ -37,60 +42,70 @@ export default {
 			}
 		}
 	},
+	watch: {
+		configUrl(n) {
+			this.initConfig(n);
+		}
+	},
 	methods: {
 		change(key) {
 			this.$emit("change", key)
 			this.current = key;
 			this.$nextTick(() => this.$emit("changed", key));
-		}
-	},
-	created() {
-		CoreRESTClient
-			.get(this.configUrl)
-			.then(result => CoreRESTClient.getData(result.data))
-			.then(result => {
-				if (!result)
-					return;
+		},
+		initConfig(config) {
+			if (!config)
+				return;
+			if (typeof config === 'string' || config instanceof String)
+				return CoreRESTClient.get(config)
+					.then(result => CoreRESTClient.getData(result.data))
+					.then(this.initConfig)
+					.catch(this.$fhcAlert.handleSystemError);
 
-				const tabs = {};
+			console.log(config);
+			const tabs = {};
 
-				if (Array.isArray(result)) {
-					result.forEach((config, key) => {
-						if (!config.component)
-							return console.error('Component missing for ' + key);
+			if (Array.isArray(config)) {
+				config.forEach((item, key) => {
+					if (!item.component)
+						return console.error('Component missing for ' + key);
 
-						tabs[key] = {
-							component: Vue.markRaw(Vue.defineAsyncComponent(() => import(config.component))),
-							title: config.title || key,
-							config: config.config,
-							key
-						}
-					});
+					tabs[key] = {
+						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						title: item.title || key,
+						config: item.config,
+						key
+					}
+				});
+			} else {
+				Object.entries(config).forEach(([key, item]) => {
+					if (!item.component)
+						return console.error('Component missing for ' + key);
 
-				} else {
-					Object.entries(result).forEach(([key, config]) => {
-						if (!config.component)
-							return console.error('Component missing for ' + key);
+					tabs[key] = {
+						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						title: item.title || key,
+						config: item.config,
+						key
+					}
+				});
+			}
 
-						tabs[key] = {
-							component: Vue.markRaw(Vue.defineAsyncComponent(() => import(config.component))),
-							title: config.title || key,
-							config: config.config,
-							key
-						}
-					});
-				}
+			if (this.current === null || !tabs[this.current]) {
 				if (tabs[this.default])
 					this.current = this.default;
 				else
 					this.current = Object.keys(tabs)[0];
-				this.tabs = tabs;
-			})
-			.catch(this.$fhcAlert.handleSystemError);
+			}
+			this.tabs = tabs;
+		}
+	},
+	created() {
+		this.initConfig(this.configUrl);
 	},
 	template: `
-	<div class="fhc-tabs d-flex flex-column" v-if="Object.keys(tabs).length">
-		<div class="nav nav-tabs">
+	<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch' : 'flex-column'" v-if="Object.keys(tabs).length">
+		<div class="nav" :class="vertical ? 'nav-pills flex-column' : 'nav-tabs'">
 			<div
 				v-for="tab in tabs"
 				:key="tab.key"
@@ -98,12 +113,12 @@ export default {
 				:class="{active: tab.key == current}"
 				@click="change(tab.key)"
 				:aria-current="tab.key == current ? 'page' : ''"
-				v-accessibility:tab
+				v-accessibility:tab.[vertical]
 				>
 				{{tab.title}}
 			</div>
 		</div>
-		<div style="flex: 1 1 0%; height: 0%" class="border-bottom border-start border-end overflow-auto p-3">
+		<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto p-3" :class="vertical ? '' : 'border-bottom border-start border-end'">
 			<keep-alive>
 				<component ref="current" :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
 			</keep-alive>