Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

feat(ui): fetch account data on demand (#2632)

Browse source
This commit is contained in:
Joaquín Sánchez 2024-03-04 20:20:13 +01:00 committed by GitHub
parent e44833b18a
commit 308b50cbad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
components/account/AccountHoverWrapper.vue
View file

@ -2,39 +2,33 @@
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { fetchAccountByHandle } from '~/composables/cache' import { fetchAccountByHandle } from '~/composables/cache'
type WatcherType = [acc?: mastodon.v1.Account, h?: string, v?: boolean] type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const props = defineProps<{ const props = defineProps<{
account?: mastodon.v1.Account account?: mastodon.v1.Account | null
handle?: string handle?: string
disabled?: boolean disabled?: boolean
}>() }>()
const hoverCard = ref() const accountHover = ref()
const targetIsVisible = ref(false) const hovered = useElementHover(accountHover)
const account = ref<mastodon.v1.Account | null | undefined>(props.account) const account = ref<mastodon.v1.Account | null | undefined>(props.account)
useIntersectionObserver(
hoverCard,
([{ intersectionRatio }]) => {
targetIsVisible.value = intersectionRatio > 0.1
},
)
watch( watch(
() => [props.account, props.handle, targetIsVisible.value] satisfies WatcherType, () => [props.account, props.handle, hovered.value] satisfies WatcherType,
([newAccount, newHandle, newVisible], oldProps) => { ([newAccount, newHandle, newVisible], oldProps) => {
if (!newVisible || process.test)
return
if (newAccount) { if (newAccount) {
account.value = newAccount account.value = newAccount
return return
} }
if (!newVisible || process.test)
return
if (newHandle) { if (newHandle) {
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false] const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
if (!oldHandle || newHandle !== oldHandle || !account.value) { if (!oldHandle || newHandle !== oldHandle || !account.value) {
@ -56,8 +50,14 @@ const userSettings = useUserSettings()
</script> </script>
<template> <template>
<span ref="hoverCard"> <span ref="accountHover">
<VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false"> <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 /> <slot />
<template #popper> <template #popper>
<AccountHoverCard v-if="account" :account="account" /> <AccountHoverCard v-if="account" :account="account" />