iconograph-ui 1.7.6 → 1.7.9

package/example/src/routes/user/+server.js

@@ -2,7 +2,7 @@
 import { json } from '@sveltejs/kit';
 
 export async function GET({ request, cookies, params, url }) {
-    let search = url.searchParams.get('contains')
+    let search = url.searchParams.get('name')
 
     let users = [
         { id: 1, firstname: "Alice", lastname:"Dupont", avatar: "https://i.pravatar.cc/40?u=alice" },

package/lib/inputs/SearchSelect.svelte

@@ -5,6 +5,7 @@
     import UserPicture from '../user/UserPicture.svelte';
     import {clickOutside} from '../utils/clickOutside.js';
     import { createEventDispatcher } from 'svelte'
+    import loaderIcon from '../assets/icons/loader-ring-grey.svg?url';
 
     const dispatch = createEventDispatcher()
 
@@ -23,8 +24,10 @@
     let coords = { top: 0, left: 0, width: 0 };
 
     async function handleFilter() {
-        waiting = true;
+        if (search.length < 1)
+            return;
 
+        waiting = true;
         const response = await fetch(`${uri}limit=50&page=1&name=${search}`,  {
             method: 'GET',
             headers: { 'Content-Type': 'application/json' }
@@ -66,18 +69,24 @@
     <Portal target="#main-container">
         <div class="list" style="position: absolute; top:{coords.top - 1}px; left:{coords.left - 85}px; width: {coords.width - 2}px;" >
             <!-- Options -->
-            {#each results as r}
-                <div class="option" on:click={() => selectResult(r)}>
-                    {#if type == 'user'}
-                        <UserPicture user={r} size={24}></UserPicture>
-                        <span>{r.firstname} {r.lastname}</span>
-                    {:else}
-                        <span>{r.name}</span>
-                    {/if}
+            {#if waiting}
+                <div class="option waiting">
+                    <span style:background-image={`url("${loaderIcon}")`}>Recherche en cours...</span>
                 </div>
             {:else}
-                <div class="option"><span>Aucun résultat</span></div>
-            {/each}
+                {#each results as r}
+                    <div class="option" on:click={() => selectResult(r)}>
+                        {#if type == 'user'}
+                            <UserPicture user={r} size={24}></UserPicture>
+                            <span>{r.firstname} {r.lastname}</span>
+                        {:else}
+                            <span>{r.name}</span>
+                        {/if}
+                    </div>
+                {:else}
+                    <div class="option"><span>Aucun résultat</span></div>
+                {/each}
+            {/if}
         </div>
     </Portal>
     {/if}
@@ -159,4 +168,20 @@
 .option:hover {
     background: var(--theme-input-bg-highlight);
 }
+.option.waiting {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.option.waiting > span {
+    background-size: 20px auto;
+    background-repeat: no-repeat;
+    background-position: 0px center;
+    padding-left: 28px;
+    color: #999;
+}
+.option.waiting:hover {
+    background-color: transparent;
+}
+
 </style>

package/lib/navigation/Button.svelte

@@ -15,7 +15,10 @@
     </button>
 {:else}
     {#if clickEvent}
-        <button on:click|stopPropagation={clickEvent} class="{style} {icon ? 'icon' : ''}" style:background-image={`url("${icon}")`}>
+        <!-- Hide icon if icon == null -->
+        <button on:click|stopPropagation={clickEvent} class="{style} {icon ? 'icon' : ''}"
+            style={ loaderIcon ? { backgroundImage: `url("${loaderIcon}")` } : {} }
+        >
             {label}
         </button>
     {:else}

package/lib/navigation/NavBar.svelte

@@ -1,6 +1,20 @@
 <script>
+    import { onMount } from 'svelte';
+
     export let tabs;
     export let currentTab;
+
+    $: if (currentTab) {
+        history.replaceState(null, '', `#${currentTab}`);
+    }
+
+    onMount(() => {
+        const hash = window.location.hash.replace('#', '');
+
+        if (hash && Object.keys(tabs).includes(hash))
+            currentTab = hash;
+    });
+
 </script>
 
 <aside class="horizontal-navbar">

package/lib/user/SelectUserInput.svelte

@@ -2,6 +2,7 @@
     // @ts-nocheck
 	import UserPicture from './UserPicture.svelte';
     import SearchSelect from "../inputs/SearchSelect.svelte";
+    import crossIcon from '../assets/icons/icon-close-cross.svg?url';
 
     export let name;
     export let value = null;
@@ -42,7 +43,7 @@
                     </a>
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
-                    <div on:click={() => handleRemove(v.id)}>+</div>
+                    <div on:click={() => handleRemove(v.id)} class="cross" style:background-image={`url("${crossIcon}")`}></div>
                 </div>
             </div>
         {/each}
@@ -62,7 +63,7 @@
                 </a>
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <div on:click={handleRemove}>+</div>
+                <div on:click={handleRemove} class="cross" style:background-image={`url("${crossIcon}")`}></div>
             </div>
         {/if}
     </div>
@@ -112,23 +113,21 @@
 .user-label a, .user-label span {
     flex: 1;
 }
-.user-label > div:nth-of-type(2) {
+.cross {
     cursor: pointer;
-    margin-left: 8px;
     height: 16px;
     width: 16px;
-    min-width: 16px;
-    background-color: #ddd;
+    background-color: #e0e0e0;
     border-radius: 20px;
-    font-weight: 600;
-    text-align: center;
-    line-height: 17px;
-    color: #777;
-    transform: rotate(45deg);
-    transition: all ease-in-out 0.14s;
+    background-position: center center;
+    background-size: 16px auto;
+    background-repeat: no-repeat;
+    transition: all ease-in-out 0.10s;
+    position: relative;
+    left: 8px;
 }
-.user-label > div:nth-of-type(2):hover {
-    background-color: #ccc;
+.cross:hover {
+    background-color: #d0d0d0;
 }
 
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "1.7.6",
+    "version": "1.7.9",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",