File size: 2,236 Bytes
cfb0fa4 | 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 89 90 91 | <script lang="ts">
import { getContext, onDestroy } from 'svelte';
import { getSkillItems } from '$lib/apis/skills';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Keyframes from '$lib/components/icons/Keyframes.svelte';
const i18n = getContext('i18n');
export let query = '';
export let onSelect = (e) => {};
let selectedIdx = 0;
export let filteredItems = [];
let searchDebounceTimer: ReturnType<typeof setTimeout>;
$: if (query !== undefined) {
clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => {
getItems();
}, 200);
}
onDestroy(() => {
clearTimeout(searchDebounceTimer);
});
const getItems = async () => {
const res = await getSkillItems(localStorage.token, query).catch(() => null);
if (res) {
filteredItems = res.items;
}
};
$: if (query) {
selectedIdx = 0;
}
export const selectUp = () => {
selectedIdx = Math.max(0, selectedIdx - 1);
};
export const selectDown = () => {
selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1);
};
export const select = async () => {
const skill = filteredItems[selectedIdx];
if (skill) {
onSelect({ type: 'skill', data: skill });
}
};
</script>
<div class="px-2 text-xs text-gray-500 py-1">
{$i18n.t('Skills')}
</div>
{#if filteredItems.length > 0}
{#each filteredItems as skill, skillIdx}
<Tooltip content={skill.description || skill.name} placement="top-start">
<button
class="px-2.5 py-1.5 rounded-xl w-full text-left {skillIdx === selectedIdx
? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
: ''}"
type="button"
on:click={() => {
onSelect({ type: 'skill', data: skill });
}}
on:mousemove={() => {
selectedIdx = skillIdx;
}}
on:focus={() => {}}
data-selected={skillIdx === selectedIdx}
>
<div class="flex text-black dark:text-gray-100 line-clamp-1 items-center">
<div class="flex items-center justify-center size-5 mr-2 shrink-0">
<Keyframes className="size-4" />
</div>
<div class="truncate">
{skill.name}
</div>
<div class="ml-2 text-xs text-gray-500 truncate">
{skill.id}
</div>
</div>
</button>
</Tooltip>
{/each}
{/if}
|