@likable-hair/svelte 4.2.4 → 4.3.0

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

@@ -34,32 +34,39 @@ export declare function getPeriodLabel<T extends string>(settings: TimespanSetti
     value: string | T;
     label: string;
 }[]): string;
-declare class __sveltets_Render<T extends string = string> {
-    props(): {
-        timespanSettings?: TimespanSettings<T> | undefined;
+declare function $$render<T extends string = string>(): {
+    props: {
+        timespanSettings?: TimespanSettings<T>;
         quickSelectOptions?: {
             value: T;
             label: string;
-        }[] | undefined;
+        }[];
         valid?: boolean;
         mode?: "default" | "datepicker";
         lang?: "it" | "en";
         locale?: "it" | "en";
         showTimeRangeLabel?: boolean;
         isSelectionMode?: boolean;
-        onchange?: ((event: {
-            timespanSettings?: TimespanSettings<T> | undefined;
-        }) => void) | undefined;
-        quickRangeConvertor?: ((value: string) => {
+        onchange?: (event: {
+            timespanSettings?: TimespanSettings<T>;
+        }) => void;
+        quickRangeConvertor?: (value: string) => {
             from?: Date;
             to: Date;
-        } | undefined) | undefined;
-        setTimespanLabel?: ((params: {
+        } | undefined;
+        setTimespanLabel?: (params: {
             timespanSettings: TimespanSettings<T> | undefined;
-        }) => string) | undefined;
+        }) => string;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "timespanSettings" | "valid" | "isSelectionMode";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "timespanSettings" | "valid" | "isSelectionMode";
     exports(): {};
 }

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

@@ -1,46 +1,80 @@
-<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 Chip from "../../simple/navigation/Chip.svelte";
-let { values = $bindable(), items, multiple = true, disabled = false, onchange, } = $props();
-function select(item) {
-    const alreadyPresent = values?.findIndex((i) => i.value === item.value) !== -1;
+<script lang="ts" generics="Data">
+  import '../../../css/main.css'
+  import Chip from "../../simple/navigation/Chip.svelte";
+
+  type ItemData = Item<Data>
+  interface Props {
+    values?: ItemData[];
+    items: ItemData[];
+    multiple?: boolean;
+    disabled?: boolean;
+    onchange?: (event: {
+      detail: {
+        unselect: ItemData | undefined;
+        select: ItemData | undefined;
+        selection: ItemData[];
+      }
+    }) => void
+  }
+
+  let {
+    values = $bindable(),
+    items,
+    multiple = true,
+    disabled = false,
+    onchange,
+  }: Props = $props();
+
+  function select(item: ItemData) {
+    const alreadyPresent =
+      values?.findIndex((i) => i.value === item.value) !== -1;
+
     if (!alreadyPresent) {
-        if (multiple)
-            values = [...(values || []), item];
-        else
-            values = [item];
-        if (onchange) {
-            onchange({
-                detail: {
-                    unselect: undefined,
-                    select: item,
-                    selection: values,
-                }
-            });
-        }
+      if (multiple) values = [...(values || []), item];
+      else values = [item];
+
+      if(onchange) {
+        onchange({
+          detail: {
+            unselect: undefined,
+            select: item,
+            selection: values,
+          }
+        })
+      }
     }
-}
-function unselect(item) {
+  }
+
+  function unselect(item: ItemData) {
     values = values?.filter((i) => i.value != item.value);
-    if (onchange) {
-        onchange({
-            detail: {
-                unselect: item,
-                select: undefined,
-                selection: values || [],
-            }
-        });
+
+    if(onchange) {
+      onchange({
+        detail: {
+          unselect: item,
+          select: undefined,
+          selection: values || [],
+        }
+      })
     }
-}
-function toggle(item) {
-    const alreadyPresent = values?.findIndex((i) => i.value === item.value) !== -1;
-    if (alreadyPresent)
-        unselect(item);
-    else
-        select(item);
-}
+  }
+
+  function toggle(item: ItemData) {
+    const alreadyPresent =
+      values?.findIndex((i) => i.value === item.value) !== -1;
+
+    if (alreadyPresent) unselect(item);
+    else select(item);
+  }
 </script>
 
 <svelte:window />

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

@@ -5,22 +5,29 @@ export type Item<Data = any> = {
     data?: Data;
 };
 import '../../../css/main.css';
-declare class __sveltets_Render<Data> {
-    props(): {
-        values?: Item<Data>[] | undefined;
+declare function $$render<Data>(): {
+    props: {
+        values?: Item<Data>[];
         items: Item<Data>[];
         multiple?: boolean;
         disabled?: boolean;
-        onchange?: ((event: {
+        onchange?: (event: {
             detail: {
                 unselect: Item<Data> | undefined;
                 select: Item<Data> | undefined;
                 selection: Item<Data>[];
             };
-        }) => void) | undefined;
+        }) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "values";
+    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";
     exports(): {};
 }

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

@@ -1,95 +1,167 @@
-<script lang="ts">import IMask, {} from 'imask';
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import { onMount, tick } from 'svelte';
-import { DateTime } from 'luxon';
-import MediaQuery from '../../simple/common/MediaQuery.svelte';
-import Dialog from '../../simple/dialogs/Dialog.svelte';
-import YearSelector from '../../simple/dates/YearSelector.svelte';
-let { menuOpened = $bindable(false), openingId = $bindable('year-picker-text-field'), selectedYear = $bindable(), placeholder, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1900, disabled = false, class: clazz = {}, oninput, onyearClick, appendInnerSnippet, appendSnippet, prependInnerSnippet: prependInnerInternalSnippet, prependSnippet, activatorSnippet, } = $props();
-let activator = $state(), refreshPosition = $state(false), menuElement = $state(), inputElement = $state(), pattern = "yyyy", mask = $state({
-    value: undefined
-}), maskFactoryArgs = {
-    mask: Date,
-    pattern: pattern,
-    format: function (date) {
-        return DateTime.fromJSDate(date).toFormat(pattern);
-    },
-    parse: function (str) {
-        return DateTime.fromFormat(str, pattern).toJSDate();
-    },
-    blocks: {
+<script lang="ts">
+  import IMask, { type InputMask } from 'imask';
+  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+  import Menu from "../../simple/common/Menu.svelte";
+  import Icon from "../../simple/media/Icon.svelte";
+  import { onMount, tick, type ComponentProps, type Snippet } from 'svelte';
+  import { DateTime } from 'luxon'
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+  import YearSelector from '../../simple/dates/YearSelector.svelte';
+
+  interface Props {
+    menuOpened?: boolean;
+    openingId?: string;
+    selectedYear?: number;
+    placeholder?: string;
+    mobileDialog?: boolean;
+    maxYearInRange?: number;
+    minYearInRange?: number;
+    disabled?: boolean;
+    class?: {
+      activator?: string,
+      textfield?: ComponentProps<typeof SimpleTextField>['class']
+    }
+    onyearClick?: (event: {
+      detail: {
+        year: number
+      }
+    }) => void
+    oninput?: (event: {
+      detail: {
+        year: number | undefined
+      }
+    }) => void
+    appendSnippet?: ComponentProps<typeof SimpleTextField>['appendSnippet']
+    appendInnerSnippet?: ComponentProps<typeof SimpleTextField>['appendInnerSnippet']
+    prependSnippet?: ComponentProps<typeof SimpleTextField>['prependSnippet']
+    prependInnerSnippet?: ComponentProps<typeof SimpleTextField>['prependInnerSnippet']
+    activatorSnippet?: Snippet<[{
+      mask: typeof mask,
+      handleTextFieldFocus: typeof handleTextFieldFocus,
+      handleInputChange: typeof handleInputChange,
+      inputElement: typeof inputElement,
+      placeholder: typeof placeholder,
+      disabled: typeof disabled,
+    }]>
+  }
+
+  let {
+    menuOpened = $bindable(false),
+    openingId = $bindable('year-picker-text-field'),
+    selectedYear = $bindable(),
+    placeholder,
+    mobileDialog = true,
+    maxYearInRange = 2100,
+    minYearInRange = 1900,
+    disabled = false,
+    class: clazz = {},
+    oninput,
+    onyearClick,
+    appendInnerSnippet,
+    appendSnippet,
+    prependInnerSnippet: prependInnerInternalSnippet,
+    prependSnippet,
+    activatorSnippet,
+  }: Props = $props();
+
+  let activator: HTMLElement | undefined = $state(),
+    refreshPosition = $state(false),
+    menuElement: HTMLElement | undefined = $state(),
+    inputElement: HTMLElement | undefined = $state(),
+    pattern: string = "yyyy",
+    mask: InputMask<typeof maskFactoryArgs> | { value: string | undefined } = $state({
+      value: undefined
+    }),
+    maskFactoryArgs = {
+      mask: Date,
+      pattern: pattern,
+      format: function (date: any): string {
+        return DateTime.fromJSDate(date).toFormat(pattern)
+      },
+      parse: function (str: string): Date {
+        return DateTime.fromFormat(str, pattern).toJSDate()
+      },
+      blocks: {
         yyyy: {
-            mask: IMask.MaskedRange,
-            from: minYearInRange,
-            to: maxYearInRange
+          mask: IMask.MaskedRange,
+          from: minYearInRange,
+          to: maxYearInRange
         }
+      }
     }
-};
-function handleTextFieldFocus(mobile) {
-    if (!mobile || !mobileDialog) {
-        menuOpened = true;
+
+  function handleTextFieldFocus(mobile: boolean) {
+    if(!mobile || !mobileDialog) {
+      menuOpened = true
     }
-}
-onMount(() => {
-    if (inputElement) {
-        mask = IMask(inputElement, maskFactoryArgs);
+  }
+
+  onMount(() => {
+    if(inputElement){
+      mask = IMask(
+        inputElement, maskFactoryArgs
+      )
     }
-    if (selectedYear !== undefined && selectedYear !== null) {
-        mask.value = selectedYear.toString();
+
+    if(selectedYear !== undefined && selectedYear !== null) {
+      mask.value = selectedYear.toString()
     }
-});
-function handleInputChange(event) {
+  })
+
+  function handleInputChange(event: any) {
     setTimeout(() => {
-        const typedValue = mask.value;
-        if (typedValue !== undefined && typedValue !== null) {
-            // find year
-            const yearIndex = pattern.indexOf('yyyy');
-            const year = typedValue.substring(yearIndex, yearIndex + 4);
-            if (year.length == 4) {
-                selectedYear = Number(year);
-            }
-            else if (year.length == 0) {
-                selectedYear = undefined;
-            }
-            if (oninput) {
-                oninput({
-                    detail: {
-                        year: selectedYear
-                    }
-                });
-            }
+      const typedValue = mask.value
+
+      if(typedValue !== undefined && typedValue !== null) {
+        // find year
+        const yearIndex = pattern.indexOf('yyyy')
+        const year = typedValue.substring(yearIndex, yearIndex + 4)
+        if(year.length == 4) {
+          selectedYear = Number(year)
+        } else if(year.length == 0) {
+          selectedYear = undefined
         }
-    }, 30);
-}
-function handleYearClick(event) {
-    if (onyearClick) {
-        onyearClick({
+
+        if(oninput) {
+          oninput({
             detail: {
-                year: event.detail.year
+              year: selectedYear
             }
-        });
-    }
-}
-function handleYearChange(event) {
-    if (!!selectedYear) {
-        mask.value = selectedYear.toString();
+          })
+        }
+      }
+    }, 30);
+  }
+
+  function handleYearClick(event: Parameters<NonNullable<ComponentProps<typeof YearSelector>['onclick']>>[0]) {
+    if(onyearClick) {
+      onyearClick({
+        detail: {
+          year: event.detail.year
+        }
+      })
     }
-    else {
-        mask.value = '';
+  }
+
+  function handleYearChange(event: Parameters<NonNullable<ComponentProps<typeof YearSelector>['onchange']>>[0]) {
+    if(!!selectedYear) {
+      mask.value = selectedYear.toString()
+    } else {
+      mask.value = ''
     }
-}
-$effect(() => {
-    if (!!selectedYear) {
-        setTimeout(async () => {
-            if (!!selectedYear) {
-                mask.value = selectedYear.toString();
-            }
-            await tick();
-        }, 30);
+  }
+
+  $effect(() => {
+    if(!!selectedYear) {
+      setTimeout(async () => {
+        if(!!selectedYear) {
+          mask.value = selectedYear.toString()
+        }
+        await tick()
+      }, 30);
     }
-});
+  })
 </script>
 
 <MediaQuery>
@@ -154,9 +226,9 @@ $effect(() => {
     {:else}
       <Menu
         {activator}
-        _width={"300px"}
-        _boxShadow={"rgb(var(--global-color-background-300), .5) 0px 2px 4px"}
-        _borderRadius={"5px"}
+        _width="300px"
+        _boxShadow="rgb(var(--global-color-background-300), .5) 0px 2px 4px"
+        _borderRadius="5px"
         bind:open={menuOpened}
         anchor="bottom-center"
         closeOnClickOutside