elk/components/tag/TagCard.vue

54 lines
1.4 KiB
Vue
Raw Normal View History

<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-12-11 10:52:36 +00:00
const { tag } = defineProps<{
2023-01-08 06:21:09 +00:00
tag: mastodon.v1.Tag
2022-12-11 10:52:36 +00:00
}>()
const to = computed(() => {
2023-01-22 19:21:34 +00:00
const { hostname, pathname } = new URL(tag.url)
return `/${hostname}${pathname}`
})
const router = useRouter()
function onclick(evt: MouseEvent | KeyboardEvent) {
const path = evt.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON'].includes(el.tagName?.toUpperCase()))
const text = window.getSelection()?.toString()
if (!el && !text)
go(evt)
}
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey)
window.open(to.value)
else
router.push(to.value)
}
2022-12-11 10:52:36 +00:00
</script>
<template>
<div
block p4 hover:bg-active flex justify-between cursor-pointer flex-gap-2
@click="onclick"
@keydown.enter="onclick"
>
<div flex flex-gap-2>
<TagActionButton :tag="tag" />
<div>
<h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
<bdi>
<span>#</span>
<span hover:underline>{{ tag.name }}</span>
</bdi>
</h4>
<CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
</div>
2022-12-11 10:52:36 +00:00
</div>
2023-01-24 18:52:48 +00:00
<div v-if="tag.history" flex items-center>
2022-12-11 10:52:36 +00:00
<CommonTrendingCharts :history="tag.history" />
</div>
</div>
2022-12-11 10:52:36 +00:00
</template>