site: clean data codes

demo/Documentation.vue

@@ -25,7 +25,7 @@ export default {
     }
   },
   inject: {
-    NEntry: {
+    Site: {
       default: null
     }
   },
@@ -51,7 +51,7 @@ export default {
   },
   computed: {
     items () {
-      return this.NEntry.items
+      return this.Site.items
     }
   },
   methods: {

demo/Entry.vue

@@ -1,157 +0,0 @@
-<template>
-  <n-config-provider
-    class="demo"
-    namespace="naive-ui-doc"
-    :theme="theme"
-    :language="lang"
-  >
-    <n-message-provider>
-      <n-notification-provider>
-        <n-dialog-provider>
-          <n-layout position="absolute" class="root-layout">
-            <doc-header
-              :lang="lang"
-              :items="flattenedItems"
-              :env="env"
-              @lang-change="handleLangChange"
-            />
-            <n-layout class="home-layout" style="top: 64px; overflow: hidden;" position="absolute">
-              <router-view />
-            </n-layout>
-          </n-layout>
-        </n-dialog-provider>
-      </n-notification-provider>
-    </n-message-provider>
-  </n-config-provider>
-</template>
-
-<script>
-import DocHeader from './Header.vue'
-import menuOptions from './menu-options'
-import { i18n } from './init'
-import { modeRef } from './use-dev-mode'
-import simulatedComputed from '../src/_mixins/simulatedComputed'
-
-export default {
-  components: {
-    DocHeader
-  },
-  mixins: [
-    simulatedComputed({
-      menuGenerationOptions: {
-        get () {
-          return {
-            theme: this.theme,
-            lang: this.lang,
-            mode: this.mode
-          }
-        },
-        deps: ['theme', 'lang', 'mode'],
-        default: null
-      }
-    })
-  ],
-  provide () {
-    return {
-      NEntry: this
-    }
-  },
-  beforeRouteEnter (to, from, next) {
-    i18n.locale = to.params.lang
-    next()
-  },
-  beforeRouteUpdate (to, from, next) {
-    // this.$i18n.locale = to.params.lang
-    next()
-  },
-  data () {
-    return {
-      modeRef
-    }
-  },
-  computed: {
-    mode () {
-      return this.modeRef.value
-    },
-    env () {
-      return process.env.NODE_ENV
-    },
-    items () {
-      return menuOptions(this.menuGenerationOptions)
-    },
-    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 () {
-        switch (this.$route.params.theme) {
-          case 'os-theme': return 'light'
-          case 'dark': return 'dark'
-          default: return 'light'
-        }
-      },
-      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 {
-  z-index: auto;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  min-width: 1080px;
-}
-</style>
-
-<style lang="scss">
-body {
-  -webkit-text-size-adjust: 100%;
-}
-
-.root-layout.n-layout.n-light-theme {
-  background-color: #FFF;
-}
-.home-layout.n-layout.n-light-theme {
-  background-color: #FFF;
-}
-</style>

demo/Site.vue

@@ -0,0 +1,94 @@
+<template>
+  <n-layout position="absolute" class="root-layout">
+    <site-header :items="flattenedItems" />
+    <n-layout class="home-layout" style="top: 64px; overflow: hidden;" position="absolute">
+      <router-view />
+    </n-layout>
+  </n-layout>
+</template>
+
+<script>
+import SiteHeader from './SiteHeader.vue'
+import menuOptions from './menu-options'
+// import { i18n } from './init'
+import { loadingBarApiRef } from './routes/router'
+import simulatedComputed from '../src/_mixins/simulatedComputed'
+
+export default {
+  name: 'Site',
+  inject: [
+    'SiteProvider',
+    'loadingBar'
+  ],
+  components: {
+    SiteHeader
+  },
+  mixins: [
+    simulatedComputed({
+      menuGenerationOptions: {
+        get () {
+          return {
+            theme: this.SiteProvider.theme,
+            lang: this.SiteProvider.lang,
+            mode: this.mode
+          }
+        },
+        deps: ['SiteProvider.theme', 'SiteProvider.lang', 'mode'],
+        default: null
+      }
+    })
+  ],
+  provide () {
+    return {
+      Site: this
+    }
+  },
+  computed: {
+    items () {
+      return menuOptions(this.menuGenerationOptions)
+    },
+    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
+    }
+  },
+  mounted () {
+    this.loadingBar.finish()
+    loadingBarApiRef.value = this.loadingBar
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  z-index: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: 1080px;
+}
+</style>
+
+<style lang="scss">
+body {
+  -webkit-text-size-adjust: 100%;
+}
+
+.root-layout.n-layout.n-light-theme {
+  background-color: #FFF;
+}
+.home-layout.n-layout.n-light-theme {
+  background-color: #FFF;
+}
+</style>

demo/SiteHeader.vue

@@ -73,11 +73,11 @@
           {{ langOptions[lang].label }}
         </n-tag>
         <n-tag
-          v-if="env==='development'"
+          v-if="env === 'development'"
           class="nav-picker"
           @click="handleModeChange"
         >
-          {{ modeOptions[mode].label }}
+          {{ modeOptions[displayMode].label }}
         </n-tag>
       </div>
     </div>
@@ -86,8 +86,7 @@
 
 <script>
 import version from '../src/version'
-import withapp from '../src/_mixins/withapp'
-import { modeRef, setMode } from './use-dev-mode'
+import { useSiteTheme, useSiteLang, displayModeRef, envRef } from './util-compositions'
 
 function match (pattern, string) {
   if (!pattern.length) return true
@@ -97,26 +96,26 @@ function match (pattern, string) {
 }
 
 export default {
-  mixins: [withapp],
+  name: 'SiteHeader',
+  inject: ['message'],
   props: {
-    lang: {
-      type: String,
-      required: true
-    },
     items: {
       type: Array,
       default: () => []
-    },
-    env: {
-      type: String,
-      default: null
+    }
+  },
+  setup () {
+    return {
+      env: envRef,
+      displayMode: displayModeRef,
+      lang: useSiteLang(),
+      theme: useSiteTheme()
     }
   },
   data () {
     return {
       searchInputValue: '',
       version,
-      modeRef,
       themeOptions: {
         dark: {
           label: 'light',
@@ -138,11 +137,11 @@ export default {
         }
       },
       modeOptions: {
-        'debug': {
+        debug: {
           label: 'Production',
           next: 'common'
         },
-        'common': {
+        common: {
           label: 'Debug',
           next: 'debug'
         }
@@ -160,17 +159,10 @@ export default {
     }
   },
   computed: {
-    mode () {
-      return this.modeRef.value
-    },
     zIndex () {
       const path = this.$route.path
       return (path.endsWith('n-modal') || path.endsWith('n-drawer') || path.endsWith('n-dialog')) ? null : 3000
     },
-    theme () {
-      return 'light'
-      // return this.NConfigProvider.$parent.theme
-    },
     menuValue () {
       if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) return 'doc'
       else if (this.$route.name === 'home') return 'home'
@@ -191,26 +183,14 @@ export default {
         label: getLabel(item),
         value: item.path
       }))
-    },
-    options: function () {
-      return [
-        {
-          label: 'dark',
-          value: 'dark'
-        },
-        {
-          label: 'light',
-          value: 'light'
-        }
-      ]
     }
   },
   methods: {
     handleLogoClick () {
-      // if (/^(\/[^/]+){2}$/.test(this.$route.path)) {
-      //   this.$NMessage.info(this.$t('alreadyHome'))
-      //   return
-      // }
+      if (/^(\/[^/]+){2}$/.test(this.$route.path)) {
+        this.message.info(this.$t('alreadyHome'))
+        return
+      }
       this.$router.push(
         /^(\/[^/]+){2}/.exec(this.$route.path)[0]
       )
@@ -234,13 +214,13 @@ export default {
       }
     },
     handleThemeChange () {
-      // this.NConfigProvider.$parent.theme = this.themeOptions[this.theme].next
+      this.theme = this.themeOptions[this.theme].next
     },
     handleModeChange () {
-      setMode(this.modeOptions[this.mode].next)
+      this.displayMode = this.modeOptions[this.displayMode].next
     },
     handleLanguageChange () {
-      this.$emit('lang-change', this.langOptions[this.lang].next)
+      this.lang = this.langOptions[this.lang].next
     }
   }
 }

demo/SiteProvider.vue

@@ -0,0 +1,74 @@
+<template>
+  <n-config-provider
+    class="demo"
+    namespace="naive-ui-doc"
+    :theme="theme"
+    :language="lang"
+  >
+    <n-loading-bar-provider ref="loadingBar">
+      <n-message-provider>
+        <n-notification-provider>
+          <n-dialog-provider>
+            <site />
+          </n-dialog-provider>
+        </n-notification-provider>
+      </n-message-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script>
+import Site from './Site'
+
+export default {
+  name: 'SiteProvider',
+  provide () {
+    return {
+      SiteProvider: this
+    }
+  },
+  components: {
+    Site
+  },
+  computed: {
+    lang: {
+      get () {
+        return this.$route.params.lang || 'en-US'
+      },
+      set (lang) {
+        this.$router.push(changeLangInPath(this.$route.fullPath, lang))
+      }
+    },
+    theme: {
+      get () {
+        switch (this.$route.params.theme) {
+          case 'os-theme': return 'light'
+          case 'dark': return 'dark'
+          default: return 'light'
+        }
+      },
+      set (theme) {
+        this.$router.push(
+          changeThemeInPath(this.$route.fullPath, theme)
+        )
+      }
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next()
+  },
+  beforeRouteUpdate (to, from, next) {
+    next()
+  }
+}
+
+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>

demo/routes/router.js

@@ -1,27 +1,27 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
+export const loadingBarApiRef = {}
+
 export default function createDemoRouter (app, routes) {
   const router = createRouter({
     history: createWebHistory(),
     routes
   })
 
-  // router.beforeEach(function (to, from, next) {
-  //   let theme = to.params.theme
-  //   if (theme === 'os-theme') {
-  //     theme = app.config.globalProperties.$NOs.theme
-  //   }
-  //   app.config.globalProperties.$NLoadingBar.theme = theme
-  //   if (to.path !== from.path) {
-  //     app.config.globalProperties.$NLoadingBar.start()
-  //   }
-  //   next()
-  // })
+  router.beforeEach(function (to, from, next) {
+    if (loadingBarApiRef.value) {
+      loadingBarApiRef.value.start()
+    }
+    next()
+  })
+
+  router.afterEach(function (to, from) {
+    if (to.path !== from.path) {
+      if (loadingBarApiRef.value) {
+        loadingBarApiRef.value.finish()
+      }
+    }
+  })
 
-  // router.afterEach(function (to, from) {
-  //   if (to.path !== from.path) {
-  //     app.config.globalProperties.$NLoadingBar.finish()
-  //   }
-  // })
   return router
 }

demo/routes/routes.js

@@ -1,6 +1,6 @@
 
 import LandingPage from '../documentation/landing'
-import Entry from '../Entry'
+import Entry from '../SiteProvider'
 
 import intro from '../documentation/intro/intro'
 import start from '../documentation/intro/start'
@@ -76,7 +76,7 @@ import code from '../documentation/components/code'
 import upload from '../documentation/components/upload'
 import table from '../documentation/components/table'
 
-import DocEntry from '../DocEntry'
+import Documentation from '../Documentation'
 
 import { withPrefix } from './utils'
 
@@ -170,7 +170,7 @@ export const routes = [
       },
       {
         path: '/:lang/:theme/doc',
-        component: DocEntry,
+        component: Documentation,
         children: childRoutes
       }
     ]

demo/use-dev-mode.js

@@ -1,7 +0,0 @@
-export const modeRef = {
-  value: localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
-}
-export function setMode (value) {
-  modeRef.value = value
-  localStorage.setItem('mode', value)
-}

demo/util-compositions.js

@@ -0,0 +1,33 @@
+import {
+  computed,
+  ref,
+  toRef,
+  inject
+} from 'vue'
+
+export function useDisplayMode () {
+  const devModeRef = ref(
+    localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
+  )
+  return computed({
+    get () {
+      return devModeRef.value
+    },
+    set (value) {
+      devModeRef.value = value
+      localStorage.setItem('mode', value)
+    }
+  })
+}
+
+export const displayModeRef = useDisplayMode()
+
+export function useSiteTheme () {
+  return toRef(inject('SiteProvider'), 'theme')
+}
+
+export function useSiteLang () {
+  return toRef(inject('SiteProvider'), 'lang')
+}
+
+export const envRef = ref(process.env.NODE_ENV)

demo/utils/ComponentDemo.vue

@@ -76,7 +76,7 @@
 <script>
 import { nextTick } from 'vue'
 import codeOutline from '../../src/_icons/code-outline'
-import { modeRef } from '../use-dev-mode'
+import { displayModeRef } from '../util-compositions'
 
 export default {
   components: {
@@ -101,18 +101,17 @@ export default {
       default: null
     }
   },
+  setup () {
+    return {
+      displayMode: displayModeRef
+    }
+  },
   data () {
     return {
       showCode: false,
       contentStyle: null,
       isShow: true,
-      isDebugDemo: false,
-      modeRef
-    }
-  },
-  computed: {
-    mode () {
-      return this.modeRef.value
+      isDebugDemo: false
     }
   },
   watch: {
@@ -125,7 +124,7 @@ export default {
         this.contentStyle = null
       })
     },
-    mode () {
+    displayMode () {
       this.init()
     }
   },
@@ -140,7 +139,7 @@ export default {
       const map = this.NDocumentation.anchorLinkMap
       this.isDebugDemo = this.demoFileName && (~this.demoFileName.indexOf('debug') || ~this.demoFileName.indexOf('Debug'))
       if (this.isDebugDemo) {
-        if (this.mode === 'debug') {
+        if (this.displayMode === 'debug') {
           this.isShow = true
           map.set(this.demoFileName, this.title)
         } else {