|
|
@ -1,5 +1,5 @@ |
|
|
|
import { useStorage } from '@vueuse/core' |
|
|
|
import { useStorage } from '@vueuse/core' |
|
|
|
import { MemStorage, onScopeDispose, watch } from '#imports' |
|
|
|
import { MemStorage, onScopeDispose, ref, syncRef, toRefs, watch } from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
interface UseSidebarProps { |
|
|
|
interface UseSidebarProps { |
|
|
|
hasSidebar?: boolean |
|
|
|
hasSidebar?: boolean |
|
|
@ -10,12 +10,8 @@ interface UseSidebarProps { |
|
|
|
/** |
|
|
|
/** |
|
|
|
* States for sidebars |
|
|
|
* States for sidebars |
|
|
|
* |
|
|
|
* |
|
|
|
* Use `provideSidebar` to provide the state and save to memory or local storage |
|
|
|
|
|
|
|
* Use `useSidebar` to use the state |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no state can be found |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* Requires an id to work, id should correspond to the sidebar state you want to create or fetch |
|
|
|
* Requires an id to work, id should correspond to the sidebar state you want to create or fetch |
|
|
|
|
|
|
|
* If `useSidebar` was not called before it will create a new state if no state can be found for the specified id |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
const sidebarStorage = new MemStorage() |
|
|
|
const sidebarStorage = new MemStorage() |
|
|
|
|
|
|
|
|
|
|
@ -61,40 +57,25 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const provideSidebar = (id: string, props: UseSidebarProps = {}) => { |
|
|
|
export function useSidebar(id: string, props: UseSidebarProps = {}) { |
|
|
|
if (!id) throw new Error('provideSidebar requires an id') |
|
|
|
if (!id) throw new Error('useSidebar requires an id') |
|
|
|
|
|
|
|
|
|
|
|
onScopeDispose(() => { |
|
|
|
|
|
|
|
sidebarStorage.remove(id) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!sidebarStorage.has(id)) { |
|
|
|
if (!sidebarStorage.has(id)) { |
|
|
|
const sidebar = createSidebar(id, props) |
|
|
|
const sidebar = createSidebar(id, props) |
|
|
|
|
|
|
|
|
|
|
|
sidebarStorage.set(id, sidebar) |
|
|
|
sidebarStorage.set(id, sidebar) |
|
|
|
|
|
|
|
|
|
|
|
return sidebar |
|
|
|
onScopeDispose(() => { |
|
|
|
} else { |
|
|
|
sidebarStorage.remove(id) |
|
|
|
const sidebar = sidebarStorage.get(id) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen |
|
|
|
|
|
|
|
if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return sidebar |
|
|
|
return sidebar |
|
|
|
} |
|
|
|
} else { |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function useSidebar(id: string, props: UseSidebarProps = {}) { |
|
|
|
|
|
|
|
if (!id) throw new Error('useSidebar requires an id') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (sidebarStorage.has(id)) { |
|
|
|
|
|
|
|
const sidebar = sidebarStorage.get(id) |
|
|
|
const sidebar = sidebarStorage.get(id) |
|
|
|
|
|
|
|
|
|
|
|
if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen |
|
|
|
if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen |
|
|
|
if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar |
|
|
|
if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar |
|
|
|
|
|
|
|
|
|
|
|
return sidebar |
|
|
|
return sidebar |
|
|
|
} else { |
|
|
|
|
|
|
|
return provideSidebar(id, props) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|