2022-01-31 18:58:19 +00:00
|
|
|
import { defineComponent, isRef, Ref, Transition } from 'vue'
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { wrapIf } from './utils'
|
2021-10-21 19:16:52 +00:00
|
|
|
// @ts-ignore
|
2021-06-30 16:32:22 +00:00
|
|
|
import layouts from '#build/layouts'
|
|
|
|
|
2022-01-31 18:58:19 +00:00
|
|
|
const defaultLayoutTransition = { name: 'layout', mode: 'out-in' }
|
|
|
|
|
2021-06-30 16:32:22 +00:00
|
|
|
export default defineComponent({
|
|
|
|
props: {
|
|
|
|
name: {
|
2022-01-17 18:27:23 +00:00
|
|
|
type: [String, Boolean, Object] as unknown as () => string | false | Ref<string | false>,
|
2022-01-31 18:58:19 +00:00
|
|
|
default: null
|
2021-06-30 16:32:22 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
setup (props, context) {
|
2022-01-31 18:58:19 +00:00
|
|
|
const route = useRoute()
|
|
|
|
|
2021-06-30 16:32:22 +00:00
|
|
|
return () => {
|
2022-01-31 18:58:19 +00:00
|
|
|
const layout = (isRef(props.name) ? props.name.value : props.name) ?? route.meta.layout as string ?? 'default'
|
|
|
|
|
|
|
|
const hasLayout = layout && layout in layouts
|
|
|
|
if (process.dev && layout && !hasLayout && layout !== 'default') {
|
|
|
|
console.warn(`Invalid layout \`${layout}\` selected.`)
|
2021-06-30 16:32:22 +00:00
|
|
|
}
|
2022-01-31 18:58:19 +00:00
|
|
|
|
|
|
|
// We avoid rendering layout transition if there is no layout to render
|
|
|
|
return wrapIf(Transition, hasLayout && (route.meta.layoutTransition ?? defaultLayoutTransition),
|
|
|
|
wrapIf(layouts[layout], hasLayout, context.slots)
|
|
|
|
).default()
|
2021-06-30 16:32:22 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|