82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
import { useStorage } from '@vueuse/core'
|
||
import { useTheme } from 'vuetify'
|
||
import { useConfigStore } from '@core/stores/config'
|
||
import { cookieRef, namespaceConfig } from '@layouts/stores/config'
|
||
import { themeConfig } from '@themeConfig'
|
||
|
||
const _syncAppRtl = () => {
|
||
const configStore = useConfigStore()
|
||
const storedLang = cookieRef('language', null)
|
||
const { locale } = useI18n({ useScope: 'global' })
|
||
|
||
// TODO: Handle case where i18n can't read persisted value
|
||
if (locale.value !== storedLang.value && storedLang.value)
|
||
locale.value = storedLang.value
|
||
|
||
// watch and change lang attribute of html on language change
|
||
watch(locale, val => {
|
||
// Update lang attribute of html tag
|
||
if (typeof document !== 'undefined')
|
||
document.documentElement.setAttribute('lang', val)
|
||
|
||
// Store selected language in cookie
|
||
storedLang.value = val
|
||
|
||
// set isAppRtl value based on selected language
|
||
if (themeConfig.app.i18n.langConfig && themeConfig.app.i18n.langConfig.length) {
|
||
themeConfig.app.i18n.langConfig.forEach(lang => {
|
||
if (lang.i18nLang === storedLang.value)
|
||
configStore.isAppRTL = lang.isRTL
|
||
})
|
||
}
|
||
}, { immediate: true })
|
||
}
|
||
|
||
const _handleSkinChanges = () => {
|
||
const { themes } = useTheme()
|
||
const configStore = useConfigStore()
|
||
|
||
|
||
// Create skin default color so that we can revert back to original (default skin) color when switch to default skin from bordered skin
|
||
Object.values(themes.value).forEach(t => {
|
||
t.colors['skin-default-background'] = t.colors.background
|
||
t.colors['skin-default-surface'] = t.colors.surface
|
||
})
|
||
watch(() => configStore.skin, val => {
|
||
Object.values(themes.value).forEach(t => {
|
||
t.colors.background = t.colors[`skin-${val}-background`]
|
||
t.colors.surface = t.colors[`skin-${val}-surface`]
|
||
})
|
||
}, { immediate: true })
|
||
}
|
||
|
||
|
||
/*
|
||
ℹ️ Set current theme's surface color in localStorage
|
||
|
||
Why? Because when initial loader is shown (before vue is ready) we need to what's the current theme's surface color.
|
||
We will use color stored in localStorage to set the initial loader's background color.
|
||
|
||
With this we will be able to show correct background color for the initial loader even before vue identify the current theme.
|
||
*/
|
||
const _syncInitialLoaderTheme = () => {
|
||
const vuetifyTheme = useTheme()
|
||
|
||
watch(() => useConfigStore().theme, () => {
|
||
// ℹ️ We are not using theme.current.colors.surface because watcher is independent and when this watcher is ran `theme` computed is not updated
|
||
useStorage(namespaceConfig('initial-loader-bg'), null).value = vuetifyTheme.current.value.colors.surface
|
||
useStorage(namespaceConfig('initial-loader-color'), null).value = vuetifyTheme.current.value.colors.primary
|
||
}, { immediate: true })
|
||
}
|
||
|
||
const initCore = () => {
|
||
_syncInitialLoaderTheme()
|
||
_handleSkinChanges()
|
||
|
||
// ℹ️ We don't want to trigger i18n in SK
|
||
if (themeConfig.app.i18n.enable)
|
||
_syncAppRtl()
|
||
}
|
||
|
||
export default initCore
|