Merge pull request #689 from samply/feautre/add-input-fields-to-searchbar

Feautre/add input fields to searchbar

Author: MatsJohansen87

book/src/components/searchbar.md

@@ -1,6 +1,6 @@
 # Search Bar
 
-The `lens-searchbar` component offers an interface for exploring of all single-select items. It serves as the primary interface for users to search, apply, and adjust query criteria. Selected items appear as interactive chips within the component, giving users a clear visual of their active filters. Users can easily refine their search by removing individual values or entire criteria directly from the chip display.
+The `lens-searchbar` component offers an interface for exploring of all catalogue items. It serves as the primary interface for users to search, apply, and adjust query criteria. Selected items appear as interactive chips within the component, giving users a clear visual of their active filters. Users can easily refine their search by removing individual values or entire criteria directly from the chip display.
 
 ---
 
@@ -41,18 +41,6 @@ The `lens-searchbar` component offers an interface for exploring of all single-s
 
 ---
 
-## Events
-
-### `on:clear-search`
-
-Triggered when the group clear button is clicked.
-
-```svelte
-<lens-search-bar on:clear-search={handleClear} />
-```
-
----
-
 ## Example
 
 ```html
@@ -66,13 +54,27 @@ Triggered when the group clear button is clicked.
 
 ## Styling
 
-| Part                                                   | Purpose                          |
-| ------------------------------------------------------ | -------------------------------- |
-| `lens-searchbar`                                       | Wrapper for the entire component |
-| `lens-searchbar-input`                                 | Main input element               |
-| `lens-searchbar-chip`, `chip-name`, `chip-item`        | Visual query chips               |
-| `lens-searchbar-autocomplete-options`                  | Autocomplete container           |
-| `lens-searchbar-autocomplete-options-item`             | Individual result                |
-| `lens-searchbar-autocomplete-options-item-focused`     | Highlighted result               |
-| `lens-searchbar-autocomplete-options-item-description` | Optional description             |
-| `lens-searchbar-autocomplete-options-item-facet-count` | Facet count badge                |
+| Part                                                           | Purpose                              |
+| -------------------------------------------------------------- | ------------------------------------ |
+| `lens-searchbar`                                               | Wrapper for the entire component     |
+| `lens-searchbar-active`                                        | Active searchbar                     |
+| `lens-searchbar-chips`                                         | Visual query chip wrapper            |
+| `lens-searchbar-chip`                                          | Query chip                           |
+| `lens-searchbar-chip-name`                                     | Query chip criterion name            |
+| `lens-searchbar-chip-item`                                     | Query chip values wrapper            |
+| `lens-searchbar-chip-item-text`                                | Query chip singular value            |
+| `lens-searchbar-input`                                         | Main input element                   |
+| `lens-searchbar-input-options-open`                            | Main input when autocomplete is open |
+| `lens-searchbar-autocomplete-options`                          | Autocomplete container               |
+| `lens-searchbar-autocomplete-options-heading`                  | Autocomplete group heading           |
+| `lens-searchbar-autocomplete-options-item`                     | Individual result                    |
+| `lens-searchbar-autocomplete-options-item-focused`             | Highlighted result                   |
+| `lens-searchbar-autocomplete-options-item-criterion`           | Single select result                 |
+| `lens-searchbar-autocomplete-options-item-numeric`             | Numeric result input wrapper         |
+| `lens-searchbar-autocomplete-options-item-date`                | Date result input wrapper            |
+| `lens-searchbar-autocomplete-options-item-string`              | String result input wrapper          |
+| `lens-searchbar-autocomplete-options-item-name`                | Option name                          |
+| `lens-searchbar-autocomplete-options-item-description`         | Optional description                 |
+| `lens-searchbar-autocomplete-options-item-description-focused` | Focused optional description         |
+| `lens-searchbar-autocomplete-options-item-facet-count`         | Facet count badge                    |
+| `lens-searchbar-autocomplete-options-type-more-message`        | Wrapper for type more message        |

demo.svelte

@@ -235,6 +235,13 @@
                     fieldType: "number",
                     type: "BETWEEN",
                 },
+                {
+                    fieldType: "date",
+                    key: "date-of-diagnosis",
+                    name: "Date of diagnosis",
+                    type: "BETWEEN",
+                    max: "2025-09-04",
+                },
             ],
         },
         {
@@ -482,7 +489,7 @@
     }
 
     .card {
-        background-color: white;
+        background-color: var(--white);
         border-radius: var(--border-radius-small);
         border: 1px solid var(--lightest-gray);
         padding: var(--gap-xs);

eslint.config.js

@@ -7,7 +7,7 @@ import svelte from "eslint-plugin-svelte";
 import svelteConfig from "./svelte.config.js";
 
 export default defineConfig([
-    globalIgnores(["dist", "book/book", "docs/assets"]),
+    globalIgnores(["dist", "book", "docs/assets"]),
     // Recommended JavaScript and TypeScript lints
     pluginJs.configs.recommended,
     ...tseslint.configs.recommended,

src/components/buttons/SearchButtonComponent.wc.svelte

@@ -18,6 +18,7 @@
     const onclick = (): void => {
         queryModified.set(false);
         window.dispatchEvent(new CustomEvent("lens-search-triggered"));
+        window.dispatchEvent(new CustomEvent("reset-all-searchbar-inputs"));
     };
 </script>
 

src/components/buttons/StoreDeleteButtonComponent.svelte

@@ -14,9 +14,10 @@
             index: number;
             item?: QueryItem;
         };
+        resetToEmptySearchBar?: () => void;
     }
 
-    let { itemToDelete }: Props = $props();
+    let { itemToDelete, resetToEmptySearchBar = () => {} }: Props = $props();
 
     const { type, index, item } = itemToDelete;
 
@@ -51,7 +52,7 @@
                 if (searchBarInputs) {
                     searchBarInputs[$activeQueryGroupIndex].focus();
                 }
-
+                resetToEmptySearchBar();
                 return query;
             });
         }

src/components/catalogue/AddButton.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
-    let { ...props } = $props();
+    import type {
+        KeyboardEventHandler,
+        MouseEventHandler,
+    } from "svelte/elements";
+    interface Props {
+        inSearchBar: boolean;
+        onkeydown?: KeyboardEventHandler<HTMLButtonElement>;
+        onclick?: MouseEventHandler<HTMLButtonElement>;
+    }
+    let { inSearchBar, onkeydown, onclick }: Props = $props();
 </script>
 
-<button aria-label="Add to query" part="lens-add-to-query-button" {...props}>
+<button
+    tabindex="0"
+    aria-label="Add to query"
+    part="lens-add-to-query-button {inSearchBar
+        ? 'lens-add-to-query-button-searchbar'
+        : ''}"
+    {onkeydown}
+    {onclick}
+    type="button"
+>
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -31,4 +49,11 @@
     [part~="lens-add-to-query-button"]:hover svg {
         color: var(--light-blue);
     }
+
+    [part~="lens-add-to-query-button-searchbar"] svg {
+        color: var(--white);
+    }
+    [part~="lens-add-to-query-button-searchbar"]:hover svg {
+        color: var(--light-gray);
+    }
 </style>

src/components/catalogue/DatePickerComponent.svelte

@@ -8,28 +8,37 @@
 
     let {
         element,
+        inSearchBar = false,
+        resetToEmptySearchBar = () => {},
     }: {
         element: DateRangeCategory;
+        inSearchBar?: boolean;
+        resetToEmptySearchBar?: (focus?: boolean) => void;
     } = $props();
 
+    let form: HTMLFormElement;
     let fromInput: HTMLInputElement;
     let toInput: HTMLInputElement;
     let from: string = $state("");
     let to: string = $state("");
 
     onMount(() => {
-        fromInput.focus();
+        if (inSearchBar === false) fromInput.focus();
     });
 
-    $effect(() => {
-        if (from === "" && to === "") {
+    let formVlaid = $derived(validateForm(from, to));
+
+    function validateForm(from: string, to: string): boolean {
+        fromInput.setCustomValidity("");
+        if (!from && !to) {
             fromInput.setCustomValidity(translate("cannot_both_be_empty"));
-        } else if (from !== "" && to !== "" && from > to) {
+            return false;
+        } else if (from && to && from > to) {
             fromInput.setCustomValidity(translate("min_must_be_less_than_max"));
-        } else {
-            fromInput.setCustomValidity("");
+            return false;
         }
-    });
+        return true;
+    }
 
     function getMinMax(min: string | null, max: string | null): string {
         if (min && max && min === max) return `${min}`;
@@ -39,8 +48,12 @@
         return "";
     }
 
-    function onsubmit(event: SubmitEvent): void {
-        event.preventDefault();
+    function addItem(): void {
+        if (!formVlaid) {
+            fromInput.reportValidity();
+            return;
+        }
+
         addItemToQuery(
             {
                 id: uuidv4(),
@@ -57,17 +70,47 @@
             },
             $activeQueryGroupIndex,
         );
+
+        resetToEmptySearchBar();
+    }
+
+    function onkeydown(event: KeyboardEvent) {
+        if (inSearchBar === false) return;
+
+        if (event.key === "Enter") {
+            addItem();
+        }
+
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+        }
+    }
+
+    function onfocusin(event: FocusEvent) {
+        if (!inSearchBar) return;
+        // toInput can not be reached by tab when the focus is outside the form,
+        // so this can handle the focus via mouse click instead of using another event listener
+        if (event.target === toInput) return;
+
+        const relatedTargetOutside =
+            event.relatedTarget instanceof Node &&
+            !form.contains(event.relatedTarget);
+
+        if (relatedTargetOutside) {
+            fromInput.focus();
+        }
     }
 </script>
 
-<form part="lens-date-input-form" {onsubmit}>
+<form part="lens-date-input-form" bind:this={form} {onfocusin}>
     <input
         part="lens-date-input-formfield"
         type="date"
         min={element.min}
         max={element.max}
         bind:value={from}
         bind:this={fromInput}
+        {onkeydown}
     />
     <span part="date-input-range-separator">-</span>
     <input
@@ -77,8 +120,9 @@
         max={element.max}
         bind:value={to}
         bind:this={toInput}
+        {onkeydown}
     />
-    <AddButton />
+    <AddButton onclick={addItem} {onkeydown} {inSearchBar} />
 </form>
 
 <style>