mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-03 04:21:34 +08:00
doc: refactor doc index
This commit is contained in:
07akioni
parent
abf5b5142b
commit
55332da04e
@ -1,5 +1,4 @@
|
||||
import { Vue, router } from './deploymentInit'
|
||||
import i18n from './i18n'
|
||||
import { Vue, router, i18n } from './init'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './demoRouterView'
|
||||
import NaiveUI from '../lib/index'
|
||||
@ -10,6 +9,6 @@ NaiveUI.setHljs(hljs)
|
||||
|
||||
new Vue({
|
||||
...demoRouterView,
|
||||
i18n,
|
||||
router
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
|
||||
@ -1,220 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import LandingPage from './documentation/landing'
|
||||
import Entry from './entry'
|
||||
|
||||
import intro from './documentation/intro/intro'
|
||||
import start from './documentation/intro/start'
|
||||
import devGuildlines from './documentation/intro/devGuidelines'
|
||||
|
||||
import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
|
||||
import gradientText from './documentation/components/gradientText'
|
||||
import checkbox from './documentation/components/checkbox'
|
||||
import button from './documentation/components/button'
|
||||
import nswitch from './documentation/components/switch'
|
||||
import input from './documentation/components/input'
|
||||
import select from './documentation/components/select'
|
||||
import cascader from './documentation/components/cascader'
|
||||
import dynamicInput from './documentation/components/dynamicInput'
|
||||
import modal from './documentation/components/modal'
|
||||
import message from './documentation/components/message'
|
||||
import tooltip from './documentation/components/tooltip'
|
||||
import popover from './documentation/components/popover'
|
||||
import alert from './documentation/components/alert'
|
||||
import datePicker from './documentation/components/datePicker'
|
||||
import inputNumber from './documentation/components/inputNumber'
|
||||
import radio from './documentation/components/radio'
|
||||
import form from './documentation/components/form'
|
||||
import tabs from './documentation/components/tabs'
|
||||
import timePicker from './documentation/components/timePicker'
|
||||
import confirm from './documentation/components/confirm'
|
||||
import backTop from './documentation/components/backTop'
|
||||
import dropdown from './documentation/components/dropdown'
|
||||
import badge from './documentation/components/badge'
|
||||
import steps from './documentation/components/steps'
|
||||
import notification from './documentation/components/notification'
|
||||
import pagination from './documentation/components/pagination'
|
||||
import collapse from './documentation/components/collapse'
|
||||
import tag from './documentation/components/tag'
|
||||
import menu from './documentation/components/menu'
|
||||
import timeline from './documentation/components/timeline'
|
||||
import progress from './documentation/components/progress'
|
||||
import divider from './documentation/components/divider'
|
||||
import popconfirm from './documentation/components/popconfirm'
|
||||
import anchor from './documentation/components/anchor'
|
||||
import popselect from './documentation/components/popselect'
|
||||
import configProvider from './documentation/components/configProvider'
|
||||
import dataTable from './documentation/components/dataTable'
|
||||
import typography from './documentation/components/typography'
|
||||
import transfer from './documentation/components/transfer'
|
||||
import spin from './documentation/components/spin'
|
||||
import drawer from './documentation/components/drawer'
|
||||
import loadingBar from './documentation/components/loadingBar'
|
||||
import time from './documentation/components/time'
|
||||
import slider from './documentation/components/slider'
|
||||
import tree from './documentation/components/tree'
|
||||
import affix from './documentation/components/affix'
|
||||
import statistic from './documentation/components/statistic'
|
||||
import grid from './documentation/components/grid'
|
||||
import breadcrumb from './documentation/components/breadcrumb'
|
||||
import configConsumer from './documentation/components/configConsumer'
|
||||
import descriptions from './documentation/components/descriptions'
|
||||
import list from './documentation/components/list'
|
||||
import card from './documentation/components/card'
|
||||
import layout from './documentation/components/layout'
|
||||
import avatar from './documentation/components/avatar'
|
||||
import result from './documentation/components/result'
|
||||
import thing from './documentation/components/thing'
|
||||
import autoComplete from './documentation/components/autoComplete'
|
||||
import empty from './documentation/components/empty'
|
||||
import theme from './documentation/theme'
|
||||
import element from './documentation/components/element'
|
||||
import log from './documentation/components/log'
|
||||
import code from './documentation/components/code'
|
||||
import upload from './documentation/components/upload'
|
||||
import table from './documentation/components/table'
|
||||
|
||||
import DocEntry from './docEntry'
|
||||
import ComponentDemo from './utils/ComponentDemo'
|
||||
import ComponentDemos from './utils/ComponentDemos'
|
||||
import ComponentDocumentation from './utils/ComponentDocumentation'
|
||||
import DocumentationWrapper from './utils/DocumentationWrapper'
|
||||
import EditOnGithubButton from './utils/EditOnGithubButton'
|
||||
import EditOnGithubHeader from './utils/EditOnGithubHeader'
|
||||
import './styles/demo.scss'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
Vue.component('ComponentDemo', ComponentDemo)
|
||||
Vue.component('ComponentDemos', ComponentDemos)
|
||||
Vue.component('DocumentationWrapper', DocumentationWrapper)
|
||||
Vue.component('ComponentDocumentation', ComponentDocumentation)
|
||||
Vue.component('EditOnGithubButton', EditOnGithubButton)
|
||||
Vue.component('EditOnGithubHeader', EditOnGithubHeader)
|
||||
|
||||
const withPrefix = (prefix, routes) =>
|
||||
routes.map(route => {
|
||||
route.path = prefix + route.path
|
||||
return route
|
||||
})
|
||||
|
||||
const children = [
|
||||
{ path: '/intro', component: intro },
|
||||
{ path: '/start', component: start },
|
||||
{ path: '/dev-guildlines', component: devGuildlines },
|
||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||
{ path: '/n-layout', component: layout },
|
||||
{ path: '/n-gradient-text', component: gradientText },
|
||||
{
|
||||
path: '/n-icon',
|
||||
component: () => import('./documentation/components/icon')
|
||||
},
|
||||
{ path: '/n-checkbox', component: checkbox },
|
||||
{ path: '/n-button', component: button },
|
||||
{ path: '/n-switch', component: nswitch },
|
||||
// { path: '/n-table', component: tableDemo },
|
||||
{ path: '/n-data-table', component: dataTable },
|
||||
{ path: '/n-input', component: input },
|
||||
{ path: '/n-select', component: select },
|
||||
{ path: '/n-cascader', component: cascader },
|
||||
{ path: '/n-custom-dynamic-input', component: dynamicInput },
|
||||
{ path: '/n-modal', component: modal },
|
||||
{ path: '/n-message', component: message },
|
||||
{ path: '/n-tooltip', component: tooltip },
|
||||
{ path: '/n-popover', component: popover },
|
||||
{ path: '/n-notification', component: notification },
|
||||
{ path: '/n-pagination', component: pagination },
|
||||
{ path: '/n-alert', component: alert },
|
||||
{ path: '/n-date-picker', component: datePicker },
|
||||
{ path: '/n-input-number', component: inputNumber },
|
||||
{ path: '/n-radio', component: radio },
|
||||
{ path: '/n-form', component: form },
|
||||
{ path: '/n-tabs', component: tabs },
|
||||
{ path: '/n-time-picker', component: timePicker },
|
||||
{ path: '/n-confirm', component: confirm },
|
||||
{ path: '/n-badge', component: badge },
|
||||
{ path: '/n-steps', component: steps },
|
||||
{ path: '/n-collapse', component: collapse },
|
||||
{ path: '/n-progress', component: progress },
|
||||
{ path: '/n-tag', component: tag },
|
||||
{ path: '/n-menu', component: menu },
|
||||
{ path: '/n-timeline', component: timeline },
|
||||
{ path: '/n-back-top', component: backTop },
|
||||
{ path: '/n-divider', component: divider },
|
||||
{ path: '/n-popconfirm', component: popconfirm },
|
||||
{ path: '/n-anchor', component: anchor },
|
||||
{ path: '/n-dropdown', component: dropdown },
|
||||
{ path: '/n-popselect', component: popselect },
|
||||
{ path: '/n-config-provider', component: configProvider },
|
||||
{ path: '/n-transfer', component: transfer },
|
||||
{ path: '/n-spin', component: spin },
|
||||
{ path: '/n-drawer', component: drawer },
|
||||
{ path: '/n-loading-bar', component: loadingBar },
|
||||
{ path: '/n-time', component: time },
|
||||
{ path: '/n-slider', component: slider },
|
||||
{ path: '/n-tree', component: tree },
|
||||
{ path: '/n-affix', component: affix },
|
||||
{ path: '/n-statistic', component: statistic },
|
||||
{ path: '/n-grid', component: grid },
|
||||
{ path: '/n-breadcrumb', component: breadcrumb },
|
||||
{ path: '/n-config-consumer', component: configConsumer },
|
||||
{ path: '/n-descriptions', component: descriptions },
|
||||
{ path: '/n-list', component: list },
|
||||
{ path: '/n-card', component: card },
|
||||
{ path: '/n-avatar', component: avatar },
|
||||
{ path: '/n-result', component: result },
|
||||
{ path: '/n-thing', component: thing },
|
||||
{ path: '/n-auto-complete', component: autoComplete },
|
||||
{ path: '/n-empty', component: empty },
|
||||
{ path: '/n-theme', component: theme },
|
||||
{ path: '/n-element', component: element },
|
||||
{ path: '/n-log', component: log },
|
||||
{ path: '/n-code', component: code },
|
||||
{ path: '/n-typography', component: typography },
|
||||
{ path: '/n-upload', component: upload },
|
||||
{ path: '/n-table', component: table }
|
||||
]
|
||||
const routes = [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/doc', children)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light'
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(function (to, from, next) {
|
||||
Vue.prototype.$NLoadingBar.theme = to.params.theme
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.start()
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(function (to, from) {
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.finish()
|
||||
}
|
||||
})
|
||||
|
||||
export { Vue, router }
|
||||
@ -1,16 +1,18 @@
|
||||
|
||||
import { Vue, router } from './devInit'
|
||||
import i18n from './i18n'
|
||||
import { Vue, router, routes, childRoutes, i18n } from './init'
|
||||
import debugRouteMixin from './routes/debugRouteMixin'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './demoRouterView'
|
||||
import NaiveUI from '../src/index'
|
||||
import '../styles/index.scss'
|
||||
|
||||
debugRouteMixin(routes, childRoutes)
|
||||
|
||||
Vue.use(NaiveUI)
|
||||
NaiveUI.setHljs(hljs)
|
||||
|
||||
new Vue({
|
||||
...demoRouterView,
|
||||
i18n,
|
||||
router
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
|
||||
256
demo/devInit.js
256
demo/devInit.js
@ -1,256 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import LandingPage from './documentation/landing'
|
||||
import Entry from './entry'
|
||||
|
||||
import intro from './documentation/intro/intro'
|
||||
import start from './documentation/intro/start'
|
||||
import devGuildlines from './documentation/intro/devGuidelines'
|
||||
|
||||
import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
|
||||
import gradientText from './documentation/components/gradientText'
|
||||
import checkbox from './documentation/components/checkbox'
|
||||
import button from './documentation/components/button'
|
||||
import nswitch from './documentation/components/switch'
|
||||
import input from './documentation/components/input'
|
||||
import select from './documentation/components/select'
|
||||
import cascader from './documentation/components/cascader'
|
||||
import dynamicInput from './documentation/components/dynamicInput'
|
||||
import modal from './documentation/components/modal'
|
||||
import message from './documentation/components/message'
|
||||
import tooltip from './documentation/components/tooltip'
|
||||
import popover from './documentation/components/popover'
|
||||
import alert from './documentation/components/alert'
|
||||
import datePicker from './documentation/components/datePicker'
|
||||
import inputNumber from './documentation/components/inputNumber'
|
||||
import radio from './documentation/components/radio'
|
||||
import form from './documentation/components/form'
|
||||
import tabs from './documentation/components/tabs'
|
||||
import timePicker from './documentation/components/timePicker'
|
||||
import confirm from './documentation/components/confirm'
|
||||
import backTop from './documentation/components/backTop'
|
||||
import dropdown from './documentation/components/dropdown'
|
||||
import badge from './documentation/components/badge'
|
||||
import steps from './documentation/components/steps'
|
||||
import notification from './documentation/components/notification'
|
||||
import pagination from './documentation/components/pagination'
|
||||
import collapse from './documentation/components/collapse'
|
||||
import tag from './documentation/components/tag'
|
||||
import menu from './documentation/components/menu'
|
||||
import timeline from './documentation/components/timeline'
|
||||
import progress from './documentation/components/progress'
|
||||
import divider from './documentation/components/divider'
|
||||
import popconfirm from './documentation/components/popconfirm'
|
||||
import anchor from './documentation/components/anchor'
|
||||
import popselect from './documentation/components/popselect'
|
||||
import configProvider from './documentation/components/configProvider'
|
||||
import dataTable from './documentation/components/dataTable'
|
||||
import typography from './documentation/components/typography'
|
||||
import transfer from './documentation/components/transfer'
|
||||
import spin from './documentation/components/spin'
|
||||
import drawer from './documentation/components/drawer'
|
||||
import loadingBar from './documentation/components/loadingBar'
|
||||
import time from './documentation/components/time'
|
||||
import slider from './documentation/components/slider'
|
||||
import tree from './documentation/components/tree'
|
||||
import affix from './documentation/components/affix'
|
||||
import statistic from './documentation/components/statistic'
|
||||
import grid from './documentation/components/grid'
|
||||
import breadcrumb from './documentation/components/breadcrumb'
|
||||
import configConsumer from './documentation/components/configConsumer'
|
||||
import descriptions from './documentation/components/descriptions'
|
||||
import list from './documentation/components/list'
|
||||
import card from './documentation/components/card'
|
||||
import layout from './documentation/components/layout'
|
||||
import avatar from './documentation/components/avatar'
|
||||
import result from './documentation/components/result'
|
||||
import thing from './documentation/components/thing'
|
||||
import autoComplete from './documentation/components/autoComplete'
|
||||
import empty from './documentation/components/empty'
|
||||
import theme from './documentation/theme'
|
||||
import element from './documentation/components/element'
|
||||
import log from './documentation/components/log'
|
||||
import code from './documentation/components/code'
|
||||
import upload from './documentation/components/upload'
|
||||
import table from './documentation/components/table'
|
||||
|
||||
import DocEntry from './docEntry'
|
||||
import ComponentDemo from './utils/ComponentDemo'
|
||||
import ComponentDemos from './utils/ComponentDemos'
|
||||
import ComponentDocumentation from './utils/ComponentDocumentation'
|
||||
import DocumentationWrapper from './utils/DocumentationWrapper'
|
||||
import './styles/demo.scss'
|
||||
import EditOnGithubButton from './utils/EditOnGithubButton'
|
||||
import EditOnGithubHeader from './utils/EditOnGithubHeader'
|
||||
|
||||
import routerDebug from './debugComponents/routerDebug'
|
||||
import modalDebug from './debugComponents/modalDebug'
|
||||
import datePickerDebug from './debugComponents/datePickerDebug'
|
||||
import backTopDebug from './debugComponents/backTopDebug'
|
||||
import suffixDebug from './debugComponents/suffixDebug'
|
||||
import cascaderDebug from './debugComponents/cascaderDebug'
|
||||
import verticalAlignDebug from './debugComponents/verticalAlignDebug'
|
||||
import iconTransitionDebug from './debugComponents/iconTransitionDebug'
|
||||
import selectDebug from './debugComponents/selectDebug'
|
||||
import popoverDebug from './debugComponents/popoverDebug'
|
||||
import scrollbarDebug from './debugComponents/scrollbarDebug'
|
||||
import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
Vue.component('ComponentDemo', ComponentDemo)
|
||||
Vue.component('ComponentDemos', ComponentDemos)
|
||||
Vue.component('DocumentationWrapper', DocumentationWrapper)
|
||||
Vue.component('ComponentDocumentation', ComponentDocumentation)
|
||||
Vue.component('EditOnGithubButton', EditOnGithubButton)
|
||||
Vue.component('EditOnGithubHeader', EditOnGithubHeader)
|
||||
|
||||
const withPrefix = (prefix, routes) =>
|
||||
routes.map(route => {
|
||||
route.path = prefix + route.path
|
||||
return route
|
||||
})
|
||||
|
||||
const children = [
|
||||
{ path: '/intro', component: intro },
|
||||
{ path: '/start', component: start },
|
||||
{ path: '/dev-guildlines', component: devGuildlines },
|
||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||
{ path: '/n-layout', component: layout },
|
||||
{ path: '/n-gradient-text', component: gradientText },
|
||||
{
|
||||
path: '/n-icon',
|
||||
component: () => import('./documentation/components/icon')
|
||||
},
|
||||
{ path: '/n-checkbox', component: checkbox },
|
||||
{ path: '/n-button', component: button },
|
||||
{ path: '/n-switch', component: nswitch },
|
||||
// { path: '/n-table', component: tableDemo },
|
||||
{ path: '/n-data-table', component: dataTable },
|
||||
{ path: '/n-input', component: input },
|
||||
{ path: '/n-select', component: select },
|
||||
{ path: '/n-cascader', component: cascader },
|
||||
{ path: '/n-dynamic-input', component: dynamicInput },
|
||||
{ path: '/n-modal', component: modal },
|
||||
{ path: '/n-message', component: message },
|
||||
{ path: '/n-tooltip', component: tooltip },
|
||||
{ path: '/n-popover', component: popover },
|
||||
{ path: '/n-notification', component: notification },
|
||||
{ path: '/n-pagination', component: pagination },
|
||||
{ path: '/n-alert', component: alert },
|
||||
{ path: '/n-date-picker', component: datePicker },
|
||||
{ path: '/n-input-number', component: inputNumber },
|
||||
{ path: '/n-radio', component: radio },
|
||||
{ path: '/n-form', component: form },
|
||||
{ path: '/n-tabs', component: tabs },
|
||||
{ path: '/n-time-picker', component: timePicker },
|
||||
{ path: '/n-confirm', component: confirm },
|
||||
{ path: '/n-router-debug', component: routerDebug },
|
||||
{ path: '/n-modal-debug', component: modalDebug },
|
||||
{ path: '/n-scrollbar-debug', component: scrollbarDebug },
|
||||
{ path: '/n-badge', component: badge },
|
||||
{ path: '/n-steps', component: steps },
|
||||
{ path: '/n-collapse', component: collapse },
|
||||
{ path: '/n-progress', component: progress },
|
||||
{ path: '/n-tag', component: tag },
|
||||
{ path: '/n-menu', component: menu },
|
||||
{ path: '/n-timeline', component: timeline },
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
|
||||
{ path: '/n-back-top', component: backTop },
|
||||
{ path: '/n-date-picker-debug', component: datePickerDebug },
|
||||
{ path: '/n-divider', component: divider },
|
||||
{ path: '/n-popconfirm', component: popconfirm },
|
||||
{ path: '/n-anchor', component: anchor },
|
||||
{ path: '/n-dropdown', component: dropdown },
|
||||
{ path: '/n-popselect', component: popselect },
|
||||
{ path: '/n-config-provider', component: configProvider },
|
||||
{ path: '/n--debug', component: suffixDebug },
|
||||
{ path: '/n-transfer', component: transfer },
|
||||
{ path: '/n-spin', component: spin },
|
||||
{ path: '/n-drawer', component: drawer },
|
||||
{ path: '/n-loading-bar', component: loadingBar },
|
||||
{ path: '/n-time', component: time },
|
||||
{ path: '/n-slider', component: slider },
|
||||
{ path: '/n-tree', component: tree },
|
||||
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },
|
||||
{ path: '/n-affix', component: affix },
|
||||
{ path: '/n-statistic', component: statistic },
|
||||
{ path: '/n-grid', component: grid },
|
||||
{ path: '/n-breadcrumb', component: breadcrumb },
|
||||
{ path: '/n-config-consumer', component: configConsumer },
|
||||
{ path: '/n-descriptions', component: descriptions },
|
||||
{ path: '/n-list', component: list },
|
||||
{ path: '/n-card', component: card },
|
||||
{ path: '/n-avatar', component: avatar },
|
||||
{ path: '/n-result', component: result },
|
||||
{ path: '/n-thing', component: thing },
|
||||
{ path: '/n-auto-complete', component: autoComplete },
|
||||
{ path: '/n-empty', component: empty },
|
||||
{ path: '/n-theme', component: theme },
|
||||
{ path: '/n-element', component: element },
|
||||
{ path: '/n-log', component: log },
|
||||
{ path: '/n-code', component: code },
|
||||
{ path: '/n-typography', component: typography },
|
||||
{ path: '/n-upload', component: upload },
|
||||
{ path: '/n-table', component: table },
|
||||
{
|
||||
path: '/n-icon-transition-debug',
|
||||
component: iconTransitionDebug
|
||||
},
|
||||
{ path: '/n-select-debug', component: selectDebug }
|
||||
]
|
||||
const routes = [
|
||||
{
|
||||
path: '/:lang/:theme/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/n-cascader-debug',
|
||||
component: cascaderDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/doc', children)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light'
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(function (to, from, next) {
|
||||
Vue.prototype.$NLoadingBar.theme = to.params.theme
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.start()
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(function (to, from) {
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.finish()
|
||||
}
|
||||
})
|
||||
export { Vue, router }
|
||||
@ -1,4 +1,4 @@
|
||||
# 点击标题
|
||||
# Click on Item Header
|
||||
```html
|
||||
<n-collapse
|
||||
v-model="activeNames"
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
|
||||
<n-config-provider
|
||||
class="demo"
|
||||
namespace="naive-ui-doc"
|
||||
:theme="theme"
|
||||
:language="lang"
|
||||
>
|
||||
<n-layout position="absolute" class="root-layout">
|
||||
<doc-header
|
||||
:lang="lang"
|
||||
@ -17,7 +22,7 @@
|
||||
<script>
|
||||
import DocHeader from './header.vue'
|
||||
import menuOptions from './menuOptions'
|
||||
import i18n from './i18n'
|
||||
import { i18n } from './init'
|
||||
import { state } from './store'
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
Vue.use(VueI18n)
|
||||
export default new VueI18n({
|
||||
locale: 'en-US'
|
||||
})
|
||||
46
demo/init.js
Normal file
46
demo/init.js
Normal file
@ -0,0 +1,46 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import ComponentDemo from './utils/ComponentDemo'
|
||||
import ComponentDemos from './utils/ComponentDemos'
|
||||
import ComponentDocumentation from './utils/ComponentDocumentation'
|
||||
import DocumentationWrapper from './utils/DocumentationWrapper'
|
||||
import EditOnGithubButton from './utils/EditOnGithubButton'
|
||||
import EditOnGithubHeader from './utils/EditOnGithubHeader'
|
||||
import { routes, childRoutes } from './routes/routes'
|
||||
import './styles/demo.scss'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: 'zh-CN'
|
||||
})
|
||||
|
||||
Vue.component('ComponentDemo', ComponentDemo)
|
||||
Vue.component('ComponentDemos', ComponentDemos)
|
||||
Vue.component('DocumentationWrapper', DocumentationWrapper)
|
||||
Vue.component('ComponentDocumentation', ComponentDocumentation)
|
||||
Vue.component('EditOnGithubButton', EditOnGithubButton)
|
||||
Vue.component('EditOnGithubHeader', EditOnGithubHeader)
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(function (to, from, next) {
|
||||
Vue.prototype.$NLoadingBar.theme = to.params.theme
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.start()
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(function (to, from) {
|
||||
if (to.path !== from.path) {
|
||||
Vue.prototype.$NLoadingBar.finish()
|
||||
}
|
||||
})
|
||||
|
||||
export { Vue, router, routes, childRoutes, i18n }
|
||||
46
demo/routes/debugRouteMixin.js
Normal file
46
demo/routes/debugRouteMixin.js
Normal file
@ -0,0 +1,46 @@
|
||||
import routerDebug from '../debugComponents/routerDebug'
|
||||
import modalDebug from '../debugComponents/modalDebug'
|
||||
import datePickerDebug from '../debugComponents/datePickerDebug'
|
||||
import backTopDebug from '../debugComponents/backTopDebug'
|
||||
import suffixDebug from '../debugComponents/suffixDebug'
|
||||
import cascaderDebug from '../debugComponents/cascaderDebug'
|
||||
import verticalAlignDebug from '../debugComponents/verticalAlignDebug'
|
||||
import iconTransitionDebug from '../debugComponents/iconTransitionDebug'
|
||||
import selectDebug from '../debugComponents/selectDebug'
|
||||
import popoverDebug from '../debugComponents/popoverDebug'
|
||||
import scrollbarDebug from '../debugComponents/scrollbarDebug'
|
||||
import scrollbarDebug2 from '../debugComponents/scrollbarDebug2'
|
||||
|
||||
import { withPrefix } from './utils'
|
||||
|
||||
const RootDebugRoutes = [
|
||||
{
|
||||
path: '/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/n-cascader-debug',
|
||||
component: cascaderDebug
|
||||
}
|
||||
]
|
||||
|
||||
const ChildDebugRoutes = [
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
|
||||
{ path: '/n-date-picker-debug', component: datePickerDebug },
|
||||
{ path: '/n--debug', component: suffixDebug },
|
||||
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },
|
||||
{ path: '/n-icon-transition-debug', component: iconTransitionDebug },
|
||||
{ path: '/n-select-debug', component: selectDebug },
|
||||
{ path: '/n-router-debug', component: routerDebug },
|
||||
{ path: '/n-modal-debug', component: modalDebug },
|
||||
{ path: '/n-scrollbar-debug', component: scrollbarDebug }
|
||||
]
|
||||
|
||||
export default function debugRouteMixin (routes, childRoutes) {
|
||||
routes.unshift(RootDebugRoutes)
|
||||
childRoutes.unshift(withPrefix('/:lang/:theme/doc', ChildDebugRoutes))
|
||||
}
|
||||
177
demo/routes/routes.js
Normal file
177
demo/routes/routes.js
Normal file
@ -0,0 +1,177 @@
|
||||
|
||||
import LandingPage from '../documentation/landing'
|
||||
import Entry from '../entry'
|
||||
|
||||
import intro from '../documentation/intro/intro'
|
||||
import start from '../documentation/intro/start'
|
||||
import devGuildlines from '../documentation/intro/devGuidelines'
|
||||
|
||||
import nimbusServiceLayoutDemo from '../documentation/deprecated/nimbusServiceLayout'
|
||||
import gradientText from '../documentation/components/gradientText'
|
||||
import checkbox from '../documentation/components/checkbox'
|
||||
import button from '../documentation/components/button'
|
||||
import nswitch from '../documentation/components/switch'
|
||||
import input from '../documentation/components/input'
|
||||
import select from '../documentation/components/select'
|
||||
import cascader from '../documentation/components/cascader'
|
||||
import dynamicInput from '../documentation/components/dynamicInput'
|
||||
import modal from '../documentation/components/modal'
|
||||
import message from '../documentation/components/message'
|
||||
import tooltip from '../documentation/components/tooltip'
|
||||
import popover from '../documentation/components/popover'
|
||||
import alert from '../documentation/components/alert'
|
||||
import datePicker from '../documentation/components/datePicker'
|
||||
import inputNumber from '../documentation/components/inputNumber'
|
||||
import radio from '../documentation/components/radio'
|
||||
import form from '../documentation/components/form'
|
||||
import tabs from '../documentation/components/tabs'
|
||||
import timePicker from '../documentation/components/timePicker'
|
||||
import confirm from '../documentation/components/confirm'
|
||||
import backTop from '../documentation/components/backTop'
|
||||
import dropdown from '../documentation/components/dropdown'
|
||||
import badge from '../documentation/components/badge'
|
||||
import steps from '../documentation/components/steps'
|
||||
import notification from '../documentation/components/notification'
|
||||
import pagination from '../documentation/components/pagination'
|
||||
import collapse from '../documentation/components/collapse'
|
||||
import tag from '../documentation/components/tag'
|
||||
import menu from '../documentation/components/menu'
|
||||
import timeline from '../documentation/components/timeline'
|
||||
import progress from '../documentation/components/progress'
|
||||
import divider from '../documentation/components/divider'
|
||||
import popconfirm from '../documentation/components/popconfirm'
|
||||
import anchor from '../documentation/components/anchor'
|
||||
import popselect from '../documentation/components/popselect'
|
||||
import configProvider from '../documentation/components/configProvider'
|
||||
import dataTable from '../documentation/components/dataTable'
|
||||
import typography from '../documentation/components/typography'
|
||||
import transfer from '../documentation/components/transfer'
|
||||
import spin from '../documentation/components/spin'
|
||||
import drawer from '../documentation/components/drawer'
|
||||
import loadingBar from '../documentation/components/loadingBar'
|
||||
import time from '../documentation/components/time'
|
||||
import slider from '../documentation/components/slider'
|
||||
import tree from '../documentation/components/tree'
|
||||
import affix from '../documentation/components/affix'
|
||||
import statistic from '../documentation/components/statistic'
|
||||
import grid from '../documentation/components/grid'
|
||||
import breadcrumb from '../documentation/components/breadcrumb'
|
||||
import configConsumer from '../documentation/components/configConsumer'
|
||||
import descriptions from '../documentation/components/descriptions'
|
||||
import list from '../documentation/components/list'
|
||||
import card from '../documentation/components/card'
|
||||
import layout from '../documentation/components/layout'
|
||||
import avatar from '../documentation/components/avatar'
|
||||
import result from '../documentation/components/result'
|
||||
import thing from '../documentation/components/thing'
|
||||
import autoComplete from '../documentation/components/autoComplete'
|
||||
import empty from '../documentation/components/empty'
|
||||
import theme from '../documentation/theme'
|
||||
import element from '../documentation/components/element'
|
||||
import log from '../documentation/components/log'
|
||||
import code from '../documentation/components/code'
|
||||
import upload from '../documentation/components/upload'
|
||||
import table from '../documentation/components/table'
|
||||
|
||||
import DocEntry from '../docEntry'
|
||||
|
||||
import { withPrefix } from './utils'
|
||||
|
||||
export const childRoutes = [
|
||||
{ path: '/intro', component: intro },
|
||||
{ path: '/start', component: start },
|
||||
{ path: '/dev-guildlines', component: devGuildlines },
|
||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||
{ path: '/n-layout', component: layout },
|
||||
{ path: '/n-gradient-text', component: gradientText },
|
||||
{
|
||||
path: '/n-icon',
|
||||
component: () => import('../documentation/components/icon')
|
||||
},
|
||||
{ path: '/n-checkbox', component: checkbox },
|
||||
{ path: '/n-button', component: button },
|
||||
{ path: '/n-switch', component: nswitch },
|
||||
{ path: '/n-data-table', component: dataTable },
|
||||
{ path: '/n-input', component: input },
|
||||
{ path: '/n-select', component: select },
|
||||
{ path: '/n-cascader', component: cascader },
|
||||
{ path: '/n-dynamic-input', component: dynamicInput },
|
||||
{ path: '/n-modal', component: modal },
|
||||
{ path: '/n-message', component: message },
|
||||
{ path: '/n-tooltip', component: tooltip },
|
||||
{ path: '/n-popover', component: popover },
|
||||
{ path: '/n-notification', component: notification },
|
||||
{ path: '/n-pagination', component: pagination },
|
||||
{ path: '/n-alert', component: alert },
|
||||
{ path: '/n-date-picker', component: datePicker },
|
||||
{ path: '/n-input-number', component: inputNumber },
|
||||
{ path: '/n-radio', component: radio },
|
||||
{ path: '/n-form', component: form },
|
||||
{ path: '/n-tabs', component: tabs },
|
||||
{ path: '/n-time-picker', component: timePicker },
|
||||
{ path: '/n-confirm', component: confirm },
|
||||
{ path: '/n-badge', component: badge },
|
||||
{ path: '/n-steps', component: steps },
|
||||
{ path: '/n-collapse', component: collapse },
|
||||
{ path: '/n-progress', component: progress },
|
||||
{ path: '/n-tag', component: tag },
|
||||
{ path: '/n-menu', component: menu },
|
||||
{ path: '/n-timeline', component: timeline },
|
||||
{ path: '/n-back-top', component: backTop },
|
||||
{ path: '/n-divider', component: divider },
|
||||
{ path: '/n-popconfirm', component: popconfirm },
|
||||
{ path: '/n-anchor', component: anchor },
|
||||
{ path: '/n-dropdown', component: dropdown },
|
||||
{ path: '/n-popselect', component: popselect },
|
||||
{ path: '/n-config-provider', component: configProvider },
|
||||
{ path: '/n-transfer', component: transfer },
|
||||
{ path: '/n-spin', component: spin },
|
||||
{ path: '/n-drawer', component: drawer },
|
||||
{ path: '/n-loading-bar', component: loadingBar },
|
||||
{ path: '/n-time', component: time },
|
||||
{ path: '/n-slider', component: slider },
|
||||
{ path: '/n-tree', component: tree },
|
||||
{ path: '/n-affix', component: affix },
|
||||
{ path: '/n-statistic', component: statistic },
|
||||
{ path: '/n-grid', component: grid },
|
||||
{ path: '/n-breadcrumb', component: breadcrumb },
|
||||
{ path: '/n-config-consumer', component: configConsumer },
|
||||
{ path: '/n-descriptions', component: descriptions },
|
||||
{ path: '/n-list', component: list },
|
||||
{ path: '/n-card', component: card },
|
||||
{ path: '/n-avatar', component: avatar },
|
||||
{ path: '/n-result', component: result },
|
||||
{ path: '/n-thing', component: thing },
|
||||
{ path: '/n-auto-complete', component: autoComplete },
|
||||
{ path: '/n-empty', component: empty },
|
||||
{ path: '/n-theme', component: theme },
|
||||
{ path: '/n-element', component: element },
|
||||
{ path: '/n-log', component: log },
|
||||
{ path: '/n-code', component: code },
|
||||
{ path: '/n-typography', component: typography },
|
||||
{ path: '/n-upload', component: upload },
|
||||
{ path: '/n-table', component: table }
|
||||
]
|
||||
|
||||
export const routes = [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/doc', childRoutes)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light'
|
||||
}
|
||||
]
|
||||
6
demo/routes/utils.js
Normal file
6
demo/routes/utils.js
Normal file
@ -0,0 +1,6 @@
|
||||
export const withPrefix = (prefix, routes) => {
|
||||
return routes.map(route => {
|
||||
route.path = prefix + route.path
|
||||
return route
|
||||
})
|
||||
}
|
||||
134
demo/utils.js
134
demo/utils.js
@ -1,134 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import emojiRegex from 'emoji-regex';
|
||||
const regex = emojiRegex();
|
||||
const emojiUnicode = require("emoji-unicode")
|
||||
/**
|
||||
*
|
||||
* Here's a thing that will look through all the text nodes of a document, and
|
||||
* upon encountering an emoji codepoint, will replace it with an image.
|
||||
* For now, those images are pulled from GitHub, which isn't very nice, so I
|
||||
* need to find a more suitable host.
|
||||
*
|
||||
* Much of this code was gleaned from staring at the minified GitHub JS.
|
||||
*
|
||||
* Copyright (c) 2013 Mark Wunsch. Licensed under the MIT License.
|
||||
* @markwunsch
|
||||
*
|
||||
*/
|
||||
export const replaceEmojiWithImages = function (root) {
|
||||
|
||||
var REGIONAL_INDICATOR_A = parseInt("1f1e6", 16),
|
||||
REGIONAL_INDICATOR_Z = parseInt("1f1ff", 16),
|
||||
IMAGE_HOST = "github.githubassets.com",
|
||||
IMAGE_PATH = "/images/icons/emoji/unicode/",
|
||||
IMAGE_EXT = ".png";
|
||||
|
||||
// String.fromCodePoint is super helpful
|
||||
if (!String.fromCodePoint) {
|
||||
/*!
|
||||
* ES6 Unicode Shims 0.1
|
||||
* (c) 2012 Steven Levithan <http://slevithan.com/>
|
||||
* MIT License
|
||||
**/
|
||||
String.fromCodePoint = function fromCodePoint () {
|
||||
var chars = [], point, offset, units, i;
|
||||
for (i = 0; i < arguments.length; ++i) {
|
||||
point = arguments[i];
|
||||
offset = point - 0x10000;
|
||||
units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
|
||||
chars.push(String.fromCharCode.apply(null, units));
|
||||
}
|
||||
return chars.join("");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a treewalker to walk an element and return an Array of Text Nodes.
|
||||
* This function is (hopefully) smart enough to exclude unwanted text nodes
|
||||
* like whitespace and script tags.
|
||||
* https://gist.github.com/mwunsch/4693383
|
||||
*/
|
||||
function getLegitTextNodes(element) {
|
||||
if (!document.createTreeWalker) return [];
|
||||
|
||||
var blacklist = ['SCRIPT', 'OPTION', 'TEXTAREA'],
|
||||
textNodes = [],
|
||||
walker = document.createTreeWalker(
|
||||
element,
|
||||
NodeFilter.SHOW_TEXT,
|
||||
function excludeBlacklistedNodes(node) {
|
||||
if (blacklist.indexOf(node.parentElement.nodeName.toUpperCase()) >= 0) return NodeFilter.FILTER_REJECT;
|
||||
if (String.prototype.trim && !node.nodeValue.trim().length) return NodeFilter.FILTER_SKIP;
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
while(walker.nextNode()) textNodes.push(walker.currentNode);
|
||||
|
||||
return textNodes;
|
||||
}
|
||||
|
||||
/**
|
||||
* For a UTF-16 (JavaScript's preferred encoding...kinda) surrogate pair,
|
||||
* return a Unicode codepoint.
|
||||
*/
|
||||
function surrogatePairToCodepoint(lead, trail) {
|
||||
return (lead - 0xD800) * 0x400 + (trail - 0xDC00) + 0x10000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an Image element for an emoji codepoint (in hex).
|
||||
*/
|
||||
function getImageForCodepoint(hex) {
|
||||
var img = document.createElement('IMG');
|
||||
|
||||
img.style.width = "1.4em";
|
||||
img.style.verticalAlign = "top";
|
||||
img.src = "//" + IMAGE_HOST + IMAGE_PATH + hex + IMAGE_EXT;
|
||||
|
||||
return img;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an HTML string into a DocumentFragment, for insertion into the dom.
|
||||
*/
|
||||
function fragmentForString(htmlString) {
|
||||
var tmpDoc = document.createElement('DIV'),
|
||||
fragment = document.createDocumentFragment(),
|
||||
childNode;
|
||||
|
||||
tmpDoc.innerHTML = htmlString;
|
||||
|
||||
while(childNode = tmpDoc.firstChild) {
|
||||
fragment.appendChild(childNode);
|
||||
}
|
||||
return fragment;
|
||||
}
|
||||
|
||||
/**
|
||||
* Iterate through a list of nodes, find emoji, replace with images.
|
||||
*/
|
||||
function emojiReplace(nodes) {
|
||||
var PATTERN = regex;
|
||||
|
||||
nodes.forEach(function (node) {
|
||||
var replacement,
|
||||
value = node.nodeValue,
|
||||
matches = value.match(PATTERN);
|
||||
|
||||
if (matches) {
|
||||
replacement = value.replace(PATTERN, function (match) {
|
||||
var codepoint = emojiUnicode(matches[0]),
|
||||
img = getImageForCodepoint(codepoint);
|
||||
return img.outerHTML;
|
||||
});
|
||||
// console.log(matches)
|
||||
node.parentNode.replaceChild(fragmentForString(replacement), node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Call everything we've defined
|
||||
emojiReplace(getLegitTextNodes(root));
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<edit-on-github-button
|
||||
class="edit-button"
|
||||
style="padding: 0 3px 0 7px"
|
||||
:url="url"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
class="edit-button"
|
||||
ghost
|
||||
round
|
||||
:size="size"
|
||||
:text="text"
|
||||
@click="handleEditOnGithubClick"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
@ -10,8 +12,10 @@
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOutline from '../../src/_icons/create-outline'
|
||||
|
||||
export default {
|
||||
name: 'EditOnGithubButton',
|
||||
components: {
|
||||
@ -21,6 +25,14 @@ export default {
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -40,8 +52,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.edit-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,24 +9,31 @@
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<n-h1 :id="id">
|
||||
<n-h1 :id="id" class="naive-doc-title">
|
||||
{{ text }}
|
||||
<span class="edit-button">
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
placement="right"
|
||||
:show-arrow="true"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<edit-on-github-button
|
||||
style="vertical-align: middle;"
|
||||
text
|
||||
size="large"
|
||||
class="edit-button"
|
||||
:url="url"
|
||||
/>
|
||||
</template>
|
||||
{{ $t('editOnGithub') }}
|
||||
</n-tooltip>
|
||||
</span>
|
||||
</n-h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditOnGithubHeader',
|
||||
@ -47,8 +54,16 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.edit-button {
|
||||
margin-left: 10px;
|
||||
|
||||
<style scoped>
|
||||
.naive-doc-title .edit-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
.naive-doc-title:hover .edit-button {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user