多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.9 KiB

import { useStorage } from '@vueuse/core'
import { useInjectionState, watch } from '#imports'
interface UseSidebarProps {
hasSidebar?: boolean
isOpen?: boolean
storageKey?: string // if a storageKey is passed, use that key for localStorage
}
/**
* Injection state for sidebars
*
* Use `provideSidebar` to provide the injection state on current component level (will affect all children injections)
* Use `useSidebar` to use the injection state on current component level
*
* If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
*/
const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
let isOpen = ref(props.isOpen ?? false)
let hasSidebar = ref(props.hasSidebar ?? true)
function toggle(state?: boolean) {
isOpen.value = state ?? !isOpen.value
}
function toggleHasSidebar(state?: boolean) {
hasSidebar.value = state ?? !hasSidebar.value
}
if (props.storageKey) {
const storage = toRefs(useStorage(props.storageKey, { isOpen, hasSidebar }, localStorage, { mergeDefaults: true }).value)
isOpen = storage.isOpen
hasSidebar = storage.hasSidebar
}
watch(
hasSidebar,
(nextHasSidebar) => {
if (!nextHasSidebar) toggle(false)
},
{ immediate: true },
)
watch(
isOpen,
(nextIsOpen) => {
if (nextIsOpen && !hasSidebar.value) toggleHasSidebar(true)
},
{ immediate: true },
)
return {
isOpen,
toggle,
hasSidebar,
toggleHasSidebar,
}
}, 'useSidebar')
export const provideSidebar = setup
export function useSidebar(props: UseSidebarProps = {}) {
const state = use()
if (!state) {
return setup(props)
} else {
// set state if props were passed
if (typeof props.isOpen !== 'undefined') state.isOpen.value = props.isOpen
if (typeof props.hasSidebar !== 'undefined') state.hasSidebar.value = props.hasSidebar
}
return state
}