helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): create tag on the fly (#14726)

Browse source
This commit is contained in:
mehring 2024-12-28 01:29:57 +08:00 • committed by GitHub
parent 0250a7a23a
commit 34ce61d03a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web/src/lib/components/shared-components/combobox.svelte
View file

@ -36,6 +36,14 @@
options?: ComboBoxOption[];
selectedOption?: ComboBoxOption | undefined;
placeholder?: string;
/**
* whether creating new items is allowed.
*/
allowCreate?: boolean;
/**
* select first matching option on enter key.
*/
defaultFirstOption?: boolean;
onSelect?: (option: ComboBoxOption | undefined) => void;
}
@ -45,6 +53,8 @@
options = [],
selectedOption = $bindable(),
placeholder = '',
allowCreate = false,
defaultFirstOption = false,
onSelect = () => {},
}: Props = $props();
@ -141,7 +151,7 @@
const onInput: FormEventHandler<HTMLInputElement> = (event) => {
openDropdown();
searchQuery = event.currentTarget.value;
selectedIndex = undefined;
selectedIndex = defaultFirstOption ? 0 : undefined;
optionRefs[0]?.scrollIntoView({ block: 'nearest' });
};
@ -221,9 +231,15 @@
searchQuery = selectedOption ? selectedOption.label : '';
});
let filteredOptions = $derived(
options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())),
);
let filteredOptions = $derived.by(() => {
const _options = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
if (allowCreate && searchQuery !== '' && _options.filter((option) => option.label === searchQuery).length === 0) {
_options.unshift({ label: searchQuery, value: searchQuery });
}
return _options;
});
let position = $derived(calculatePosition(bounds));
let dropdownDirection: 'bottom' | 'top' = $derived(getComboboxDirection(bounds, visualViewport));
</script>
@ -352,7 +368,7 @@
id={`${listboxId}-${0}`}
onclick={() => closeDropdown()}
>
{$t('no_results')}
{allowCreate ? searchQuery : $t('no_results')}
</li>
{/if}
{#each filteredOptions as option, index (option.id || option.label)}