From acbb9c7536be32fcce1c69bfd6054149f978229c Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Thu, 15 Dec 2022 08:36:10 +0100
Subject: feat: Small changes

---
 code/app/src/components/combobox.svelte       | 124 +++++++++++++-------------
 code/app/src/components/notification.svelte   |   2 +-
 code/app/src/routes/book/inputs/+page.svelte  |   2 +-
 code/app/src/routes/book/toggles/+page.svelte |  10 +--
 4 files changed, 68 insertions(+), 70 deletions(-)

(limited to 'code/app/src')

diff --git a/code/app/src/components/combobox.svelte b/code/app/src/components/combobox.svelte
index 5df3ec9..5f7f772 100644
--- a/code/app/src/components/combobox.svelte
+++ b/code/app/src/components/combobox.svelte
@@ -7,9 +7,9 @@
 </script>
 
 <script lang="ts">
-    import {CheckCircleIcon, ChevronUpDownIcon, XIcon} from "./icons";
-    import {element_has_focus, random_string} from "$help";
-    import {go, highlight} from "fuzzysort";
+    import { CheckCircleIcon, ChevronUpDownIcon, XIcon } from "./icons";
+    import { element_has_focus, random_string } from "$help";
+    import { go, highlight } from "fuzzysort";
     import Badge from "./badge.svelte";
     import Button from "./button.svelte";
     import LL from "$i18n/i18n-svelte";
@@ -26,8 +26,7 @@
     export let loading = false;
     export let multiple = false;
     export let noResultsText: string = $LL.combobox.noRecordsFound();
-    export let on_create_async = async ({name: string}) => {
-    };
+    export let on_create_async = async ({ name: string }) => {};
 
     export const reset = () => methods.reset();
     export const select = (id: string) => methods.select_entry(id);
@@ -139,11 +138,11 @@
         },
         async create_entry(name: string) {
             if (!name || !createable || loading) {
-                console.log("Not sending creation event due to failed preconditions", {name, createable, loading});
+                console.log("Not sending creation event due to failed preconditions", { name, createable, loading });
                 return;
             }
             try {
-                await on_create_async({name});
+                await on_create_async({ name });
                 searchValue = "";
                 loading = false;
             } catch (e) {
@@ -297,10 +296,10 @@
 </script>
 
 <svelte:window
-        on:keydown={windowEvents.on_keydown}
-        on:mousemove={windowEvents.on_mousemove}
-        on:touchend={windowEvents.on_touchend}
-        on:click={windowEvents.on_click}
+    on:keydown={windowEvents.on_keydown}
+    on:mousemove={windowEvents.on_mousemove}
+    on:touchend={windowEvents.on_touchend}
+    on:click={windowEvents.on_click}
 />
 
 <div id={INTERNAL_ID} class:cursor-wait={loading}>
@@ -312,54 +311,53 @@
     {/if}
     <div class="relative {label ? 'mt-1' : ''}">
         <div
-                on:click={search.on_input_wrapper_focus}
-                on:keypress={search.on_input_wrapper_focus}
-                class="cursor-text w-full flex rounded-md border bg-white py-2 pl-3 pr-12 sm:text-sm
+            on:click={search.on_input_wrapper_focus}
+            on:keypress={search.on_input_wrapper_focus}
+            class="cursor-text w-full flex rounded-md border bg-white py-2 pl-3 pr-12 sm:text-sm
             {inputHasFocus ? `border-${colorName}-500 outline-none ring-1 ring-${colorName}-500` : 'shadow-sm border-gray-300'}"
         >
             {#if multiple === true && hasSelection}
                 <div class="flex gap-1 flex-wrap">
                     {#each options.filter((c) => c.selected === true) as option}
                         <Badge
-                                id={option.id}
-                                removable
-                                tabindex="-1"
-                                on:remove={(e) => methods.deselect_entry(e.detail.id)}
-                                text={option.name}
+                            id={option.id}
+                            removable
+                            tabindex="-1"
+                            on:remove={(e) => methods.deselect_entry(e.detail.id)}
+                            text={option.name}
                         />
                     {/each}
                 </div>
             {/if}
             <div>
                 <input
-                        {...attributes}
-                        type="text"
-                        style="all: unset;"
-                        role="combobox"
-                        aria-controls={optionsListId}
-                        aria-expanded={showDropdown}
-                        bind:value={searchValue}
-                        bind:this={searchInputNode}
-                        on:input={() => search.do()}
-                        on:click={search.on_input_click}
-                        on:focus={search.on_input_focus}
-                        on:blur={search.on_input_focusout}
-                        autocomplete="off"
+                    {...attributes}
+                    type="text"
+                    style="all: unset;"
+                    role="combobox"
+                    aria-controls={optionsListId}
+                    aria-expanded={showDropdown}
+                    bind:value={searchValue}
+                    bind:this={searchInputNode}
+                    on:input={() => search.do()}
+                    on:click={search.on_input_click}
+                    on:focus={search.on_input_focus}
+                    on:blur={search.on_input_focusout}
+                    autocomplete="off"
                 />
                 {#if hasSelection}
                     <button
-                            type="button"
-                            on:click={() => reset()}
-                            title={$LL.reset()}
-                            tabindex="-1"
-                            class="text-gray-400 absolute cursor-pointer inset-y-0 right-0 flex items-center rounded-r-md px-2"
+                        type="button"
+                        on:click={() => reset()}
+                        title={$LL.reset()}
+                        tabindex="-1"
+                        class="text-gray-400 absolute cursor-pointer inset-y-0 right-0 flex items-center rounded-r-md px-2"
                     >
-                        <XIcon/>
+                        <XIcon />
                     </button>
                 {:else}
-                    <span tabindex="-1"
-                          class="text-gray-400 absolute inset-y-0 right-0 flex items-center rounded-r-md px-2">
-                        <ChevronUpDownIcon/>
+                    <span tabindex="-1" class="text-gray-400 absolute inset-y-0 right-0 flex items-center rounded-r-md px-2">
+                        <ChevronUpDownIcon />
                     </span>
                 {/if}
             </div>
@@ -370,7 +368,7 @@
             </p>
         {/if}
         <div
-                class="tongue {showDropdown ? 'absolute' : 'hidden'}
+            class="tongue {showDropdown ? 'absolute' : 'hidden'}
                 z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white
                 text-base shadow-lg ring-1 ring-teal ring-opacity-5 focus:outline-none sm:text-sm"
         >
@@ -378,13 +376,13 @@
                 {#if searchResults.length > 0}
                     {#each searchResults.filter((c) => !c.selected) as result}
                         <li
-                                class="item"
-                                data-id={result.obj.id}
-                                aria-selected={result.obj.selected}
-                                role="option"
-                                on:click={on_select}
-                                on:keypress={on_select}
-                                tabindex="-1"
+                            class="item"
+                            data-id={result.obj.id}
+                            aria-selected={result.obj.selected}
+                            role="option"
+                            on:click={on_select}
+                            on:keypress={on_select}
+                            tabindex="-1"
                         >
                             {@html highlight(result, '<span class="font-bold">', "</span>")}
                         </li>
@@ -396,18 +394,18 @@
                             Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
                         -->
                         <li
-                                class="item"
-                                aria-selected={option.selected}
-                                role="option"
-                                data-id={option.id}
-                                on:click={on_select}
-                                on:keypress={on_select}
-                                tabindex="-1"
+                            class="item"
+                            aria-selected={option.selected}
+                            role="option"
+                            data-id={option.id}
+                            on:click={on_select}
+                            on:keypress={on_select}
+                            tabindex="-1"
                         >
                             <span class="block truncate {option.selected ? 'text-semibold' : ''}">{option.name}</span>
                             {#if option.selected}
                                 <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-{colorName}-600">
-                                    <CheckCircleIcon/>
+                                    <CheckCircleIcon />
                                 </span>
                             {/if}
                         </li>
@@ -424,12 +422,12 @@
             {#if showCreationHint}
                 <div class="sticky bottom-0 w-full bg-white">
                     <Button
-                            text={$LL.combobox.createRecordButtonText(searchValue.trim())}
-                            title={$LL.combobox.createRecordButtonText(searchValue.trim())}
-                            {loading}
-                            kind="reset"
-                            type="button"
-                            on:click={() => methods.create_entry(searchValue.trim())}
+                        text={$LL.combobox.createRecordButtonText(searchValue.trim())}
+                        title={$LL.combobox.createRecordButtonText(searchValue.trim())}
+                        {loading}
+                        kind="reset"
+                        type="button"
+                        on:click={() => methods.create_entry(searchValue.trim())}
                     />
                 </div>
             {/if}
diff --git a/code/app/src/components/notification.svelte b/code/app/src/components/notification.svelte
index 5b0c2f2..d78b3d3 100644
--- a/code/app/src/components/notification.svelte
+++ b/code/app/src/components/notification.svelte
@@ -60,7 +60,7 @@
         case "subtle":
             icon = undefined;
             bgClass = "bg-white";
-            ringClass = "";
+            ringClass = "ring-1 ring-gray-100";
             break;
         default:
             icon = undefined;
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
index d5566ed..433607b 100644
--- a/code/app/src/routes/book/inputs/+page.svelte
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -71,5 +71,5 @@
 </section>
 <section>
     <h2>Textarea</h2>
-    <TextArea bind:value errorText="oh no" label="Hi"/>
+    <TextArea bind:value label="Hi"/>
 </section>
diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte
index 71c9298..cb0adec 100644
--- a/code/app/src/routes/book/toggles/+page.svelte
+++ b/code/app/src/routes/book/toggles/+page.svelte
@@ -4,24 +4,24 @@
 
 <section>
     <h2>Default</h2>
-    <Switch/>
+    <Switch />
 </section>
 <section>
     <h2>Short</h2>
-    <Switch type="short"/>
+    <Switch type="short" />
 </section>
 <section>
     <h2>Icon</h2>
-    <Switch type="icon"/>
+    <Switch type="icon" />
 </section>
 <section>
     <h2>Label / Description</h2>
     <div class="max-w-md">
-        <Switch label="Label" description="Some text"/>
+        <Switch label="Label" description="Some text" />
     </div>
 </section>
 
 <section>
     <h2>Label / Description (right aligned)</h2>
-    <Switch label="Label" description="Some text" rightAlignedLabelDescription/>
+    <Switch label="Label" description="Some text" rightAlignedLabelDescription />
 </section>
-- 
cgit v1.3