From 55332da04ea85243f87470760e66fdfc02cf14d5 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Mar 2020 18:26:48 +0800 Subject: [PATCH] doc: refactor doc index --- demo/deploymentIndex.js | 7 +- demo/deploymentInit.js | 220 --------------- demo/devIndex.js | 10 +- demo/devInit.js | 256 ------------------ .../collapse/enUS/itemHeaderClick.md | 2 +- demo/entry.vue | 9 +- demo/i18n.js | 6 - demo/init.js | 46 ++++ demo/routes/debugRouteMixin.js | 46 ++++ demo/routes/routes.js | 177 ++++++++++++ demo/routes/utils.js | 6 + demo/utils.js | 134 --------- demo/utils/ComponentDemo.vue | 2 +- demo/utils/EditOnGithubButton.vue | 17 +- demo/utils/EditOnGithubHeader.vue | 65 +++-- 15 files changed, 345 insertions(+), 658 deletions(-) delete mode 100644 demo/deploymentInit.js delete mode 100644 demo/devInit.js delete mode 100644 demo/i18n.js create mode 100644 demo/init.js create mode 100644 demo/routes/debugRouteMixin.js create mode 100644 demo/routes/routes.js create mode 100644 demo/routes/utils.js delete mode 100644 demo/utils.js diff --git a/demo/deploymentIndex.js b/demo/deploymentIndex.js index 3d9a3cc16..8d8de7e61 100644 --- a/demo/deploymentIndex.js +++ b/demo/deploymentIndex.js @@ -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') diff --git a/demo/deploymentInit.js b/demo/deploymentInit.js deleted file mode 100644 index 819c5e12d..000000000 --- a/demo/deploymentInit.js +++ /dev/null @@ -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 } diff --git a/demo/devIndex.js b/demo/devIndex.js index e613d4a04..68915f15d 100644 --- a/demo/devIndex.js +++ b/demo/devIndex.js @@ -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') diff --git a/demo/devInit.js b/demo/devInit.js deleted file mode 100644 index d3bf7144c..000000000 --- a/demo/devInit.js +++ /dev/null @@ -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 } diff --git a/demo/documentation/components/collapse/enUS/itemHeaderClick.md b/demo/documentation/components/collapse/enUS/itemHeaderClick.md index ea653a34f..4a34c7779 100644 --- a/demo/documentation/components/collapse/enUS/itemHeaderClick.md +++ b/demo/documentation/components/collapse/enUS/itemHeaderClick.md @@ -1,4 +1,4 @@ -# 点击标题 +# Click on Item Header ```html - + import DocHeader from './header.vue' import menuOptions from './menuOptions' -import i18n from './i18n' +import { i18n } from './init' import { state } from './store' export default { diff --git a/demo/i18n.js b/demo/i18n.js deleted file mode 100644 index 453f3b886..000000000 --- a/demo/i18n.js +++ /dev/null @@ -1,6 +0,0 @@ -import Vue from 'vue' -import VueI18n from 'vue-i18n' -Vue.use(VueI18n) -export default new VueI18n({ - locale: 'en-US' -}) diff --git a/demo/init.js b/demo/init.js new file mode 100644 index 000000000..4b970f766 --- /dev/null +++ b/demo/init.js @@ -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 } diff --git a/demo/routes/debugRouteMixin.js b/demo/routes/debugRouteMixin.js new file mode 100644 index 000000000..b63e73dcb --- /dev/null +++ b/demo/routes/debugRouteMixin.js @@ -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)) +} diff --git a/demo/routes/routes.js b/demo/routes/routes.js new file mode 100644 index 000000000..152883619 --- /dev/null +++ b/demo/routes/routes.js @@ -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' + } +] diff --git a/demo/routes/utils.js b/demo/routes/utils.js new file mode 100644 index 000000000..35b7d4b35 --- /dev/null +++ b/demo/routes/utils.js @@ -0,0 +1,6 @@ +export const withPrefix = (prefix, routes) => { + return routes.map(route => { + route.path = prefix + route.path + return route + }) +} diff --git a/demo/utils.js b/demo/utils.js deleted file mode 100644 index b6c2afafe..000000000 --- a/demo/utils.js +++ /dev/null @@ -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 - * 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)); -} \ No newline at end of file diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue index 0be904701..1d3b6e782 100644 --- a/demo/utils/ComponentDemo.vue +++ b/demo/utils/ComponentDemo.vue @@ -35,7 +35,7 @@ > diff --git a/demo/utils/EditOnGithubButton.vue b/demo/utils/EditOnGithubButton.vue index 6ba461ab6..4b9558c16 100644 --- a/demo/utils/EditOnGithubButton.vue +++ b/demo/utils/EditOnGithubButton.vue @@ -3,6 +3,8 @@ class="edit-button" ghost round + :size="size" + :text="text" @click="handleEditOnGithubClick" > + - diff --git a/demo/utils/EditOnGithubHeader.vue b/demo/utils/EditOnGithubHeader.vue index 0812e58f9..49023859c 100644 --- a/demo/utils/EditOnGithubHeader.vue +++ b/demo/utils/EditOnGithubHeader.vue @@ -1,32 +1,39 @@ - - { - "zh-CN": { + +{ + "zh-CN": { "editOnGithub": "在 Github 上编辑" }, - "en-US": { + "en-US": { "editOnGithub": "Edit on Github" - } - } - + } +} + + + -