65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref } from 'vue'
|
|
|
|
// v2 shell UI state ONLY (RFC-WS-GUI-REDESIGN AD-G4). No tenant/org
|
|
// state — that stays in useAuthStore/useOrganisationStore. Owns the
|
|
// writes to <html data-theme>/<html data-density>/.dark (composes with
|
|
// Aura darkModeSelector '.dark'); v2 bypasses Vuexy useSkins.ts.
|
|
|
|
export type ShellTheme = 'light' | 'dark'
|
|
export type ShellDensity = 'comfortable' | 'compact'
|
|
|
|
export interface ShellDrawerState {
|
|
isOpen: boolean
|
|
component: string | null
|
|
props: Record<string, unknown>
|
|
}
|
|
|
|
export const useShellUiStore = defineStore('shellUi', () => {
|
|
const sidebarCollapsed = ref(false)
|
|
const density = ref<ShellDensity>('comfortable')
|
|
const theme = ref<ShellTheme>('light')
|
|
const drawer = ref<ShellDrawerState>({ isOpen: false, component: null, props: {} })
|
|
|
|
function toggleSidebar(): void {
|
|
sidebarCollapsed.value = !sidebarCollapsed.value
|
|
}
|
|
|
|
function setTheme(next: ShellTheme): void {
|
|
theme.value = next
|
|
}
|
|
|
|
function setDensity(next: ShellDensity): void {
|
|
density.value = next
|
|
}
|
|
|
|
function applyDomAttributes(): void {
|
|
const el = document.documentElement
|
|
|
|
el.setAttribute('data-theme', theme.value)
|
|
el.setAttribute('data-density', density.value)
|
|
el.classList.toggle('dark', theme.value === 'dark')
|
|
}
|
|
|
|
function openDrawer(component: string, props: Record<string, unknown> = {}): void {
|
|
drawer.value = { isOpen: true, component, props }
|
|
}
|
|
|
|
function closeDrawer(): void {
|
|
drawer.value = { isOpen: false, component: null, props: {} }
|
|
}
|
|
|
|
return {
|
|
sidebarCollapsed,
|
|
density,
|
|
theme,
|
|
drawer,
|
|
toggleSidebar,
|
|
setTheme,
|
|
setDensity,
|
|
applyDomAttributes,
|
|
openDrawer,
|
|
closeDrawer,
|
|
}
|
|
})
|