Update vetur

src/client/components/global/avatar.vue

@@ -0,0 +1,110 @@
+<template>
+<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+	<img class="inner" :src="url"/>
+</span>
+<MkA class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+	<img class="inner" :src="url"/>
+</MkA>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '@/filters/user';
+
+export default defineComponent({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+		target: {
+			required: false,
+			default: null
+		},
+		disableLink: {
+			required: false,
+			default: false
+		},
+		disablePreview: {
+			required: false,
+			default: false
+		}
+	},
+	emits: ['click'],
+	computed: {
+		cat(): boolean {
+			return this.user.isCat;
+		},
+		url(): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(this.user.avatarUrl)
+				: this.user.avatarUrl;
+		},
+	},
+	watch: {
+		'user.avatarBlurhash'() {
+			if (this.$el == null) return;
+			this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
+		}
+	},
+	mounted() {
+		this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
+	},
+	methods: {
+		onClick(e) {
+			this.$emit('click', e);
+		},
+		acct,
+		userPage
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.eiwwqkts {
+	position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	flex-shrink: 0;
+	border-radius: 100%;
+	line-height: 16px;
+
+	&.cat {
+		&:before, &:after {
+			background: #df548f;
+			border: solid 4px currentColor;
+			box-sizing: border-box;
+			content: '';
+			display: inline-block;
+			height: 50%;
+			width: 50%;
+		}
+
+		&:before {
+			border-radius: 0 75% 75%;
+			transform: rotate(37.5deg) skew(30deg);
+		}
+
+		&:after {
+			border-radius: 75% 0 75% 75%;
+			transform: rotate(-37.5deg) skew(-30deg);
+		}
+	}
+
+	.inner {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		border-radius: 100%;
+		z-index: 1;
+		overflow: hidden;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>