christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Lib: Replace the <Dropdown> popup with a native select element + bind the value

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-06 19:48:22 +01:00
parent c8ce8118cb
commit 0b64425284
6 changed files with 60 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/cards/DriverCard.svelte
View File

@ -92,7 +92,7 @@
{#await data.teams then teams}
<Dropdown
name="team"
input_variable={team_select_value}
bind:value={team_select_value}
options={team_dropdown_options(teams)}
{labelwidth}
{disabled}

7
src/lib/components/cards/RaceCard.svelte
View File

@ -49,6 +49,9 @@
const racedate: string | undefined = $derived(
race ? format(new Date(race.racedate), dateformat) : undefined,
);
let step_value: string = $state(race?.step.toString() ?? "");
let pxx_value: string = $state(race?.pxx.toString() ?? "");
</script>
{#await data.graphics then graphics}
@ -86,7 +89,7 @@
</Input>
<Input
name="step"
value={race?.step ?? ""}
bind:value={step_value}
autocomplete="off"
type="number"
min={1}
@ -99,7 +102,7 @@
</Input>
<Input
name="pxx"
value={race?.pxx ?? ""}
bind:value={pxx_value}
autocomplete="off"
type="number"
min={1}

36
src/lib/components/cards/RacePickCard.svelte
View File

@ -39,22 +39,9 @@
racepick = meta.racepick;
}
// This is executed on mount of the element specifying the "action"
const register_pxx_preview_handler: Action = (node: HTMLElement) => {
node.addEventListener("DropdownChange", update_pxx_preview);
};
// This event handler is registered to the Dropdown's <input> element through the action above.
const update_pxx_preview = async (event: Event) => {
const target: HTMLInputElement = event.target as HTMLInputElement;
const src: string =
get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url || "";
const img = document.getElementById("headshot_preview") as HTMLImageElement;
// Can be null if lazyimg not loaded
if (img) img.src = src;
};
// Await promises
let drivers: Driver[] | undefined = $state(undefined);
data.drivers.then((d: Driver[]) => (drivers = d));
const required: boolean = $derived(!racepick);
const disabled: boolean = $derived(!data.admin);
@ -86,6 +73,14 @@
let pxx_select_value: string = $state(racepick?.pxx ?? "");
let dnf_select_value: string = $state(racepick?.dnf ?? "");
// Update preview
$effect(() => {
if (!drivers) return;
const src: string = get_by_value(drivers, "id", pxx_select_value)?.headshot_url ?? "";
const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
if (img) img.src = src;
});
</script>
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
@ -118,8 +113,7 @@
{#await active_drivers_and_substitutes then pxx_drivers}
<Dropdown
name="pxx"
input_variable={pxx_select_value}
action={register_pxx_preview_handler}
bind:value={pxx_select_value}
options={driver_dropdown_options(pxx_drivers)}
{labelwidth}
{disabled}
@ -127,13 +121,11 @@
>
P{data.currentrace?.pxx ?? "XX"}
</Dropdown>
{/await}
<!-- DNF select -->
{#await active_drivers_and_substitutes then pxx_drivers}
<!-- DNF select -->
<Dropdown
name="dnf"
input_variable={dnf_select_value}
bind:value={dnf_select_value}
options={driver_dropdown_options(pxx_drivers)}
{labelwidth}
{disabled}

19
src/lib/components/cards/RaceResultCard.svelte
View File

@ -30,6 +30,11 @@
result = meta.result;
}
let races: Race[] | undefined = $state(undefined);
data.races.then((r: Race[]) => {
races = r;
});
const required: boolean = $derived(!result);
const disabled: boolean = $derived(!data.admin);
const labelwidth: string = "70px";
@ -38,10 +43,18 @@
// TODO: Currentrace needs to be updated once a race is selected
// This way it doesn't update the placeholder (or the chips)...
const currentrace: Promise<Race | undefined> = $derived.by(async () =>
get_by_value(await data.races, "id", race_select_value),
// const currentrace: Promise<Race | undefined> = $derived.by(async () =>
// get_by_value(await data.races, "id", race_select_value),
// );
let currentrace: Race | undefined = $derived(
races ? (get_by_value(races, "id", race_select_value) ?? undefined) : undefined,
);
$effect(() => {
console.log("Updated currentrace", currentrace);
});
let pxxs_input: string = $state("");
let pxxs_chips: string[] = $state([]);
@ -179,7 +192,7 @@
{#await data.races then races}
<Dropdown
name="race"
input_variable={race_select_value}
bind:value={race_select_value}
options={race_dropdown_options(races)}
{labelwidth}
{disabled}

33
src/lib/components/cards/SubstitutionCard.svelte
View File

@ -26,21 +26,9 @@
substitution = meta.substitution;
}
// This is executed on mount of the element specifying the "action"
const register_substitute_preview_handler: Action = (node: HTMLElement) =>
node.addEventListener("DropdownChange", update_substitute_preview);
// This event handler is registered to the Dropdown's <input> element through the action above.
const update_substitute_preview = async (event: Event) => {
const target: HTMLInputElement = event.target as HTMLInputElement;
const src: string =
get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url ?? "";
const img = document.getElementById("headshot_preview") as HTMLImageElement;
// Can be null if lazyimage hasn't loaded
if (img) img.src = src;
};
// Await promises
let drivers: Driver[] | undefined = $state(undefined);
data.drivers.then((d: Driver[]) => (drivers = d));
const active_drivers = (drivers: Driver[]): Driver[] =>
drivers.filter((driver: Driver) => driver.active);
@ -54,6 +42,14 @@
let substitute_select_value: string = $state(substitution?.substitute ?? "");
let driver_select_value: string = $state(substitution?.for ?? "");
let race_select_value: string = $state(substitution?.race ?? "");
// Update preview
$effect(() => {
if (!drivers) return;
const src: string = get_by_value(drivers, "id", substitute_select_value)?.headshot_url ?? "";
const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
if (img) img.src = src;
});
</script>
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
@ -82,8 +78,7 @@
<!-- Substitute select -->
<Dropdown
name="substitute"
input_variable={substitute_select_value}
action={register_substitute_preview_handler}
bind:value={substitute_select_value}
options={driver_dropdown_options(inactive_drivers(drivers))}
{labelwidth}
{disabled}
@ -95,7 +90,7 @@
<!-- Driver select -->
<Dropdown
name="for"
input_variable={driver_select_value}
bind:value={driver_select_value}
options={driver_dropdown_options(active_drivers(drivers))}
{labelwidth}
{disabled}
@ -108,7 +103,7 @@
{#await data.races then races}
<Dropdown
name="race"
input_variable={race_select_value}
bind:value={race_select_value}
options={race_dropdown_options(races)}
{labelwidth}
{disabled}

113
src/lib/components/form/Dropdown.svelte
View File

@ -1,34 +1,16 @@
<script lang="ts">
import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
import type { Snippet } from "svelte";
import type { Action } from "svelte/action";
import type { HTMLInputAttributes } from "svelte/elements";
import { v4 as uuid } from "uuid";
import { type DropdownOption, LazyImage } from "$lib/components";
import type { HTMLSelectAttributes } from "svelte/elements";
import { type DropdownOption } from "$lib/components";
interface DropdownProps extends HTMLInputAttributes {
interface DropdownProps extends HTMLSelectAttributes {
children: Snippet;
/** Placeholder for the empty input element */
placeholder?: string;
/** Form name of the input element, to reference input data after form submission */
name?: string;
/** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
labelwidth?: string;
/** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
input_variable: string;
/** Any action to bind to the input element */
action?: Action;
/** The ID of the popup to trigger. UUID by default. */
popup_id?: string;
/** The [PopupSettings] object for the popup to trigger. */
popup_settings?: PopupSettings;
value?: string;
/** The options this autocomplete component allows to choose from.
* Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
@ -38,42 +20,11 @@
let {
children,
placeholder = "",
name = "",
labelwidth = "auto",
input_variable,
action = undefined,
popup_id = uuid(),
popup_settings = {
event: "click",
target: popup_id,
placement: "bottom",
closeQuery: ".listbox-item",
},
value = $bindable(),
options,
...restProps
}: DropdownProps = $props();
/** Find the "label" of an option by its "value" */
const get_label = (value: string): string | undefined => {
return options.find((o) => o.value === value)?.label;
};
// Use an action to fill the "input" variable
// required to dispatch the custom event using $effect
let input: HTMLInputElement | undefined = undefined;
const obtain_input: Action = (node: HTMLElement) => {
input = node as HTMLInputElement;
};
// This will run everyting "input_variable" changes.
// The event is fired when the input's value is updated via JavaScript.
$effect(() => {
// Just list this so SvelteKit picks it up as dependency
input_variable;
if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
});
</script>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@ -83,55 +34,11 @@
>
{@render children()}
</div>
<!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
{#if action}
<input
use:popup={popup_settings}
type="button"
autocomplete="off"
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input
use:action
onkeypress={(event: Event) => event.preventDefault()}
value={get_label(input_variable) ?? placeholder}
{...restProps}
/>
{:else}
<input
use:popup={popup_settings}
type="button"
autocomplete="off"
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input
onkeypress={(event: Event) => event.preventDefault()}
value={get_label(input_variable) ?? placeholder}
{...restProps}
/>
{/if}
</div>
<div
data-popup={popup_id}
class="card z-10 w-auto overflow-y-scroll p-2 shadow"
style="max-height: 350px;"
>
<ListBox>
<select bind:value class="!outline-none" {...restProps}>
{#each options as option}
<ListBoxItem bind:group={input_variable} {name} value={option.value}>
<div class="flex flex-nowrap">
{#if option.icon_url}
<LazyImage
src={option.icon_url}
alt=""
class="rounded"
style="height: 24px;"
imgwidth={option.icon_width ?? 0}
imgheight={option.icon_height ?? 0}
/>
{/if}
<span class="ml-2">{option.label}</span>
</div>
</ListBoxItem>
<option value={option.value} selected={value === option.value}>
{option.label}
</option>
{/each}
</ListBox>
</select>
</div>