elk/composables/vue.ts

61 lines
1.9 KiB
TypeScript
Raw Normal View History

import type { ComponentInternalInstance } from 'vue'
import { onActivated, onDeactivated, ref } from 'vue'
2023-04-16 20:33:22 +00:00
import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@unhead/vue'
import type { SchemaAugmentations } from '@unhead/schema'
2023-01-06 18:40:15 +00:00
export const isHydrated = ref(false)
export function onHydrated(cb: () => unknown) {
2023-01-15 08:38:02 +00:00
watchOnce(isHydrated, () => cb(), { immediate: isHydrated.value })
}
/**
* ### Whether the current component is running in the background
*
* for handling problems caused by the keepalive function
*/
export function useDeactivated() {
const deactivated = ref(false)
onActivated(() => deactivated.value = false)
onDeactivated(() => deactivated.value = true)
return deactivated
}
/**
* ### When the component is restored from the background
*
* for handling problems caused by the keepalive function
*/
export function onReactivated(hook: () => void, target?: ComponentInternalInstance | null): void {
const initial = ref(true)
onActivated(() => {
if (initial.value)
return
hook()
}, target)
onDeactivated(() => initial.value = false)
}
export function useHydratedHead<T extends SchemaAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
if (input && typeof input === 'object' && !('value' in input)) {
const title = 'title' in input ? input.title : undefined
if (process.server && title) {
input.meta = input.meta || []
if (Array.isArray(input.meta)) {
input.meta.push(
{ property: 'og:title', content: (typeof input.title === 'function' ? input.title() : input.title) as string },
)
}
}
else if (title) {
(input as any).title = () => isHydrated.value ? typeof title === 'function' ? title() : title : ''
}
}
2023-05-01 23:58:55 +00:00
return useHead((() => {
if (!isHydrated.value)
return {}
return resolveUnref(input)
2023-05-01 23:58:55 +00:00
}) as UseHeadInput<T>, options)
}