102 lines
1.6 KiB
Vue
102 lines
1.6 KiB
Vue
<template>
|
|
<VDropdown
|
|
: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-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>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
import { get } from '#/src/api.js';
|
|
import getPath from '#/src/get-path.js';
|
|
|
|
const actors = ref([]);
|
|
const query = ref(null);
|
|
const queryInput = ref(null);
|
|
|
|
defineProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['actor']);
|
|
|
|
async function search() {
|
|
const data = await get('/actors', { q: query.value });
|
|
|
|
actors.value = data.actors;
|
|
}
|
|
|
|
function focus() {
|
|
setTimeout(() => {
|
|
queryInput.value?.focus();
|
|
}, 100);
|
|
}
|
|
</script>
|
|
|
|
<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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|