Tabs: optional border

This commit is contained in:
cgfhtw
2024-02-09 09:31:26 +01:00
parent c3ec909448
commit 6e85b37b0f
+4 -4
View File
@@ -18,7 +18,8 @@ export default {
},
default: String,
modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
vertical: Boolean
vertical: Boolean,
border: Boolean
},
data() {
return {
@@ -62,7 +63,6 @@ export default {
.then(this.initConfig)
.catch(this.$fhcAlert.handleSystemError);
console.log(config);
const tabs = {};
if (Array.isArray(config)) {
@@ -104,7 +104,7 @@ export default {
this.initConfig(this.config);
},
template: `
<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch' : 'flex-column'" v-if="Object.keys(tabs).length">
<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch gap-3' : (border ? 'flex-column' : 'flex-column gap-3')" v-if="Object.keys(tabs).length">
<div class="nav" :class="vertical ? 'nav-pills flex-column' : 'nav-tabs'">
<div
v-for="tab in tabs"
@@ -118,7 +118,7 @@ export default {
{{tab.title}}
</div>
</div>
<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto p-3" :class="vertical ? '' : 'border-bottom border-start border-end'">
<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto" :class="vertical || !border ? '' : 'p-3 border-bottom border-start border-end'">
<keep-alive>
<component ref="current" :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
</keep-alive>