@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,18 +1,54 @@
-<script lang="ts">import '../../../css/main.css';
-import './MonthSelector.css';
-import { getMonthName } from "./utils";
-import Button from "../buttons/Button.svelte";
-let { selectedMonth = $bindable(undefined), locale = "it", class: clazz = {}, onclick, selectorSnippet, labelSnippet, } = $props();
-function handleMonthClick(monthIndex) {
+<script lang="ts">
+  import '../../../css/main.css'
+  import './MonthSelector.css'
+  import type { Locale } from "./utils";
+  import { getMonthName } from "./utils";
+  import Button from "../buttons/Button.svelte";
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    selectedMonth?: number | undefined;
+    locale?: Locale
+    class?: {
+      buttons?: string,
+      container?: string,
+    }
+    onclick?: (event: {
+      detail: {
+        monthIndex: number
+      }
+    }) => void
+    selectorSnippet?: Snippet<[{
+      month: number,
+      monthName: string
+    }]>
+    labelSnippet?: Snippet<[{
+      month: number,
+      monthName: string
+    }]>
+  }
+
+  let {
+    selectedMonth = $bindable(undefined),
+    locale = "it",
+    class: clazz = {},
+    onclick,
+    selectorSnippet,
+    labelSnippet,
+  }: Props = $props();
+
+
+  function handleMonthClick(monthIndex: number) {
     selectedMonth = monthIndex;
-    if (onclick) {
-        onclick({
-            detail: {
-                monthIndex
-            }
-        });
+
+    if(onclick){
+      onclick({
+        detail: {
+          monthIndex
+        }
+      })
     }
-}
+  }
 </script>
 
 <div class="selector-container {clazz.container || ''}">

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

@@ -1,37 +1,80 @@
-<script lang="ts">import '../../../css/main.css';
-import './YearSelector.css';
-import { scrollAtCenter } from "../common/scroller";
-import { onMount } from "svelte";
-let { selectedYear = $bindable(undefined), selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75)), disabled = false, class: clazz = '', onchange, onclick, selectorSnippet, labelSnippet, } = $props();
-let container, targetButtons = {};
-onMount(() => {
+<script lang="ts">
+  import '../../../css/main.css'
+  import './YearSelector.css'
+  import { scrollAtCenter } from "../common/scroller";
+  import { onMount, type Snippet } from "svelte";
+
+  interface Props {
+    selectedYear?: number;
+    selectableYears?: number[];
+    disabled?: boolean;
+    
+    class?: string
+    onclick?: (event: {
+      detail: {
+        year: number
+      }
+    }) => void
+    onchange?: (event: {
+      detail: {
+        year: number | undefined
+      }
+    }) => void
+    selectorSnippet?: Snippet<[{
+      year: number,
+      handleYearClick: (year: number) => void
+    }]>
+    labelSnippet?: Snippet<[{
+      year: number,
+    }]>
+  }
+
+  let {
+    selectedYear = $bindable(undefined),
+    selectableYears = [...Array(150).keys()].map(
+      (i) => i + (new Date().getFullYear() - 75)
+    ),
+    disabled = false,
+    class: clazz = '',
+    onchange,
+    onclick,
+    selectorSnippet,
+    labelSnippet,
+  }: Props = $props();
+
+  let container: HTMLElement,
+    targetButtons: { [k: string]: HTMLElement } = {};
+
+  onMount(() => {
     if (selectedYear)
-        scrollAtCenter(container, targetButtons[selectedYear], "auto");
-});
-function handleYearClick(year) {
-    if (selectedYear === year) {
-        selectedYear = undefined;
-    }
-    else {
-        selectedYear = year;
-        scrollAtCenter(container, targetButtons[selectedYear], "smooth");
+      scrollAtCenter(container, targetButtons[selectedYear], "auto");
+  });
+
+  function handleYearClick(year: number) {
+    if(selectedYear === year) {
+      selectedYear = undefined
+    } else {
+      selectedYear = year;
+      scrollAtCenter(container, targetButtons[selectedYear], "smooth");
     }
-    if (onclick) {
-        onclick({
-            detail: {
-                year
-            }
-        });
+
+    if(onclick){
+      onclick({
+        detail: {
+          year
+        }
+      })
     }
-    if (onchange) {
-        onchange({
-            detail: {
-                year: selectedYear
-            }
-        });
+
+    if(onchange){
+      onchange({
+        detail: {
+          year: selectedYear
+        }
+      })
     }
-}
-import Button from "../buttons/Button.svelte";
+  }
+  import Button from "../buttons/Button.svelte";
 </script>
 
 <div bind:this={container} class="selector-container {clazz || ''}">

package/dist/components/simple/dialogs/Dialog.svelte

@@ -1,72 +1,122 @@
-<script lang="ts">import Teleporter from '../../../utils/teleporter';
-import { BROWSER } from 'esm-env';
-import { onMount } from "svelte";
-import Keyboarder, {} from '../../../utils/keyboarder';
-let { open = $bindable(), persistent = false, transition = 'fly-up', _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter, _transitionTimingFunction = 'cubic-bezier(0.075, 0.82, 0.165, 1)', _transitionDuration = '0.5s', topRightSnippet, centerLeftSnippet, centerRightSnippet, children, } = $props();
-let zIndex = $state(50), localOpen = $state(open || false), dialogElement, teleportedUid = undefined, hasBeenOpened = $state(false);
-onMount(() => {
-    if (!teleportedUid) {
-        let tp = new Teleporter();
-        teleportedUid = tp.attachNode(dialogElement);
+<script lang="ts">
+  import Teleporter from '../../../utils/teleporter';
+  import { BROWSER } from 'esm-env';
+  import { onMount, type Snippet } from "svelte";
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+
+  interface Props {
+    open?: boolean;
+    persistent?: boolean;
+    transition?: 'fly-down' | 'fly-up' | 'fly-horizontal' | 'scale' | 'fade';
+    _overlayOpacity?: string;
+    _overlayColor?: string;
+    _overlayBackdropFilter?: string;
+    _transitionTimingFunction?: string;
+    _transitionDuration?: string;
+    topRightSnippet?: Snippet<[]>;
+    centerLeftSnippet?: Snippet<[]>;
+    centerRightSnippet?: Snippet<[]>;
+    children?: Snippet<[]>;
+  }
+
+  let {
+    open = $bindable(),
+    persistent = false,
+    transition = 'fly-up',
+    _overlayOpacity = "30%",
+    _overlayColor = "#282828",
+    _overlayBackdropFilter,
+    _transitionTimingFunction = 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+    _transitionDuration = '0.5s',
+    topRightSnippet,
+    centerLeftSnippet,
+    centerRightSnippet,
+    children,
+  }: Props = $props()
+
+
+  let zIndex = $state(50),
+    localOpen: boolean = $state(open || false),
+    dialogElement: HTMLElement,
+    teleportedUid: string | undefined = undefined,
+    hasBeenOpened: boolean = $state(false);
+
+  onMount(() => {
+    if(!teleportedUid) {
+      let tp = new Teleporter()
+      teleportedUid = tp.attachNode(dialogElement)
     }
-    let keyboarderHandler = (params) => {
-        if (params.key == 'Escape' && localOpen)
-            closeDialog();
-    };
-    Keyboarder.on(keyboarderHandler);
+
+    let keyboarderHandler: CallbackFunction = (params) => {
+      if(params.key == 'Escape' && localOpen) closeDialog()
+    }
+    Keyboarder.on(keyboarderHandler)
+
     return () => {
-        if (!!teleportedUid) {
-            let tp = new Teleporter();
-            tp.destroyNode(teleportedUid);
-        }
-        Keyboarder.off(keyboarderHandler);
-    };
-});
-$effect.pre(() => {
+      if(!!teleportedUid) {
+        let tp = new Teleporter()
+        tp.destroyNode(teleportedUid)
+      }
+
+      Keyboarder.off(keyboarderHandler)
+    }
+  })
+
+  $effect.pre(() => {
     if (BROWSER) {
-        if (open && localOpen != open) {
-            hasBeenOpened = true;
-            let otherDialogs = document.querySelectorAll("[data-dialog=true]");
-            let maxZIndex = 0;
-            if (otherDialogs.length > 0) {
-                otherDialogs.forEach((dialog) => {
-                    let computedStyle = getComputedStyle(dialog);
-                    let currentZIndex = computedStyle.getPropertyValue('--dialog-z-index');
-                    if (!maxZIndex || maxZIndex < Number(currentZIndex))
-                        maxZIndex = Number(currentZIndex);
-                });
-                zIndex = maxZIndex + 2;
-            }
-            let otherDrawers = document.querySelectorAll("[data-drawer=true]");
-            if (otherDrawers.length > 0) {
-                otherDrawers.forEach((dialog) => {
-                    let computedStyle = getComputedStyle(dialog);
-                    let currentZIndex = computedStyle.getPropertyValue('--drawer-z-index');
-                    if (!maxZIndex || maxZIndex < Number(currentZIndex))
-                        maxZIndex = Number(currentZIndex);
-                });
-                zIndex = maxZIndex + 2;
-            }
-            document.body.style.overflow = "hidden";
+      if (open && localOpen != open) {
+        hasBeenOpened = true
+
+        let otherDialogs: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-dialog=true]");
+
+        let maxZIndex = 0;
+
+        if (otherDialogs.length > 0) {
+          otherDialogs.forEach((dialog) => {
+            let computedStyle = getComputedStyle(dialog)
+            let currentZIndex = computedStyle.getPropertyValue('--dialog-z-index')
+            if (!maxZIndex || maxZIndex < Number(currentZIndex))
+              maxZIndex = Number(currentZIndex);
+          });
+          zIndex = maxZIndex + 2;
         }
-        else if (!open) {
-            let otherDialogs = document.querySelectorAll("[data-dialog=true]");
-            if (otherDialogs.length <= 1) {
-                document.body.style.overflow = "auto";
-            }
+
+        let otherDrawers: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-drawer=true]");
+
+        if (otherDrawers.length > 0) {
+          otherDrawers.forEach((dialog) => {
+            let computedStyle = getComputedStyle(dialog)
+            let currentZIndex = computedStyle.getPropertyValue('--drawer-z-index')
+            if (!maxZIndex || maxZIndex < Number(currentZIndex))
+              maxZIndex = Number(currentZIndex);
+          });
+          zIndex = maxZIndex + 2;
+        }
+
+        document.body.style.overflow = "hidden";
+      } else if (!open) {
+        let otherDialogs: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-dialog=true]");
+        if (otherDialogs.length <= 1) {
+          document.body.style.overflow = "auto";
         }
+      }
     }
+
     localOpen = open || false;
-});
-function closeDialog() {
+  });
+
+  function closeDialog() {
     open = false;
     localOpen = false;
-}
-function handleOverlayClick() {
-    if (persistent)
-        return;
+  }
+
+  function handleOverlayClick() {
+    if(persistent) return;
     closeDialog();
-}
+  }
 </script>
 
 <div