98 lines
1.6 KiB
Vue
98 lines
1.6 KiB
Vue
<template>
|
|
<li
|
|
:key="`filter-actor-${actor.id}`"
|
|
class="filter-item"
|
|
:class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: type === 'available' && index === 0 && filters.actors.length > 0 }"
|
|
@click="emit('actor', actor)"
|
|
>
|
|
<div
|
|
class="filter-include"
|
|
@click.stop="toggleActor(actor)"
|
|
>
|
|
<Icon
|
|
icon="checkmark"
|
|
class="filter-add"
|
|
/>
|
|
|
|
<Icon
|
|
icon="cross2"
|
|
class="filter-remove"
|
|
/>
|
|
</div>
|
|
|
|
<span class="filter-name actor-name">
|
|
<span
|
|
class="filter-text"
|
|
:title="actor.name"
|
|
>{{ actor.name }}</span>
|
|
|
|
<span class="filter-details">
|
|
<div class="actor-gender">
|
|
<Gender
|
|
:gender="actor.gender"
|
|
class="gender"
|
|
/>
|
|
</div>
|
|
|
|
<span
|
|
v-if="actor.count"
|
|
:title="actor.count"
|
|
class="filter-count"
|
|
>{{ abbreviateNumber(actor.count) }}</span>
|
|
</span>
|
|
</span>
|
|
</li>
|
|
</template>
|
|
|
|
<script setup>
|
|
import abbreviateNumber from '#/src/utils/abbreviate-number.js';
|
|
|
|
import Gender from '#/components/actors/gender.vue';
|
|
|
|
defineProps({
|
|
actor: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
filters: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'available',
|
|
},
|
|
toggleActor: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['actor']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.filter-name {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.actor-name {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.actor-gender {
|
|
width: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.gender {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|