@likable-hair/svelte 4.2.4 → 4.3.0

package/dist/components/composed/forms/AsyncAutocomplete.svelte

@@ -1,37 +1,88 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
+  export type { Item }
 </script>
 
-<script lang="ts" generics="Data">import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
-import debounceStore from "../../../stores/debounce";
-import { writable } from 'svelte/store';
-import Menu from "../../simple/common/Menu.svelte";
-let { items = [], values = $bindable(), multiple = false, searcher, placeholder, searchThreshold = 2, debounceTimeout = 500, searching = false, search = false, searchText = $bindable(), maxVisibleChips, menuOpened = $bindable(false), mobileDrawer = false, closeOnSelect = false, disabled = false, menuAnchor, menuWidth, onchange, ...restProps } = $props();
-const searchTextValue = writable(searchText);
-let searchTextDebounce = $derived(debounceStore(searchTextValue, debounceTimeout));
-$effect(() => {
-    if (!!$searchTextDebounce && searchThreshold <= $searchTextDebounce.length) {
-        searching = true;
-        searcher({ searchText: $searchTextDebounce }).then((it) => {
-            items = it;
-        }).finally(() => {
-            searching = false;
-        });
+<script lang="ts" generics="Data">
+  import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+  import debounceStore from "../../../stores/debounce";
+  import { writable } from 'svelte/store';
+  import type { ComponentProps } from "svelte";
+  import Menu from "../../simple/common/Menu.svelte";
+
+  type AsyncAutocompleteItem = Item<Data>
+
+  type Props = {
+    items: AsyncAutocompleteItem[];
+    values?: AsyncAutocompleteItem[];
+    multiple?: boolean;
+    searcher: (params: {
+      searchText: string
+    }) => Promise<AsyncAutocompleteItem[]>;
+    placeholder?: string;
+    searchThreshold?: number;
+    debounceTimeout?: number;
+    searching?: boolean;
+    search?: boolean;
+    searchText?: string;
+    maxVisibleChips?: number;
+    menuOpened?: boolean;
+    mobileDrawer?: boolean;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+    menuWidth?: string;
+    menuAnchor?: ComponentProps<typeof Menu>['anchor']
+  } & ComponentProps<typeof Autocomplete<Data>>
+
+  let {
+    items = [],
+    values = $bindable(),
+    multiple = false,
+    searcher,
+    placeholder,
+    searchThreshold = 2,
+    debounceTimeout = 500,
+    searching = false,
+    search = false,
+    searchText = $bindable(),
+    maxVisibleChips,
+    menuOpened = $bindable(false),
+    mobileDrawer = false,
+    closeOnSelect = false,
+    disabled = false,
+    menuAnchor,
+    menuWidth,
+    onchange,
+    ...restProps
+  }: Props = $props();
+
+  const searchTextValue = writable<string | undefined>(searchText)
+  let searchTextDebounce = $derived(debounceStore(searchTextValue, debounceTimeout))
+  
+  $effect(() => {
+    if(!!$searchTextDebounce && searchThreshold <= $searchTextDebounce.length) {
+      searching = true
+      searcher({ searchText: $searchTextDebounce }).then((it) => {
+        items = it
+      }).finally(() => {
+        searching = false
+      })
     }
-});
-$effect(() => {
-    if (search) {
-        search = false;
-        searching = true;
-        searcher({ searchText: $searchTextDebounce }).then((it) => {
-            items = it;
-        }).finally(() => {
-            searching = false;
-        });
+  }) 
+  $effect(() => {
+    if(search) {
+      search = false
+      searching = true
+      searcher({ searchText: $searchTextDebounce }).then((it) => {
+        items = it
+      }).finally(() => {
+        searching = false
+      })
     }
-});
-$effect(() => {
-    $searchTextValue = searchText;
-});
+  }) 
+  $effect(() => {
+    $searchTextValue = searchText
+  })
 </script>
 
 <Autocomplete

package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts

@@ -2,10 +2,10 @@ import type { Item } from "../../../components/simple/forms/Autocomplete.svelte"
 export type { Item };
 import type { ComponentProps } from "svelte";
 import Menu from "../../simple/common/Menu.svelte";
-declare class __sveltets_Render<Data> {
-    props(): {
+declare function $$render<Data>(): {
+    props: {
         items: Item<Data>[];
-        values?: Item<Data>[] | undefined;
+        values?: Item<Data>[];
         multiple?: boolean;
         searcher: (params: {
             searchText: string;
@@ -50,10 +50,12 @@ declare class __sveltets_Render<Data> {
         menuFlipOnOverflow?: ComponentProps<typeof Menu>["flipOnOverflow"];
         menuMaxHeight?: string;
         adaptInputWidth?: boolean;
+        hint?: string;
         class?: {
             activator?: string;
             menu?: string;
             simpleTextfield?: ComponentProps<typeof import("../../..").SimpleTextField>["class"];
+            hint?: string;
         } | undefined;
         selectionContainerSnippet?: import("svelte").Snippet<[{
             values: Item<Data>[];
@@ -87,6 +89,9 @@ declare class __sveltets_Render<Data> {
             index: number;
             selected: boolean;
         }]> | undefined;
+        hintSnippet?: import("svelte").Snippet<[{
+            hint?: string;
+        }]> | undefined;
         onchange?: ((event: {
             detail: {
                 unselect: Item<Data> | undefined;
@@ -99,8 +104,15 @@ declare class __sveltets_Render<Data> {
         onkeydown?: ((e: KeyboardEvent) => void) | undefined;
         onclose?: ComponentProps<typeof import("../../..").Drawer>["onclose"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "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(): "values" | "menuOpened" | "searchText";
     exports(): {};
 }

package/dist/components/composed/forms/AvatarDropdown.svelte

@@ -1,80 +1,156 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type AvatarItem<Data = any> = {
+    value: string | number,
+    tooltip?: string | number,
+    label?: string | number,
+    text?: string
+    src?: string
+    alt?: string
+    data?: Data
+  };
 </script>
 
-<script lang="ts" generics="Data">import lodash from "lodash";
-import Autocomplete, {} from "../../../components/simple/forms/Autocomplete.svelte";
-import Icon from '../../simple/media/Icon.svelte';
-import Avatar from "../../simple/media/Avatar.svelte";
-import ToolTip from "../common/ToolTip.svelte";
-let { items = [], values = $bindable([]), multiple = true, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, minWidth = 'auto', disabled = false, menuWidth = "144px", onchange: onchangeInternal, labelSnippet, noValuesSnippet, itemLabelSnippet: itemLabelInternalSnippet, } = $props();
-function handleCloseClick(params) {
-    let unselected = lodash.cloneDeep(values[params.index]);
-    values.splice(params.index, 1);
-    values = [...values];
-    if (onchangeInternal) {
-        onchangeInternal({
-            detail: {
-                unselect: unselected,
-                select: undefined,
-                selection: values
-            }
-        });
+<script lang="ts" generics="Data">
+  import lodash from "lodash";
+  import Autocomplete, { type Item } from "../../../components/simple/forms/Autocomplete.svelte";
+  import Icon from '../../simple/media/Icon.svelte'
+  import Avatar from "../../simple/media/Avatar.svelte";
+  import ToolTip from "../common/ToolTip.svelte";
+  import type { ComponentProps, Snippet } from "svelte";
+
+  type AvatarItemData = AvatarItem<Data>
+
+  type AutocompleteData = {
+    tooltip?: string | number,
+    label?: string | number,
+    text?: string
+    src?: string
+    alt?: string
+    data?: Data
+  }
+  type AutocompleteItem = Item<AutocompleteData>
+
+  interface Props {
+    items?: AvatarItemData[];
+    values?: AvatarItemData[];
+    multiple?: boolean;
+    menuOpened?: boolean;
+    openingId?: string;
+    width?: string;
+    minWidth?: string;
+    disabled?: boolean;
+    menuWidth?: string | null;
+    onchange?: (event: {
+      detail: {
+        unselect: AvatarItemData | undefined;
+        select: AvatarItemData | undefined;
+        selection: AvatarItemData[];
+      }
+    }) => void
+    labelSnippet?: Snippet<[{
+      values: AvatarItemData[]
+      items: AvatarItemData[]
+      handleCloseClick: typeof handleCloseClick
+    }]>
+    noValuesSnippet?: Snippet<[{
+      values: AvatarItemData[]
+      items: AvatarItemData[]
+      handleCloseClick: typeof handleCloseClick
+    }]>
+    itemLabelSnippet?: ComponentProps<typeof Autocomplete<AutocompleteData>>['itemLabelSnippet']
+  }
+
+  let {
+    items = [],
+    values = $bindable([]),
+    multiple = true,
+    menuOpened = $bindable(false),
+    openingId = $bindable("autocomplete-menu"),
+    width,
+    minWidth = 'auto',
+    disabled = false,
+    menuWidth = "144px",
+    onchange: onchangeInternal,
+    labelSnippet,
+    noValuesSnippet,
+    itemLabelSnippet: itemLabelInternalSnippet,
+  }: Props = $props();
+
+  function handleCloseClick(params: { index: number }) {
+    let unselected = lodash.cloneDeep(values[params.index])
+    values.splice(params.index, 1)
+    values = [...values]
+
+    if(onchangeInternal){ 
+      onchangeInternal({
+        detail: {
+          unselect: unselected,
+          select: undefined,
+          selection: values
+        }
+      })
     }
-}
-function onchange(event) {
+  }
+
+  function onchange(event: Parameters<NonNullable<ComponentProps<typeof Autocomplete<AutocompleteData>>['onchange']>>[0]) {
     values = event.detail.selection.map((e) => ({
-        value: e.value,
-        tooltip: e.data?.tooltip,
-        label: e.data?.label,
-        text: e.data?.text,
-        src: e.data?.src,
-        alt: e.data?.alt,
-        data: e.data?.data,
-    }));
-    if (onchangeInternal) {
-        onchangeInternal({
-            detail: {
-                unselect: !!event.detail.unselect ? {
-                    ...event.detail.unselect.data,
-                    value: event.detail.unselect.value,
-                } : undefined,
-                select: !!event.detail.select ? {
-                    value: event.detail.select.value,
-                    ...event.detail.select.data
-                } : undefined,
-                selection: values
-            }
-        });
+      value: e.value,
+      tooltip: e.data?.tooltip,
+      label: e.data?.label,
+      text: e.data?.text,
+      src: e.data?.src,
+      alt: e.data?.alt,
+      data: e.data?.data,
+    }))
+
+    if(onchangeInternal) {
+      onchangeInternal({
+        detail: {
+          unselect: !!event.detail.unselect ? {
+            ...event.detail.unselect.data,
+            value: event.detail.unselect.value,
+          } : undefined,
+          select: !!event.detail.select ? {
+            value: event.detail.select.value,
+            ...event.detail.select.data
+          } : undefined,
+          selection: values
+        }
+      })
     }
-}
-let autocompleteValues = $state([]);
-$effect(() => {
+  }
+
+  let autocompleteValues: AutocompleteItem[] = $state([])
+
+  $effect(() => {
     autocompleteValues = values.map((e) => ({
-        value: e.value,
-        label: e.label || e.text,
-        data: {
-            data: e.data,
-            text: e.text,
-            src: e.src,
-            alt: e.alt,
-            label: e.label,
-            tooltip: e.tooltip
-        }
-    }));
-});
-let autocompleteItems = $derived(items.map((e) => {
+      value: e.value,
+      label: e.label || e.text,
+      data: {
+        data: e.data,
+        text: e.text,
+        src: e.src,
+        alt: e.alt,
+        label: e.label,
+        tooltip: e.tooltip
+      }
+    }))
+  })
+
+  let autocompleteItems: AutocompleteItem[] = $derived(items.map((e) => {
     return {
-        value: e.value,
-        label: e.label || e.text,
-        data: {
-            data: e.data,
-            text: e.text,
-            src: e.src,
-            alt: e.alt,
-        }
-    };
-}));
-let tooltipsActivator = [];
+      value: e.value,
+      label: e.label || e.text,
+      data: {
+        data: e.data,
+        text: e.text,
+        src: e.src,
+        alt: e.alt,
+      }
+    }
+  }))
+
+  let tooltipsActivator: HTMLElement[] = []
 </script>
 
 <Autocomplete

package/dist/components/composed/forms/AvatarDropdown.svelte.d.ts

@@ -7,12 +7,12 @@ export type AvatarItem<Data = any> = {
     alt?: string;
     data?: Data;
 };
-import { type Item } from "../../../components/simple/forms/Autocomplete.svelte";
-import type { Snippet } from "svelte";
-declare class __sveltets_Render<Data> {
-    props(): {
-        items?: AvatarItem<Data>[] | undefined;
-        values?: AvatarItem<Data>[] | undefined;
+import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+import type { ComponentProps, Snippet } from "svelte";
+declare function $$render<Data>(): {
+    props: {
+        items?: AvatarItem<Data>[];
+        values?: AvatarItem<Data>[];
         multiple?: boolean;
         menuOpened?: boolean;
         openingId?: string;
@@ -20,40 +20,45 @@ declare class __sveltets_Render<Data> {
         minWidth?: string;
         disabled?: boolean;
         menuWidth?: string | null;
-        onchange?: ((event: {
+        onchange?: (event: {
             detail: {
                 unselect: AvatarItem<Data> | undefined;
                 select: AvatarItem<Data> | undefined;
                 selection: AvatarItem<Data>[];
             };
-        }) => void) | undefined;
+        }) => void;
         labelSnippet?: Snippet<[{
             values: AvatarItem<Data>[];
             items: AvatarItem<Data>[];
             handleCloseClick: (params: {
                 index: number;
             }) => void;
-        }]> | undefined;
+        }]>;
         noValuesSnippet?: Snippet<[{
             values: AvatarItem<Data>[];
             items: AvatarItem<Data>[];
             handleCloseClick: (params: {
                 index: number;
             }) => void;
-        }]> | undefined;
-        itemLabelSnippet?: Snippet<[{
-            item: Item<{
-                tooltip?: string | number;
-                label?: string | number;
-                text?: string;
-                src?: string;
-                alt?: string;
-                data?: Data | undefined;
-            }>;
-        }]> | undefined;
+        }]>;
+        itemLabelSnippet?: ComponentProps<typeof Autocomplete<{
+            tooltip?: string | number;
+            label?: string | number;
+            text?: string;
+            src?: string;
+            alt?: string;
+            data?: Data;
+        }>>["itemLabelSnippet"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "openingId" | "values" | "menuOpened";
+    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";
     exports(): {};
 }

package/dist/components/composed/forms/ConfirmOrCancelButtons.svelte

@@ -1,24 +1,70 @@
-<script lang="ts">import '../../../css/main.css';
-import Button from '../../simple/buttons/Button.svelte';
-let { loading = false, marginTop = "20px", cancelText = "Annulla", confirmText = "Salva", confirmDisable = false, cancelDisable = false, oncancelClick, onconfirmClick, cancelButtonSnippet, confirmButtonSnippet, } = $props();
-function handleConfirm(event) {
-    if (!confirmDisable && onconfirmClick) {
-        onconfirmClick({
-            detail: {
-                nativeEvent: event.detail.nativeEvent
-            }
-        });
+<script lang="ts">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import '../../../css/main.css'
+  import Button from '../../simple/buttons/Button.svelte'
+
+  interface Props {
+    loading?: boolean;
+    marginTop?: string;
+    cancelText?: string;
+    confirmText?: string;
+    confirmDisable?: boolean;
+    cancelDisable?: boolean;
+    onconfirmClick?: (event: {
+      detail: {
+        nativeEvent: MouseEvent
+      }
+    }) => void
+    oncancelClick?: (event: {
+      detail: {
+        nativeEvent: MouseEvent | KeyboardEvent
+      }
+    }) => void
+    cancelButtonSnippet?: Snippet<[{
+      loading: boolean
+      handleCancel: typeof handleCancel
+      cancelText: string
+    }]>
+    confirmButtonSnippet?: Snippet<[{
+      loading: boolean
+      handleConfirm: typeof handleConfirm
+      confirmText: string
+      confirmDisable: boolean
+    }]>
+  }
+
+  let {
+    loading = false,
+    marginTop = "20px",
+    cancelText = "Annulla",
+    confirmText = "Salva",
+    confirmDisable = false,
+    cancelDisable = false,
+    oncancelClick,
+    onconfirmClick,
+    cancelButtonSnippet,
+    confirmButtonSnippet,
+  }: Props = $props();
+
+  function handleConfirm(event: Parameters<NonNullable<ComponentProps<typeof Button>['onclick']>>[0]) {
+    if(!confirmDisable && onconfirmClick) {
+      onconfirmClick({
+        detail: {
+          nativeEvent: event.detail.nativeEvent
+        }
+      })
     }
-}
-function handleCancel(nativeEvent) {
-    if (!cancelDisable && oncancelClick) {
-        oncancelClick({
-            detail: {
-                nativeEvent
-            }
-        });
+  }
+
+  function handleCancel(nativeEvent: MouseEvent | KeyboardEvent) {
+    if(!cancelDisable && oncancelClick) {
+      oncancelClick({
+        detail: {
+          nativeEvent
+        }
+      })
     }
-}
+  }
 </script>
 
 <div

package/dist/components/composed/forms/CountriesAutocomplete.svelte

@@ -1,7 +1,36 @@
-<script lang="ts">import Autocomplete, {} from "../../simple/forms/Autocomplete.svelte";
-import { countriesOptions } from '../../../utils/countries';
-import FlagIcon from "../../simple/media/FlagIcon.svelte";
-let { autocompleteProps = {}, selected = $bindable(), items = countriesOptions, onblur, onchange, onclose, onfocus, onkeydown, class: clazz = {} } = $props();
+<script lang="ts">
+  import Autocomplete, {
+    type Item,
+  } from "../../simple/forms/Autocomplete.svelte";
+  import type { ComponentProps } from "svelte";
+  import { countriesOptions } from '../../../utils/countries';
+  import FlagIcon from "../../simple/media/FlagIcon.svelte";
+
+  interface Props {
+    autocompleteProps?: Omit<ComponentProps<typeof Autocomplete>, 'items'>;
+    selected?: Item[];
+    items?: Item[];
+    class?: {
+      flagIcon?: string,
+    }
+    onblur?: ComponentProps<typeof Autocomplete>['onblur']
+    onclose?: ComponentProps<typeof Autocomplete>['onclose']
+    onfocus?: ComponentProps<typeof Autocomplete>['onfocus']
+    onkeydown?: ComponentProps<typeof Autocomplete>['onblur']
+    onchange?: ComponentProps<typeof Autocomplete>['onchange']
+  }
+
+  let {
+    autocompleteProps = {},
+    selected = $bindable(),
+    items = countriesOptions,
+    onblur,
+    onchange,
+    onclose,
+    onfocus,
+    onkeydown,
+    class: clazz = {}
+  }: Props = $props();
 </script>
 
 <Autocomplete