mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
component tab, tabs removed
This commit is contained in:
parent
38be14ecef
commit
3e3048cf39
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="tab-pane"
|
||||
v-show="active"
|
||||
:id="id || title"
|
||||
:class="{ active: active }"
|
||||
:aria-expanded="active"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'tab-pane',
|
||||
props: ['title', 'id'],
|
||||
inject: ['addTab', 'removeTab'],
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.addTab(this)
|
||||
},
|
||||
destroyed() {
|
||||
if (this.$el && this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el)
|
||||
}
|
||||
this.removeTab(this)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
{ 'col-md-4': vertical && !tabNavWrapperClasses },
|
||||
{ 'col-12': centered && !tabNavWrapperClasses },
|
||||
tabNavWrapperClasses,
|
||||
]"
|
||||
>
|
||||
<b-nav
|
||||
class="nav-pills"
|
||||
role="tablist"
|
||||
:class="[
|
||||
`nav-pills-${type}`,
|
||||
{ 'flex-column': vertical },
|
||||
{ 'justify-content-center': centered },
|
||||
tabNavClasses,
|
||||
]"
|
||||
>
|
||||
<b-nav-item
|
||||
v-for="tab in tabs"
|
||||
class="active"
|
||||
data-toggle="tab"
|
||||
role="tablist"
|
||||
:active="tab.active"
|
||||
:key="tab.id"
|
||||
:href="`#${tab.id}`"
|
||||
@click.prevent="activateTab(tab)"
|
||||
:aria-expanded="tab.active"
|
||||
>
|
||||
<tab-item-content :tab="tab"></tab-item-content>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
<div
|
||||
class="tab-content"
|
||||
:class="[
|
||||
{ 'tab-space': !vertical },
|
||||
{ 'col-md-8': vertical && !tabContentClasses },
|
||||
tabContentClasses,
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabs',
|
||||
components: {
|
||||
TabItemContent: {
|
||||
props: ['tab'],
|
||||
render(h) {
|
||||
return h('div', [this.tab.$slots.title || this.tab.title])
|
||||
},
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
addTab: this.addTab,
|
||||
removeTab: this.removeTab,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
validator: (value) => {
|
||||
const acceptedValues = ['primary', 'info', 'success', 'warning', 'danger']
|
||||
return acceptedValues.indexOf(value) !== -1
|
||||
},
|
||||
},
|
||||
activeTab: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: 'Active tab name',
|
||||
},
|
||||
tabNavWrapperClasses: {
|
||||
type: [String, Object],
|
||||
default: '',
|
||||
description: 'ul wrapper css classes',
|
||||
},
|
||||
tabNavClasses: {
|
||||
type: [String, Object],
|
||||
default: '',
|
||||
description: 'ul css classes',
|
||||
},
|
||||
tabContentClasses: {
|
||||
type: [String, Object],
|
||||
default: '',
|
||||
description: 'tab content css classes',
|
||||
},
|
||||
vertical: Boolean,
|
||||
centered: Boolean,
|
||||
value: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findAndActivateTab(title) {
|
||||
const tabToActivate = this.tabs.find((t) => t.title === title)
|
||||
if (tabToActivate) {
|
||||
this.activateTab(tabToActivate)
|
||||
}
|
||||
},
|
||||
activateTab(tab) {
|
||||
if (this.handleClick) {
|
||||
this.handleClick(tab)
|
||||
}
|
||||
this.deactivateTabs()
|
||||
tab.active = true
|
||||
},
|
||||
deactivateTabs() {
|
||||
this.tabs.forEach((tab) => {
|
||||
tab.active = false
|
||||
})
|
||||
},
|
||||
addTab(tab) {
|
||||
const index = this.$slots.default.indexOf(tab.$vnode)
|
||||
if (!this.activeTab && index === 0) {
|
||||
tab.active = true
|
||||
}
|
||||
if (this.activeTab === tab.name) {
|
||||
tab.active = true
|
||||
}
|
||||
this.tabs.splice(index, 0, tab)
|
||||
},
|
||||
removeTab(tab) {
|
||||
const tabs = this.tabs
|
||||
const index = tabs.indexOf(tab)
|
||||
if (index > -1) {
|
||||
tabs.splice(index, 1)
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.value) {
|
||||
this.findAndActivateTab(this.value)
|
||||
}
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.findAndActivateTab(newVal)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,11 +1,9 @@
|
||||
import BaseNav from './Navbar/BaseNav'
|
||||
import NavbarToggleButton from './Navbar/NavbarToggleButton'
|
||||
|
||||
import TabPane from './Tabs/Tab.vue'
|
||||
import Tabs from './Tabs/Tabs.vue'
|
||||
import Collapse from './Collapse/Collapse.vue'
|
||||
import CollapseItem from './Collapse/CollapseItem.vue'
|
||||
|
||||
import SidebarPlugin from './SidebarPlugin'
|
||||
|
||||
export { SidebarPlugin, BaseNav, NavbarToggleButton, TabPane, Tabs, Collapse, CollapseItem }
|
||||
export { SidebarPlugin, BaseNav, NavbarToggleButton, Collapse, CollapseItem }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user