traxxx-web/components/actors/search.vue

<script setup>
import { nanoid } from 'nanoid';
import { ref, useId } from 'vue';

import { get } from '#/src/api.js';
import getPath from '#/src/get-path.js';

defineProps({
	disabled: {
		type: Boolean,
		default: false,
	},
	showUnknown: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(['actor']);
const dropdownId = useId();
const actors = ref([]);
const query = ref(null);
const queryInput = ref(null);

async function search() {
	const data = await get('/actors', { q: query.value });

	actors.value = data.actors;
}

function focus() {
	setTimeout(() => {
		queryInput.value?.focus();
	}, 100);
}
</script>

<template>
	<VDropdown
		:aria-id="dropdownId"
		:disabled="disabled"
		class="trigger"
		@show="focus"
	>
		<slot />

		<template #popper>
			<div>
				<input
					ref="queryInput"
					v-model="query"
					placeholder="Search actor"
					class="input"
					@input="search"
				>

				<ul class="actors nolist">
					<li
						v-if="showUnknown"
						class="actor-unknown"
					>
						<span class="actor-label">Unidentified</span>

						<Icon
							v-for="gender in ['male', 'female', 'transsexual', null]"
							:key="`actor-unknown-${gender}`"
							v-close-popper
							:icon="gender || 'question5'"
							class="actor-gender"
							:class="{ [`actor-${gender || 'other'}`]: true }"
							@click="emit('actor', { name: gender ? `Unknown ${gender}` : 'Unknown', gender, isUnknown: true, id: `${gender || 'other'}_${nanoid()}` })"
						/>
					</li>

					<li
						v-for="actor in actors"
						:key="`actor-${actor.slug}`"
						v-close-popper
						class="actor"
						@click="emit('actor', actor); query = '';"
					>{{ actor.name }} ({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].filter(Boolean).join(', ') }})
						<img
							v-if="actor.avatar"
							:src="getPath(actor.avatar, 'thumbnail')"
							class="avatar"
						>
					</li>
				</ul>
			</div>
		</template>
	</VDropdown>
</template>

<style scoped>
.trigger {
	height: 100%;
	overflow: hidden;
}

.actor {
	display: block;
	padding: .25rem .5rem;

	&:hover {
		background: var(--glass-weak-50);
		color: var(--primary);
		cursor: pointer;

		.avatar {
			display: block;
		}
	}
}

.actor-unknown {
	display: flex;
	align-items: center;

	.actor-label {
		padding: .25rem .5rem;
		flex-grow: 1;
	}
}

.actor-gender {
	padding: .5rem .5rem;

	&:hover {
		background: var(--glass-weak-50);
		cursor: pointer;
	}
}

.actor-male {
	fill: var(--male);
}

.actor-female {
	fill: var(--female);
}

.actor-transsexual {
	fill: var(--trans);
}

.actor-other {
	fill: var(--glass);
}

.avatar {
	position: fixed;
	display: none;
	left: 7rem;
	width: 8rem;
	border-radius: .25rem;
	box-shadow: 0 0 3px var(--shadow-weak-10);
	pointer-events: none;
}
</style>