@likable-hair/svelte 3.1.42 → 3.1.44

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

@@ -108,7 +108,7 @@ function calcScrollY(elem) {
   while (!!parent) {
     scroll += parent.scrollTop;
     let parentPosition = getComputedStyle(parent).position;
-    if (parentPosition === "absolute" || parentPosition === "fixed")
+    if (parentPosition === "absolute" || parentPosition === "fixed" || parentPosition === "relative")
       break;
     parent = parent.parentElement;
   }
@@ -121,7 +121,7 @@ $:
       while (!!parent) {
         let parentPosition = getComputedStyle(parent).position;
         parent.addEventListener("scroll", refreshMenuPosition);
-        if (parentPosition == "absolute" || parentPosition == "fixed")
+        if (parentPosition == "absolute" || parentPosition == "fixed" || parentPosition === "relative")
           break;
         parent = parent.parentElement;
       }
@@ -204,7 +204,7 @@ $:
 function getPositionedAncestor(elem) {
   if (!elem)
     return null;
-  if (["fixed", "absolute", "sticky"].includes(getComputedStyle(elem).position))
+  if (["fixed", "absolute", "sticky", "relative"].includes(getComputedStyle(elem).position))
     return elem;
   return getPositionedAncestor(elem.parentElement);
 }
@@ -224,7 +224,7 @@ function getParentInstanceFromViewport(activatorParent) {
     const computedStyle = getComputedStyle(currentParent);
     const position = computedStyle.position;
     const display = computedStyle.display;
-    if ((position === "fixed" || position === "absolute") && display === "flex") {
+    if ((position === "fixed" || position === "absolute" || position === "relative") && display === "flex") {
       const boundingClientRect = activatorParent.getBoundingClientRect();
       top = top + boundingClientRect.top;
       left = left + boundingClientRect.left;

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
     });
   }
 }
@@ -100,7 +114,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,6 +8,7 @@ declare const __propDef: {
         placeholder?: string | undefined;
         persistOverUpload?: boolean | undefined;
         disabled?: boolean | undefined;
+        maxFiles?: number | undefined;
     };
     events: {
         fileDrop: CustomEvent<{

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,13 @@ 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))"
+     {maxFiles}
   >
     <span
       slot="body"
@@ -115,7 +117,7 @@ function handleRemove(file) {
       var(--file-input-list-default-hover-color)
     );
   }
-  
+
   .body-container {
     border: dotted;
     border-color: var(
@@ -128,7 +130,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,6 +8,8 @@ declare const __propDef: {
         persistOverUpload?: boolean | undefined;
         dropAreaActive?: boolean | undefined;
         icon?: string | undefined;
+        disabled?: boolean | undefined;
+        maxFiles?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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