chore: migrate away from event dispatcher (#12820)

This commit is contained in:
Daniel Dietzler 2024-09-20 23:02:58 +02:00 committed by GitHub
parent 529d49471f
commit 124eb8251b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
72 changed files with 360 additions and 656 deletions

View file

@ -21,7 +21,7 @@
import { fly } from 'svelte/transition';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
import { createEventDispatcher, tick } from 'svelte';
import { tick } from 'svelte';
import type { FormEventHandler } from 'svelte/elements';
import { shortcuts } from '$lib/actions/shortcut';
import { focusOutside } from '$lib/actions/focus-outside';
@ -35,6 +35,7 @@
export let options: ComboBoxOption[] = [];
export let selectedOption: ComboBoxOption | undefined = undefined;
export let placeholder = '';
export let onSelect: (option: ComboBoxOption | undefined) => void = () => {};
/**
* Unique identifier for the combobox.
@ -61,10 +62,6 @@
searchQuery = selectedOption ? selectedOption.label : '';
}
const dispatch = createEventDispatcher<{
select: ComboBoxOption | undefined;
}>();
const activate = () => {
isActive = true;
searchQuery = '';
@ -105,10 +102,10 @@
optionRefs[0]?.scrollIntoView({ block: 'nearest' });
};
let onSelect = (option: ComboBoxOption) => {
let handleSelect = (option: ComboBoxOption) => {
selectedOption = option;
searchQuery = option.label;
dispatch('select', option);
onSelect(option);
closeDropdown();
};
@ -117,7 +114,7 @@
selectedIndex = undefined;
selectedOption = undefined;
searchQuery = '';
dispatch('select', selectedOption);
onSelect(selectedOption);
};
</script>
@ -188,7 +185,7 @@
shortcut: { key: 'Enter' },
onShortcut: () => {
if (selectedIndex !== undefined && filteredOptions.length > 0) {
onSelect(filteredOptions[selectedIndex]);
handleSelect(filteredOptions[selectedIndex]);
}
closeDropdown();
},
@ -245,7 +242,7 @@
bind:this={optionRefs[index]}
class="text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-100 aria-selected:dark:bg-gray-700"
id={`${listboxId}-${index}`}
on:click={() => onSelect(option)}
on:click={() => handleSelect(option)}
role="option"
>
{option.label}