@likable-hair/svelte 4.2.4 → 4.3.0

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

@@ -1,191 +1,296 @@
-<script lang="ts">import IMask, {} from 'imask';
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePicker from "../../simple/dates/DatePicker.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';
-let { menuOpened = $bindable(), openingId = $bindable(), pattern = "dd/MM/yyyy", selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(), selectedDateTo = $bindable(), type, visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), placeholder, placeholderTo, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false, flipOnOverflow = true, class: clazz = {}, ondayClick, oninput, activatorSnippet, appendInnerSnippet, appendSnippet, prependInnerSnippet: prependInnerInternalSnippet, prependSnippet, } = $props();
-let activator = $state(), refreshPosition = $state(false), menuElement = $state(), inputElement = $state(), inputElementTo = $state(), mask = $state({
-    value: undefined
-}), maskTo = $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 DatePicker from "../../simple/dates/DatePicker.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 type { DateStat } from '../../simple/dates/utils';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+
+  interface Props {
+    menuOpened?: boolean;
+    openingId?: string;
+    pattern?: string;
+    selectedMonth?: number;
+    selectedYear?: number;
+    visibleMonth?: number;
+    visibleYear?: number;
+    selectedDate?: Date;
+    selectedDateTo?: Date;
+    type?: ComponentProps<typeof DatePicker>['type']
+    placeholder?: string;
+    placeholderTo?: string;
+    mobileDialog?: boolean;
+    maxYearInRange?: number;
+    minYearInRange?: number;
+    disabled?: boolean;
+    flipOnOverflow?: boolean;
+    class?: {
+      activator?: string,
+      textfield?: ComponentProps<typeof SimpleTextField>['class']
+    }
+    ondayClick?: (event: {
+      detail: {
+        dateStat: DateStat
+      }
+    }) => void
+    oninput?: (event: {
+      detail: {
+        datetime: Date | undefined,
+        type: 'from' | 'to'
+      }
+    }) => void
+    activatorSnippet?: Snippet<[{
+      mask: typeof mask
+      handleTextFieldFocus: typeof handleTextFieldFocus
+      handleInputChange: typeof handleInputChange
+      inputElement: HTMLElement | undefined
+      placeholder: string | undefined
+      disabled: boolean
+    }]>
+    appendSnippet?: ComponentProps<typeof SimpleTextField>['appendSnippet']
+    appendInnerSnippet?: ComponentProps<typeof SimpleTextField>['appendInnerSnippet']
+    prependSnippet?: ComponentProps<typeof SimpleTextField>['prependSnippet']
+    prependInnerSnippet?: ComponentProps<typeof SimpleTextField>['prependInnerSnippet']
+  }
+
+  let {
+    menuOpened = $bindable(),
+    openingId = $bindable(),
+    pattern = "dd/MM/yyyy",
+    selectedYear = $bindable(new Date().getFullYear()),
+    selectedMonth = $bindable(new Date().getMonth()),
+    selectedDate = $bindable(),
+    selectedDateTo = $bindable(),
+    type,
+    visibleMonth = $bindable(selectedMonth),
+    visibleYear = $bindable(selectedYear),
+    placeholder,
+    placeholderTo,
+    mobileDialog = true,
+    maxYearInRange = 2100,
+    minYearInRange = 1970,
+    disabled = false,
+    flipOnOverflow = true,
+    class: clazz = {},
+    ondayClick,
+    oninput,
+    activatorSnippet,
+    appendInnerSnippet,
+    appendSnippet,
+    prependInnerSnippet: prependInnerInternalSnippet,
+    prependSnippet,
+  }: Props = $props();
+
+
+  let activator: HTMLElement | undefined = $state(),
+    refreshPosition = $state(false),
+    menuElement: HTMLElement | undefined = $state(),
+    inputElement: HTMLElement | undefined = $state(),
+    inputElementTo: HTMLElement | undefined = $state(),
+    mask: InputMask<typeof maskFactoryArgs> | { value: string | undefined } = $state({
+      value: undefined
+    }),
+    maskTo: 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
         },
         MM: {
-            mask: IMask.MaskedRange,
-            from: 1,
-            to: 12
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 12
         },
         dd: {
-            mask: IMask.MaskedRange,
-            from: 1,
-            to: 31
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 31
         },
         HH: {
-            mask: IMask.MaskedRange,
-            from: 0,
-            to: 23
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 23
         },
         mm: {
-            mask: IMask.MaskedRange,
-            from: 0,
-            to: 59
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 59
         }
+      }
     }
-};
-let selectableYears = $derived.by(() => {
+
+  let selectableYears = $derived.by(() => {
     const range = maxYearInRange - minYearInRange + 1;
     return Array.from({ length: range }, (_, i) => minYearInRange + i);
-});
-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 (inputElementTo) {
-        maskTo = IMask(inputElementTo, maskFactoryArgs);
+
+    if(inputElementTo){
+      maskTo = IMask(
+        inputElementTo, maskFactoryArgs
+      )
     }
-    if (!!selectedDate) {
-        mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+
+    if(!!selectedDate) {
+      mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
     }
-    if (!!selectedDateTo) {
-        maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern);
+
+    if(!!selectedDateTo) {
+      maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern)
     }
-});
-$effect(() => {
-    if (!selectedDate) {
-        mask.value = "";
+  })
+
+  $effect(() => {
+    if(!selectedDate) {
+      mask.value = ""
     }
-});
-$effect(() => {
-    if (!selectedDateTo) {
-        maskTo.value = "";
+  })
+
+  $effect(() => {
+    if(!selectedDateTo) {
+      maskTo.value = ""
     }
-});
-function handleInputChange(e) {
+  })
+
+  function handleInputChange(e: Parameters<NonNullable<ComponentProps<typeof SimpleTextField>['onkeydown']>>[0]) {
     // @ts-ignore
-    const id = e.target?.id;
+    const id = e.target?.id as string
     setTimeout(() => {
-        // @ts-ignore
-        const typedValue = e.target?.value;
-        if (typedValue !== undefined && typedValue !== null) {
-            // find day of month
-            const dayOfMonthIndex = pattern.indexOf('dd');
-            const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
-            // find month
-            const monthIndex = pattern.indexOf('MM');
-            const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2);
-            if (oneBasedMonth.length == 2) {
-                selectedMonth = Number(oneBasedMonth) - 1;
-                visibleMonth = selectedMonth;
-            }
-            // find year
-            const yearIndex = pattern.indexOf('yyyy');
-            const year = typedValue.substring(yearIndex, yearIndex + 4);
-            if (year.length == 4) {
-                selectedYear = Number(year);
-                visibleYear = selectedYear;
-            }
-            if (typedValue.length == pattern.length) {
-                if (id == 'from') {
-                    selectedDate = DateTime.fromObject({
-                        day: Number(dayOfMonth),
-                        month: Number(oneBasedMonth),
-                        year: Number(year)
-                    }).toJSDate();
-                }
-                else if (id == 'to') {
-                    selectedDateTo = DateTime.fromObject({
-                        day: Number(dayOfMonth),
-                        month: Number(oneBasedMonth),
-                        year: Number(year)
-                    }).toJSDate();
-                }
-            }
-            else {
-                if (id == 'from') {
-                    if (selectedDate)
-                        selectedDate = undefined;
-                }
-                else if (id == 'to') {
-                    if (selectedDateTo)
-                        selectedDateTo = undefined;
-                }
-            }
-            if (oninput && (id == 'to' || id == 'from')) {
-                oninput({
-                    detail: {
-                        datetime: id == "to" ? selectedDateTo : selectedDate,
-                        type: id,
-                    }
-                });
+      // @ts-ignore
+      const typedValue = e.target?.value as string
+
+      if(typedValue !== undefined && typedValue !== null) {
+        // find day of month
+        const dayOfMonthIndex = pattern.indexOf('dd')
+        const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2)
+
+        // find month
+        const monthIndex = pattern.indexOf('MM')
+        const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2)
+        if(oneBasedMonth.length == 2) {
+          selectedMonth = Number(oneBasedMonth) - 1
+          visibleMonth = selectedMonth
+        }
+
+        // find year
+        const yearIndex = pattern.indexOf('yyyy')
+        const year = typedValue.substring(yearIndex, yearIndex + 4)
+        if(year.length == 4) {
+          selectedYear = Number(year)
+          visibleYear = selectedYear
+        }
+
+        if(typedValue.length == pattern.length) {
+          if(id == 'from') {
+            selectedDate = DateTime.fromObject({
+              day: Number(dayOfMonth),
+              month: Number(oneBasedMonth),
+              year: Number(year)
+            }).toJSDate()
+          } else if (id == 'to') {
+            selectedDateTo = DateTime.fromObject({
+              day: Number(dayOfMonth),
+              month: Number(oneBasedMonth),
+              year: Number(year)
+            }).toJSDate()
+          }
+        } else {
+          if(id == 'from') {
+            if(selectedDate) selectedDate = undefined
+          } else if (id == 'to') {
+            if(selectedDateTo) selectedDateTo = undefined
+          }
+        }
+
+        if(oninput && (id == 'to' || id == 'from')) {
+          oninput({
+            detail: {
+              datetime: id == "to" ? selectedDateTo : selectedDate,
+              type: id,
             }
+          })
         }
+      }
     }, 30);
-}
-function handleDateSelect(event) {
-    if (!!selectedDate) {
-        mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+  }
+
+  function handleDateSelect(event: Parameters<NonNullable<ComponentProps<typeof DatePicker>['ondayClick']>>[0]) {
+    if(!!selectedDate) {
+      mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
     }
-    if (!!selectedDateTo) {
-        maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern);
+
+    if(!!selectedDateTo) {
+      maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern)
     }
-    if (ondayClick) {
-        ondayClick({
-            detail: {
-                dateStat: event.detail.dateStat
-            }
-        });
+
+    if(ondayClick) {
+      ondayClick({
+        detail: {
+          dateStat: event.detail.dateStat
+        }
+      })
     }
-}
-function handleYearSelect() {
-    mask.value = '';
-    maskTo.value = '';
-}
-function handleMonthSelect() {
-    mask.value = '';
-    maskTo.value = '';
-}
-$effect(() => {
-    if (!!selectedDate) {
-        setTimeout(async () => {
-            if (!!selectedDate) {
-                mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
-            }
-            await tick();
-        }, 30);
+  }
+
+  function handleYearSelect() {
+    mask.value = ''
+    maskTo.value = ''
+  }
+
+  function handleMonthSelect() {
+    mask.value = ''
+    maskTo.value = ''
+  }
+
+  $effect(() => {
+    if(!!selectedDate) {
+      setTimeout(async () => {
+        if(!!selectedDate) {
+          mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
+        }
+        await tick()
+      }, 30);
     }
-});
-$effect(() => {
-    if (!!selectedDateTo) {
-        setTimeout(async () => {
-            if (!!selectedDateTo) {
-                maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern);
-            }
-            await tick();
-        }, 30);
+  })
+
+  $effect(() => {
+    if(!!selectedDateTo) {
+      setTimeout(async () => {
+        if(!!selectedDateTo) {
+          maskTo.value = DateTime.fromJSDate(selectedDateTo).toFormat(pattern)
+        }
+        await tick()
+      }, 30);
     }
-});
+  })
 </script>
 
 <MediaQuery>
@@ -263,9 +368,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

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

@@ -1,26 +1,93 @@
-<script lang="ts" generics="Data">import lodash from "lodash";
-import Autocomplete, {} from "../../../components/simple/forms/Autocomplete.svelte";
-import Button from '../../simple/buttons/Button.svelte';
-import Icon from '../../simple/media/Icon.svelte';
-let { items = [], values = $bindable([]), multiple = false, lang = 'en', searchText = $bindable(), maxVisibleChips, placeholder = lang === 'en' ? "Select" : "Seleziona", clearable = true, mandatory = true, icon, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, height, minWidth = 'none', menuWidth = width, mobileDrawer = false, disabled = false, onchange, itemLabelSnippet, labelSnippet, } = $props();
-let generatedLabel = $derived(values.length == 1 ? values[0].label : `${values.length} Selezionati`);
-function handleCloseClick(event) {
-    if (event) {
-        event.preventDefault();
-        event.stopPropagation();
+<script lang="ts" generics="Data">
+  import lodash from "lodash";
+  import Autocomplete, { type Item } from "../../../components/simple/forms/Autocomplete.svelte";
+  import Button from '../../simple/buttons/Button.svelte'
+  import Icon from '../../simple/media/Icon.svelte'
+  import type { ComponentProps, Snippet } from "svelte";
+
+  type ItemData = Item<Data>
+  interface Props {
+    items?: ItemData[];
+    values?: ItemData[];
+    multiple?: boolean;
+    lang?: 'it' | 'en';
+    searchText?: string;
+    maxVisibleChips?: number;
+    placeholder?: string;
+    clearable?: boolean;
+    mandatory?: boolean;
+    icon?: string;
+    menuOpened?: boolean;
+    openingId?: string;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    menuWidth?: string;
+    mobileDrawer?: boolean;
+    disabled?: boolean;
+    onchange?: (event: {
+      detail: {
+        unselect: ItemData | undefined;
+        select: ItemData | undefined;
+        selection: ItemData[];
+      }
+    }) => void
+    itemLabelSnippet?: ComponentProps<typeof Autocomplete<Data>>['itemLabelSnippet']
+    labelSnippet?: Snippet<[{
+      values: typeof values,
+      items: typeof items,
+      searchText: typeof searchText,
+      generatedLabel: typeof generatedLabel,
+      placeholder: typeof placeholder,
+      clearable: typeof clearable,
+      handleCloseClick: typeof handleCloseClick,
+    }]>
+  }
+
+  let {
+    items = [],
+    values = $bindable([]),
+    multiple = false,
+    lang = 'en',
+    searchText = $bindable(),
+    maxVisibleChips,
+    placeholder = lang === 'en' ? "Select" : "Seleziona",
+    clearable = true,
+    mandatory = true,
+    icon,
+    menuOpened = $bindable(false),
+    openingId = $bindable("autocomplete-menu"),
+    width,
+    height,
+    minWidth = 'none',
+    menuWidth = width,
+    mobileDrawer = false,
+    disabled = false,
+    onchange,
+    itemLabelSnippet,
+    labelSnippet,
+  }: Props = $props();
+
+  let generatedLabel = $derived(values.length == 1 ? values[0].label : `${values.length} Selezionati`)
+
+  function handleCloseClick(event: Parameters<NonNullable<ComponentProps<typeof Icon>['onclick']>>[0]) {
+    if(event){
+      event.preventDefault()
+      event.stopPropagation()
     }
-    let valuesBefore = lodash.cloneDeep(values);
-    values = [];
-    if (onchange) {
-        onchange({
-            detail: {
-                unselect: valuesBefore[0],
-                select: undefined,
-                selection: []
-            }
-        });
+    let valuesBefore = lodash.cloneDeep(values)
+    values = []
+
+    if(onchange){
+      onchange({
+        detail: {
+          unselect: valuesBefore[0],
+          select: undefined,
+          selection: []
+        }
+      })
     }
-}
+  }
 </script>
 
 <Autocomplete
@@ -52,7 +119,7 @@ function handleCloseClick(event) {
           event.detail.nativeEvent.preventDefault()
         }
       }}
-      --button-padding="var(--dropdown-button-padding, 10px 12px)"
+      --button-padding="var(--dropdown-button-padding, 6px 8px)"
       --button-border='var(--dropdown-button-border, none)'
       --button-background-color='var(--dropdown-button-background-color, rgb(var(--global-color-background-300), .6))'
       --button-hover-background-color='var(--dropdown-button-hover-color, rgb(var(--global-color-background-300), .6))'

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

@@ -1,10 +1,10 @@
-import { type Item } from "../../../components/simple/forms/Autocomplete.svelte";
+import Autocomplete, { type Item } from "../../../components/simple/forms/Autocomplete.svelte";
 import Icon from '../../simple/media/Icon.svelte';
 import type { ComponentProps, Snippet } from "svelte";
-declare class __sveltets_Render<Data> {
-    props(): {
-        items?: Item<Data>[] | undefined;
-        values?: Item<Data>[] | undefined;
+declare function $$render<Data>(): {
+    props: {
+        items?: Item<Data>[];
+        values?: Item<Data>[];
         multiple?: boolean;
         lang?: "it" | "en";
         searchText?: string;
@@ -21,16 +21,14 @@ declare class __sveltets_Render<Data> {
         menuWidth?: string;
         mobileDrawer?: boolean;
         disabled?: boolean;
-        onchange?: ((event: {
+        onchange?: (event: {
             detail: {
                 unselect: Item<Data> | undefined;
                 select: Item<Data> | undefined;
                 selection: Item<Data>[];
             };
-        }) => void) | undefined;
-        itemLabelSnippet?: Snippet<[{
-            item: Item<Data>;
-        }]> | undefined;
+        }) => void;
+        itemLabelSnippet?: ComponentProps<typeof Autocomplete<Data>>["itemLabelSnippet"];
         labelSnippet?: Snippet<[{
             values: Item<Data>[];
             items: Item<Data>[];
@@ -39,10 +37,17 @@ declare class __sveltets_Render<Data> {
             placeholder: string;
             clearable: boolean;
             handleCloseClick: (event: Parameters<NonNullable<ComponentProps<typeof Icon>["onclick"]>>[0]) => void;
-        }]> | undefined;
+        }]>;
     };
-    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(): {};
 }