package list from viandwi24

utils/app.ts

@@ -0,0 +1,30 @@
+import { ThemeManager } from './theme'
+import { LanguageManager } from './lang'
+
+export function AppSetup() {
+  // use theme manager
+  const themeManager = ThemeManager()
+
+  // use language manager
+  const languageManager = LanguageManager()
+
+  // vue transition bug handle
+  const messages = [
+    `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
+    `NotFoundError: The object can not be found here.`, // safari
+  ]
+  if (typeof window !== 'undefined') {
+    window.addEventListener('error', (ev) => {
+      if (messages.includes(ev.message)) {
+        ev.preventDefault()
+        window.location.reload()
+      }
+    })
+  }
+
+  // return
+  return {
+    themeManager,
+    languageManager,
+  }
+}

utils/lang.ts

@@ -0,0 +1,87 @@
+import { useI18n } from 'vue-i18n'
+
+export interface ILocales {
+  [key: string]: {
+    name: string
+    iso: string
+    flag: string
+  }
+}
+
+export const availableLocales: ILocales = {
+  en: {
+    name: 'English',
+    iso: 'en',
+    flag: '🇺🇸',
+  },
+  id: {
+    name: 'Bahasa',
+    iso: 'id',
+    flag: '🇮🇩',
+  },
+  ja: {
+    name: '日本語',
+    iso: 'ja',
+    flag: '🇯🇵',
+  },
+  ko: {
+    name: '한국어',
+    iso: 'ko',
+    flag: '🇰🇷',
+  },
+  zh: {
+    name: '简体中文',
+    iso: 'zh',
+    flag: '🇨🇳',
+  },
+  tr: {
+    name: 'Türkçe',
+    iso: 'tr',
+    flag: '🇹🇷',
+  },
+}
+
+export function LanguageManager() {
+  // composable
+  const { locale } = useI18n()
+  const localeUserSetting = useCookie('locale')
+
+  // methods
+  const getSystemLocale = (): string => {
+    try {
+      const foundLang = window
+        ? window.navigator.language.substring(0, 2)
+        : 'en'
+      return availableLocales[foundLang] ? foundLang : 'en'
+    } catch (error) {
+      return 'en'
+    }
+  }
+  const getUserLocale = (): string =>
+    localeUserSetting.value || getSystemLocale()
+
+  // state
+  const localeSetting = useState<string>('locale.setting', () =>
+    getUserLocale()
+  )
+
+  // watchers
+  watch(localeSetting, (localeSetting) => {
+    localeUserSetting.value = localeSetting
+    locale.value = localeSetting
+  })
+
+  // init locale
+  const init = () => {
+    localeSetting.value = getUserLocale()
+  }
+  locale.value = localeSetting.value
+
+  // lifecycle
+  onBeforeMount(() => init())
+
+  return {
+    localeSetting,
+    init,
+  }
+}

utils/str.ts

@@ -0,0 +1,6 @@
+// capitalize each word in a string
+export function capitalize(str: string): string {
+  return str.replace(/\w\S*/g, (txt) => {
+    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+  })
+}

utils/theme.ts

@@ -0,0 +1,101 @@
+export type IThemeSettingOptions = 'dark' | 'light' | 'system' | 'realtime'
+
+export type ITheme = 'dark' | 'light'
+
+export const availableThemes: {
+  key: IThemeSettingOptions
+  text: string
+}[] = [
+  { key: 'light', text: 'Light' },
+  { key: 'dark', text: 'Dark' },
+  { key: 'system', text: 'System' },
+  { key: 'realtime', text: 'Realtime' },
+]
+
+export function ThemeManager() {
+  // composable
+  const themeUserSetting = useCookie<IThemeSettingOptions>('theme')
+
+  // methods
+  const getUserSetting = (): IThemeSettingOptions =>
+    themeUserSetting.value || 'system'
+  const getSystemTheme = (): ITheme => {
+    try {
+      return window
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : 'dark'
+    } catch (error) {
+      return 'dark'
+    }
+  }
+  const getRealtimeTheme = (): ITheme => {
+    const now = new Date()
+    const hour = now.getHours()
+    const isNight = hour >= 17 || hour <= 5
+    return isNight ? 'dark' : 'light'
+  }
+
+  // state
+  const themeSetting = useState<IThemeSettingOptions>('theme.setting', () =>
+    getUserSetting()
+  )
+  const themeCurrent = useState<ITheme>('theme.current', () =>
+    process.client ? getSystemTheme() : 'light'
+  )
+
+  // wathcers
+  const onThemeSettingChange = (themeSetting: IThemeSettingOptions) => {
+    themeUserSetting.value = themeSetting
+    if (themeSetting === 'realtime') {
+      themeCurrent.value = getRealtimeTheme()
+    } else if (themeSetting === 'system') {
+      themeCurrent.value = getSystemTheme()
+    } else {
+      themeCurrent.value = themeSetting
+    }
+  }
+  watch(themeSetting, (val) => onThemeSettingChange(val))
+  const onThemeSystemChange = () => {
+    if (themeSetting.value === 'system') {
+      themeCurrent.value = getSystemTheme()
+    }
+  }
+  const onRealtimeCheck = () => {
+    if (themeSetting.value === 'realtime') {
+      themeCurrent.value = getRealtimeTheme()
+    }
+  }
+
+  // init theme
+  const init = () => {
+    themeSetting.value = getUserSetting()
+  }
+  onThemeSettingChange(themeSetting.value)
+
+  // lifecycle
+  let intervalCheckTime: NodeJS.Timer
+  onBeforeMount(() => init())
+  onMounted(() => {
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', onThemeSystemChange)
+    intervalCheckTime = setInterval(onRealtimeCheck, 1000)
+  })
+  onBeforeUnmount(() => {
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .removeEventListener('change', onThemeSystemChange)
+    if (intervalCheckTime) clearInterval(intervalCheckTime)
+  })
+
+  return {
+    themeSetting,
+    themeCurrent,
+
+    getUserSetting,
+    getSystemTheme,
+    getRealtimeTheme,
+  }
+}