Lib: Move form stuff into form/ directory

src/lib/components/form/Button.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
+
+  const is_at_path = (path: string): boolean => {
+    const pathname: string = $page.url.pathname;
+    // console.log(pathname);
+    return pathname === path;
+  };
+
+  interface ButtonProps extends HTMLButtonAttributes {
+    children: Snippet;
+
+    /** The main color variant, e.g. "primary" or "secondary". */
+    color?: string | undefined;
+
+    /** Set the button type to "submit" (otherwise "button"). Only if "href" is undefined. */
+    submit?: boolean;
+
+    /** Make the button act as a link. */
+    href?: string | undefined;
+
+    /** Add a width class to the button. */
+    width?: string;
+
+    /** Enable the button's ":hover" state manually. */
+    activate?: boolean;
+
+    /** Enable the button's ":hover" state if the current URL matches the "href". Only if "href" is defined. */
+    activate_href?: boolean;
+
+    /** The PopupSettings to trigger on click. Only if "href" is undefined. */
+    trigger_popup?: PopupSettings;
+  }
+
+  let {
+    children,
+    color = undefined,
+    submit = false,
+    href = undefined,
+    width = "w-auto",
+    activate = false,
+    activate_href = false,
+    trigger_popup = { event: "click", target: "invalid" },
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <!-- HACK: Make the button act as a link using a form -->
+  <form action={href} class="contents">
+    <button
+      type="submit"
+      class="btn m-0 select-none px-2 py-2 {color
+        ? `variant-filled-${color}`
+        : ''} {width} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href)
+        ? 'btn-hover'
+        : ''}"
+      draggable="false"
+      {...restProps}>{@render children()}</button
+    >
+  </form>
+{:else}
+  <button
+    type={submit ? "submit" : "button"}
+    class="btn select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
+      ? 'btn-hover'
+      : ''}"
+    draggable="false"
+    use:popup={trigger_popup}
+    {...restProps}>{@render children()}</button
+  >
+{/if}

src/lib/components/form/Input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface InputProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The type of the input element, e.g. "text". */
+    type?: string;
+  }
+
+  let { children, labelwidth = "auto", type = "text", ...restProps }: InputProps = $props();
+</script>
+
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <input {type} {...restProps} />
+</div>

src/lib/components/form/LazyDropdown.svelte

@@ -0,0 +1,148 @@
+<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 LazyDropdownOption, LazyImage } from "$lib/components";
+
+  interface LazyDropdownProps extends HTMLInputAttributes {
+    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;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: LazyDropdownOption[];
+  }
+
+  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",
+    },
+    options,
+    ...restProps
+  }: LazyDropdownProps = $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"));
+  });
+
+  let load: boolean = $state(false);
+
+  const lazy_click_handler = () => {
+    load = true;
+  };
+</script>
+
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
+    {@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
+      onmousedown={lazy_click_handler}
+      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
+      onmousedown={lazy_click_handler}
+      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;"
+>
+  {#if load}
+    <ListBox>
+      {#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=""
+                imgwidth={option.icon_width ?? 1}
+                imgheight={option.icon_height ?? 1}
+                class="rounded"
+                imgstyle="height: 24px;"
+                containerstyle="height: 24px;"
+              />
+            {/if}
+            <span class="ml-2">{option.label}</span>
+          </div>
+        </ListBoxItem>
+      {/each}
+    </ListBox>
+  {/if}
+</div>

src/lib/components/form/LazyDropdown.ts

@@ -0,0 +1,16 @@
+export interface LazyDropdownOption {
+  /** The label displayed in the list of options. */
+  label: string;
+
+  /** The value assigned to the dropdown value variable */
+  value: string;
+
+  /** An optional icon displayed left to the label */
+  icon_url?: string;
+
+  /** The aspect ratio width of the optional icon */
+  icon_width?: number;
+
+  /** The aspect ratio height of the optional icon */
+  icon_height?: number;
+}

src/lib/components/form/Search.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import {
+    Autocomplete,
+    popup,
+    type AutocompleteOption,
+    type PopupSettings,
+  } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+  import { v4 as uuid } from "uuid";
+
+  interface SearchProps {
+    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;
+
+    /** The ID of the input element. UUID by default. */
+    input_id?: string;
+
+    /** The ID of the popup to trigger. UUID by default. */
+    popup_id?: string;
+
+    /** The [PopupSettings] object for the popup to trigger. */
+    popup_settings?: PopupSettings;
+
+    /** The event handler updating the [input_variable] after selection. */
+    selection_handler?: (event: CustomEvent<AutocompleteOption<string>>) => void;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: AutocompleteOption<string, unknown>[];
+  }
+
+  let {
+    children,
+    placeholder = "",
+    name = "",
+    labelwidth = "auto",
+    input_variable,
+    input_id = uuid(),
+    popup_id = uuid(),
+    popup_settings = {
+      event: "focus-click",
+      target: popup_id,
+      placement: "bottom",
+    },
+    selection_handler = (event: CustomEvent<AutocompleteOption<string>>): void => {
+      input_variable = event.detail.label;
+    },
+    options,
+  }: SearchProps = $props();
+</script>
+
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <input
+    id={input_id}
+    type="search"
+    {placeholder}
+    {name}
+    bind:value={input_variable}
+    use:popup={popup_settings}
+  />
+</div>
+
+<div data-popup={popup_id} class="card z-10 w-auto p-2 shadow" tabindex="-1">
+  <Autocomplete bind:input={input_variable} {options} on:selection={selection_handler} />
+</div>