owltide/components/SelectSingleEntity.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div
		class="select"
		@focusin="dropdownComponent?.focusin()"
		@focusout="dropdownComponent?.focusout()"
		@keyup.esc="dropdownComponent?.esc()"
	>
		<div
			v-if="selectedId !== undefined"
			:title="entities.get(selectedId)?.name ?? String(selectedId)"
			class="item"
		>
			{{ entities.get(selectedId)?.name ?? selectedId }}
		</div>
		<SelectDropdown
			ref="dropdown"
			:modelValue="new Set(selectedId !== undefined ? [selectedId] : [])"
			@update:modelValue="selectedId = $event.size ? [...$event][0] : undefined"
			:multi="false"
			:entities
		/>
	</div>
</template>

<script lang="ts" setup>
import type { ApiEntity } from '~/shared/types/api';
import type { Id } from '~/shared/types/common';
import type { ClientEntity } from '~/utils/client-entity';

const selectedId = defineModel<Id | undefined>();
defineProps<{
	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
}>();

const dropdownComponent = useTemplateRef("dropdown");
</script>

<style scoped>
.select {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.item {
	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
	border-radius: 0.3rem;
	padding-inline: 0.2rem;
	padding-block: 0.1rem;
	margin-inline-end: 0.2rem;
	white-space: pre-wrap;
}
.item button {
	line-height: 0.7;
}
</style>