diff --git a/web/src/lib/components/base/combobox.svelte b/web/src/lib/components/base/combobox.svelte new file mode 100644 index 00000000..7ed43152 --- /dev/null +++ b/web/src/lib/components/base/combobox.svelte @@ -0,0 +1,93 @@ + + + + +
+ (searching = true)} + on:focusout={() => (searching = false)} + > + + {#if dropDownOpen} + + {/if} +
diff --git a/web/src/lib/components/base/search.svelte b/web/src/lib/components/base/search.svelte index 69830f8a..9e1e2706 100644 --- a/web/src/lib/components/base/search.svelte +++ b/web/src/lib/components/base/search.svelte @@ -72,9 +72,9 @@ type="search" name="q" autocomplete="off" - extraClasses="{large - ? 'px-12 py-4 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl' - : 'px-10'}" + extraClasses={large + ? "px-12 py-4 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl" + : "px-10"} {placeholder} bind:value on:input={onSearchType} diff --git a/web/src/lib/components/waypoint/waypoint_modal.svelte b/web/src/lib/components/waypoint/waypoint_modal.svelte index 7a03d87b..7474e0fa 100644 --- a/web/src/lib/components/waypoint/waypoint_modal.svelte +++ b/web/src/lib/components/waypoint/waypoint_modal.svelte @@ -3,9 +3,11 @@ import { createEventDispatcher } from "svelte"; import { waypoint } from "$lib/stores/waypoint_store"; + import { icons } from "$lib/util/icon_util"; import { createForm } from "$lib/vendor/svelte-form-lib/index"; import { util } from "$lib/vendor/svelte-form-lib/util"; import { _ } from "svelte-i18n"; + import Combobox from "../base/combobox.svelte"; import Modal from "../base/modal.svelte"; import TextField from "../base/text_field.svelte"; import Textarea from "../base/textarea.svelte"; @@ -23,6 +25,13 @@ }, }); $: form.set(util.cloneDeep($waypoint)); + + $: filteredIcons = + ($form.icon?.length ?? 0) > 2 + ? icons + .filter((i) => i.includes($form.icon ?? "")) + .map((i) => ({ text: i, value: i, icon: i })) + : [];
-
+
- + >