elk/components/account/AccountHoverWrapper.vue

69 lines
1.8 KiB
Vue
Raw Normal View History

2022-11-27 02:13:18 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
import { fetchAccountByHandle } from '~/composables/cache'
type WatcherType = [acc?: mastodon.v1.Account, h?: string, v?: boolean]
2022-11-27 02:13:18 +00:00
defineOptions({
inheritAttrs: false,
})
2022-11-30 07:08:10 +00:00
const props = defineProps<{
2023-01-08 06:21:09 +00:00
account?: mastodon.v1.Account
2022-11-30 07:08:10 +00:00
handle?: string
2022-11-28 17:24:39 +00:00
disabled?: boolean
2022-11-27 02:13:18 +00:00
}>()
2022-11-30 07:08:10 +00:00
const hoverCard = ref()
const targetIsVisible = ref(false)
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
useIntersectionObserver(
hoverCard,
([{ intersectionRatio }]) => {
targetIsVisible.value = intersectionRatio <= 0.75
},
)
watch(
() => [props.account, props.handle, targetIsVisible.value] satisfies WatcherType,
([newAccount, newHandle, newVisible], oldProps) => {
if (newAccount) {
account.value = newAccount
return
}
if (!newVisible)
return
if (newHandle) {
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
if (!oldHandle || newHandle !== oldHandle || !account.value) {
// new handle can be wrong: using server instead of webDomain
fetchAccountByHandle(newHandle).then((acc) => {
if (newHandle === props.handle)
account.value = acc
})
}
return
}
account.value = undefined
}, { immediate: true, flush: 'post' },
)
const userSettings = useUserSettings()
2022-11-27 02:13:18 +00:00
</script>
<template>
<span ref="hoverCard">
<VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
<slot />
<template #popper>
<AccountHoverCard v-if="account" :account="account" />
</template>
</VMenu>
<slot v-else />
</span>
2022-11-27 02:13:18 +00:00
</template>