forked from geolba/tethys.backend
38 lines
911 B
Vue
38 lines
911 B
Vue
|
<script>
|
||
|
|
import { h, defineComponent } from 'vue'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BaseLevel',
|
||
|
|
props: {
|
||
|
|
mobile: Boolean,
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'justify-between'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
const parentClass = [this.type, 'items-center']
|
||
|
|
|
||
|
|
const parentMobileClass = ['flex']
|
||
|
|
|
||
|
|
const parentBaseClass = ['block', 'md:flex']
|
||
|
|
|
||
|
|
const childBaseClass = ['flex', 'shrink-0', 'grow-0', 'items-center', 'justify-center']
|
||
|
|
|
||
|
|
return h(
|
||
|
|
'div',
|
||
|
|
{ class: parentClass.concat(this.mobile ? parentMobileClass : parentBaseClass) },
|
||
|
|
this.$slots.default().map((element, index) => {
|
||
|
|
const childClass = (!this.mobile && this.$slots.default().length > index + 1)
|
||
|
|
? childBaseClass.concat(['mb-6', 'md:mb-0'])
|
||
|
|
: childBaseClass
|
||
|
|
|
||
|
|
return h('div', { class: childClass }, [
|
||
|
|
element
|
||
|
|
])
|
||
|
|
})
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|