@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/simple/forms/Textarea.svelte

@@ -1,8 +1,25 @@
-<script lang="ts">import '../../../css/main.css';
-import './Textarea.css';
-import { createId } from '@paralleldrive/cuid2';
-;
-let { label, id = createId(), value = $bindable(), class: clazz, ...rest } = $props();
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Textarea.css'
+  import { createId } from '@paralleldrive/cuid2';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLTextareaAttributes {
+    label?: string;
+    class?: {
+      container?: string;
+      label?: string;
+      textarea?: string;
+    }
+  };
+
+  let {
+    label,
+    id = createId(),
+    value = $bindable(),
+    class: clazz,
+    ...rest
+  }: Props = $props();
 </script>
 
 <div class={clazz?.container}>

package/dist/components/simple/forms/VerticalSwitch.svelte

@@ -1,5 +1,22 @@
-<script lang="ts">import './VerticalSwitch.css';
-let { value = $bindable(), rounded = false, onchange, falseOptionSnippet, trueOptionSnippet, } = $props();
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import './VerticalSwitch.css'
+
+  interface Props {
+    value?: boolean;
+    rounded?: boolean;
+    onchange?: () => void
+    falseOptionSnippet?: Snippet<[]>
+    trueOptionSnippet?: Snippet<[]>
+  }
+
+  let {
+    value = $bindable(),
+    rounded = false,
+    onchange,
+    falseOptionSnippet,
+    trueOptionSnippet,
+  }: Props = $props();
 </script>
 
 <div

package/dist/components/simple/forms/VerticalTextSwitch.svelte

@@ -1,6 +1,38 @@
-<script lang="ts">import { fly } from "svelte/transition";
-let { value = $bindable(), height = "100%", width = "100%", backgroundColor, firstColor, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor, hoverBoxShadow, animationDuration = 200, falseOptionSnippet, trueOptionSnippet, } = $props();
-let optionHeight = $state(undefined);
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { fly } from "svelte/transition";
+
+  interface Props {
+    value?: boolean;
+    height?: string;
+    width?: string;
+    backgroundColor?: string;
+    firstColor?: string;
+    secondColor?: string;
+    fontSize?: string;
+    hoverBackgroundColor?: string;
+    hoverBoxShadow?: string;
+    animationDuration?: number;
+    trueOptionSnippet: Snippet<[]>
+    falseOptionSnippet: Snippet<[]>
+  }
+
+  let {
+    value = $bindable(),
+    height = "100%",
+    width = "100%",
+    backgroundColor,
+    firstColor,
+    secondColor = firstColor,
+    fontSize = "12px",
+    hoverBackgroundColor,
+    hoverBoxShadow,
+    animationDuration = 200,
+    falseOptionSnippet,
+    trueOptionSnippet,
+  }: Props = $props();
+
+  let optionHeight: number | undefined = $state(undefined);
 </script>
 
 <div

package/dist/components/simple/lists/BoxList.svelte

@@ -1,17 +1,48 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+	export type Box = {
+		name: string
+		label: string
+    href?: string
+		style?: {
+			width?: string
+			maxWidth?: string
+			minWidth?: string
+		}
+	};
 </script>
 
-<script lang="ts">import { Icon } from "../../..";
-let { boxes, gap = '15px', onboxClick, boxSnippet, } = $props();
-function handleBoxClick(event, box) {
-    if (onboxClick) {
-        onboxClick({
-            detail: {
-                box
-            }
-        });
+<script lang="ts">
+  import { Icon } from "../../..";
+    import type { Snippet } from "svelte";
+
+	interface Props {
+		boxes: Box[];
+		gap?: string;
+    onboxClick?: (event: {
+      detail: {
+        box: Box
+      }
+    }) => void
+    boxSnippet?: Snippet<[{
+      box: Box
+    }]>
+	}
+
+	let { boxes,
+    gap = '15px',
+    onboxClick,
+    boxSnippet,
+  }: Props = $props();
+
+	function handleBoxClick(event: MouseEvent, box: Box) {
+		if(onboxClick) {
+      onboxClick({
+        detail: {
+          box
+        }
+      })
     }
-}
+	}
 </script>
 
 <ul style:gap class="box-list" role="listbox">

package/dist/components/simple/lists/ColorInvertedSelector.svelte

@@ -1,32 +1,90 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Option = {
+    label: string,
+    name: string,
+    icon?: string
+  };
 </script>
 
-<script lang="ts">import '../../../css/main.css';
-import './ColorInvertedSelector.css';
-import Icon from '../media/Icon.svelte';
-let { options, selectedIndex = $bindable(undefined), deletable = true, class: clazz = {}, ondelete, onselect, appendSnippet, optionSnippet, prependSnippet, } = $props();
-function handleOptionClick(option, index, e) {
-    if (onselect) {
-        onselect({
-            detail: {
-                option,
-                selectedIndex,
-                native: e
-            }
-        });
+<script lang="ts">
+  import '../../../css/main.css'
+  import './ColorInvertedSelector.css'
+  import Icon from '../media/Icon.svelte'
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    options: Option[];
+    selectedIndex?: number;
+    deletable?: boolean;
+    class?: {
+      container?: string,
+      element?: string,
+      selected?: string,
     }
-    selectedIndex = index;
-}
-function handleClickClose(option, index) {
-    if (ondelete) {
-        ondelete({
-            detail: {
-                option,
-                index
-            }
-        });
+    onselect?: (event: {
+      detail: {
+        option: Option,
+        selectedIndex: number | undefined,
+        native: Event
+      }
+    }) => void
+    ondelete?: (event: {
+      detail: {
+        option: Option,
+      index: number
+      }
+    }) => void
+    prependSnippet?: Snippet<[{
+      option: Option,
+      index: number,
+      handleClickClose: (option: Option, index: number) => void
+    }]>
+    optionSnippet?: Snippet<[{
+      option: Option,
+    }]>
+    appendSnippet?: Snippet<[{
+      option: Option,
+      handleClickClose: (option: Option, index: number) => void
+    }]>
+  }
+
+  let { 
+      options, 
+      selectedIndex = $bindable(undefined), 
+      deletable = true,
+      class: clazz = {},
+      ondelete,
+      onselect,
+      appendSnippet,
+      optionSnippet,
+      prependSnippet,
+  }: Props = $props();
+
+
+  function handleOptionClick(option: Option, index: number, e: Event) {
+    if(onselect){
+      onselect({
+        detail: {
+          option,
+          selectedIndex,
+          native: e
+        }
+      })
     }
-}
+    
+    selectedIndex = index
+  }
+
+  function handleClickClose(option: Option, index: number) {
+    if(ondelete){
+      ondelete({
+        detail: {
+          option,
+          index
+        }
+      })
+    }
+  }
 </script>
 
 <ul 

package/dist/components/simple/lists/HierarchyMenu.svelte

@@ -1,28 +1,63 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Option = {
+    label: string;
+    name: string;
+    icon?: string;
+    href?: string;
+    options?: Omit<Option, "options">[];
+  };
 </script>
 
-<script lang="ts">import "../../../css/main.css";
-import "./HierarchyMenu.css";
-import { Icon } from "../../..";
-import { slide } from "svelte/transition";
-import { sineIn } from "svelte/easing";
-let { options, selected = $bindable(undefined), expanded = [], iconsOnly = false, onoptionClick, appendSnippet, optionSnippet, prependSnippet, } = $props();
-function handleOptionClick(option) {
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./HierarchyMenu.css";
+  import { Icon } from "../../..";
+  import { slide } from "svelte/transition";
+  import { sineIn } from "svelte/easing";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    options: Option[];
+    selected?: string;
+    expanded?: string[];
+    iconsOnly?: boolean;
+    onoptionClick?: (event: {
+      detail: {
+        option: Option
+      }
+    }) => void
+    prependSnippet?: Snippet<[{ option: Option }]>
+    optionSnippet?: Snippet<[{ option: Option }]>
+    appendSnippet?: Snippet<[{ option: Option }]>
+  }
+
+  let {
+    options,
+    selected = $bindable(undefined),
+    expanded = [],
+    iconsOnly = false,
+    onoptionClick,
+    appendSnippet,
+    optionSnippet,
+    prependSnippet,
+  }: Props = $props();
+
+  function handleOptionClick(option: Option) {
     selected = option.name;
-    if (onoptionClick) {
-        onoptionClick({
-            detail: {
-                option
-            }
-        });
+    if(onoptionClick) {
+      onoptionClick({
+        detail: {
+          option
+        }
+      })
     }
-}
-function handleExpandOptionClick(option) {
+  }
+
+  function handleExpandOptionClick(option: Option) {
     if (expanded.includes(option.name))
-        expanded = expanded.filter((e) => e !== option.name);
-    else
-        expanded = [...expanded, option.name];
-}
+      expanded = expanded.filter((e) => e !== option.name);
+    else expanded = [...expanded, option.name];
+  }
 </script>
 
 <div class="hierarchy-container">

package/dist/components/simple/lists/Paginator.svelte

@@ -1,48 +1,67 @@
-<script lang="ts">import "../../../css/main.css";
-import "./Paginator.css";
-import Icon from "../media/Icon.svelte";
-let { page = $bindable(1), maxPage = undefined, onchange, } = $props();
-function goToPage(p) {
-    if (p <= 0 || (!!maxPage && p > maxPage))
-        return;
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./Paginator.css";
+  import Icon from "../media/Icon.svelte";
+
+  interface Props {
+    page?: number;
+    maxPage?: number;
+    onchange?: (event: {
+      detail: {
+        page: number
+      }
+    }) => void
+  }
+
+  let {
+    page = $bindable(1),
+    maxPage = undefined,
+    onchange,
+  }: Props = $props();
+
+  function goToPage(p: number) {
+    if (p <= 0 || (!!maxPage && p > maxPage)) return;
     page = p;
     emitChange();
-}
-function previousPage() {
-    if (page == 1)
-        return;
+  }
+
+  function previousPage() {
+    if (page == 1) return;
     page -= 1;
     emitChange();
-}
-function hardPrevious() {
+  }
+
+  function hardPrevious() {
     page = 1;
     emitChange();
-}
-function nextPage() {
-    if (!!maxPage && page >= maxPage)
-        return;
+  }
+
+  function nextPage() {
+    if (!!maxPage && page >= maxPage) return;
     page += 1;
     emitChange();
-}
-function hardNext() {
-    if (!maxPage)
-        return;
+  }
+
+  function hardNext() {
+    if (!maxPage) return;
     page = maxPage;
     emitChange();
-}
-function emitChange() {
-    if (onchange) {
-        onchange({
-            detail: {
-                page
-            }
-        });
+  }
+
+  function emitChange() {
+    if(onchange) {
+      onchange({
+        detail: {
+          page
+        }
+      })
     }
-}
-$effect(() => {
-    if (!!maxPage && page > maxPage)
-        page = maxPage;
-});
+  }
+
+  $effect(() => {
+    if (!!maxPage && page > maxPage) 
+      page = maxPage;
+  }) 
 </script>
 
 <div class="paginator-container">

package/dist/components/simple/lists/SelectableMenuList.svelte

@@ -1,22 +1,58 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  type Divider = {
+    divider: true,
+    marginTop?: string,
+    marginBottom?: string,
+    marginRight?: string,
+    marginLeft?: string
+  }
+
+  type Item = {
+    name: string | number,
+    label: string,
+    icon: string,
+    disabled?: boolean,
+    divider?: undefined | false
+  }
+
+  export type MenuItem = Divider | Item;
 </script>
 
-<script lang="ts">import '../../../css/main.css';
-import './SelectableMenuList.css';
-import Icon from "../media/Icon.svelte";
-let { collapsed = $bindable(false), items = [], selected = $bindable(undefined), onselect, } = $props();
-function handleItemClick(item) {
-    if (item.disabled)
-        return;
-    selected = item.name;
-    if (onselect) {
-        onselect({
-            detail: {
-                item
-            }
-        });
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SelectableMenuList.css'
+  import Icon from "../media/Icon.svelte";
+
+  interface Props {
+    collapsed?: boolean;
+    items?: MenuItem[];
+    selected?: string | number;
+    onselect?: (event: {
+      detail: {
+        item: Item
+      }
+    }) => void
+  }
+
+  let {
+    collapsed = $bindable(false),
+    items = [],
+    selected = $bindable(undefined),
+    onselect,
+  }: Props = $props();
+
+  function handleItemClick(item: Item) {
+    if(item.disabled) return
+
+    selected = item.name
+    if(onselect) {
+      onselect({
+        detail: {
+          item
+        }
+      })
     }
-}
+  }
 </script>
 
 <div