naive-ui/demo/demo.vue

510 lines
14 KiB
Vue

<template>
<n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
<n-nimbus-service-layout :padding-body="false" :items="items">
<template v-slot:nav>
<doc-header
:lang="lang"
:items="flattenedItems"
@lang-change="handleLangChange"
/>
</template>
<router-view />
</n-nimbus-service-layout>
</n-config-provider>
</template>
<script>
import DocHeader from './header.vue'
import { i18n } from './init'
export default {
components: {
DocHeader
},
beforeRouteEnter (to, from, next) {
// console.log(i18n)
i18n.locale = to.params.lang
next()
},
beforeRouteUpdate (to, from, next) {
this.$i18n.locale = to.params.lang
next()
},
computed: {
items () {
return [
{
name: 'Naive UI',
path: `/${this.lang}/${this.theme}` + '/intro'
},
{
name: 'Getting Started',
path: `/${this.lang}/${this.theme}` + '/start'
},
{
name: 'Develop Guidelines',
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
},
{
name: 'Create Themed Component',
path: `/${this.lang}/${this.theme}` + '/n-theme'
},
{
name: 'Nimbus Components',
path: `/${this.lang}/${this.theme}` + '/',
childItems: [
{
name: 'Nimbus Service Layout',
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
},
{
name: 'New Nimbus Service Layout',
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout-new'
}
]
},
{
name: 'Config Components',
childItems: [
{
name: 'Config Provider',
path: `/${this.lang}/${this.theme}` + '/n-config-provider'
},
{
name: 'Config Consumer',
path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
},
{
name: 'Element',
path: `/${this.lang}/${this.theme}` + '/n-element'
}
]
},
{
name: 'Layout Components',
childItems: [
{
name: 'Layout',
path: `/${this.lang}/${this.theme}` + '/n-layout'
},
{
name: 'Grid',
path: `/${this.lang}/${this.theme}` + '/n-grid'
}
]
},
{
name: 'Common Components',
childItems: [
{
name: 'Avatar',
path: `/${this.lang}/${this.theme}` + '/n-avatar'
},
{
name: 'Button',
path: `/${this.lang}/${this.theme}` + '/n-button'
},
{
name: 'Card',
path: `/${this.lang}/${this.theme}` + '/n-card'
},
{
name: 'Collapse',
path: `/${this.lang}/${this.theme}` + '/n-collapse'
},
{
name: 'Divider',
path: `/${this.lang}/${this.theme}` + '/n-divider'
},
{
name: 'Dropdown',
path: `/${this.lang}/${this.theme}` + '/n-dropdown'
},
{
name: 'Gradient Text',
path: `/${this.lang}/${this.theme}` + '/n-gradient-text'
},
{
name: 'Icon',
path: `/${this.lang}/${this.theme}` + '/n-icon'
},
{
name: 'Tag',
path: `/${this.lang}/${this.theme}` + '/n-tag'
},
{
name: 'Typography',
path: `/${this.lang}/${this.theme}` + '/n-typography'
}
]
},
{
name: 'Data Input Components',
childItems: [
{
name: 'Auto Complete',
path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
},
{
name: 'Cascader',
path: `/${this.lang}/${this.theme}` + '/n-cascader'
},
{
name: 'Checkbox',
path: `/${this.lang}/${this.theme}` + '/n-checkbox'
},
{
name: 'Custom Input (in progress)',
path: `/${this.lang}/${this.theme}` + '/n-custom-input'
},
{
name: 'Date Picker',
path: `/${this.lang}/${this.theme}` + '/n-date-picker'
},
{
name: 'Form',
path: `/${this.lang}/${this.theme}` + '/n-form'
},
{
name: 'Input',
path: `/${this.lang}/${this.theme}` + '/n-input'
},
{
name: 'Input Number',
path: `/${this.lang}/${this.theme}` + '/n-input-number'
},
{
name: 'Radio',
path: `/${this.lang}/${this.theme}` + '/n-radio'
},
{
name: 'Select',
path: `/${this.lang}/${this.theme}` + '/n-select'
},
{
name: 'Slider',
path: `/${this.lang}/${this.theme}` + '/n-slider'
},
{
name: 'Switch',
path: `/${this.lang}/${this.theme}` + '/n-switch'
},
{
name: 'Time Picker',
path: `/${this.lang}/${this.theme}` + '/n-time-picker'
},
{
name: 'Transfer',
path: `/${this.lang}/${this.theme}` + '/n-transfer'
}
]
},
{
name: 'Data Display Components',
childItems: [
{
name: 'Table',
path: `/${this.lang}/${this.theme}` + '/n-table'
},
{
name: 'Code',
path: `/${this.lang}/${this.theme}` + '/n-code'
},
{
name: 'Descriptions',
path: `/${this.lang}/${this.theme}` + '/n-descriptions'
},
{
name: 'Empty',
path: `/${this.lang}/${this.theme}` + '/n-empty'
},
{
name: 'List',
path: `/${this.lang}/${this.theme}` + '/n-list'
},
{
name: 'Log',
path: `/${this.lang}/${this.theme}` + '/n-log'
},
{
name: 'Statistic',
path: `/${this.lang}/${this.theme}` + '/n-statistic'
},
{
name: 'Thing',
path: `/${this.lang}/${this.theme}` + '/n-thing'
},
{
name: 'Time',
path: `/${this.lang}/${this.theme}` + '/n-time'
},
{
name: 'Timeline',
path: `/${this.lang}/${this.theme}` + '/n-timeline'
},
{
name: 'Tree (in progress)',
path: `/${this.lang}/${this.theme}` + '/n-tree'
}
]
},
{
name: 'Navigation Components',
childItems: [
{
name: 'Affix',
path: `/${this.lang}/${this.theme}` + '/n-affix'
},
{
name: 'Anchor',
path: `/${this.lang}/${this.theme}` + '/n-anchor'
},
{
name: 'BackTop',
path: `/${this.lang}/${this.theme}` + '/n-back-top'
},
{
name: 'Breadcrumb',
path: `/${this.lang}/${this.theme}` + '/n-breadcrumb'
},
{
name: 'Loading Bar',
path: `/${this.lang}/${this.theme}` + '/n-loading-bar'
},
{
name: 'Menu',
path: `/${this.lang}/${this.theme}` + '/n-menu'
},
{
name: 'Pagination',
path: `/${this.lang}/${this.theme}` + '/n-pagination'
},
{
name: 'Steps',
path: `/${this.lang}/${this.theme}` + '/n-steps'
},
{
name: 'Tabs',
path: `/${this.lang}/${this.theme}` + '/n-tabs'
}
]
},
{
name: 'Feedback Components',
childItems: [
{
name: 'Alert',
path: `/${this.lang}/${this.theme}` + '/n-alert'
},
{
name: 'Badge',
path: `/${this.lang}/${this.theme}` + '/n-badge'
},
{
name: 'Confirm',
path: `/${this.lang}/${this.theme}` + '/n-confirm'
},
{
name: 'Drawer',
path: `/${this.lang}/${this.theme}` + '/n-drawer'
},
{
name: 'Message',
path: `/${this.lang}/${this.theme}` + '/n-message'
},
{
name: 'Modal',
path: `/${this.lang}/${this.theme}` + '/n-modal'
},
{
name: 'Notification',
path: `/${this.lang}/${this.theme}` + '/n-notification'
},
{
name: 'Popover',
path: `/${this.lang}/${this.theme}` + '/n-popover'
},
{
name: 'Popconfirm',
path: `/${this.lang}/${this.theme}` + '/n-popconfirm'
},
{
name: 'Popselect',
path: `/${this.lang}/${this.theme}` + '/n-popselect'
},
{
name: 'Progress',
path: `/${this.lang}/${this.theme}` + '/n-progress'
},
{
name: 'Result',
path: `/${this.lang}/${this.theme}` + '/n-result'
},
{
name: 'Spin',
path: `/${this.lang}/${this.theme}` + '/n-spin'
},
{
name: 'Tooltip',
path: `/${this.lang}/${this.theme}` + '/n-tooltip'
}
]
},
{
name: 'Debug',
childItems: [
{
name: 'CancelMarkDebug',
path: `/${this.lang}/${this.theme}` + '/n-cancel-mark-debug'
},
{
name: 'PopoverDebug',
path: `/${this.lang}/${this.theme}` + '/n-popover-debug'
},
{
name: 'RouterDebug',
path: `/${this.lang}/${this.theme}` + '/n-router-debug'
},
{
name: 'ModalDebug',
path: `/${this.lang}/${this.theme}` + '/n-modal-debug'
},
{
name: 'ScrollbarDebug',
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug'
},
{
name: 'ScrollbarDebug2',
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug2'
},
{
name: 'DatePickerDebug',
path: `/${this.lang}/${this.theme}` + '/n-date-picker-debug'
},
{
name: 'BackTopDebug',
path: `/${this.lang}/${this.theme}` + '/n-back-top-debug'
},
{
name: 'CascaderDebug',
path: `/${this.lang}/${this.theme}` + '/n-cascader-debug'
},
{
name: 'VerticalAlignDebug',
path: `/${this.lang}/${this.theme}` + '/n-vertical-align-debug'
},
{
name: 'IconTransitionDebug',
path: `/${this.lang}/${this.theme}` + '/n-icon-transition-debug'
}
]
}
]
},
flattenedItems () {
const flattenedItems = []
const traverse = items => {
if (items) {
items.forEach(item => {
if (item.childItems) traverse(item.childItems)
else flattenedItems.push(item)
})
}
}
traverse(this.items)
return flattenedItems
},
lang: {
get () {
return this.$route.params.lang || 'en-US'
},
set (lang) {
this.$router.push(changeLangInPath(this.$route.fullPath, lang))
}
},
theme: {
get () {
return this.$route.params.theme === 'light' ? 'light' : 'dark'
},
set (theme) {
this.$router.push(changeThemeInPath(this.$route.fullPath, theme))
}
}
},
methods: {
handleLangChange (lang) {
this.lang = lang
}
}
}
function changeLangInPath (path, lang) {
const langReg = /^\/(zh-CN|en-US)\//
return path.replace(langReg, `/${lang}/`)
}
function changeThemeInPath (path, theme) {
const themeReg = /(^\/[^/]+\/)([^/]+)/
return path.replace(themeReg, '$1' + theme)
}
</script>
<style lang="scss" scoped>
.demo {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
min-width: 1080px;
}
</style>
<style lang="scss">
body {
-webkit-text-size-adjust: 100%;
}
.n-doc {
width: 720px;
margin: 0 auto;
.n-doc-header {
display: flex;
// height: 60px;
// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 16px;
// align-items: center;
}
.n-doc-section {
.n-doc-section__header {
font-size: 16px;
font-weight: 500;
margin-bottom: 12px;
}
.n-doc-section__view {
background: #5c657eff;
padding: 18px;
border-radius: 8px;
justify-content: center;
display: flex;
margin-bottom: 12px;
flex-wrap: wrap;
}
.n-doc-section__inspect {
background: #5c657eff;
padding: 18px;
border-radius: 8px;
display: flex;
margin-bottom: 12px;
flex-wrap: wrap;
}
.n-doc-section__text-content {
font-size: 16px;
}
.n-doc-section__source {
position: relative;
}
}
}
</style>