naive-ui/demo/store/index.js

168 lines
4.2 KiB
JavaScript
Raw Normal View History

2021-01-13 12:01:02 +08:00
import { computed, ref, provide, reactive, toRef, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
2021-01-13 17:22:54 +08:00
import {
2021-02-17 23:31:56 +08:00
NConfigProvider,
2021-01-13 17:22:54 +08:00
darkTheme,
enUS,
zhCN,
dateEnUS,
dateZhCN,
useOsTheme
} from '../../src'
2021-02-17 23:31:56 +08:00
import { TsConfigProvider } from '../../themes/tusimple/src'
2021-01-13 12:01:02 +08:00
import { i18n } from '../utils/composables'
2021-02-14 14:52:14 +08:00
import {
createDocumentationMenuOptions,
createComponentMenuOptions
} from './menu-options'
2021-01-13 12:31:41 +08:00
import hljs from './hljs'
2021-01-13 12:01:02 +08:00
const storeKey = 'site-store'
export function siteSetup () {
const route = useRoute()
const router = useRouter()
// display mode
2021-02-02 12:24:48 +08:00
const _displayModeRef = ref(window.localStorage.getItem('mode') ?? 'debug')
2021-01-13 12:01:02 +08:00
const displayModeRef = computed({
get () {
return _displayModeRef.value
},
set (value) {
_displayModeRef.value = value
2021-02-02 12:24:48 +08:00
window.localStorage.setItem('mode', value)
2021-01-13 12:01:02 +08:00
}
})
// locale
const localeNameRef = computed({
get () {
return route.params.lang === 'zh-CN' ? 'zh-CN' : 'en-US'
},
set (locale) {
router.push(changeLangInPath(route.fullPath, locale))
}
})
const localeRef = computed(() => {
return localeNameRef.value === 'zh-CN' ? zhCN : enUS
})
const dateLocaleRef = computed(() => {
return route.params.lang === 'zh-CN' ? dateZhCN : dateEnUS
})
// theme
2021-01-13 17:22:54 +08:00
const osThemeRef = useOsTheme()
2021-01-13 12:01:02 +08:00
const themeNameRef = computed({
get () {
switch (route.params.theme) {
case 'os-theme':
2021-01-13 17:22:54 +08:00
return osThemeRef.value
2021-01-13 12:01:02 +08:00
case 'dark':
return 'dark'
default:
return 'light'
}
},
set (theme) {
router.push(changeThemeInPath(route.fullPath, theme))
}
})
const themeRef = computed(() => {
const { value } = themeNameRef
2021-02-02 12:24:48 +08:00
return value === 'dark' ? darkTheme : null
2021-01-13 12:01:02 +08:00
})
2021-02-17 23:31:56 +08:00
// config provider
2021-02-19 13:04:36 +08:00
const configProviderNameRef = ref(
process.env.TUSIMPLE ? 'tusimple' : 'default'
)
2021-02-17 23:31:56 +08:00
const configProviderRef = computed(() => {
return configProviderNameRef.value === 'tusimple'
? TsConfigProvider
: NConfigProvider
})
2021-01-13 12:01:02 +08:00
// options
const docOptionsRef = computed(() =>
2021-02-14 14:52:14 +08:00
createDocumentationMenuOptions({
theme: themeNameRef.value,
lang: localeNameRef.value,
mode: displayModeRef.value
})
)
const componentOptionsRef = computed(() =>
createComponentMenuOptions({
2021-01-13 12:01:02 +08:00
theme: themeNameRef.value,
lang: localeNameRef.value,
mode: displayModeRef.value
})
)
const flattenedDocOptionsRef = computed(() => {
const flattenedItems = []
const traverse = (items) => {
2021-02-14 15:19:32 +08:00
if (!items) return
items.forEach((item) => {
if (item.children) traverse(item.children)
else flattenedItems.push(item)
})
2021-01-13 12:01:02 +08:00
}
traverse(docOptionsRef.value)
2021-02-14 14:52:14 +08:00
traverse(componentOptionsRef.value)
2021-01-13 12:01:02 +08:00
return flattenedItems
})
provide(
storeKey,
reactive({
themeName: themeNameRef,
2021-02-17 23:31:56 +08:00
configProviderName: configProviderNameRef,
2021-01-13 12:01:02 +08:00
localeName: localeNameRef,
displayMode: displayModeRef,
docOptions: docOptionsRef,
2021-02-14 14:52:14 +08:00
componentOptions: componentOptionsRef,
2021-01-13 12:01:02 +08:00
flattenedDocOptions: flattenedDocOptionsRef
})
)
i18n.provide(computed(() => localeNameRef.value))
return {
2021-02-17 23:31:56 +08:00
configProvider: configProviderRef,
2021-01-13 12:31:41 +08:00
hljs,
2021-01-13 12:01:02 +08:00
theme: themeRef,
locale: localeRef,
dateLocale: dateLocaleRef
}
}
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)
}
export function useDisplayMode () {
return toRef(inject(storeKey), 'displayMode')
}
export function useLocaleName () {
return toRef(inject(storeKey), 'localeName')
}
export function useThemeName () {
return toRef(inject(storeKey), 'themeName')
}
export function useDocOptions () {
return toRef(inject(storeKey), 'docOptions')
}
2021-02-14 14:52:14 +08:00
export function useComponentOptions () {
return toRef(inject(storeKey), 'componentOptions')
}
2021-01-13 12:01:02 +08:00
export function useFlattenedDocOptions () {
return toRef(inject(storeKey), 'flattenedDocOptions')
}
2021-02-17 23:31:56 +08:00
export function useConfigProviderName () {
return toRef(inject(storeKey), 'configProviderName')
}