mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
c6bed151a5
* feat(website): init viteperss (#3162) * init vitepress * Finish homepage * relayout page * partial finish * update * update use lang * remove font weight; change font size * docs: optimize docs folder structure * reorganize project * fix ssr issue * fix build issues Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> * feat(website) integrate with crowdin (#3218) - Introduce Crowdin CLI - Add script for fetching Crowdin token from env - Add script for local development * fix formatting * update codeblocks (#3249) * feat(docs): update website preview script - Update azure preview build script - Eliminate dead links * bootstrap docs * fix homepage layout issue * fix formating * Finish ToC and codepen integration * reorganized files and fix issue that causes demo unavailable after build * feat(docs): migration documentations (#3283) * feat(docs): migration documentations - Move documentations to docs/ * remove unused files * docs: [popconfirm] migrate document (#3285) * feat(docs): migrate documentation from space.md to upload.md (#3292) - Upload documentations acorrodingly * docs: [date-picker] migrate document (#3289) * docs: [date-picker] migrate document * fix: typo * docs: [slider] migrate document (#3287) * docs: migrate documents (#3290) * docs: migrate-datetime-picker * docs: migrate descriptions * docs: migrate dialog * docs: migrate divider * docs: migrate drawer * docs: migrate drapdown * docs: fix drapdown * docs: migrate empty * docs: migrate form * docs: add scoped for style * docs: simplify toRefs * chore: update doc (#3297) * chore: update doc * chore: update doc * chore: update doc * feat(docs): migrate documentations from infinite-scroll to page-header (#3303) - Update docs accordingly - Update CodePen icon to match style - Update component name to match others * docs: migrate documentions (#3293) migrate list: * image * popover * scrollbar * radio * rate * skeleton * select * select-v2 * reault * progress * pagination * chore: update doc (#3305) Co-authored-by: 0song <0song@gmail.com> * Fix broken pipeline * chore: update demo plugin * website perfection * fix hydration bug * docs: update guide (#3342) * WIP docs * docs: update docs * add dark mode * make dev fetch components from local instead of node_modules Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: 三咲智子 <sxzz@sxzz.moe> * fix(docs): fix codepen code example issue (#3380) * fix(docs): fix codepen code example issue - Add lang="ts" for all example files - Fix codepen import error * revert changes in resource.vue * feat(docs): complete crowdin integration (#3408) * Update mds for preparing the integration script * deprecate old website * update sponsors and even handler for resize * update build script for preview * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * update deploy script and some bugs * Fix existing issue * chore(project): add dev preview workflow * chore(project): rename dev to staging * update the size of toc * update staging-preview script * update preview scripts * enable website build for preview * fix build error * final commitment for update the details * remove azure pipeline * move docs ignores into docs and update date Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com>
65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import VPFullScreenMenu from './full-screen/vp-menu.vue'
|
|
import VPFullScreenTranslation from './full-screen/vp-translation.vue'
|
|
import VPFullScreenThemeToggler from './full-screen/vp-theme-toggler.vue'
|
|
import { useLockScreen } from '../composables/lock-screen'
|
|
import { useFeatureFlag } from '../composables/feature-flag'
|
|
|
|
defineProps<{
|
|
fullScreen: boolean
|
|
}>()
|
|
|
|
const { lock, cleanup } = useLockScreen()
|
|
const fullscreen = ref()
|
|
const themeEnabled = useFeatureFlag('theme')
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="el-fade-in" @enter="lock" @after-leave="cleanup">
|
|
<div v-if="fullScreen" ref="fullscreen">
|
|
<div class="full-screen-container">
|
|
<VPFullScreenMenu @close="$emit('close')" />
|
|
<VPFullScreenTranslation />
|
|
<VPFullScreenThemeToggler v-if="themeEnabled" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.full-screen {
|
|
position: fixed;
|
|
top: var(--nav-height);
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0 32px;
|
|
width: 100%;
|
|
background-color: var(--bg-color);
|
|
transition: background-color 0.5s;
|
|
overflow-y: auto;
|
|
|
|
&.el-fade-in-enter-active,
|
|
&.el-fade-in-leave-active {
|
|
.full-screen-container {
|
|
transition: transform var(--el-transition-duration)
|
|
var(--el-transition-function-ease-in-out-bezier);
|
|
}
|
|
}
|
|
|
|
&.el-fade-in-enter-from,
|
|
&.el-fade-in-leave-to {
|
|
.full-screen-container {
|
|
transform: translateY(-8px);
|
|
}
|
|
}
|
|
|
|
.full-screen-container {
|
|
margin: 0 auto;
|
|
padding: 24px 0 96px;
|
|
max-width: 18rem;
|
|
}
|
|
}
|
|
</style>
|