mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
4.5 KiB
119 lines
4.5 KiB
<script setup lang="ts">
|
|
import { computed, provide, useSlots } from 'vue'
|
|
import VPBackdrop from './components/VPBackdrop.vue'
|
|
import VPContent from './components/VPContent.vue'
|
|
import VPFooter from './components/VPFooter.vue'
|
|
import VPLocalNav from './components/VPLocalNav.vue'
|
|
import VPNav from './components/VPNav.vue'
|
|
import VPSidebar from './components/VPSidebar.vue'
|
|
import VPSkipLink from './components/VPSkipLink.vue'
|
|
import { useData } from './composables/data'
|
|
import { registerWatchers, useLayout } from './composables/layout'
|
|
import { useSidebarControl } from './composables/sidebar'
|
|
|
|
const {
|
|
isOpen: isSidebarOpen,
|
|
open: openSidebar,
|
|
close: closeSidebar,
|
|
isCollapsed
|
|
} = useSidebarControl()
|
|
|
|
const { hasSidebar } = useLayout()
|
|
|
|
registerWatchers({ closeSidebar })
|
|
|
|
const { frontmatter } = useData()
|
|
|
|
const slots = useSlots()
|
|
const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
|
|
|
|
provide('hero-image-slot-exists', heroImageSlotExists)
|
|
|
|
const layoutClasses = computed(() => {
|
|
return {
|
|
[String(frontmatter.value.pageClass || '')]: !!frontmatter.value.pageClass,
|
|
'has-sidebar': hasSidebar.value,
|
|
'sidebar-collapsed': isCollapsed.value && hasSidebar.value
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="frontmatter.layout !== false"
|
|
class="Layout"
|
|
:class="layoutClasses"
|
|
>
|
|
<slot name="layout-top" />
|
|
<VPSkipLink />
|
|
<VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
|
|
<VPNav>
|
|
<template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
|
|
<template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
|
|
<template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
|
|
<template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
|
|
<template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
|
|
<template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
|
|
</VPNav>
|
|
<VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
|
|
|
|
<VPSidebar :open="isSidebarOpen">
|
|
<template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
|
|
<template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
|
|
</VPSidebar>
|
|
|
|
<VPContent>
|
|
<template #page-top><slot name="page-top" /></template>
|
|
<template #page-bottom><slot name="page-bottom" /></template>
|
|
|
|
<template #not-found><slot name="not-found" /></template>
|
|
<template #home-hero-before><slot name="home-hero-before" /></template>
|
|
<template #home-hero-info-before><slot name="home-hero-info-before" /></template>
|
|
<template #home-hero-info><slot name="home-hero-info" /></template>
|
|
<template #home-hero-info-after><slot name="home-hero-info-after" /></template>
|
|
<template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
|
|
<template #home-hero-image><slot name="home-hero-image" /></template>
|
|
<template #home-hero-after><slot name="home-hero-after" /></template>
|
|
<template #home-features-before><slot name="home-features-before" /></template>
|
|
<template #home-features-after><slot name="home-features-after" /></template>
|
|
|
|
<template #doc-footer-before><slot name="doc-footer-before" /></template>
|
|
<template #doc-before><slot name="doc-before" /></template>
|
|
<template #doc-after><slot name="doc-after" /></template>
|
|
<template #doc-top><slot name="doc-top" /></template>
|
|
<template #doc-bottom><slot name="doc-bottom" /></template>
|
|
|
|
<template #aside-top><slot name="aside-top" /></template>
|
|
<template #aside-bottom><slot name="aside-bottom" /></template>
|
|
<template #aside-outline-before><slot name="aside-outline-before" /></template>
|
|
<template #aside-outline-after><slot name="aside-outline-after" /></template>
|
|
<template #aside-ads-before><slot name="aside-ads-before" /></template>
|
|
<template #aside-ads-after><slot name="aside-ads-after" /></template>
|
|
</VPContent>
|
|
|
|
<VPFooter />
|
|
<slot name="layout-bottom" />
|
|
</div>
|
|
<Content v-else />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.Layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
|
|
.Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .container) {
|
|
max-width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
</style>
|