@likable-hair/svelte 4.2.5 → 4.3.0

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

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

@@ -11,33 +11,40 @@ import { dateToString } from "../dates/utils";
 import type { Snippet } from "svelte";
 import "../../../css/main.css";
 import "./SimpleTimeLine.css";
-declare class __sveltets_Render<Data> {
-    props(): {
+declare function $$render<Data>(): {
+    props: {
         items: TimeLineItem<Data>[];
         singleSided?: boolean;
         circleAlignment?: "top" | "center" | "bottom";
         itemSnippet?: Snippet<[{
             item: TimeLineItem<Data>;
             alignment: "left" | "right";
-        }]> | undefined;
+        }]>;
         timesSnippet?: Snippet<[{
             item: TimeLineItem<Data>;
             dateToString: typeof dateToString;
-        }]> | undefined;
+        }]>;
         infosSnippet?: Snippet<[{
             item: TimeLineItem<Data>;
             alignment: "left" | "right";
-        }]> | undefined;
+        }]>;
         infosAppendSnippet?: Snippet<[{
             item: TimeLineItem<Data>;
             alignment: "left" | "right";
-        }]> | undefined;
+        }]>;
         circleSnippet?: Snippet<[{
             item: TimeLineItem<Data>;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    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(): "";
     exports(): {};
 }

package/dist/components/simple/typography/Code.svelte

@@ -1,15 +1,44 @@
-<script lang="ts">import { onMount } from "svelte";
-import hljs from 'highlight.js';
-import hljsSvelte from 'highlightjs-svelte';
-import 'highlight.js/styles/github.css';
-import './dracula.css';
-import lodash from 'lodash';
-let { codeBackgroundColor = "rgb(24 24 27/1)", headerBackgroundColor = "rgb(39 39 42/1)", dividerColor = "rgb(63 63 70)", borderRadius = ".5rem", headerPadding = "1rem 1rem", codePadding = "0rem 1rem", color = "white", boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", code, title = undefined, language = 'javascript', } = $props();
-let codeElement;
-onMount(() => {
-    hljsSvelte(hljs);
-    hljs.highlightElement(codeElement);
-});
+<script lang="ts">
+  import { onMount } from "svelte";
+  import hljs from 'highlight.js';
+  import hljsSvelte from 'highlightjs-svelte';
+  import 'highlight.js/styles/github.css';
+  import './dracula.css'
+  import lodash from 'lodash'
+
+  interface Props {
+    codeBackgroundColor?: string;
+    headerBackgroundColor?: string;
+    dividerColor?: string;
+    borderRadius?: string;
+    headerPadding?: string;
+    codePadding?: string;
+    color?: string;
+    boxShadow?: string;
+    code: string;
+    title?: string;
+    language?: 'javascript' | 'bash' | 'html' | 'svelte' | 'typescript' | 'css';
+  }
+
+  let {
+    codeBackgroundColor = "rgb(24 24 27/1)",
+    headerBackgroundColor = "rgb(39 39 42/1)",
+    dividerColor = "rgb(63 63 70)",
+    borderRadius = ".5rem",
+    headerPadding = "1rem 1rem",
+    codePadding = "0rem 1rem",
+    color = "white",
+    boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    code,
+    title = undefined,
+    language = 'javascript',
+  }: Props = $props();
+
+  let codeElement: HTMLElement
+  onMount(() => {
+    hljsSvelte(hljs)
+    hljs.highlightElement(codeElement)
+  })
 </script>
 
 <div 

package/dist/stores/layouts/unstableSidebarOpened.d.ts

@@ -1 +1 @@
-export declare let sidebarOpened: import("svelte/store").Writable<boolean>;
+export declare const sidebarOpened: import("svelte/store").Writable<boolean>;

package/dist/stores/layouts/unstableSidebarOpened.js

@@ -1,2 +1,2 @@
 import { writable } from "svelte/store";
-export let sidebarOpened = writable(false);
+export const sidebarOpened = writable(false);

package/dist/stores/theme.js

@@ -117,8 +117,8 @@ export function setColor(ct) {
     if (BROWSER) {
         localStorage.setItem("color", ct);
         document.documentElement.classList.add(ct);
-        let colorsToRemove = colorNames.filter((cn) => cn != ct);
-        for (let color of colorsToRemove)
+        const colorsToRemove = colorNames.filter((cn) => cn != ct);
+        for (const color of colorsToRemove)
             document.documentElement.classList.remove(color);
         theme.update((v) => {
             v.active = ct;

package/dist/utils/filters/builder.d.ts

@@ -32,8 +32,8 @@ export default class Builder {
     whereColumn(key: string, operator: string, compareColumn: string): Builder;
     orWhereColumn(key: string, compareColumn: string): Builder;
     orWhereColumn(key: string, operator: string, compareColumn: string): Builder;
-    whereJsonSuperset(key: string, object: Object): Builder;
-    orWhereJsonSuperset(key: string, object: Object): Builder;
+    whereJsonSuperset(key: string, object: object): Builder;
+    orWhereJsonSuperset(key: string, object: object): Builder;
     whereIn(key: string, callback: (builder: Builder) => void): Builder;
     whereIn(key: string, values: WhereFilterValue[]): Builder;
     orWhereIn(key: string, callback: (builder: Builder) => void): Builder;

package/dist/utils/filters/builder.js

@@ -48,7 +48,7 @@ export default class Builder {
     }
     applyWhereInClause(logicalOperator, key, second) {
         if (typeof second == 'function') {
-            let inBuilder = new Builder();
+            const inBuilder = new Builder();
             second(inBuilder);
             this._modifiers.push({
                 method: 'where',
@@ -121,7 +121,7 @@ export default class Builder {
             });
         }
         else if (typeof first == 'function') {
-            let builder = new Builder();
+            const builder = new Builder();
             first(builder);
             if (!builder._modifiers.every(el => el.method == 'where'))
                 throw new Error('inconsistent json query from where callback');
@@ -187,19 +187,19 @@ export default class Builder {
         return this;
     }
     join(table, onCallback) {
-        let onBuilder = new OnClauseBuilder();
+        const onBuilder = new OnClauseBuilder();
         onCallback(onBuilder);
         this.applyJoinClause('inner', table, onBuilder.json);
         return this;
     }
     leftJoin(table, onCallback) {
-        let onBuilder = new OnClauseBuilder();
+        const onBuilder = new OnClauseBuilder();
         onCallback(onBuilder);
         this.applyJoinClause('left', table, onBuilder.json);
         return this;
     }
     rightJoin(table, onCallback) {
-        let onBuilder = new OnClauseBuilder();
+        const onBuilder = new OnClauseBuilder();
         onCallback(onBuilder);
         this.applyJoinClause('right', table, onBuilder.json);
         return this;
@@ -208,10 +208,10 @@ export default class Builder {
         let parameterBuilder = new Builder();
         parameterBuilder = builderCallback(parameterBuilder);
         for (let i = 0; i < parameterBuilder._modifiers.length; i += 1) {
-            let modifierToSearch = parameterBuilder._modifiers[i];
+            const modifierToSearch = parameterBuilder._modifiers[i];
             let found = false;
             for (let k = 0; k < this._modifiers.length; k += 1) {
-                let currentModifier = this._modifiers[k];
+                const currentModifier = this._modifiers[k];
                 found = lodash.isEqual(modifierToSearch, currentModifier);
                 if (found)
                     break;

package/dist/utils/filters/modifiers/where.d.ts

@@ -56,7 +56,7 @@ type JsonSupersetWhere = {
     kind: 'jsonSuperset';
     logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
     key: string;
-    value: Object;
+    value: object;
 };
 type NullWhere = {
     method: 'where';

package/dist/utils/teleporter.js

@@ -10,17 +10,17 @@ class Teleporter {
     }
     loadBodyAndNodes() {
         this.bodyNode = document.body;
-        let elements = Array.from(document.getElementsByClassName('_teleported'));
+        const elements = Array.from(document.getElementsByClassName('_teleported'));
         this.nodes = {};
         for (let i = 0; i < elements.length; i += 1) {
-            let teleportedUid = elements[i].getAttribute('teleported-uid');
+            const teleportedUid = elements[i].getAttribute('teleported-uid');
             if (!!teleportedUid) {
                 this.nodes[teleportedUid] = elements[i];
             }
         }
     }
     attachNode(node) {
-        let teleportedUid = createId();
+        const teleportedUid = createId();
         node.setAttribute('teleported-uid', teleportedUid);
         node.classList.add('_teleported');
         this.bodyNode?.appendChild(node);
@@ -28,7 +28,7 @@ class Teleporter {
         return teleportedUid;
     }
     destroyNode(uid) {
-        let node = this.nodes[uid];
+        const node = this.nodes[uid];
         if (!!node)
             node.remove();
     }