teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

chore: clean up

Browse source
This commit is contained in:
Anthony Fu 2022-12-24 00:22:57 +01:00
parent b40832a7eb
commit 6c9908d030
1 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
composables/fontSize.ts
View file

@ -1,18 +1,16 @@
import type { InjectionKey, Ref } from 'vue' import type { InjectionKey, Ref } from 'vue'
import { STORAGE_KEY_FONT_SIZE } from '~/constants' import { STORAGE_KEY_FONT_SIZE } from '~/constants'
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
export const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>> const DEFAULT = 'md'
export function setFontSize(size: FontSize) { export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
inject(InjectionKeyFontSize)!.value = size
}
export function getFontSize() { export function getFontSize() {
return inject(InjectionKeyFontSize)! return inject(InjectionKeyFontSize)!
} }
export const fontSizeMap = { const fontSizeMap = {
xs: '13px', xs: '13px',
sm: '14px', sm: '14px',
md: '15px', md: '15px',
@ -21,19 +19,19 @@ export const fontSizeMap = {
} }
export async function setupFontSize() { export async function setupFontSize() {
const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => 'md' }) const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => DEFAULT })
getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize) getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize)
if (!process.server) { if (!process.server) {
watchEffect(() => { watchEffect(() => {
document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || 'md']) document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || DEFAULT])
}) })
} }
else { else {
useHead({ useHead({
style: [ style: [
{ {
innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || 'md']}; }`, innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || DEFAULT]}; }`,
}, },
], ],
}) })