@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/simple/common/NoData.svelte

@@ -1,7 +1,21 @@
-<script lang="ts">import '../../../css/main.css';
-import './NoData.css';
-import Icon from "../media/Icon.svelte";
-let { lang = 'en', noItemsText = lang == 'en' ? 'No data available' : 'Nessun dato disponibile', iconName = 'mdi-database-off', class: clazz, } = $props();
+<script lang="ts">
+  import '../../../css/main.css'
+  import './NoData.css'
+  import Icon from "../media/Icon.svelte";
+
+  interface Props {
+    lang?: 'it' | 'en',
+    noItemsText?: string,
+    iconName?: string,
+    class?: string 
+  }
+
+  let {
+    lang = 'en',
+    noItemsText = lang == 'en' ? 'No data available' : 'Nessun dato disponibile',
+    iconName = 'mdi-database-off',
+    class: clazz,
+  }: Props = $props()
 </script>
 
 <div class="no-data-container">

package/dist/components/simple/common/VerticalDraggableList.svelte

@@ -1,31 +1,57 @@
-<script lang="ts" generics="Item extends { id: string, name: string, pinned?: boolean }">import '../../../css/main.css';
-import './VerticalDraggableList.css';
-import { flip } from "svelte/animate";
-import { dndzone } from "svelte-dnd-action";
-import {} from "svelte";
-import { Icon } from "../../..";
-let { items = [], class: clazz = '', itemSnippet, onchangeOrder, } = $props();
-const flipDurationMs = 300;
-let pinnedItems = $derived.by(() => items.filter(item => item.pinned)), internalItems = $derived.by(() => items.filter(item => !item.pinned));
-function handleDndConsider(e) {
-    items = [
-        ...pinnedItems,
-        ...e.detail.items
-    ];
-}
-function handleDndFinalize(e) {
+<script lang="ts" generics="Item extends { id: string, name: string, pinned?: boolean }">
+  import '../../../css/main.css'
+  import './VerticalDraggableList.css'
+  import { flip } from "svelte/animate";
+  import { dndzone, type DndEvent } from "svelte-dnd-action";
+	import { type Snippet } from "svelte"
+  import { Icon } from "../../..";
+
+  interface Props {
+    items?: Item[];
+    class?: string;
+    itemSnippet?: Snippet<[{
+      item: typeof items[number],
+      index: number
+    }]>
+    onchangeOrder?: (event: {
+      detail: {
+        items: typeof items
+      }
+    }) => void
+  }
+
+  let { 
+    items = [],
+    class: clazz = '',
+    itemSnippet,
+    onchangeOrder,
+  }: Props = $props();
+
+  const flipDurationMs = 300;
+
+  let pinnedItems = $derived.by(() => items.filter(item => item.pinned)),
+    internalItems = $derived.by(() => items.filter(item => !item.pinned));
+
+  function handleDndConsider(e: CustomEvent<DndEvent<Item>>) {
     items = [
-        ...pinnedItems,
-        ...e.detail.items
-    ];
-    if (onchangeOrder) {
-        onchangeOrder({
-            detail: {
-                items
-            }
-        });
+      ...pinnedItems,
+      ...e.detail.items
+    ]
+  }
+
+  function handleDndFinalize(e: CustomEvent<DndEvent<Item>>) {
+		items = [
+      ...pinnedItems,
+      ...e.detail.items
+    ]
+    if(onchangeOrder){
+      onchangeOrder({
+        detail: {
+          items
+        }
+      })
     }
-}
+	}
 </script>
 
 {#each pinnedItems as item, index (item.id)}

package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts

@@ -1,26 +1,37 @@
 import '../../../css/main.css';
 import './VerticalDraggableList.css';
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     id: string;
     name: string;
     pinned?: boolean;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         class?: string;
         itemSnippet?: Snippet<[{
             item: Item;
             index: number;
-        }]> | undefined;
-        onchangeOrder?: ((event: {
+        }]>;
+        onchangeOrder?: (event: {
             detail: {
                 items: Item[];
             };
-        }) => void) | undefined;
+        }) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    id: string;
+    name: string;
+    pinned?: boolean;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/simple/dashboards/DashboardGridShaper.svelte

@@ -1,29 +1,35 @@
-<script lang="ts">import Grid from "svelte-grid";
-import gridHelp from "svelte-grid/build/helper/index.mjs";
-const id = () => "_" + Math.random().toString(36).slice(2, 11);
-let items = [
+<script lang="ts">
+  import Grid from "svelte-grid";
+  import gridHelp from "svelte-grid/build/helper/index.mjs";
+
+  const id = () => "_" + Math.random().toString(36).slice(2, 11);
+
+  let items = [
     {
-        6: gridHelp.item({
-            x: 0,
-            y: 0,
-            w: 2,
-            h: 2,
-        }),
-        id: id(),
+      6: gridHelp.item({
+        x: 0,
+        y: 0,
+        w: 2,
+        h: 2,
+      }),
+      id: id(),
     },
+
     {
-        6: gridHelp.item({
-            x: 2,
-            y: 0,
-            w: 2,
-            h: 2,
-        }),
-        id: id(),
+      6: gridHelp.item({
+        x: 2,
+        y: 0,
+        w: 2,
+        h: 2,
+      }),
+      id: id(),
     },
-];
-const breakpoint = 1;
-const column = 6;
-const cols = [[breakpoint, column]];
+  ]
+
+  const breakpoint = 1
+  const column = 6
+
+  const cols = [[breakpoint, column]]
 </script>
 
 <div class=demo-container style:width="100%">

package/dist/components/simple/dates/Calendar.svelte

@@ -1,89 +1,159 @@
-<script lang="ts">import '../../../css/main.css';
-import './Calendar.css';
-import { fly } from "svelte/transition";
-import { dateToDateStat, getDateRowsStats, getDaysNames } from "./utils";
-let { selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(new Date().getMonth()), visibleYear = $bindable(new Date().getFullYear()), locale = "it", showExtraMonthDays = true, showHeader = true, animationDuration = 200, disabled = false, type = 'singleDate', fillOpenRange = false, class: clazz = {}, ondayClick, weekHeaderSnippet, daySnippet, } = $props();
-const today = new Date();
-let hoveredDateStat = $state();
-function handleDayClick(dateStat, extraMonth) {
-    if (disabled)
-        return;
-    const clickedDate = new Date(dateStat.year, dateStat.month, dateStat.dayOfMonth, 0, 0, 0, 0);
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Calendar.css'
+  import { fly } from "svelte/transition";
+  import { dateToDateStat, getDateRowsStats, getDaysNames } from "./utils";
+  import type { DateStat, Locale } from "./utils";
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    selectedDate?: Date;
+    selectedDateTo?: Date;
+    visibleMonth?: number;
+    visibleYear?: number;
+    locale?: Locale;
+    showExtraMonthDays?: boolean;
+    showHeader?: boolean;
+    animationDuration?: number;
+    disabled?: boolean;
+    type?: 'singleDate' | 'dateRange'
+    fillOpenRange?: boolean; 
+    class?: {
+      container?: string,
+      weekHeader?: string,
+      day?: string
+    }
+    ondayClick?: (event: {
+      detail: {
+        dateStat: DateStat;
+        selected: boolean;
+        extraMonth: boolean;
+      }
+    }) => void
+    weekHeaderSnippet?: Snippet<[{
+      header: string,
+      index: number
+    }]>
+    daySnippet?: Snippet<[{
+      dayStat: DateStat,
+      extraMonth: boolean
+      selected: boolean
+    }]>
+  }
+
+  let {
+    selectedDate = $bindable(undefined),
+    selectedDateTo = $bindable(undefined),
+    visibleMonth = $bindable(new Date().getMonth()),
+    visibleYear = $bindable(new Date().getFullYear()),
+    locale = "it",
+    showExtraMonthDays = true,
+    showHeader = true,
+    animationDuration = 200,
+    disabled = false,
+    type = 'singleDate',
+    fillOpenRange = false, 
+    class: clazz = {},
+    ondayClick,
+    weekHeaderSnippet,
+    daySnippet,
+  }: Props = $props();
+
+  const today = new Date()
+  let hoveredDateStat: DateStat | undefined = $state()
+
+  function handleDayClick(dateStat: DateStat, extraMonth: boolean) {
+    if(disabled) return
+
+    const clickedDate = new Date(
+      dateStat.year,
+      dateStat.month,
+      dateStat.dayOfMonth,
+      0,
+      0,
+      0,
+      0
+    );
+
     if (!extraMonth) {
-        if (type == 'dateRange') {
-            if (!selectedDate) {
-                selectedDate = clickedDate;
-            }
-            else {
-                if (!!selectedDateTo) {
-                    selectedDate = clickedDate;
-                    selectedDateTo = undefined;
-                }
-                else if (selectedDate < clickedDate) {
-                    selectedDateTo = clickedDate;
-                }
-                else if (selectedDate > clickedDate) {
-                    selectedDateTo = selectedDate;
-                    selectedDate = clickedDate;
-                }
-            }
-        }
-        else {
-            selectedDate = clickedDate;
+      if(type == 'dateRange') {
+        if(!selectedDate) {
+          selectedDate = clickedDate
+        } else {
+          if (!!selectedDateTo) {
+            selectedDate = clickedDate
+            selectedDateTo = undefined
+          } else if(selectedDate < clickedDate) {
+            selectedDateTo = clickedDate
+          } else if (selectedDate > clickedDate) {
+            selectedDateTo = selectedDate
+            selectedDate = clickedDate
+          }
         }
+      } else {
+        selectedDate = clickedDate
+      }
     }
-    if (ondayClick) {
-        ondayClick({
-            detail: {
-                dateStat,
-                selected: !extraMonth,
-                extraMonth,
-            }
-        });
+
+    if(ondayClick){
+      ondayClick({
+        detail: {
+          dateStat,
+          selected: !extraMonth,
+          extraMonth,
+        }
+      })
     }
-}
-function hoverDateStat(dateStat) {
-    hoveredDateStat = dateStat;
-}
-function isBetweenRange(dateStat) {
-    if (type !== 'dateRange')
-        return false;
+  }
+
+  function hoverDateStat(dateStat?: DateStat) {
+    hoveredDateStat = dateStat
+  }
+
+  function isBetweenRange(dateStat: DateStat): boolean {
+    if (type !== 'dateRange') return false;
+
     const current = new Date(dateStat.year, dateStat.month, dateStat.dayOfMonth);
-    const start = selectedDate
-        ? new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate())
-        : undefined;
-    const end = selectedDateTo
-        ? new Date(selectedDateTo.getFullYear(), selectedDateTo.getMonth(), selectedDateTo.getDate())
-        : undefined;
-    let limitA;
-    let limitB;
+    
+    const start = selectedDate 
+      ? new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) 
+      : undefined;
+    
+    const end = selectedDateTo 
+      ? new Date(selectedDateTo.getFullYear(), selectedDateTo.getMonth(), selectedDateTo.getDate()) 
+      : undefined;
+
+    let limitA: Date | undefined;
+    let limitB: Date | undefined;
+
     if (start && end) {
-        limitA = start;
-        limitB = end;
-    }
+      limitA = start;
+      limitB = end;
+    } 
     else if (start && hoveredDateStat) {
-        limitA = start;
-        limitB = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
-    }
+      limitA = start;
+      limitB = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
+    } 
     else if (end && hoveredDateStat) {
-        limitA = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
-        limitB = end;
+      limitA = new Date(hoveredDateStat.year, hoveredDateStat.month, hoveredDateStat.dayOfMonth);
+      limitB = end;
     }
+
     if (limitA && limitB) {
-        if (limitA.getTime() !== limitB.getTime()) {
-            const min = limitA < limitB ? limitA : limitB;
-            const max = limitA < limitB ? limitB : limitA;
-            return current > min && current < max;
-        }
+      if (limitA.getTime() !== limitB.getTime()) {
+        const min = limitA < limitB ? limitA : limitB;
+        const max = limitA < limitB ? limitB : limitA;
+        return current > min && current < max;
+      }
     }
+
     if (fillOpenRange) {
-        if (start && !end)
-            return current > start;
-        if (!start && end)
-            return current < end;
+      if (start && !end) return current > start;
+      if (!start && end) return current < end;
     }
+
     return false;
-}
+  }
 </script>
 
 <div class="calendar-container {clazz.container || ''}">

package/dist/components/simple/dates/DatePicker.svelte

@@ -1,89 +1,156 @@
-<script lang="ts">import '../../../css/main.css';
-import './DatePicker.css';
-import { getMonthName, dateToString } from "./utils";
-import YearSelector from "./YearSelector.svelte";
-import MonthSelector from "./MonthSelector.svelte";
-import Calendar from "./Calendar.svelte";
-import Button from "../buttons/Button.svelte";
-let { selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), view = "day", locale = "it", selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75)), skipTabs = false, disabled = false, type, fillOpenRange, class: clazz = {}, headerLabelSnippet, onmonthClick, onyearClick, ondayClick, } = $props();
-let visibleSelector = $derived(view == "day" || view == "month");
-let selectorText = $derived(view == "day"
-    ? getMonthName(visibleMonth, locale) + " " + visibleYear
-    : visibleYear.toString());
-let elementDisabled = $derived(view == "year" ? "year" : "date");
-let lastSelectedYear = selectedYear;
-let minSelectableYear = $derived(selectableYears[0]);
-let maxSelectableYear = $derived(selectableYears[selectableYears.length - 1]);
-function next() {
-    if (view == "day") {
-        if (visibleMonth == 11) {
-            if (visibleYear < maxSelectableYear) {
-                visibleMonth = 0;
-                visibleYear += 1;
-            }
-        }
-        else {
-            visibleMonth += 1;
-        }
+<script lang="ts">
+  import '../../../css/main.css'
+  import './DatePicker.css'
+  import { getMonthName, dateToString } from "./utils";
+  import type { Locale } from "./utils";
+  import YearSelector from "./YearSelector.svelte";
+  import MonthSelector from "./MonthSelector.svelte";
+  import Calendar from "./Calendar.svelte";
+  import Button from "../buttons/Button.svelte";
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  interface Props {
+    selectedYear?: number;
+    selectedMonth?: number;
+    selectedDate?: Date;
+    selectedDateTo?: Date;
+    visibleMonth?: number;
+    visibleYear?: number;
+    view?: "year" | "month" | "day";
+    type?: ComponentProps<typeof Calendar>['type']
+    locale?: Locale;
+    selectableYears?: number[];
+    skipTabs?: boolean;
+    disabled?: boolean;
+    fillOpenRange?: boolean
+    class?: {
+      container?: string,
+      header?: string,
+      selectorRow?: string
     }
-    else {
+    headerLabelSnippet?: Snippet<[{
+      dateString?: string
+      dateToString?: string
+    }]>
+    onyearClick?: (event: {
+      detail: {
+        year: number
+      }
+    }) => void
+    onmonthClick?: (event: {
+      detail: {
+        month: number
+      }
+    }) => void
+    ondayClick?: ComponentProps<typeof Calendar>['ondayClick']
+  }
+
+  let {
+    selectedYear = $bindable(new Date().getFullYear()),
+    selectedMonth = $bindable(new Date().getMonth()),
+    selectedDate = $bindable(undefined),
+    selectedDateTo = $bindable(undefined),
+    visibleMonth = $bindable(selectedMonth),
+    visibleYear = $bindable(selectedYear),
+    view = "day",
+    locale = "it",
+    selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75)),
+    skipTabs = false,
+    disabled = false,
+    type,
+    fillOpenRange,
+    class: clazz = {},
+    headerLabelSnippet,
+    onmonthClick,
+    onyearClick,
+    ondayClick,
+  }: Props = $props();
+
+  let visibleSelector = $derived(view == "day" || view == "month");
+  let selectorText =
+    $derived(view == "day"
+      ? getMonthName(visibleMonth, locale) + " " + visibleYear
+      : visibleYear.toString()
+    )
+  let elementDisabled = $derived(view == "year" ? "year" : "date");
+  let lastSelectedYear: number = selectedYear
+
+  let minSelectableYear = $derived(selectableYears[0]);
+  let maxSelectableYear = $derived(selectableYears[selectableYears.length - 1]);
+
+  function next() {
+    if (view == "day") {
+      if (visibleMonth == 11) {
         if (visibleYear < maxSelectableYear) {
-            visibleYear++;
+          visibleMonth = 0;
+          visibleYear += 1;
         }
+      } else {
+        visibleMonth += 1;
+      }
+    } else {
+      if (visibleYear < maxSelectableYear) {
+        visibleYear++;
+      }
     }
-}
-function previous() {
+  }
+
+  function previous() {
     if (view == "day") {
-        if (visibleMonth == 0) {
-            if (visibleYear > minSelectableYear) {
-                visibleMonth = 11;
-                visibleYear -= 1;
-            }
-        }
-        else {
-            visibleMonth -= 1;
-        }
-    }
-    else {
+      if (visibleMonth == 0) {
         if (visibleYear > minSelectableYear) {
-            visibleYear--;
+          visibleMonth = 11;
+          visibleYear -= 1;
         }
+      } else {
+        visibleMonth -= 1;
+      }
+    } else {
+      if (visibleYear > minSelectableYear) {
+        visibleYear--;
+      }
     }
-}
-function SelectorHandler() {
-    if (view == "month")
-        view = "year";
-    else
-        view = "month";
-}
-function handleYearChange() {
-    if (visibleYear == undefined) {
-        visibleYear = lastSelectedYear;
+  }
+
+  function SelectorHandler() {
+    if (view == "month") view = "year";
+    else view = "month";
+  }
+
+  function handleYearChange() {
+    if(visibleYear == undefined) {
+      visibleYear = lastSelectedYear
     }
     else {
-        lastSelectedYear = visibleYear;
+      lastSelectedYear = visibleYear
     }
-    visibleYear = selectedYear;
-    if (onyearClick) {
-        onyearClick({
-            detail: {
-                year: selectedYear
-            }
-        });
+
+    visibleYear = selectedYear
+
+    if(onyearClick){
+      onyearClick({
+        detail: {
+          year: selectedYear
+        }
+      })
     }
+
     view = "month";
-}
-function handleMonthChange() {
-    visibleMonth = selectedMonth;
-    if (onmonthClick) {
-        onmonthClick({
-            detail: {
-                month: selectedMonth
-            }
-        });
+  }
+
+  function handleMonthChange() {
+    visibleMonth = selectedMonth
+
+    if(onmonthClick){
+      onmonthClick({
+        detail: {
+          month: selectedMonth
+        }
+      })
     }
+
     view = "day";
-}
+  }
 </script>
 
 <div