contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

chore: automated housekeeping...

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-07-21 10:52:51 +02:00
parent 14b2799f08
commit 4add2d1aff
151 changed files with 4561 additions and 3315 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/UI/BigComponents/SearchField.svelte
View file

@ -9,22 +9,19 @@
import { ariaLabel } from "../../Utils/ariaLabel"
import { Translation } from "../i18n/Translation"
const dispatch = createEventDispatcher<{search: string}>()
const dispatch = createEventDispatcher<{ search: string }>()
export let searchValue: UIEventSource<string>
export let placeholderText: Translation = Translations.t.general.search.search
export let feedback = new UIEventSource<string>(undefined)
let isRunning: boolean = false
let inputElement: HTMLInputElement
function _performSearch(){
function _performSearch() {
dispatch("search", searchValue.data)
}
</script>
<div class="normal-background flex justify-between rounded-full">
@ -32,21 +29,24 @@
{#if isRunning}
<Loading>{Translations.t.general.search.searching}</Loading>
{:else}
<div class="flex w-full border border-gray-300 rounded-full">
<input
type="search"
class="w-full outline-none mx-2"
bind:this={inputElement}
on:keypress={(keypr) => {
feedback.set(undefined)
return keypr.key === "Enter" ? _performSearch() : undefined
}}
bind:value={$searchValue}
use:placeholder={placeholderText}
use:ariaLabel={Translations.t.general.search.search}
/>
<SearchIcon aria-hidden="true" class="h-6 w-6 self-end" on:click={event => _performSearch()} />
<div class="flex w-full rounded-full border border-gray-300">
<input
type="search"
class="mx-2 w-full outline-none"
bind:this={inputElement}
on:keypress={(keypr) => {
feedback.set(undefined)
return keypr.key === "Enter" ? _performSearch() : undefined
}}
bind:value={$searchValue}
use:placeholder={placeholderText}
use:ariaLabel={Translations.t.general.search.search}
/>
<SearchIcon
aria-hidden="true"
class="h-6 w-6 self-end"
on:click={(event) => _performSearch()}
/>
</div>
{#if $feedback !== undefined}
<!-- The feedback is _always_ shown for screenreaders and to make sure that the searchfield can still be selected by tabbing-->