@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,34 +1,66 @@
-<script lang="ts">import '../../../css/main.css';
-import './CollapsibleDivider.css';
-import Icon from "../media/Icon.svelte";
-let { collapsed = $bindable(false), openedIconName = "mdi-chevron-left", collapsedIconName = "mdi-chevron-right", disabled = false, onchange, onkeydown, onkeypress, onkeyup, } = $props();
-function handleCollapseClick() {
-    if (!disabled) {
-        collapsed = !collapsed;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './CollapsibleDivider.css'
+  import Icon from "../media/Icon.svelte";
+
+  interface Props {
+    collapsed?: boolean;
+    openedIconName?: string;
+    collapsedIconName?: string;
+    disabled?: boolean;
+    onchange?: (event: {
+      detail: {
+        collapsed: boolean
+      }
+    }) => void
+    onkeydown?: () => void
+    onkeyup?: () => void
+    onkeypress?: () => void
+  }
+
+  let {
+    collapsed = $bindable(false),
+    openedIconName = "mdi-chevron-left",
+    collapsedIconName = "mdi-chevron-right",
+    disabled = false,
+    onchange,
+    onkeydown,
+    onkeypress,
+    onkeyup,
+  }: Props = $props();
+
+  function handleCollapseClick() {
+    if(!disabled) {
+      collapsed = !collapsed
     }
-    if (onchange) {
-        onchange({
-            detail: {
-                collapsed
-            }
-        });
+
+    if(onchange){
+      onchange({
+        detail: {
+          collapsed
+        }
+      })
     }
-}
-function handleKeydown() {
-    if (onkeydown) {
-        onkeydown();
+  }
+
+  function handleKeydown() {
+    if(onkeydown){
+      onkeydown()
     }
-}
-function handleKeyup() {
-    if (onkeyup) {
-        onkeyup();
+  }
+
+  function handleKeyup() {
+    if(onkeyup){
+      onkeyup()
     }
-}
-function handleKeypress() {
-    if (onkeypress) {
-        onkeypress();
+  }
+
+  function handleKeypress() {
+    if(onkeypress){
+      onkeypress()
     }
-}
+  }
+
 </script>
 
 <div

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

@@ -1,4 +1,5 @@
-<script lang="ts">import './Divider.css';
+<script lang="ts">
+	import './Divider.css';
 </script>
 
 <div

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

@@ -1,43 +1,69 @@
-<script lang="ts">import { onDestroy } from "svelte";
-let { threshold = 0, horizontal = false, elementScroll = null, hasMore = true, direction = 'forward', onloadMore } = $props();
-let isLoadMore = false, component;
-function onScroll(e) {
-    const element = e.target;
-    const offset = horizontal
-        ? direction == 'forward'
-            ? element.scrollWidth - element.clientWidth - element.scrollLeft
-            : element.scrollLeft
-        : direction == 'forward'
-            ? element.scrollHeight - element.clientHeight - element.scrollTop
-            : element.scrollTop;
+<script lang="ts">
+  import { onDestroy } from "svelte";
+
+  interface Props {
+    threshold?: number;
+    horizontal?: boolean;
+    elementScroll?: HTMLElement | null;
+    hasMore?: boolean;
+    direction?: 'forward' | 'backward';
+    onloadMore?: () => void
+  }
+
+  let {
+    threshold = 0,
+    horizontal = false,
+    elementScroll = null,
+    hasMore = true,
+    direction = 'forward',
+    onloadMore
+  }: Props = $props();
+
+  let isLoadMore = false,
+    component: HTMLElement;
+
+  function onScroll(e: Event) {
+    const element = e.target as HTMLElement
+
+    const offset = horizontal 
+      ? direction == 'forward' 
+        ? element.scrollWidth - element.clientWidth - element.scrollLeft
+        : element.scrollLeft
+      : direction == 'forward' 
+        ? element.scrollHeight - element.clientHeight - element.scrollTop
+        : element.scrollTop
+    
     if (offset <= threshold) {
-        if (!isLoadMore && hasMore && onloadMore) {
-            onloadMore();
-        }
-        isLoadMore = true;
+      if (!isLoadMore && hasMore && onloadMore) {
+        onloadMore()
+      }
+      isLoadMore = true
+    } else {
+      isLoadMore = false
     }
-    else {
-        isLoadMore = false;
-    }
-}
-$effect(() => {
+  }
+
+  $effect(() => {
     if (component || elementScroll) {
-        const element = elementScroll ? elementScroll : component.parentNode;
-        if (element) {
-            element.addEventListener("scroll", onScroll);
-            element.addEventListener("resize", onScroll);
-        }
+      const element = elementScroll ? elementScroll : component.parentNode as HTMLElement
+
+      if (element) {
+        element.addEventListener("scroll", onScroll)
+        element.addEventListener("resize", onScroll)
+      }
     }
-});
-onDestroy(() => {
+  })
+
+  onDestroy(() => {
     if (component || elementScroll) {
-        const element = elementScroll ? elementScroll : component.parentNode;
-        if (element) {
-            element.removeEventListener("scroll", onScroll);
-            element.removeEventListener("resize", onScroll);
-        }
+      const element = elementScroll ? elementScroll : component.parentNode as HTMLElement
+
+      if (element) {
+        element.removeEventListener("scroll", onScroll)
+        element.removeEventListener("resize", onScroll)
+      }
     }
-});
+  })
 </script>
 
 <div bind:this={component} style:width="0px"></div>

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

@@ -1,10 +1,35 @@
-<script lang="ts">import mediaQuery from "../../../stores/mediaQuery";
-let { defaultSnippet } = $props();
-let xsAndDown = $derived($mediaQuery.xs);
+<script lang="ts">
+  import mediaQuery from "../../../stores/mediaQuery";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    defaultSnippet?: Snippet<[{
+      xs: boolean,
+      s: boolean,
+      m: boolean,
+      l: boolean,
+      xl: boolean,
+      xsAndDown: boolean,
+      sAndDown: boolean,
+      lAndDown: boolean,
+      mAndDown: boolean,
+      xlAndDown: boolean,
+      xlAndUp: boolean,
+      lAndUp: boolean,
+      mAndUp: boolean,
+      sAndUp: boolean,
+      xsAndUp: boolean
+    }]>,
+  }
+
+  let { defaultSnippet }: Props = $props() 
+
+  let xsAndDown = $derived($mediaQuery.xs);
 let sAndDown = $derived($mediaQuery.s || $mediaQuery.xs);
 let mAndDown = $derived($mediaQuery.s || $mediaQuery.xs || $mediaQuery.m);
 let lAndDown = $derived($mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l);
 let xlAndDown = $derived($mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l || $mediaQuery.xl);
+
 let xlAndUp = $derived($mediaQuery.xl);
 let lAndUp = $derived($mediaQuery.xl || $mediaQuery.l);
 let mAndUp = $derived($mediaQuery.xl || $mediaQuery.l || $mediaQuery.m);