Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 7x 7x 7x 7x 12x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { ref, watch } from 'vue';
import { Item } from './types';
const props = defineProps<{
/**
* (prop) Item to display
*/
item: Item;
/**
* (prop) Whether the item is active, either hovered or active through keyboard navigation
*/
active: boolean;
}>();
const container = ref<HTMLDivElement>();
watch(() => props.active, () => {
if (props.active && container.value) {
container.value.scrollIntoView({
block: 'nearest',
});
}
});
defineEmits<{
/**
* (event) Emitted when the item is selected
*
* @param item The item that was selected
*/
(e: 'select', item: Item): void;
}>();
</script>
<template>
<div
ref="container"
class="smart-suggest-item"
:class="{
'smart-suggest-item-active': active,
}"
@mousedown.prevent.stop="$emit('select', item)"
>
<span
v-if="item.image"
class="smart-suggest-item-image-container"
>
<img
:src="item.image"
alt=""
>
</span>
<span>
{{ item.label ?? item.value }}
</span>
</div>
</template>
<style scoped>
.smart-suggest-item {
padding: 0.5rem;
cursor: pointer;
height: 1lh;
display: flex;
align-items: center;
gap: 0.4em;
}
.smart-suggest-item-image-container {
width: 1lh;
display: flex;
justify-content: center;
align-items: center;
}
.smart-suggest-item-image-container img {
max-width: 100%;
max-height: 100%;
}
.smart-suggest-item-active {
background-color: #eee;
}
.smart-suggest-item:hover {
background-color: #ddd;
}
</style> |