@likable-hair/svelte 4.2.4 → 4.3.0

package/dist/components/simple/forms/Autocomplete.svelte

@@ -1,204 +1,381 @@
-<script module lang="ts">export {};
+<script module lang="ts">
+  export type Item<Data = any> = {
+    value: string | number;
+    label?: string | number;
+    icon?: string
+    data?: Data;
+  };
 </script>
 
-<script lang="ts" generics="Data">import "../../../css/main.css";
-import "./Autocomplete.css";
-import { scrollInMenu } from "../common/scroller";
-let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, menuAnchor = 'bottom-center', class: clazz = {}, menuStayInViewport, menuFlipOnOverflow = true, menuMaxHeight = '300px', adaptInputWidth = true, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
-let notVisibleChipNumber = $derived(Math.max(((values || []).length || 0) - (maxVisibleChips || 0), 0));
-function select(item) {
-    if (disabled)
-        return;
-    const alreadyPresent = (values || []).findIndex((i) => i.value === item.value) !== -1;
+<script lang="ts" generics="Data">
+  import "../../../css/main.css";
+  import "./Autocomplete.css";
+  import { scrollInMenu } from "../common/scroller";
+
+  type ItemData = Item<Data>;
+  interface Props {
+    values?: ItemData[];
+    items?: ItemData[];
+    searchFunction?: (
+      item: ItemData,
+      searchText: string | undefined,
+    ) => boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    mandatory?: boolean;
+    placeholder?: string;
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    openingId?: string;
+    searchText?: string;
+    maxVisibleChips?: number;
+    menuOpened?: boolean;
+    closeOnSelect?: boolean;
+    emptySearchTextOnMenuClose?: boolean;
+    menuBoxShadow?: string;
+    menuBorderRadius?: string;
+    mobileDrawer?: boolean;
+    menuWidth?: string | null;
+    menuAnchor?: ComponentProps<typeof Menu>['anchor']
+    menuStayInViewport?: ComponentProps<typeof Menu>['stayInViewport']
+    menuFlipOnOverflow?: ComponentProps<typeof Menu>['flipOnOverflow']
+    menuMaxHeight?: string
+    adaptInputWidth?: boolean
+    hint?: string
+    class?: {
+      activator?: string;
+      menu?: string;
+      simpleTextfield?: ComponentProps<typeof SimpleTextField>["class"];
+      hint?: string
+    };
+    selectionContainerSnippet?: Snippet<
+      [
+        {
+          values: ItemData[];
+          searchText: string | undefined;
+          disabled: boolean;
+          openMenu: () => void;
+          handleKeyDown: (event: KeyboardEvent) => void;
+          unselect: (item: ItemData) => void;
+          select: (item: ItemData) => void;
+        },
+      ]
+    >;
+    selectionSnippet?: Snippet<
+      [
+        {
+          selection: ItemData;
+          unselect: (item: ItemData) => void;
+        },
+      ]
+    >;
+    chipLabelSnippet?: Snippet<
+      [
+        {
+          selection: ItemData;
+        },
+      ]
+    >;
+    exceedCounterSnippet?: Snippet<
+      [
+        {
+          notVisibleChipNumber: number;
+          maxVisibleChips: number;
+          values: ItemData[];
+          searchText: string | undefined;
+          disabled: boolean;
+        },
+      ]
+    >;
+    menuSnippet?: Snippet<[]>;
+    itemLabelSnippet?: Snippet<
+      [
+        {
+          item: ItemData;
+        },
+      ]
+    >;
+    itemSnippet?: Snippet<
+      [
+        {
+          item: ItemData;
+          index: number;
+          selected: boolean;
+        },
+      ]
+    >;
+    hintSnippet?: Snippet<[{
+      hint?: string
+    }]>
+    onchange?: (event: {
+      detail: {
+        unselect: ItemData | undefined;
+        select: ItemData | undefined;
+        selection: ItemData[];
+      };
+    }) => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onclose?: ComponentProps<typeof Drawer>["onclose"];
+  }
+
+  let {
+    values = $bindable(),
+    items = [],
+    searchFunction = undefined,
+    multiple = false,
+    disabled = false,
+    mandatory = false,
+    placeholder = "",
+    width = "auto",
+    height = "auto",
+    maxWidth = undefined,
+    minWidth = "200px",
+    openingId = $bindable("autocomplete-menu"),
+    searchText = $bindable(),
+    maxVisibleChips = undefined,
+    menuOpened = $bindable(false),
+    closeOnSelect = !multiple,
+    emptySearchTextOnMenuClose = true,
+    menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px",
+    menuBorderRadius = "5px",
+    mobileDrawer = false,
+    menuWidth = undefined,
+    menuAnchor = 'bottom-center',
+    class: clazz = {},
+    menuStayInViewport,
+    menuFlipOnOverflow = true,
+    menuMaxHeight = '300px',
+    adaptInputWidth = true,
+    hint,
+    selectionContainerSnippet,
+    selectionSnippet,
+    chipLabelSnippet,
+    exceedCounterSnippet,
+    menuSnippet,
+    itemLabelSnippet,
+    itemSnippet,
+    hintSnippet,
+    onchange,
+    onfocus,
+    onblur,
+    onkeydown,
+    onclose,
+  }: Props = $props();
+
+  let notVisibleChipNumber = $derived(
+    Math.max(((values || []).length || 0) - (maxVisibleChips || 0), 0),
+  );
+
+  function select(item: ItemData) {
+    if (disabled) return;
+
+    const alreadyPresent =
+      (values || []).findIndex((i) => i.value === item.value) !== -1;
+
     if (!alreadyPresent) {
-        if (multiple)
-            values = [...(values || []), item];
-        else
-            values = [item];
-        refreshMenuWidth();
-        if (onchange) {
-            onchange({
-                detail: {
-                    unselect: undefined,
-                    select: item,
-                    selection: values,
-                },
-            });
-        }
+      if (multiple) values = [...(values || []), item];
+      else values = [item];
+      refreshMenuWidth();
+
+      if (onchange) {
+        onchange({
+          detail: {
+            unselect: undefined,
+            select: item,
+            selection: values,
+          },
+        });
+      }
     }
-    if (!multiple && closeOnSelect)
-        menuOpened = false;
-}
-function unselect(item) {
-    if (disabled)
-        return;
-    if (!!values && values.length == 1 && mandatory)
-        return;
+
+    if (!multiple && closeOnSelect) menuOpened = false;
+  }
+
+  function unselect(item: ItemData) {
+    if (disabled) return;
+
+    if (!!values && values.length == 1 && mandatory) return;
     values = (values || []).filter((i) => i.value != item.value);
     refreshMenuWidth();
+
     if (onchange) {
-        onchange({
-            detail: {
-                unselect: item,
-                select: undefined,
-                selection: values || [],
-            },
-        });
+      onchange({
+        detail: {
+          unselect: item,
+          select: undefined,
+          selection: values || [],
+        },
+      });
     }
-}
-function pop() {
-    if (!!values && values.length == 1 && mandatory)
-        return;
+  }
+
+  function pop() {
+    if (!!values && values.length == 1 && mandatory) return;
     let poppedElement = (values || []).pop();
     values = [...(values || [])];
     refreshMenuWidth();
+
     if (onchange) {
-        onchange({
-            detail: {
-                unselect: poppedElement,
-                select: undefined,
-                selection: values,
-            },
-        });
+      onchange({
+        detail: {
+          unselect: poppedElement,
+          select: undefined,
+          selection: values,
+        },
+      });
     }
-}
-function toggle(item) {
-    const alreadyPresent = (values || []).findIndex((i) => i.value === item.value) != -1;
-    if (alreadyPresent)
-        unselect(item);
-    else
-        select(item);
-}
-let localMenuWidth = $state(undefined), menuHeight = "auto", refreshPosition = $state(false);
-function openMenu() {
+  }
+
+  function toggle(item: ItemData) {
+    const alreadyPresent =
+      (values || []).findIndex((i) => i.value === item.value) != -1;
+
+    if (alreadyPresent) unselect(item);
+    else select(item);
+  }
+
+  let localMenuWidth: string | undefined | null = $state(undefined),
+    menuHeight = "auto",
+    refreshPosition = $state(false);
+
+  function openMenu() {
     refreshMenuWidth();
     menuOpened = true;
-}
-function refreshMenuWidth() {
+  }
+
+  function refreshMenuWidth() {
     setTimeout(() => {
-        if (menuWidth !== undefined)
-            localMenuWidth = menuWidth;
-        else if (!!activator)
-            localMenuWidth = activator.offsetWidth + "px";
-        setTimeout(() => {
-            refreshPosition = true;
-        }, 1);
+      if (menuWidth !== undefined) localMenuWidth = menuWidth;
+      else if (!!activator) localMenuWidth = activator.offsetWidth + "px";
+
+      setTimeout(() => {
+        refreshPosition = true;
+      }, 1);
     }, 1);
-}
-let activator = $state(), focusedIndex = $state(undefined);
-function handleTextFieldFocus() {
+  }
+
+  let activator: HTMLElement | undefined = $state(),
+    focusedIndex: number | undefined = $state(undefined);
+  function handleTextFieldFocus() {
     if (onfocus) {
-        onfocus();
+      onfocus();
     }
-    if (disabled)
-        return;
+
+    if (disabled) return;
     focusedIndex = undefined;
     openMenu();
-}
-function handleTextFieldBlur() {
+  }
+
+  function handleTextFieldBlur() {
     if (onblur) {
-        onblur();
+      onblur();
     }
     // closeMenu()
-}
-let menuElement = $state();
-function handleKeyDown(event) {
+  }
+
+  let menuElement: HTMLElement | undefined = $state();
+  function handleKeyDown(event: KeyboardEvent) {
     if (onkeydown) {
-        onkeydown(event);
-    }
-    if (disabled)
-        return;
-    if (event.key == "ArrowDown" &&
-        (focusedIndex === undefined || focusedIndex < filteredItems.length - 1)) {
-        if (focusedIndex === undefined)
-            focusedIndex = 0;
-        else
-            focusedIndex += 1;
-    }
-    else if (event.key == "ArrowUp" &&
-        (focusedIndex === undefined || focusedIndex > 0)) {
-        if (focusedIndex === undefined)
-            focusedIndex = filteredItems.length - 1;
-        else
-            focusedIndex -= 1;
-    }
-    else if (event.key == "Enter" && focusedIndex != undefined) {
-        toggle(filteredItems[focusedIndex]);
+      onkeydown(event);
     }
-    else if (event.key == "Backspace" && searchText == "") {
-        pop();
-    }
-    else if (event.key == "Escape" || event.key == "Tab") {
-        if (emptySearchTextOnMenuClose)
-            searchText = "";
-        if (!!input)
-            input.blur();
-        menuOpened = false;
+
+    if (disabled) return;
+
+    if (
+      event.key == "ArrowDown" &&
+      (focusedIndex === undefined || focusedIndex < filteredItems.length - 1)
+    ) {
+      if (focusedIndex === undefined) focusedIndex = 0;
+      else focusedIndex += 1;
+    } else if (
+      event.key == "ArrowUp" &&
+      (focusedIndex === undefined || focusedIndex > 0)
+    ) {
+      if (focusedIndex === undefined) focusedIndex = filteredItems.length - 1;
+      else focusedIndex -= 1;
+    } else if (event.key == "Enter" && focusedIndex != undefined) {
+      toggle(filteredItems[focusedIndex]);
+    } else if (event.key == "Backspace" && searchText == "") {
+      pop();
+    } else if (event.key == "Escape" || event.key == "Tab") {
+      if(emptySearchTextOnMenuClose) searchText = "";
+      if (!!input) input.blur();
+      menuOpened = false;
     }
+
     if (focusedIndex !== undefined && !!menuElement) {
-        let child = menuElement.querySelector(".item-" + focusedIndex);
-        if (!!child)
-            scrollInMenu(menuElement, child, "instant");
+      let child = menuElement.querySelector<HTMLElement>(
+        ".item-" + focusedIndex,
+      );
+
+      if (!!child) scrollInMenu(menuElement, child, "instant");
     }
-}
-let input = $state();
-function handleContainerClick() {
-    if (disabled)
-        return;
+  }
+
+  let input: HTMLElement | undefined = $state();
+  function handleContainerClick() {
+    if (disabled) return;
+
     if (!menuOpened) {
-        if (!!input)
-            input.focus();
-        // had to timeout because it was catching click outside
-        setTimeout(() => {
-            openMenu();
-        }, 50);
+      if (!!input) input.focus();
+
+      // had to timeout because it was catching click outside
+      setTimeout(() => {
+        openMenu();
+      }, 50);
     }
-}
-let filteredItems = $state(items);
-$effect(() => {
+  }
+
+  let filteredItems: ItemData[] = $state(items);
+  $effect(() => {
     if (searchText) {
-        focusedIndex = undefined;
-        filteredItems = items.filter((it) => {
-            if (searchFunction)
-                return searchFunction(it, searchText);
-            else
-                return (!!searchText &&
-                    it.label
-                        ?.toString()
-                        .toLowerCase()
-                        .includes(searchText.toLowerCase()));
-        });
-    }
-    else {
-        filteredItems = items;
+      focusedIndex = undefined;
+      filteredItems = items.filter((it) => {
+        if (searchFunction) return searchFunction(it, searchText);
+        else
+          return (
+            !!searchText &&
+            it.label
+              ?.toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase())
+          );
+      });
+    } else {
+      filteredItems = items;
     }
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (!menuOpened && emptySearchTextOnMenuClose) {
-        setTimeout(() => {
-            if (!menuOpened && emptySearchTextOnMenuClose)
-                searchText = undefined;
-        }, 10);
+      setTimeout(() => {
+        if (!menuOpened && emptySearchTextOnMenuClose) searchText = undefined;
+      }, 10);
     }
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (!!input && adaptInputWidth) {
-        if ((values || []).length !== 0) {
-            input.style.width =
-                Math.max(searchText?.length || placeholder?.length, 1) + "ch";
-        }
-        else {
-            input.style.width = "auto";
-        }
+      if ((values || []).length !== 0) {
+        input.style.width =
+          Math.max(searchText?.length || placeholder?.length, 1) + "ch";
+      } else {
+        input.style.width = "";
+      }
     }
-});
-import Chip from "../navigation/Chip.svelte";
-import Menu from "../common/Menu.svelte";
-import {} from "svelte";
-import SimpleTextField from "./SimpleTextField.svelte";
-import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
-import Drawer from "../navigation/Drawer.svelte";
-import Icon from "../media/Icon.svelte";
+  });
+
+  import Chip from "../navigation/Chip.svelte";
+  import Menu from "../common/Menu.svelte";
+  import { type ComponentProps, type Snippet } from "svelte";
+  import SimpleTextField from "./SimpleTextField.svelte";
+  import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
+  import Drawer from "../navigation/Drawer.svelte";
+  import Icon from "../media/Icon.svelte";
 </script>
 
 <svelte:window />
@@ -275,6 +452,16 @@ import Icon from "../media/Icon.svelte";
         bind:this={input}
       />
     </div>
+
+    {#if hintSnippet}
+      {@render hintSnippet({ hint })}
+    {:else}
+      <div class="{clazz?.hint || ''}">
+        {#if !!hint}
+          <span class="hint">{hint}</span>
+        {/if}
+      </div>
+    {/if}
   {/if}
 </div>
 
@@ -501,4 +688,19 @@ import Icon from "../media/Icon.svelte";
     border: none;
     color: inherit;
   }
+
+  .hint {
+    margin-left: var(
+      --autocomplete-hint-margin-left, 
+      var(--autocomplete-default-hint-margin-left)
+    );
+    font-size: var(
+      --autocomplete-hint-font-size, 
+      var(--autocomplete-default-hint-font-size)
+    );
+    color: var(
+      --autocomplete-hint-color,
+      var(--autocomplete-default-hint-color)
+    );
+  }
 </style>

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -10,11 +10,11 @@ import Menu from "../common/Menu.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
 import Drawer from "../navigation/Drawer.svelte";
-declare class __sveltets_Render<Data> {
-    props(): {
-        values?: Item<Data>[] | undefined;
-        items?: Item<Data>[] | undefined;
-        searchFunction?: ((item: Item<Data>, searchText: string | undefined) => boolean) | undefined;
+declare function $$render<Data>(): {
+    props: {
+        values?: Item<Data>[];
+        items?: Item<Data>[];
+        searchFunction?: (item: Item<Data>, searchText: string | undefined) => boolean;
         multiple?: boolean;
         disabled?: boolean;
         mandatory?: boolean;
@@ -38,11 +38,13 @@ declare class __sveltets_Render<Data> {
         menuFlipOnOverflow?: ComponentProps<typeof Menu>["flipOnOverflow"];
         menuMaxHeight?: string;
         adaptInputWidth?: boolean;
+        hint?: string;
         class?: {
             activator?: string;
             menu?: string;
             simpleTextfield?: ComponentProps<typeof SimpleTextField>["class"];
-        } | undefined;
+            hint?: string;
+        };
         selectionContainerSnippet?: Snippet<[{
             values: Item<Data>[];
             searchText: string | undefined;
@@ -51,44 +53,54 @@ declare class __sveltets_Render<Data> {
             handleKeyDown: (event: KeyboardEvent) => void;
             unselect: (item: Item<Data>) => void;
             select: (item: Item<Data>) => void;
-        }]> | undefined;
+        }]>;
         selectionSnippet?: Snippet<[{
             selection: Item<Data>;
             unselect: (item: Item<Data>) => void;
-        }]> | undefined;
+        }]>;
         chipLabelSnippet?: Snippet<[{
             selection: Item<Data>;
-        }]> | undefined;
+        }]>;
         exceedCounterSnippet?: Snippet<[{
             notVisibleChipNumber: number;
             maxVisibleChips: number;
             values: Item<Data>[];
             searchText: string | undefined;
             disabled: boolean;
-        }]> | undefined;
+        }]>;
         menuSnippet?: Snippet<[]>;
         itemLabelSnippet?: Snippet<[{
             item: Item<Data>;
-        }]> | undefined;
+        }]>;
         itemSnippet?: Snippet<[{
             item: Item<Data>;
             index: number;
             selected: boolean;
-        }]> | undefined;
-        onchange?: ((event: {
+        }]>;
+        hintSnippet?: Snippet<[{
+            hint?: string;
+        }]>;
+        onchange?: (event: {
             detail: {
                 unselect: Item<Data> | undefined;
                 select: Item<Data> | undefined;
                 selection: Item<Data>[];
             };
-        }) => void) | undefined;
-        onfocus?: (() => void) | undefined;
-        onblur?: (() => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        }) => void;
+        onfocus?: () => void;
+        onblur?: () => void;
+        onkeydown?: (e: KeyboardEvent) => void;
         onclose?: ComponentProps<typeof Drawer>["onclose"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "openingId" | "values" | "menuOpened" | "searchText";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Data> {
+    props(): ReturnType<typeof $$render<Data>>['props'];
+    events(): ReturnType<typeof $$render<Data>>['events'];
+    slots(): ReturnType<typeof $$render<Data>>['slots'];
     bindings(): "openingId" | "values" | "menuOpened" | "searchText";
     exports(): {};
 }