thelounge/client/components/Username.vue

<template>
	<span
		:class="['user', nickColor, {active: active}]"
		:data-name="user.nick"
		role="button"
		v-on="onHover ? {mouseenter: hover} : {}"
		@click.prevent="openContextMenu"
		@contextmenu.prevent="openContextMenu"
		><slot v-if="!html">
			<StatusIcon
				v-if="includeStatusIcon"
				:away="!!user.away"
				:tooltip-dir="'e'"
				:online="true"
			/>
			{{ mode }}{{ user.nick }}
		</slot>
		<slot v-else>
			<StatusIcon
				v-if="includeStatusIcon"
				:away="!!user.away"
				:tooltip-dir="'e'"
				:online="true"
			/>
			<span class="nick" v-html="html"></span>
		</slot>
	</span>
</template>

<script lang="ts">
import {computed, defineComponent, PropType} from "vue";
import {UserInMessage} from "../../src/models/msg";
import eventbus from "../js/eventbus";
import colorClass from "../js/helpers/colorClass";
import type {ClientChan, ClientNetwork} from "../js/types";
import StatusIcon from "./StatusIcon.vue";

type UsernameUser = Partial<UserInMessage> & {
	mode?: string;
	nick: string;
};

export default defineComponent({
	name: "Username",
	components: {
		StatusIcon,
	},
	props: {
		user: {
			// TODO: UserInMessage shouldn't be necessary here.
			type: Object as PropType<UsernameUser | UserInMessage>,
			required: true,
		},
		active: Boolean,
		onHover: {
			type: Function as PropType<(user: UserInMessage) => void>,
			required: false,
		},
		channel: {type: Object as PropType<ClientChan>, required: false},
		network: {type: Object as PropType<ClientNetwork>, required: false},
		includeStatusIcon: Boolean,
		html: String,
	},
	setup(props) {
		const mode = computed(() => {
			// Message objects have a singular mode, but user objects have modes array
			if (props.user.modes) {
				return props.user.modes[0];
			}

			return props.user.mode;
		});

		// TODO: Nick must be ! because our user prop union includes UserInMessage
		const nickColor = computed(() => colorClass(props.user.nick!));

		const hover = () => {
			if (props.onHover) {
				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
				return props.onHover(props.user as UserInMessage);
			}

			return null;
		};

		const openContextMenu = (event: Event) => {
			eventbus.emit("contextmenu:user", {
				event: event,
				user: props.user,
				network: props.network,
				channel: props.channel,
			});
		};

		return {
			mode,
			nickColor,
			hover,
			openContextMenu,
		};
	},
});
</script>