@likable-hair/svelte 3.1.43 → 3.1.45

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

@@ -3,7 +3,7 @@ import "./FileInput.css";
 import { createEventDispatcher } from "svelte";
 let clazz = "";
 export { clazz as class };
-export let files = void 0, placeholder = void 0, persistOverUpload = true, disabled = false;
+export let files = void 0, placeholder = void 0, persistOverUpload = true, disabled = false, maxFiles = void 0;
 let inputElement = void 0;
 let dropAreaActive = false;
 const highlight = (highlighted) => {
@@ -12,27 +12,41 @@ const highlight = (highlighted) => {
 const dispatch = createEventDispatcher();
 function handleFileDrop(event) {
   let droppedFiles = event.dataTransfer?.files;
+  let limitedFiles;
   if (droppedFiles) {
+    if (maxFiles !== void 0) {
+      let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
+      limitedFiles = Array.from(droppedFiles).slice(0, freeSlots);
+    } else {
+      limitedFiles = Array.from(droppedFiles);
+    }
     if (!persistOverUpload)
-      files = Array.from(droppedFiles);
+      files = limitedFiles;
     else
-      files = files ? [...files, ...Array.from(droppedFiles)] : Array.from(droppedFiles);
+      files = files ? [...files, ...limitedFiles] : limitedFiles;
     dispatch("fileDrop", {
       nativeEvent: event,
-      files: Array.from(droppedFiles)
+      files: limitedFiles
     });
   }
 }
 function handleFileFromInput(event) {
   let selectedFiles = event.target.files;
+  let limitedFiles;
   if (selectedFiles) {
+    if (maxFiles !== void 0) {
+      let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
+      limitedFiles = Array.from(selectedFiles).slice(0, freeSlots);
+    } else {
+      limitedFiles = Array.from(selectedFiles);
+    }
     if (!persistOverUpload)
-      files = Array.from(selectedFiles);
+      files = limitedFiles;
     else
-      files = files ? [...files, ...Array.from(selectedFiles)] : Array.from(selectedFiles);
+      files = files ? [...files, ...limitedFiles] : limitedFiles;
     dispatch("fileSelect", {
       nativeEvent: event,
-      files: Array.from(selectedFiles)
+      files: limitedFiles
     });
   }
 }
@@ -49,6 +63,7 @@ function handleFileFromInput(event) {
   }}
   class:disabled
   class="drop-area {clazz}"
+  role="presentation"
 >
   <slot name="body" active={dropAreaActive}>
     <span> { placeholder || 'Drop file here or click to upload'} </span>
@@ -59,6 +74,7 @@ function handleFileFromInput(event) {
     multiple
     bind:this={inputElement}
     on:input={handleFileFromInput}
+    on:change
     {disabled}
   />
 </div>
@@ -100,7 +116,7 @@ function handleFileFromInput(event) {
   .drop-area > input {
     display: none;
   }
-  .drop-area:hover:not(.disabled) {    
+  .drop-area:hover:not(.disabled) {
     box-shadow: var(
     --file-input-focus-shadow,
     var(--file-input-default-focus-shadow)

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

@@ -8,8 +8,10 @@ declare const __propDef: {
         placeholder?: string | undefined;
         persistOverUpload?: boolean | undefined;
         disabled?: boolean | undefined;
+        maxFiles?: number | undefined;
     };
     events: {
+        change: Event;
         fileDrop: CustomEvent<{
             nativeEvent: DragEvent;
             files: File[];

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

@@ -5,7 +5,7 @@ import FileInput from "./FileInput.svelte";
 import Icon from "../media/Icon.svelte";
 let clazz = "";
 export { clazz as class };
-export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document";
+export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", disabled = false, maxFiles = void 0;
 let fileActive = null;
 function handleFileMouseEnter(file) {
   dropAreaActive = false;
@@ -29,11 +29,14 @@ function handleRemove(file) {
   <FileInput
     bind:files
     {persistOverUpload}
+    disabled={disabled || (maxFiles !== undefined && files.length >= maxFiles)}
     --file-input-border-radius="var(--file-input-list-border-radius,var(--file-input-list-default-border-radius))"
     --file-input-background-color="var(--file-input-list-background-color,var(--file-input-list-default-background-color))"
     --file-input-color="var(--file-input-list-color,var(--file-input-list-default-color))"
     --file-input-height="var(--file-input-list-height,var(--file-input-list-default-height))"
     --file-input-width="var(--file-input-list-width,var(--file-input-list-default-width))"
+    on:change
+    {maxFiles}
   >
     <span
       slot="body"
@@ -115,7 +118,7 @@ function handleRemove(file) {
       var(--file-input-list-default-hover-color)
     );
   }
-  
+
   .body-container {
     border: dotted;
     border-color: var(
@@ -128,7 +131,7 @@ function handleRemove(file) {
     );
     width: calc(100% - 20px);
     height: calc(100% - 20px);
-    box-sizing: border-box;    
+    box-sizing: border-box;
     margin: auto;
     position: relative;
     display: flex;

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

@@ -8,8 +8,12 @@ declare const __propDef: {
         persistOverUpload?: boolean | undefined;
         dropAreaActive?: boolean | undefined;
         icon?: string | undefined;
+        disabled?: boolean | undefined;
+        maxFiles?: number | undefined;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.43",
+  "version": "3.1.45",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",