SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Fixes

Browse Source
This commit is contained in:
Chaoscaot
2024-12-15 11:59:28 +01:00
parent 02ab822801
commit 9e6ef73ccb
1 changed files with 6 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/admin/components/TypeAheadSearch.svelte
View File

@ -19,7 +19,6 @@
<script lang="ts"> <script lang="ts">
import {Button, Dropdown, Search} from "flowbite-svelte"; import {Button, Dropdown, Search} from "flowbite-svelte";
import {stopPropagation} from "@components/util.ts";
interface Props { interface Props {
@ -37,25 +36,22 @@
leftText = false, leftText = false,
searchValue = $bindable(items.find(item => item.value === selected)?.name || "") searchValue = $bindable(items.find(item => item.value === selected)?.name || "")
}: Props = $props(); }: Props = $props();
let open = $state(false);
let filteredItems = $derived(items.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase())).filter((value, index) => index < maxItems)); let filteredItems = $derived(items.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase())).filter((value, index) => index < maxItems));
function selectItem(item: { name: string, value: string }) { function selectItem(item: { name: string, value: string }) {
selected = item.value; selected = item.value;
searchValue = ""; searchValue = "";
open = false;
} }
</script> </script>
<Button color="light" <Button color="light">{selected === null ? 'Auswählen' : items.find(value => value.value === selected)?.name}</Button>
onclick={stopPropagation(() => open = true)}>{selected === null ? 'Auswählen' : items.find(value => value.value === selected)?.name}</Button> <Dropdown class="w-60">
<Dropdown bind:open class="w-60">
{#snippet header()} {#snippet header()}
<div class="overflow-y-auto p-3 text-sm w-60" > <div class="overflow-y-auto p-3 text-sm w-60" >
<Search bind:value={searchValue} onfocus={() => open = true} onkeydown={() => open = true}/> <Search bind:value={searchValue} />
</div> </div>
{/snippet} {/snippet}
{#each filteredItems as item (item)} {#each filteredItems as item (item)}
<button onclick={() => selectItem(item)} <button onclick={() => selectItem(item)}
class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full cursor-pointer border-b border-b-gray-600" class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full cursor-pointer border-b border-b-gray-600"