99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<template>
|
|
<MkA
|
|
v-if="url.startsWith('/')"
|
|
v-user-preview="canonical"
|
|
class="akbvjaqn"
|
|
:class="{ isMe }"
|
|
:to="url"
|
|
:style="{ background: bgCss }"
|
|
@click.stop
|
|
>
|
|
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
|
|
<span class="main">
|
|
<span class="username">@{{ username }}</span>
|
|
<span
|
|
v-if="host != localHost || $store.state.showFullAcct"
|
|
class="host"
|
|
>@{{ toUnicode(host) }}</span
|
|
>
|
|
</span>
|
|
</MkA>
|
|
<a
|
|
v-else
|
|
class="akbvjaqn"
|
|
:href="url"
|
|
target="_blank"
|
|
rel="noopener"
|
|
:style="{ background: bgCss }"
|
|
@click.stop
|
|
>
|
|
<span class="main">
|
|
<span class="username">@{{ username }}</span>
|
|
<span class="host">@{{ toUnicode(host) }}</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { toUnicode } from "punycode";
|
|
import {} from "vue";
|
|
import tinycolor from "tinycolor2";
|
|
import { host as localHost } from "@/config";
|
|
import { $i } from "@/account";
|
|
|
|
const props = defineProps<{
|
|
username: string;
|
|
host: string;
|
|
}>();
|
|
|
|
const canonical =
|
|
props.host === localHost
|
|
? `@${props.username}`
|
|
: `@${props.username}@${toUnicode(props.host)}`;
|
|
|
|
const url = `/${canonical}`;
|
|
|
|
const isMe =
|
|
$i &&
|
|
`@${props.username}@${toUnicode(props.host)}` ===
|
|
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
|
|
|
|
const bg = tinycolor(
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
isMe ? "--mentionMe" : "--mention"
|
|
)
|
|
);
|
|
bg.setAlpha(0.1);
|
|
const bgCss = bg.toRgbString();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.akbvjaqn {
|
|
display: inline-block;
|
|
padding: 2px 8px 2px 2px;
|
|
margin-block: 2px;
|
|
border-radius: 999px;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: var(--mention);
|
|
|
|
&.isMe {
|
|
color: var(--mentionMe);
|
|
}
|
|
|
|
> .icon {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
object-fit: cover;
|
|
margin: 0 0.2em 0 0;
|
|
vertical-align: bottom;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
> .main > .host {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|