@likable-hair/svelte 4.2.4 → 4.3.0

package/dist/components/simple/navigation/Drawer.svelte

@@ -1,81 +1,142 @@
-<script lang="ts">import '../../../css/main.css';
-import './Drawer.css';
-import Navigator from "./Navigator.svelte";
-import { onMount } from 'svelte';
-import Teleporter from '../../../utils/teleporter';
-import Keyboarder, {} from '../../../utils/keyboarder';
-import { BROWSER } from 'esm-env';
-let { open = $bindable(), position = $bindable("left"), overlay = $bindable(false), closeOnClickOutside = true, items = [], teleportedUid = undefined, _space = undefined, _openingSpeed = undefined, _backgroundColor = undefined, _color = undefined, _overflow = undefined, _borderRadius = undefined, _margin = undefined, _overlaySpeed = undefined, _overlayBackgroundColor = undefined, _overlayOpacity = undefined, onclose, children, onitemClick, } = $props();
-let drawerElement, localOpen = $state(false);
-onMount(() => {
-    if (!teleportedUid) {
-        // let oldCssVars = {
-        //   '--drawer-space': getComputedStyle(drawerElement).getPropertyValue('--drawer-space')
-        // }
-        let tp = new Teleporter();
-        teleportedUid = tp.attachNode(drawerElement);
-        // drawerElement.style.setProperty('--drawer-space', oldCssVars['--drawer-space'])
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Drawer.css'
+  import Navigator from "./Navigator.svelte";
+  import type { Item } from "./Navigator.svelte";
+  import { onMount, type ComponentProps, type Snippet } from 'svelte';
+  import Teleporter from '../../../utils/teleporter';
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+  import { BROWSER } from 'esm-env';
+
+  interface Props {
+    open?: boolean;
+    position?: "left" | "top" | "right" | "bottom";
+    overlay?: boolean;
+    closeOnClickOutside?: boolean;
+    items?: Item[];
+    teleportedUid?: string;
+    _space?: string;
+    _openingSpeed?: string;
+    _backgroundColor?: string;
+    _color?: string;
+    _overflow?: string;
+    _borderRadius?: string;
+    _margin?: string;
+    _overlaySpeed?: string;
+    _overlayBackgroundColor?: string;
+    _overlayOpacity?: string;
+    onclose?: () => void
+    onitemClick?: ComponentProps<typeof Navigator>['onitemClick']
+    children?: Snippet<[]>
+  }
+
+  let {
+    open = $bindable(),
+    position = $bindable("left"),
+    overlay = $bindable(false),
+    closeOnClickOutside = true,
+    items = [],
+    teleportedUid = undefined,
+    _space = undefined,
+    _openingSpeed = undefined,
+    _backgroundColor = undefined,
+    _color = undefined,
+    _overflow = undefined,
+    _borderRadius = undefined,
+    _margin = undefined,
+    _overlaySpeed = undefined,
+    _overlayBackgroundColor = undefined,
+    _overlayOpacity = undefined,
+    onclose,
+    children,
+    onitemClick,
+  }: Props = $props();
+
+  let drawerElement: HTMLElement,
+    localOpen: boolean = $state(false)
+
+  onMount(() => {
+    if(!teleportedUid) {
+      // let oldCssVars = {
+      //   '--drawer-space': getComputedStyle(drawerElement).getPropertyValue('--drawer-space')
+      // }
+
+      let tp = new Teleporter()
+      teleportedUid = tp.attachNode(drawerElement)
+
+      // drawerElement.style.setProperty('--drawer-space', oldCssVars['--drawer-space'])
+    }
+
+    let keyboarderHandler: CallbackFunction = (params) => {
+      if(params.key == 'Escape' && open) closeDrawer()
     }
-    let keyboarderHandler = (params) => {
-        if (params.key == 'Escape' && open)
-            closeDrawer();
-    };
-    Keyboarder.on(keyboarderHandler);
+    Keyboarder.on(keyboarderHandler)
+
     return () => {
-        if (!!teleportedUid) {
-            let tp = new Teleporter();
-            tp.destroyNode(teleportedUid);
-        }
-        Keyboarder.off(keyboarderHandler);
-    };
-});
-function closeDrawer() {
+      if(!!teleportedUid) {
+        let tp = new Teleporter()
+        tp.destroyNode(teleportedUid)
+      }
+
+      Keyboarder.off(keyboarderHandler)
+    }
+  })
+
+  function closeDrawer() {
     open = false;
     overlay = false;
-    if (onclose) {
-        onclose();
-    }
-}
-function handleClickOverlay() {
-    if (closeOnClickOutside) {
-        open = false;
-        overlay = false;
-        if (onclose) {
-            onclose();
-        }
+    if(onclose) {
+      onclose()
     }
-}
-let zIndex = $state(50);
-$effect.pre(() => {
-    if (BROWSER && open && localOpen !== open) {
-        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;
-        }
-        overlay = true;
-        localOpen = true;
+  }
+
+  function handleClickOverlay() {
+    if(closeOnClickOutside) {
+      open = false;
+      overlay = false;
+      if(onclose) {
+        onclose()
+      }
     }
-    else if (BROWSER && !open && localOpen !== open) {
-        localOpen = false;
+  }
+
+  let zIndex: number = $state(50)
+  $effect.pre(() => {
+    if(BROWSER && open && localOpen !== open) {
+      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;
+      }
+
+      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;
+      }
+
+      overlay = true
+      localOpen = true
+    } else if(BROWSER && !open && localOpen !== open) {
+      localOpen = false
     }
-});
+  })
 </script>
 
 <div

package/dist/components/simple/navigation/HeaderMenu.svelte

@@ -1,32 +1,76 @@
-<script lang="ts">import '../../../css/main.css';
-import './HeaderMenu.css';
-import Button from "../buttons/Button.svelte";
-import { Drawer } from '../../..';
-let { openDrawer = $bindable(false), title = "", hideOnScroll = true, initialRemoveShadow = false, color = undefined, mobileMenu = true, zIndex = 25, ondrawerChange, drawerSnippet, appendSnippet, prependSnippet, titleSnippet, onitemClick, } = $props();
-let scrollY = $state(), lastScrollY, visible = $state(true);
-function handleScroll() {
-    if (scrollY) {
-        if (hideOnScroll) {
-            if (scrollY > lastScrollY) {
-                visible = false;
-            }
-            else {
-                visible = true;
-            }
+<script lang="ts">
+  import '../../../css/main.css'
+  import './HeaderMenu.css'
+  import Button from "../buttons/Button.svelte";
+  import { Drawer } from '../../..';
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  interface Props {
+    openDrawer?: boolean
+    title?: string;
+    hideOnScroll?: boolean;
+    initialRemoveShadow?: boolean;
+    color?: string;
+    mobileMenu?: boolean;
+    zIndex?: number;
+    ondrawerChange?: (event: {
+      detail: {
+        opened: boolean
+      }
+    }) => void
+    drawerSnippet?: Snippet<[]>
+    titleSnippet?: Snippet<[]>
+    appendSnippet?: Snippet<[]>
+    prependSnippet?: Snippet<[{
+      toggleDrawer: () => void,
+      openDrawer: boolean
+    }]>
+    onitemClick?: ComponentProps<typeof Drawer>['onitemClick']
+  }
+
+  let {
+    openDrawer = $bindable(false),
+    title = "",
+    hideOnScroll = true,
+    initialRemoveShadow = false,
+    color = undefined,
+    mobileMenu = true,
+    zIndex = 25,
+    ondrawerChange,
+    drawerSnippet,
+    appendSnippet,
+    prependSnippet,
+    titleSnippet,
+    onitemClick,
+  }: Props = $props();
+
+  let scrollY: number | undefined = $state(),
+    lastScrollY: number,
+    visible = $state(true);
+  function handleScroll() {
+    if(scrollY){
+      if (hideOnScroll) {
+        if (scrollY > lastScrollY) {
+          visible = false;
+        } else {
+          visible = true;
         }
-        lastScrollY = scrollY;
+      }
+
+      lastScrollY = scrollY;
     }
-}
-function toggleDrawer() {
+  }
+
+  function toggleDrawer() {
     openDrawer = !openDrawer;
-    if (ondrawerChange) {
-        ondrawerChange({
-            detail: {
-                opened: openDrawer
-            }
-        });
+    if(ondrawerChange) {
+      ondrawerChange({
+        detail: {
+          opened: openDrawer
+        }
+      })
     }
-}
+  }
 </script>
 
 <svelte:window bind:scrollY onscroll={handleScroll} />

package/dist/components/simple/navigation/Navigator.svelte

@@ -1,17 +1,51 @@
-<script module lang="ts">export {};
+<script module lang="ts">
+  export type Item = {
+    title?: string;
+    icon?: string;
+    name: string;
+    url?: string;
+    detail?: object;
+  };
 </script>
 
-<script lang="ts">import Icon from "../media/Icon.svelte";
-let { items = [], color = undefined, vertical = false, variant = 'underlined', textColor = '', hoverTextColor = undefined, space = "20px", onitemClick, } = $props();
-function handleItemClick(item) {
-    if (onitemClick) {
-        onitemClick({
-            detail: {
-                item
-            }
-        });
+<script lang="ts">
+  import Icon from "../media/Icon.svelte"
+  
+  interface Props {
+    items?: Item[];
+    color?: string;
+    vertical?: boolean;
+    variant?: 'standard' | 'underlined';
+    textColor?: string;
+    hoverTextColor?: string;
+    space?: string;
+    onitemClick?: (event: {
+      detail: {
+        item: Item
+      }
+    }) => void
+  }
+
+  let {
+    items = [],
+    color = undefined,
+    vertical = false,
+    variant = 'underlined',
+    textColor = '',
+    hoverTextColor = undefined,
+    space = "20px",
+    onitemClick,
+  }: Props = $props();
+
+  function handleItemClick(item: Item) {
+    if(onitemClick) {
+      onitemClick({
+        detail: {
+          item
+        }
+      })
     }
-}
+  }
 </script>
 
 <div 

package/dist/components/simple/navigation/TabSwitcher.svelte

@@ -1,26 +1,67 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Tab = {
+    name: string;
+    label: string;
+    icon?: string;
+  };
 </script>
 
-<script lang="ts">import { onMount } from "svelte";
-import './TabSwitcher.css';
-import Icon from "../media/Icon.svelte";
-let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, appendSnippet, } = $props();
-let tabButtons = $state({});
-onMount(() => {
-    if (mandatory && !selected && tabs.length > 0)
-        selected = tabs[0].name;
-});
-function handleTabClick(clickedTab, nativeEvent) {
+<script lang="ts">
+  import { onMount, type Snippet } from "svelte";
+  import './TabSwitcher.css'
+  import Icon from "../media/Icon.svelte";
+
+  interface Props {
+    tabs?: Tab[];
+    selected?: string;
+    mandatory?: boolean;
+    class?: {
+      container?: string,
+      tabs?: string,
+      selected?: string,
+      bookmark?: string,
+      guide?: string
+    }
+    ontabClick?: (event: {
+      detail: {
+        nativeEvent: MouseEvent;
+        tab: Tab;
+      }
+    }) => void
+    ontabKeypress?: (event: {
+      detail: {
+        nativeEvent: KeyboardEvent;
+        tab: Tab;
+      }
+    }) => void
+    appendSnippet?: Snippet<[]>
+  }
+
+  let {
+    tabs = [],
+    selected = $bindable(undefined),
+    mandatory = true,
+    class: clazz = {},
+    ontabClick,
+    appendSnippet,
+  }: Props = $props();
+
+  let tabButtons: Record<string, HTMLElement> = $state({});
+  onMount(() => {
+    if (mandatory && !selected && tabs.length > 0) selected = tabs[0].name;
+  });
+
+  function handleTabClick(clickedTab: Tab, nativeEvent: MouseEvent) {
     selected = clickedTab.name;
-    if (ontabClick) {
-        ontabClick({
-            detail: {
-                nativeEvent,
-                tab: clickedTab
-            }
-        });
+    if(ontabClick) {
+      ontabClick({
+        detail: {
+          nativeEvent,
+          tab: clickedTab
+        }
+      })
     }
-}
+  }
 </script>
 
 <div

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -1,14 +1,62 @@
-<script lang="ts">import '../../../css/main.css';
-import './AlertBanner.css';
-let { title, description, disabled = false, class: clazz = {}, onclick: onclickInternal, onkeypress: onkeypressInternal, contentSnippet, titleSnippet, descriptionSnippet, appendSnippet } = $props();
-function onclick(e) {
-    if (!disabled && !!onclickInternal)
-        onclickInternal({ detail: { nativeEvent: e } });
-}
-function onkeypress(e) {
-    if (!disabled && !!onkeypressInternal)
-        onkeypressInternal({ detail: { nativeEvent: e } });
-}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import '../../../css/main.css'
+  import './AlertBanner.css'
+
+  interface Props {
+    title?: string
+    description?: string
+    disabled?: boolean
+    class?: {
+      container?: string,
+      border?: string,
+      body?: string
+    },
+    onclick?: (event:{
+      detail: {
+        nativeEvent: MouseEvent
+      }
+    }) => void,
+    onkeypress?: (event:{
+      detail: {
+        nativeEvent: KeyboardEvent
+      }
+    }) => void,
+    contentSnippet?: Snippet<[{
+      title?: string,
+      description?: string
+    }]>,
+    titleSnippet?: Snippet<[{
+      title: string,
+    }]>,
+    descriptionSnippet?: Snippet<[{
+      description: string
+    }]>,
+    appendSnippet?: Snippet<[{
+      disabled: boolean
+    }]>
+  }
+
+  let {
+    title,
+    description,
+    disabled = false,
+    class: clazz = { },
+    onclick: onclickInternal,
+    onkeypress: onkeypressInternal,
+    contentSnippet,
+    titleSnippet,
+    descriptionSnippet,
+    appendSnippet
+  }: Props = $props()
+
+  function onclick(e: MouseEvent) {
+    if(!disabled && !!onclickInternal) onclickInternal({ detail: { nativeEvent: e }})
+  }
+
+  function onkeypress(e: KeyboardEvent) {
+    if(!disabled && !!onkeypressInternal) onkeypressInternal({ detail: { nativeEvent: e }})
+  }
 </script>
 
 <div 

package/dist/components/simple/progress/ProgressBar.svelte

@@ -1,16 +1,32 @@
-<script lang="ts">import '../../../css/main.css';
-import './ProgressBar.css';
-import ToolTip from '../../composed/common/ToolTip.svelte';
-let { value = 0, total = 100, valueTooltip = false, valueTooltipLabel = undefined, } = $props();
-let activator = $state();
-let hundredBasedProgress = $derived(total === 0 ? 100 : (value * 100) / total);
-let cssVariables = $derived(Object.entries({
+<script lang="ts">
+  import '../../../css/main.css'
+  import './ProgressBar.css'
+  import ToolTip from '../../composed/common/ToolTip.svelte';
+
+  interface Props {
+    value?: number;
+    total?: number;
+    valueTooltip?: boolean;
+    valueTooltipLabel?: string | number;
+  }
+
+  let {
+    value = 0,
+    total = 100,
+    valueTooltip = false,
+    valueTooltipLabel = undefined,
+  }: Props = $props();
+
+  let activator: HTMLElement | undefined = $state()
+
+  let hundredBasedProgress = $derived(total === 0 ? 100 : (value * 100) / total);
+  let cssVariables = $derived(Object.entries({
     "--progress-width": hundredBasedProgress + "%",
-})
+  })
     .filter(([key]) => key.startsWith("--"))
     .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, ""));
+      return `${css}${key}: ${value};`;
+    }, ""))
 </script>
 
 <div

package/dist/components/simple/timeline/SimpleTimeLine.svelte

@@ -1,10 +1,57 @@
-<script module lang="ts">export {};
+<script module lang="ts">
+  export type TimeLineItem<Data = any> = {
+    name: string;
+    title?: string;
+    description?: string;
+    imageUrl?: string;
+    from?: Date;
+    to?: Date;
+    data?: Data;
+  };
 </script>
 
-<script lang="ts" generics="Data">import { dateToString } from "../dates/utils";
-import "../../../css/main.css";
-import "./SimpleTimeLine.css";
-let { items = [], singleSided = false, circleAlignment = "top", circleSnippet, infosAppendSnippet, infosSnippet, itemSnippet, timesSnippet, } = $props();
+<script lang="ts" generics="Data">
+  import { dateToString } from "../dates/utils";
+  import type { Snippet } from "svelte";
+  import "../../../css/main.css";
+  import "./SimpleTimeLine.css";
+
+  type TimeLineItemData = TimeLineItem<Data>
+  interface Props {
+    items: TimeLineItemData[];
+    singleSided?: boolean;
+    circleAlignment?: "top" | "center" | "bottom";
+    itemSnippet?: Snippet<[{
+      item: TimeLineItemData
+      alignment: 'left' | 'right'
+    }]>
+    timesSnippet?: Snippet<[{
+      item: TimeLineItemData
+      dateToString: typeof dateToString
+    }]>
+    infosSnippet?: Snippet<[{
+      item: TimeLineItemData
+      alignment: 'left' | 'right'
+    }]>
+    infosAppendSnippet?: Snippet<[{
+      item: TimeLineItemData
+      alignment: 'left' | 'right'
+    }]>
+    circleSnippet?: Snippet<[{
+      item: TimeLineItemData
+    }]>
+  }
+
+  let {
+    items = [],
+    singleSided = false,
+    circleAlignment = "top",
+    circleSnippet,
+    infosAppendSnippet,
+    infosSnippet,
+    itemSnippet,
+    timesSnippet,
+  }: Props = $props();
 </script>
 
 <div