@functionalcms/svelte-components 4.8.11 → 4.8.12

package/dist/components/form/Dropzone.svelte

@@ -46,7 +46,7 @@
 </script>
 
 <script lang="ts">
-	import { Upload } from '@lucide/svelte';
+	import Upload from '@lucide/svelte/icons/upload.svelte';
 	import { displaySize } from './dropzone.ts';
 	import { cn } from '../../utils.ts';
 
@@ -183,6 +183,7 @@
 				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
 			>
 				<Upload class="size-7" />
+				<!-- <Icon icon="upload" class="size-7" /> -->
 			</div>
 			<div class="flex flex-col gap-0.5 text-center">
 				<span class="font-medium text-muted-foreground">

package/dist/components/form/dropzone.d.ts

@@ -1,58 +1,10 @@
-/**
- * Check if the provided file type should be accepted by the input with accept attribute.
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
- *
- * Inspired by https://github.com/enyo/dropzone
- *
- * @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
- * @param acceptedFiles {string}
- * @returns {boolean}
- */
-export default function (file: any, acceptedFiles: any): any;
-export declare const FILE_INVALID_TYPE = "file-invalid-type";
-export declare const FILE_TOO_LARGE = "file-too-large";
-export declare const FILE_TOO_SMALL = "file-too-small";
-export declare const TOO_MANY_FILES = "too-many-files";
-export declare const getInvalidTypeRejectionErr: (accept: any) => {
-    code: string;
-    message: string;
-};
-export declare const getTooLargeRejectionErr: (maxSize: any) => {
-    code: string;
-    message: string;
-};
-export declare const getTooSmallRejectionErr: (minSize: any) => {
-    code: string;
-    message: string;
-};
-export declare const TOO_MANY_FILES_REJECTION: {
-    code: string;
-    message: string;
-};
-export declare function fileAccepted(file: any, accept: any): any[];
-export declare function fileMatchSize(file: any, minSize: any, maxSize: any): (boolean | {
-    code: string;
-    message: string;
-})[] | (boolean | null)[];
-export declare function allFilesAccepted({ files, accept, minSize, maxSize, multiple, }: {
-    files: any;
-    accept: any;
-    minSize: any;
-    maxSize: any;
-    multiple: any;
-}): any;
-export declare function isPropagationStopped(event: any): any;
-export declare function isEvtWithFiles(event: any): boolean;
-export declare function isKindFile(item: any): boolean;
-export declare function isIeOrEdge(userAgent?: string): boolean;
-/**
- * This is intended to be used to compose event handlers
- * They are executed in order until one of them calls `event.isPropagationStopped()`.
- * Note that the check is done on the first invoke too,
- * meaning that if propagation was stopped before invoking the fns,
- * no handlers will be executed.
- *
- * @param {Function} fns the event hanlder functions
- * @return {Function} the event handler to add to an element
- */
-export declare function composeEventHandlers(...fns: any[]): (event: any, ...args: any[]) => boolean;
+import FileDropZone, { type FileRejectedReason, type FileDropZoneProps } from './file-drop-zone.svelte';
+export declare const displaySize: (bytes: number) => string;
+export declare const BYTE = 1;
+export declare const KILOBYTE = 1024;
+export declare const MEGABYTE: number;
+export declare const GIGABYTE: number;
+export declare const ACCEPT_IMAGE = "image/*";
+export declare const ACCEPT_VIDEO = "video/*";
+export declare const ACCEPT_AUDIO = "audio/*";
+export { FileDropZone, type FileRejectedReason, type FileDropZoneProps };

package/dist/components/form/dropzone.js

@@ -1,151 +1,20 @@
-/**
- * Check if the provided file type should be accepted by the input with accept attribute.
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
- *
- * Inspired by https://github.com/enyo/dropzone
- *
- * @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
- * @param acceptedFiles {string}
- * @returns {boolean}
- */
-export default function (file, acceptedFiles) {
-    if (file && acceptedFiles) {
-        const acceptedFilesArray = Array.isArray(acceptedFiles)
-            ? acceptedFiles
-            : acceptedFiles.split(",");
-        const fileName = file.name || "";
-        const mimeType = (file.type || "").toLowerCase();
-        const baseMimeType = mimeType.replace(/\/.*$/, "");
-        return acceptedFilesArray.some((type) => {
-            const validType = type.trim().toLowerCase();
-            if (validType.charAt(0) === ".") {
-                return fileName.toLowerCase().endsWith(validType);
-            }
-            else if (validType.endsWith("/*")) {
-                // This is something like a image/* mime type
-                return baseMimeType === validType.replace(/\/.*$/, "");
-            }
-            return mimeType === validType;
-        });
-    }
-    return true;
-}
-// Error codes
-export const FILE_INVALID_TYPE = "file-invalid-type";
-export const FILE_TOO_LARGE = "file-too-large";
-export const FILE_TOO_SMALL = "file-too-small";
-export const TOO_MANY_FILES = "too-many-files";
-// File Errors
-export const getInvalidTypeRejectionErr = (accept) => {
-    accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
-    const messageSuffix = Array.isArray(accept)
-        ? `one of ${accept.join(", ")}`
-        : accept;
-    return {
-        code: FILE_INVALID_TYPE,
-        message: `File type must be ${messageSuffix}`,
-    };
+import FileDropZone, {} from './file-drop-zone.svelte';
+export const displaySize = (bytes) => {
+    if (bytes < KILOBYTE)
+        return `${bytes.toFixed(0)} B`;
+    if (bytes < MEGABYTE)
+        return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+    if (bytes < GIGABYTE)
+        return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+    return `${(bytes / GIGABYTE).toFixed(0)} GB`;
 };
-export const getTooLargeRejectionErr = (maxSize) => {
-    return {
-        code: FILE_TOO_LARGE,
-        message: `File is larger than ${maxSize} bytes`,
-    };
-};
-export const getTooSmallRejectionErr = (minSize) => {
-    return {
-        code: FILE_TOO_SMALL,
-        message: `File is smaller than ${minSize} bytes`,
-    };
-};
-export const TOO_MANY_FILES_REJECTION = {
-    code: TOO_MANY_FILES,
-    message: "Too many files",
-};
-// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
-// that MIME type will always be accepted
-export function fileAccepted(file, accept) {
-    const isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept);
-    return [
-        isAcceptable,
-        isAcceptable ? null : getInvalidTypeRejectionErr(accept),
-    ];
-}
-export function fileMatchSize(file, minSize, maxSize) {
-    if (isDefined(file.size)) {
-        if (isDefined(minSize) && isDefined(maxSize)) {
-            if (file.size > maxSize)
-                return [false, getTooLargeRejectionErr(maxSize)];
-            if (file.size < minSize)
-                return [false, getTooSmallRejectionErr(minSize)];
-        }
-        else if (isDefined(minSize) && file.size < minSize)
-            return [false, getTooSmallRejectionErr(minSize)];
-        else if (isDefined(maxSize) && file.size > maxSize)
-            return [false, getTooLargeRejectionErr(maxSize)];
-    }
-    return [true, null];
-}
-function isDefined(value) {
-    return value !== undefined && value !== null;
-}
-export function allFilesAccepted({ files, accept, minSize, maxSize, multiple, }) {
-    if (!multiple && files.length > 1) {
-        return false;
-    }
-    return files.every((file) => {
-        const [accepted] = fileAccepted(file, accept);
-        const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
-        return accepted && sizeMatch;
-    });
-}
-// React's synthetic events has event.isPropagationStopped,
-// but to remain compatibility with other libs (Preact) fall back
-// to check event.cancelBubble
-export function isPropagationStopped(event) {
-    if (typeof event.isPropagationStopped === "function") {
-        return event.isPropagationStopped();
-    }
-    else if (typeof event.cancelBubble !== "undefined") {
-        return event.cancelBubble;
-    }
-    return false;
-}
-export function isEvtWithFiles(event) {
-    if (!event.dataTransfer) {
-        return !!event.target && !!event.target.files;
-    }
-    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
-    return Array.prototype.some.call(event.dataTransfer.types, (type) => type === "Files" || type === "application/x-moz-file");
-}
-export function isKindFile(item) {
-    return typeof item === "object" && item !== null && item.kind === "file";
-}
-function isIe(userAgent) {
-    return (userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1);
-}
-function isEdge(userAgent) {
-    return userAgent.indexOf("Edge/") !== -1;
-}
-export function isIeOrEdge(userAgent = window.navigator.userAgent) {
-    return isIe(userAgent) || isEdge(userAgent);
-}
-/**
- * This is intended to be used to compose event handlers
- * They are executed in order until one of them calls `event.isPropagationStopped()`.
- * Note that the check is done on the first invoke too,
- * meaning that if propagation was stopped before invoking the fns,
- * no handlers will be executed.
- *
- * @param {Function} fns the event hanlder functions
- * @return {Function} the event handler to add to an element
- */
-export function composeEventHandlers(...fns) {
-    return (event, ...args) => fns.some((fn) => {
-        if (!isPropagationStopped(event) && fn) {
-            fn(event, ...args);
-        }
-        return isPropagationStopped(event);
-    });
-}
+// Utilities for working with file sizes
+export const BYTE = 1;
+export const KILOBYTE = 1024;
+export const MEGABYTE = 1024 * KILOBYTE;
+export const GIGABYTE = 1024 * MEGABYTE;
+// utilities for limiting accepted files
+export const ACCEPT_IMAGE = 'image/*';
+export const ACCEPT_VIDEO = 'video/*';
+export const ACCEPT_AUDIO = 'audio/*';
+export { FileDropZone };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.8.11",
+	"version": "4.8.12",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -67,6 +67,7 @@
 		"zod": "^3.24.1"
 	},
 	"dependencies": {
+		"@lucide/svelte": "^0.501.0",
 		"embla-carousel-svelte": "^8.5.2",
 		"ioredis": "^5.4.2",
 		"marked": "^15.0.6",