@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,36 +1,64 @@
-<script lang="ts">import './Checkbox.css';
-import '../../../css/main.css';
-import { onMount } from 'svelte';
-let { value = $bindable(), id = undefined, disabled = false, onchange, ...rest } = $props();
-onMount(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
+<script lang="ts">
+  import './Checkbox.css'
+  import '../../../css/main.css'
+  import { onMount } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes,
+  'onchange' | 'disabled' | 'id' | 'type' | 'checked'> {
+    value?: boolean;
+    id?: string;
+    disabled?: boolean;
+    onchange?: (event: {
+      detail: {
+        shiftKeyPressed: boolean,
+        nativeEvent: Event
+      }
+    }) => void
+  }
+
+  let { 
+    value = $bindable(), 
+    id = undefined, 
+    disabled = false,
+    onchange,
+    ...rest
+  }: Props = $props();
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+
     return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-        window.removeEventListener('keyup', handleKeyUp);
-    };
-});
-function handleKeyDown(event) {
-    if (event.key == 'Shift') {
-        shiftKeyPressed = true;
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
     }
-}
-function handleKeyUp(event) {
-    if (event.key == 'Shift') {
-        shiftKeyPressed = false;
+  })
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if(event.key == 'Shift') {
+      shiftKeyPressed = true
     }
-}
-let shiftKeyPressed = false;
-function handleChange(e) {
-    if (onchange) {
-        onchange({
-            detail: {
-                shiftKeyPressed,
-                nativeEvent: e
-            }
-        });
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if(event.key == 'Shift') {
+      shiftKeyPressed = false
+    }
+  }
+
+  let shiftKeyPressed: boolean = false
+
+  function handleChange(e: Event) {
+    if(onchange) {
+      onchange({
+        detail: {
+          shiftKeyPressed, 
+          nativeEvent: e
+        }
+      })
     }
-}
+  }
 </script>
 
 <input

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

@@ -1,66 +1,111 @@
-<script lang="ts">import '../../../css/main.css';
-import './FileInput.css';
-let { files = $bindable(), placeholder = undefined, persistOverUpload = true, disabled = false, maxFiles = undefined, class: clazz = '', onfileDrop, onfileSelect, onchange, bodySnippet, } = $props();
-let inputElement = undefined;
-let dropAreaActive = $state(false);
-const highlight = (highlighted) => {
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import '../../../css/main.css'
+  import './FileInput.css'
+
+  interface Props {
+    files?: File[];
+    placeholder?: string;
+    persistOverUpload?: boolean;
+    disabled?: boolean;
+    maxFiles?: number;
+    class?: string
+    onfileDrop?: (event: {
+      detail: {
+        nativeEvent: DragEvent;
+        files: File[];
+      }
+    }) => void
+    onfileSelect?: (event: {
+      detail: {
+        nativeEvent: Event;
+        files: File[];
+      }
+    }) => void
+    onchange?: () => void
+    bodySnippet?: Snippet<[{
+      active: boolean
+    }]>
+  }
+
+  let {
+    files = $bindable(),
+    placeholder = undefined,
+    persistOverUpload = true,
+    disabled = false,
+    maxFiles = undefined,
+    class: clazz = '',
+    onfileDrop,
+    onfileSelect,
+    onchange,
+    bodySnippet,
+  }: Props = $props();
+
+  let inputElement: HTMLElement | undefined = undefined;
+  let dropAreaActive = $state(false);
+
+  const highlight: (highlighted: boolean) => void = (highlighted) => {
     dropAreaActive = highlighted && !disabled;
-};
-function handleFileDrop(event) {
-    highlight(false);
-    let droppedFiles = event.dataTransfer?.files;
-    let limitedFiles;
+  };
+
+  function handleFileDrop(event: DragEvent) {
+    highlight(false)
+    let droppedFiles: FileList | undefined = event.dataTransfer?.files;
+    let limitedFiles: File[]
+
     if (droppedFiles) {
-        if (maxFiles !== undefined) {
-            let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
-            limitedFiles = Array.from(droppedFiles).slice(0, freeSlots);
-        }
-        else {
-            limitedFiles = Array.from(droppedFiles);
-        }
-        if (!persistOverUpload)
-            files = limitedFiles;
-        else
-            files = files
-                ? [...files, ...limitedFiles]
-                : limitedFiles;
-        if (onfileDrop) {
-            onfileDrop({
-                detail: {
-                    nativeEvent: event,
-                    files: limitedFiles,
-                }
-            });
-        }
+      if(maxFiles !== undefined) {
+        let freeSlots = Math.max(0, maxFiles - (files?.length || 0))
+        limitedFiles = Array.from(droppedFiles).slice(0, freeSlots)
+      } else {
+        limitedFiles = Array.from(droppedFiles)
+      }
+
+      if (!persistOverUpload) files = limitedFiles;
+      else
+        files = files
+          ? [...files, ...limitedFiles]
+          : limitedFiles;
+
+      if(onfileDrop){
+        onfileDrop({
+          detail: {
+            nativeEvent: event,
+            files: limitedFiles,
+          }
+        })
+      }
     }
-}
-function handleFileFromInput(event) {
-    let selectedFiles = event.target.files;
-    let limitedFiles;
+  }
+
+  function handleFileFromInput(event: Event) {
+    let selectedFiles: FileList | null = (<HTMLInputElement>event.target).files;
+    let limitedFiles: File[]
+
     if (selectedFiles) {
-        if (maxFiles !== undefined) {
-            let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
-            limitedFiles = Array.from(selectedFiles).slice(0, freeSlots);
-        }
-        else {
-            limitedFiles = Array.from(selectedFiles);
-        }
-        if (!persistOverUpload)
-            files = limitedFiles;
-        else
-            files = files
-                ? [...files, ...limitedFiles]
-                : limitedFiles;
-        if (onfileSelect) {
-            onfileSelect({
-                detail: {
-                    nativeEvent: event,
-                    files: limitedFiles,
-                }
-            });
-        }
+      if(maxFiles !== undefined) {
+        let freeSlots = Math.max(0, maxFiles - (files?.length || 0))
+        limitedFiles = Array.from(selectedFiles).slice(0, freeSlots)
+      } else {
+        limitedFiles = Array.from(selectedFiles)
+      }
+
+      if (!persistOverUpload) files = limitedFiles;
+      else
+        files = files
+          ? [...files, ...limitedFiles]
+          : limitedFiles;
+
+      if(onfileSelect){
+        onfileSelect({
+          detail: {
+            nativeEvent: event,
+            files: limitedFiles,
+          }
+        })
+      }
     }
-}
+  }
 </script>
 
 <div

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

@@ -1,66 +1,130 @@
-<script lang="ts">import "../../../css/main.css";
-import "./FileInputList.css";
-import Button from "../buttons/Button.svelte";
-import FileInput from "./FileInput.svelte";
-import Icon from "../media/Icon.svelte";
-let { files = $bindable(), persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = undefined, class: clazz = '', onchange, onfileChange, onfileDrop, onfileSelect, bodySnippet: bodyOuterSnippet, messageSnippet, fileListSnippet, previewFiles = false } = $props();
-let fileActive = $state(null);
-function handleFileMouseEnter(file) {
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./FileInputList.css";
+  import Button from "../buttons/Button.svelte";
+  import FileInput from "./FileInput.svelte";
+  import Icon from "../media/Icon.svelte";
+  import type { ComponentProps, Snippet } from "svelte";
+
+  interface Props {
+    files?: File[];
+    persistOverUpload?: boolean;
+    dropAreaActive?: boolean;
+    icon?: string;
+    message?: string;
+    disabled?: boolean;
+    maxFiles?: number;
+    class?: string
+    onchange?: ComponentProps<typeof FileInput>['onchange']
+    onfileChange?: (event: {
+      detail: {
+        files: File[]
+      }
+    }) => void
+    onfileDrop?: () => void
+    onfileSelect?: () => void
+    bodySnippet?: Snippet<[{
+      active: boolean
+    }]>
+    messageSnippet?: Snippet<[{
+      message: string | undefined
+    }]>
+    fileListSnippet?: Snippet<[{
+      files: File[]
+      previewFiles: boolean
+      fileActive: File | null
+    }]>,
+    previewFiles?: boolean
+  }
+
+  let {
+    files = $bindable(),
+    persistOverUpload = true,
+    dropAreaActive = true,
+    icon = "mdi-file-document",
+    message = "Drop file here or click to upload",
+    disabled = false,
+    maxFiles = undefined,
+    class: clazz = '',
+    onchange,
+    onfileChange,
+    onfileDrop,
+    onfileSelect,
+    bodySnippet: bodyOuterSnippet,
+    messageSnippet,
+    fileListSnippet,
+    previewFiles = false
+  }: Props = $props();
+
+  let fileActive: File | null = $state(null);
+
+  function handleFileMouseEnter(file: File) {
     dropAreaActive = false;
     fileActive = file;
-}
-function handleFileMouseLeave() {
+  }
+
+  function handleFileMouseLeave() {
     dropAreaActive = true;
     fileActive = null;
-}
-function handleFileClick(file) {
+  }
+
+  function handleFileClick(file: File) {
     alert(file.name);
-}
-function handleRemove(file) {
+  }
+
+  function handleRemove(file: File) {
     files = files?.filter((elem) => {
-        return elem !== file;
+      return elem !== file;
     });
-    if (onfileChange) {
-        onfileChange({
-            detail: {
-                files: files || []
-            }
-        });
+
+    if(onfileChange){
+      onfileChange({
+        detail: {
+          files: files || []
+        }
+      })
     }
-}
-function handleFileDrop() {
-    if (onfileChange) {
-        onfileChange({
-            detail: {
-                files: files || []
-            }
-        });
+  }
+
+  function handleFileDrop() {
+    if(onfileChange){
+      onfileChange({
+        detail: {
+          files: files || []
+        }
+      })
     }
-    if (onfileDrop) {
-        onfileDrop();
+
+    if(onfileDrop){
+      onfileDrop()
     }
-}
-function handleFileSelect() {
-    if (onfileChange) {
-        onfileChange({
-            detail: {
-                files: files || []
-            }
-        });
+  }
+
+  function handleFileSelect() {
+    if(onfileChange){
+      onfileChange({
+        detail: {
+          files: files || []
+        }
+      })
     }
-    if (onfileSelect) {
-        onfileSelect();
+
+    if(onfileSelect){
+      onfileSelect()
     }
-}
-function isImageFile(file) {
-    if (file.type.startsWith('image/') && (file.type.endsWith("/jpg")
-        || file.type.endsWith("/png")
-        || file.type.endsWith("/jpeg")
-        || file.type.endsWith("/webp"))) {
-        return true;
+  }
+
+  function isImageFile(file: File): boolean {
+    if (file.type.startsWith('image/') && (
+      file.type.endsWith("/jpg") 
+      || file.type.endsWith("/png")
+      || file.type.endsWith("/jpeg")
+      || file.type.endsWith("/webp")
+    )) {
+      return true
     }
-    return false;
-}
+    return false
+  }
 </script>
 
 <div class="card-container {clazz}">
@@ -87,7 +151,7 @@ function isImageFile(file) {
           style:width="100%"
           style:display="flex"
         >
-          <div class="body-container" class:{active}>
+          <div class="body-container" class:active>
             {#if !files || files.length === 0}
               {#if messageSnippet}
                 {@render messageSnippet({ message })}

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

@@ -1,6 +1,39 @@
-<script lang="ts">import './RadioButton.css';
-import "../../../css/main.css";
-let { name, value, id = undefined, checked = $bindable(), label = undefined, disabled = false, onblur, onchange, onfocus, oninput, onkeydown, onkeypress, onkeyup, } = $props();
+<script lang="ts">
+  import './RadioButton.css'
+  import "../../../css/main.css";
+
+  interface Props {
+    name: string;
+    value: string;
+    id?: string;
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    onchange?: () => void
+    oninput?: () => void
+    onfocus?: () => void
+    onblur?: () => void
+    onkeydown?: () => void
+    onkeypress?: () => void
+    onkeyup?: () => void
+  }
+
+  let {
+    name,
+    value,
+    id = undefined,
+    checked = $bindable(),
+    label = undefined,
+    disabled = false,
+    onblur,
+    onchange,
+    onfocus,
+    oninput,
+    onkeydown,
+    onkeypress,
+    onkeyup,
+  }: Props = $props();
+
 </script>
 
 <input

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

@@ -1,7 +1,34 @@
-<script lang="ts" module>import './Select.css';
+<script lang="ts" module>
+	import './Select.css'
+	export type Option = {
+		icon?: string
+		value: string | number | undefined
+		text: string
+	}
 </script>
-<script lang="ts">import { Icon } from "../../..";
-let { options, name = undefined, value = $bindable(), disabled = false, placeholder = undefined, onchange, optionAttributes, ...rest } = $props();
+<script lang="ts">
+	import { Icon } from "../../..";
+	import type { HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLSelectAttributes{
+		options: Option[],
+		name?: string,
+		value?: string | number,
+		disabled?: boolean,
+		placeholder?: string,
+		optionAttributes?: HTMLOptionAttributes
+	}
+
+	let {
+		options,
+		name = undefined,
+		value = $bindable(),
+		disabled = false,
+		placeholder = undefined,
+		onchange,
+		optionAttributes,
+		...rest
+	}: Props = $props();
 </script>
 
 <select

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

@@ -1,7 +1,97 @@
-<script lang="ts">import '../../../css/main.css';
-import './SimpleTextField.css';
-import Icon from "../media/Icon.svelte";
-let { value = $bindable(), valueTo = $bindable(), type = "text", range = false, placeholder = undefined, placeholderTo = undefined, disabled = false, readonly = false, id = undefined, idTo = undefined, appendIcon = undefined, appendInnerIcon = undefined, prependIcon = undefined, prependInnerIcon = undefined, iconSize = "12pt", name = undefined, nameTo = undefined, hint = undefined, input = $bindable(undefined), inputTo = $bindable(undefined), betweenLabel = '-', class: clazz = {}, prependSnippet, prependInnerSnippet, appendInnerSnippet, appendSnippet, hintSnippet, onchange, oninput, onfocus, onblur, onkeydown, onkeyup, onkeypress, ...rest } = $props();
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SimpleTextField.css'
+  import Icon from "../media/Icon.svelte";
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends HTMLInputAttributes{
+    value?: string | number;
+    valueTo?: string | number;
+    type?: "text" | "password" | "number" | "time" | "date";
+    range?: boolean
+    placeholder?: string;
+    placeholderTo?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: string;
+    idTo?: string;
+    appendIcon?: string;
+    appendInnerIcon?: string;
+    prependIcon?: string;
+    prependInnerIcon?: string;
+    iconSize?: string;
+    name?: string;
+    nameTo?: string;
+    hint?: string;
+    input?: HTMLElement;
+    inputTo?: HTMLElement;
+    betweenLabel?: string
+    class?: {
+      container?: string,
+      row?: string,
+      field?: string,
+      hint?: string,
+      input?: string
+    }
+    prependSnippet?: Snippet<[{
+      prependIcon: string | undefined
+      iconSize: string
+    }]>
+    prependInnerSnippet?: Snippet<[{
+      prependInnerIcon: string | undefined
+      iconSize: string
+    }]>
+    appendSnippet?: Snippet<[{
+      appendIcon: string | undefined
+      iconSize: string
+    }]>
+    appendInnerSnippet?: Snippet<[{
+      appendInnerIcon: string | undefined
+      iconSize: string
+    }]>
+    hintSnippet?: Snippet<[{
+      hint: string | undefined
+    }]>
+  }
+
+  let {
+    value = $bindable(),
+    valueTo = $bindable(),
+    type = "text",
+    range = false,
+    placeholder = undefined,
+    placeholderTo = undefined,
+    disabled = false,
+    readonly = false,
+    id = undefined,
+    idTo = undefined,
+    appendIcon = undefined,
+    appendInnerIcon = undefined,
+    prependIcon = undefined,
+    prependInnerIcon = undefined,
+    iconSize = "12pt",
+    name = undefined,
+    nameTo = undefined,
+    hint = undefined,
+    input = $bindable(undefined),
+    inputTo = $bindable(undefined),
+    betweenLabel = '-',
+    class: clazz = {},
+    prependSnippet,
+    prependInnerSnippet,
+    appendInnerSnippet,
+    appendSnippet,
+    hintSnippet,
+    onchange,
+    oninput,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    onkeypress,
+    ...rest
+  }: Props = $props();
 </script>
 
 <div

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

@@ -1,15 +1,37 @@
-<script lang="ts">import './Switch.css';
-let { value = $bindable(), disabled = false, onchange: onchangeInternal, } = $props();
-function onchange(event) {
-    if (onchangeInternal) {
-        onchangeInternal({
-            detail: {
-                nativeEvent: event,
-                value: event.currentTarget.checked
-            }
-        });
+<script lang="ts">
+	import './Switch.css'
+
+	interface Props {
+		value?: boolean;
+		disabled?: boolean;
+		onchange?: (event: {
+      detail: {
+        nativeEvent: Event & {
+          currentTarget: EventTarget & HTMLInputElement;
+        },
+        value: boolean
+      }
+    }) => void
+	}
+
+	let {
+		value = $bindable(),
+		disabled = false,
+		onchange: onchangeInternal,
+	}: Props = $props();
+
+  function onchange(event: Event & {
+    currentTarget: EventTarget & HTMLInputElement;
+  }) {
+    if(onchangeInternal) {
+      onchangeInternal({
+        detail: {
+          nativeEvent: event,
+          value: event.currentTarget.checked
+        }
+      })
     }
-}
+  }
 </script>
 
 <label class="toggle-switch" class:disabled>