From 9384f5399da39e53855beb8e7f8ded1aa56bf72e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:36:33 +0900
Subject: rename: client -> frontend

---
 .../frontend/src/components/MkUsersTooltip.vue     | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/frontend/src/components/MkUsersTooltip.vue

(limited to 'packages/frontend/src/components/MkUsersTooltip.vue')

diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue
new file mode 100644
index 0000000000..f0384e2d65
--- /dev/null
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@@ -0,0 +1,51 @@
+<template>
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
+	<div class="beaffaef">
+		<div v-for="u in users" :key="u.id" class="user">
+			<MkAvatar class="avatar" :user="u"/>
+			<MkUserName class="name" :user="u" :nowrap="true"/>
+		</div>
+		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './MkTooltip.vue';
+
+defineProps<{
+	showing: boolean;
+	users: any[]; // TODO
+	count: number;
+	targetElement: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.beaffaef {
+	font-size: 0.9em;
+	text-align: left;
+
+	> .user {
+		line-height: 24px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:not(:last-child) {
+			margin-bottom: 3px;
+		}
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 3px;
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya

