VberAdmin-Java_V1/UI/VA.Vue_V1.0/src/stores/_bodyConfig.ts

import objectPath from "object-path"
import { ThemeModeComponent } from "@/assets/ts/layout"
import type LayoutConfigTypes from "@/core/config/LayoutConfigTypes"
import layoutConfig from "@/core/config/DefaultLayoutConfig"
import { localCache } from "@/core/utils/cache"

export const LS_CONFIG_NAME_KEY = `config_${import.meta.env.VITE_APP_NAME}_${import.meta.env.VITE_APP_VERSION}`
export const THEME_MODE_LS_KEY = "VB_THEME_MODE_VALUE"
export const THEME_MENU_MODE_LS_KEY = "VB_THEME_MODE_MENU"

export const useBodyConfigStore = defineStore("bodyConfig", () => {
  const classes = ref<any>({})

  function getClasses(key: string) {
    return classes.value[key]
  }

  function addBodyClassname(className: string) {
    document.body.classList.add(className)
  }

  function removeBodyClassName(className: string) {
    document.body.classList.remove(className)
  }

  function addBodyAttribute(payload: { qualifiedName: string; value: string }) {
    const { qualifiedName, value } = payload
    document.body.setAttribute(qualifiedName, value)
  }

  function removeBodyAttribute(payload: { qualifiedName: string }) {
    const { qualifiedName } = payload
    document.body.removeAttribute(qualifiedName)
  }

  function addClassname(payload: { position: string; className: string }) {
    const { position, className } = payload
    if (!classes.value[position]) {
      classes.value[position] = [className]
    } else {
      classes.value[position].push(className)
    }
  }

  const config = ref<LayoutConfigTypes>(layoutConfig)
  const initial = ref<LayoutConfigTypes>(layoutConfig)

  function getLayoutConfig(path: string, defaultValue?: string) {
    return objectPath.get(config.value, path, defaultValue)
  }

  function setLayoutConfigProperty(property: string, value: any) {
    objectPath.set(config.value, property, value)
    localCache.setJSON(LS_CONFIG_NAME_KEY, config.value)
  }

  function resetLayoutConfig() {
    config.value = Object.assign({}, initial.value)
  }
  function removeCacheLayoutConfig() {
    localCache.setJSON(LS_CONFIG_NAME_KEY, layoutConfig)
    overrideLayoutConfig()
  }

  function overrideLayoutConfig() {
    config.value = initial.value = Object.assign({}, initial.value, localCache.getJSON(LS_CONFIG_NAME_KEY) || {})
  }

  const mode = ref<"light" | "dark" | "system">(localCache.get(THEME_MODE_LS_KEY) as "light" | "dark" | "system")

  function setThemeMode(payload: "light" | "dark" | "system") {
    let currentMode = payload
    localCache.set(THEME_MODE_LS_KEY, currentMode)
    localCache.set(THEME_MENU_MODE_LS_KEY, currentMode)
    mode.value = currentMode

    if (currentMode === "system") {
      currentMode = ThemeModeComponent.getSystemMode()
    }

    document.documentElement.setAttribute("data-bs-theme", currentMode)
    ThemeModeComponent.init()
  }

  return {
    getClasses,
    addBodyClassname,
    removeBodyClassName,
    addBodyAttribute,
    removeBodyAttribute,
    addClassname,
    config,
    getLayoutConfig,
    setLayoutConfigProperty,
    resetLayoutConfig,
    removeCacheLayoutConfig,
    overrideLayoutConfig,
    mode,
    setThemeMode,
  }
})