@functionalcms/svelte-components 4.12.7 → 4.13.0

package/dist/components/form/dropzone/DefaultDropzone.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { CustomDropzoneProps } from './types.ts';
+	interface DefaultDropzone extends CustomDropzoneProps {
+		defaultDropzoneElement: HTMLElement | undefined;
+		children: Snippet;
+	}
+	let { defaultDropzoneElement = $bindable(), children, ...props }: DefaultDropzone = $props();
+</script>
+
+<div bind:this={defaultDropzoneElement} class="dropzone" {...props}>
+	{@render children()}
+</div>
+
+<style>
+	.dropzone {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 20px;
+		border-width: 2px;
+		border-radius: 2px;
+		border-color: #eeeeee;
+		border-style: dashed;
+		background-color: #fafafa;
+		color: #bdbdbd;
+		outline: none;
+		transition: border 0.24s ease-in-out;
+	}
+	.dropzone:hover {
+		border-color: #2196f3;
+	}
+	.dropzone:focus {
+		border-color: #2196f3;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { CustomDropzoneProps } from './types.ts';
+interface DefaultDropzone extends CustomDropzoneProps {
+    defaultDropzoneElement: HTMLElement | undefined;
+    children: Snippet;
+}
+declare const DefaultDropzone: import("svelte").Component<DefaultDropzone, {}, "defaultDropzoneElement">;
+export default DefaultDropzone;

package/dist/components/form/dropzone/Dropzone.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+	import { fromEvent } from 'file-selector';
+	import {
+		checkFiles,
+		generateErrorMessage,
+		isEventWithFiles,
+		isIeOrEdge,
+		isPropagationStopped
+	} from './default.js';
+	import type {
+		DropzoneEventHandler,
+		DropzoneProps,
+		FromEventFileTypes,
+		RejectedFile
+	} from './types.ts';
+	import type { EventHandler } from 'svelte/elements';
+	import DefaultDropzone from './DefaultDropzone.svelte';
+	import useDropzone from './UseDropzone.ts';
+
+	let {
+		accept,
+		disabled = false,
+		maxFileCountPerUpload = Infinity,
+		maxSize = Infinity,
+		minSize = 0,
+		multiple = false,
+		preventDropOnDocument = true,
+		disableDropzoneClick = false,
+		disableDropzoneKeydown = false,
+		disableDropzoneDrag = false,
+		name = '',
+		inputElement = $bindable(),
+		required = false,
+		dropzoneElement = $bindable(),
+		CustomDropzone,
+		children,
+		onDragenter,
+		onDragover,
+		onDragleave,
+		onDrop,
+		onFileDialogCancel
+	}: DropzoneProps = $props();
+
+	let isFileDialogActive: boolean = $state(false);
+
+	let defaultDropzoneElement: HTMLElement | undefined = $state();
+
+	let dropzoneRef: HTMLElement | undefined = $derived(dropzoneElement || defaultDropzoneElement);
+
+	let dragTargetsRef: EventTarget[] = $state([]);
+	async function getFileFromEvent<T extends FromEventFileTypes>(
+		event: Event
+	): Promise<{ acceptedFiles: T[]; rejectedFiles: RejectedFile<T>[] }> {
+		if (isPropagationStopped(event)) {
+			return { acceptedFiles: [], rejectedFiles: [] };
+		}
+		const files = (await fromEvent(event)) as T[];
+		const acceptedFiles: T[] = [];
+		const rejectedFiles: RejectedFile<T>[] = [];
+
+		files.forEach((file) => {
+			const { isAccepted, errors } = checkFiles({ file, accept, minSize, maxSize });
+			if (multiple && files.length > maxFileCountPerUpload) {
+				rejectedFiles.push({
+					file,
+					errors: [...errors, generateErrorMessage('TOO_MANY_FILES', { maxFileCountPerUpload })]
+				});
+				return;
+			}
+			if (!multiple && isAccepted && acceptedFiles.length > 0) {
+				rejectedFiles.push({
+					file,
+					errors: [generateErrorMessage('CANNOT_UPLOAD_MULTIPLE_FILES')]
+				});
+				return;
+			}
+			if (isAccepted) {
+				acceptedFiles.push(file);
+				return;
+			}
+
+			rejectedFiles.push({ file, errors });
+		});
+
+		return { acceptedFiles, rejectedFiles };
+	}
+
+	async function triggerEventWithFiles<T extends FromEventFileTypes>(
+		event: Event,
+		callbackToTrigger: DropzoneEventHandler<T> | undefined
+	) {
+		const files = await getFileFromEvent<T>(event);
+		if (!files) return { acceptedFiles: [], rejectedFiles: [] };
+		const { acceptedFiles, rejectedFiles } = files;
+		callbackToTrigger?.({ acceptedFiles, rejectedFiles, event });
+
+		return files;
+	}
+	// Fn for opening the file dialog programmatically
+	function openFileDialog() {
+		if (inputElement) {
+			isFileDialogActive = true;
+			inputElement.click();
+		}
+	}
+
+	// open the file dialog when SPACE/ENTER occurs on the dropzone
+	function onDropzoneKeyDown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement | null;
+		const dropzoneElementType = target?.getAttribute('drozone-element-type');
+		// Ignore keyboard events bubbling up the DOM tree
+		if (target?.id !== 'dropzone-element' && dropzoneElementType === 'dropzone-element') {
+			return;
+		}
+
+		if (event.keyCode === 32 || event.keyCode === 13) {
+			event.preventDefault();
+			openFileDialog();
+		}
+	}
+
+	// open the file dialog when click occurs on the dropzone
+	function onDropzoneClick() {
+		if (disableDropzoneClick) {
+			return;
+		}
+
+		// In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
+		// to ensure React can handle state changes
+		// See: https://github.com/react-dropzone/react-dropzone/issues/450
+		if (isIeOrEdge()) {
+			setTimeout(openFileDialog, 0);
+		} else {
+			openFileDialog();
+		}
+	}
+	const onDropzoneDragEnter: EventHandler<DragEvent> = async (event) => {
+		event.preventDefault();
+
+		const target = event.target;
+		if (target) dragTargetsRef = [...dragTargetsRef, target];
+
+		if (isEventWithFiles(event)) {
+			await triggerEventWithFiles(event, onDragenter);
+		}
+	};
+
+	const onDropzoneDragOver: EventHandler<DragEvent> = async (event) => {
+		event.preventDefault();
+
+		if (event.dataTransfer) {
+			try {
+				event.dataTransfer.dropEffect = 'copy';
+			} catch {} /* eslint-disable-line no-empty */
+		}
+
+		if (isEventWithFiles(event)) {
+			await triggerEventWithFiles(event, onDragover);
+		}
+
+		return false;
+	};
+
+	const onDropzoneDragLeave: EventHandler<DragEvent> = async (event) => {
+		event.preventDefault();
+
+		// Only deactivate once the dropzone and all children have been left
+		const targets = dragTargetsRef.filter(
+			(target) => dropzoneRef && dropzoneRef.contains(target as Node)
+		);
+		// Make sure to remove a target present multiple times only once
+		// (Firefox may fire dragenter/dragleave multiple times on the same element)
+		const target = event.target as HTMLElement;
+		const targetIdx = targets.indexOf(target);
+		if (targetIdx !== -1) {
+			targets.splice(targetIdx, 1);
+		}
+		dragTargetsRef = targets;
+		if (targets.length > 0) {
+			return;
+		}
+
+		if (isEventWithFiles(event)) {
+			await triggerEventWithFiles(event, onDragleave);
+		}
+	};
+
+	const onDropzoneDrop = async (event: DragEvent | Event) => {
+		event.preventDefault();
+		isFileDialogActive = false;
+		dragTargetsRef = [];
+		if (isEventWithFiles(event)) {
+			const { acceptedFiles } = await triggerEventWithFiles(event, onDrop);
+			if ('dataTransfer' in event && event.dataTransfer && inputElement) {
+				const dataTransfer = new DataTransfer();
+				const incomingFiles = acceptedFiles;
+				incomingFiles.forEach((v) => dataTransfer.items.add(v));
+				inputElement.files = dataTransfer.files;
+			}
+		}
+		event.stopPropagation();
+	};
+
+	let getHandler = $derived(<T extends Event>(fn: EventHandler<T>) => (disabled ? null : fn));
+	let getKeyboardEventHandle = $derived(<T extends Event>(fn: EventHandler<T>) =>
+		disableDropzoneKeydown ? null : getHandler(fn)
+	);
+	let getDragEventHandler = $derived((fn: EventHandler<DragEvent>) =>
+		disableDropzoneDrag ? null : getHandler(fn)
+	);
+
+	let defaultPlaceholderString = $derived(
+		multiple
+			? "Drag 'n' drop some files here, or click to select files"
+			: "Drag 'n' drop a file here, or click to select a file"
+	);
+
+	// allow the entire document to be a drag target
+	function onWindowDragOver(event: DragEvent) {
+		if (preventDropOnDocument) {
+			event.preventDefault();
+		}
+	}
+
+	function onWindowDrop(event: DragEvent) {
+		const target = event.target as HTMLElement;
+		if (!preventDropOnDocument) {
+			return;
+		}
+		if (dropzoneRef?.contains(target)) {
+			// If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
+			return;
+		}
+		event.preventDefault();
+		dragTargetsRef = [];
+	}
+
+	function onInputElementClick(event: MouseEvent) {
+		event.stopPropagation();
+	}
+
+	function onInputElementCancel(event: Event) {
+		isFileDialogActive = false;
+		onFileDialogCancel?.();
+	}
+	const dropzoneProps = $derived({
+		'data-drozone-element-type': 'dropzone-element',
+		id: 'dropzone-element',
+		tabindex: 0,
+		role: 'button',
+		onkeydown: getKeyboardEventHandle(onDropzoneKeyDown),
+		onclick: getHandler(onDropzoneClick)
+	});
+	const dropzoneAreaProps = $derived({
+		dragenter: getDragEventHandler(onDropzoneDragEnter),
+		dragover: getDragEventHandler(onDropzoneDragOver),
+		dragleave: getDragEventHandler(onDropzoneDragLeave),
+		drop: getDragEventHandler(onDropzoneDrop)
+	});
+
+	$effect(() => {
+		const unsubscribe = useDropzone(dropzoneRef, dropzoneAreaProps);
+		return () => unsubscribe();
+	});
+</script>
+
+<svelte:window on:dragover={onWindowDragOver} on:drop={onWindowDrop} />
+
+{#snippet dropzoneInput()}
+	<input
+		accept={accept?.join(',')}
+		{multiple}
+		{required}
+		type="file"
+		{name}
+		autocomplete="off"
+		tabindex="-1"
+		onchange={onDropzoneDrop}
+		onclick={onInputElementClick}
+		bind:this={inputElement}
+		style="display: none;"
+		oncancel={onInputElementCancel}
+	/>
+{/snippet}
+{#if CustomDropzone}
+	{@render CustomDropzone(dropzoneProps)}
+
+	{@render dropzoneInput()}
+{:else}
+	<DefaultDropzone bind:defaultDropzoneElement {...dropzoneProps}>
+		{@render dropzoneInput()}
+		{#if children}
+			{@render children()}
+		{:else}
+			<p>{defaultPlaceholderString}</p>
+		{/if}
+	</DefaultDropzone>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { DropzoneProps } from './types.ts';
+declare const Dropzone: import("svelte").Component<DropzoneProps, {}, "inputElement" | "dropzoneElement">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

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

@@ -0,0 +1,3 @@
+import type { DropzoneAreaEvents } from "./types.ts";
+declare const useDropzone: (element: HTMLElement | undefined, events: DropzoneAreaEvents) => () => void;
+export default useDropzone;

package/dist/components/form/dropzone/UseDropzone.js

@@ -0,0 +1,19 @@
+const useDropzone = (element, events) => {
+    if (!element)
+        return () => { };
+    Object.entries(events)
+        .forEach(([eventName, handler]) => {
+        if (handler) {
+            element.addEventListener(eventName, handler);
+        }
+    });
+    return () => {
+        Object.entries(events)
+            .forEach(([eventName, handler]) => {
+            if (handler) {
+                element.removeEventListener(eventName, handler);
+            }
+        });
+    };
+};
+export default useDropzone;

package/dist/components/form/dropzone/attr-accept.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 accept {string}
+ * @returns {boolean}
+ */
+import type { FromEventFileTypes, MimeTypes } from "./types.ts";
+export default function (file: FromEventFileTypes, accept: MimeTypes[] | string[]): boolean;

package/dist/components/form/dropzone/attr-accept.js

@@ -0,0 +1,29 @@
+/**
+ * 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 accept {string}
+ * @returns {boolean}
+ */
+export default function (file, accept) {
+    if (file && accept.length > 0) {
+        const fileName = "name" in file ? file.name : "";
+        const mimeType = (file.type || "").toLowerCase();
+        const baseMimeType = mimeType.replace(/\/.*$/, "");
+        return accept.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;
+}

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

@@ -0,0 +1,31 @@
+import type { FromEventFileTypes, MimeTypes, DropzoneErrorCode } from "./types.ts";
+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 generateErrorMessage: (code: DropzoneErrorCode, props?: {
+    accept?: string[];
+    minSize?: number;
+    maxSize?: number;
+    maxFileCountPerUpload?: number;
+}) => {
+    code: DropzoneErrorCode;
+    message: string;
+};
+export declare function checkFiles({ file, accept, minSize, maxSize }: {
+    file: FromEventFileTypes;
+    accept: MimeTypes[] | string[] | undefined;
+    minSize: number;
+    maxSize: number;
+}): {
+    errors: {
+        code: DropzoneErrorCode;
+        message: string;
+    }[];
+    isAccepted: boolean;
+};
+export declare function getFileTypeErrors(file: FromEventFileTypes, accept?: string[]): DropzoneErrorCode[];
+export declare function getFileSizeErrors(file: FromEventFileTypes, minSize: number, maxSize: number): DropzoneErrorCode[];
+export declare function isPropagationStopped(event: Event): boolean;
+export declare function isEventWithFiles(event: Event | DragEvent): boolean | FileList | null | undefined;
+export declare function isIeOrEdge(userAgent?: string): boolean;

package/dist/components/form/dropzone/default.js

@@ -0,0 +1,78 @@
+import accepts from "./attr-accept.ts";
+// 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";
+export const generateErrorMessage = (code, props) => {
+    const errorMessages = {
+        INVALID_FILE_TYPE: `File type must be one of ${props?.accept?.join(",")}.`,
+        FILE_TOO_LARGE: `File is larger than ${props?.maxSize} bytes.`,
+        FILE_TOO_SMALL: `File is smaller than ${props?.minSize} bytes.`,
+        TOO_MANY_FILES: `File count cannot be more than ${props?.maxFileCountPerUpload}.`,
+        CANNOT_UPLOAD_MULTIPLE_FILES: `Cannot upload multiple files.`,
+        UNKOWN: "Unkown error"
+    };
+    return { code, message: errorMessages[code] || errorMessages["UNKOWN"] };
+};
+export function checkFiles({ file, accept = [], minSize, maxSize }) {
+    const fileTypeErrors = getFileTypeErrors(file, accept);
+    const fileSizeErrors = getFileSizeErrors(file, minSize, maxSize);
+    const errors = [...fileSizeErrors, ...fileTypeErrors];
+    const errorWithMessages = errors.map((error) => (generateErrorMessage(error, { accept, minSize, maxSize })));
+    return { errors: errorWithMessages, isAccepted: errors?.length === 0 };
+}
+// 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 getFileTypeErrors(file, accept = []) {
+    const errors = [];
+    const isAcceptableType = file.type === "application/x-moz-file" || accepts(file, accept);
+    if (!isAcceptableType) {
+        errors.push("INVALID_FILE_TYPE");
+    }
+    return errors;
+}
+export function getFileSizeErrors(file, minSize, maxSize) {
+    let errors = [];
+    if (!("size" in file))
+        return errors;
+    if (isDefined(file.size)) {
+        if (isDefined(maxSize) && file.size > maxSize) {
+            errors.push("FILE_TOO_LARGE");
+        }
+        else if (isDefined(minSize) && file.size < minSize) {
+            errors.push("FILE_TOO_SMALL");
+        }
+    }
+    return errors;
+}
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+// 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.cancelBubble !== "undefined") {
+        return event.cancelBubble;
+    }
+    return false;
+}
+export function isEventWithFiles(event) {
+    if ('dataTransfer' in event && event.dataTransfer) {
+        return Array.prototype.some.call(event.dataTransfer.types, (type) => type === "Files" || type === "application/x-moz-file");
+    }
+    // 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
+    const target = event.target;
+    return target?.files;
+}
+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);
+}

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

@@ -0,0 +1,60 @@
+export type DropzoneErrorCode = "INVALID_FILE_TYPE" | "FILE_TOO_LARGE" | "FILE_TOO_SMALL" | "TOO_MANY_FILES" | "CANNOT_UPLOAD_MULTIPLE_FILES" | "UNKOWN";
+export type DropzoneErrorTypes = {
+    message: string;
+    code: DropzoneErrorCode;
+} | null;
+import type { Snippet } from "svelte";
+import type { EventHandler } from "svelte/elements";
+export type FromEventFileTypes = File | DataTransferItem;
+export type RejectedFile<T> = {
+    file: T;
+    errors: DropzoneErrorTypes[];
+};
+export type DropzoneEvent<T> = {
+    acceptedFiles: T[];
+    rejectedFiles: RejectedFile<T>[];
+    event: DragEvent | Event;
+};
+export type DropzoneEventHandler<T> = (data: DropzoneEvent<T>) => void | undefined;
+export type MimeTypes = "audio/aac" | "application/x-abiword" | "image/apng" | "application/x-freearc" | "image/avif" | "video/x-msvideo" | "application/vnd.amazon.ebook" | "application/octet-stream" | "image/bmp" | "application/x-bzip" | "application/x-bzip2" | "application/x-cdf" | "application/x-csh" | "text/css" | "text/csv" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-fontobject" | "application/epub+zip" | "application/gzip." | "image/gif" | "text/html" | "image/vnd.microsoft.icon" | "text/calendar" | "application/java-archive" | "image/jpeg" | "text/javascript" | "application/json" | "application/ld+json" | "audio/midi, audio/x-midi" | "text/javascript" | "audio/mpeg" | "video/mp4" | "video/mpeg" | "application/vnd.apple.installer+xml" | "application/vnd.oasis.opendocument.presentation" | "application/vnd.oasis.opendocument.spreadsheet" | "application/vnd.oasis.opendocument.text" | "audio/ogg" | "video/ogg" | "application/ogg" | "audio/ogg" | "font/otf" | "image/png" | "application/pdf" | "application/x-httpd-php" | "application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/vnd.rar" | "application/rtf" | "application/x-sh" | "image/svg+xml" | "application/x-tar" | "image/tiff" | "video/mp2t" | "font/ttf" | "text/plain" | "application/vnd.visio" | "audio/wav" | "audio/webm" | "video/webm" | "image/webp" | "font/woff" | "font/woff2" | "application/xhtml+xml" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/xml" | "application/vnd.mozilla.xul+xml" | "application/zip." | "video/3gpp" | "audio/3gpp" | "video/3gpp2" | "audio/3gpp2" | "application/x-7z-compressed";
+export interface DropzoneAreaEvents {
+    dragenter: EventHandler<DragEvent> | null;
+    dragover: EventHandler<DragEvent> | null;
+    dragleave: EventHandler<DragEvent> | null;
+    drop: EventHandler<DragEvent> | null;
+}
+/**
+ * Custom Dropzone Event Handlers and props to make element act as dropzone inside the library.
+ * Don't override listeners in order to make library function.
+ */
+export interface CustomDropzoneProps {
+    'data-drozone-element-type': string;
+    id: string;
+    tabindex: number;
+    role: string;
+    onkeydown?: EventHandler<KeyboardEvent> | null;
+    onclick?: EventHandler<MouseEvent> | null;
+}
+export interface DropzoneProps {
+    accept?: MimeTypes[] | string[];
+    disabled?: boolean;
+    maxSize?: number;
+    minSize?: number;
+    multiple?: boolean;
+    maxFileCountPerUpload?: number;
+    preventDropOnDocument?: boolean;
+    disableDropzoneClick?: boolean;
+    disableDropzoneKeydown?: boolean;
+    disableDropzoneDrag?: boolean;
+    name?: string;
+    required?: boolean;
+    inputElement?: HTMLInputElement;
+    dropzoneElement?: HTMLElement | undefined;
+    CustomDropzone?: Snippet<[CustomDropzoneProps]> | undefined;
+    children?: Snippet;
+    onDragenter?: DropzoneEventHandler<DataTransferItem>;
+    onDragover?: DropzoneEventHandler<DataTransferItem>;
+    onDragleave?: DropzoneEventHandler<DataTransferItem>;
+    onDrop?: DropzoneEventHandler<File>;
+    onFileDialogCancel?: () => void;
+}

package/dist/components/form/dropzone/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -31,10 +31,11 @@ export { default as Switch } from './components/form/Switch.svelte';
 export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export type { ChoiceInputOption } from './components/form/utils.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
-export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
 export { default as Form } from './components/form/Form.svelte';
 export { type Field, serialize, createForm, readForm, mapEntiresToOptions } from './components/form/form.js';
+export { default as Dropzone } from './components/form/dropzone/Dropzone.svelte';
+export * from './components/form/dropzone/types.js';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -43,10 +43,11 @@ export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
 export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
-export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
 export { default as Form } from './components/form/Form.svelte';
 export { serialize, createForm, readForm, mapEntiresToOptions } from './components/form/form.js';
+export { default as Dropzone } from './components/form/dropzone/Dropzone.svelte';
+export * from './components/form/dropzone/types.js';
 /*
  * Content
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.12.7",
+	"version": "4.13.0",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -53,6 +53,7 @@
 		"eslint": "^9.26.0",
 		"eslint-config-prettier": "^10.1.2",
 		"eslint-plugin-svelte": "^3.5.1",
+		"file-selector": "^2.1.2",
 		"npm-watch": "^0.13.0",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -69,6 +70,7 @@
 		"ioredis": "^5.6.1",
 		"marked": "^15.0.11",
 		"oauth4webapi": "^3.5.0",
+		"svelte-dropzone-runes": "^1.0.3",
 		"sveltekit-superforms": "^2.25.0",
 		"yup": "^1.6.1",
 		"zod": "^3.25.56"

package/dist/components/form/Dropzone.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
-	import { cn } from '../../utils.js';
-
-	let {
-		id,
-		children,
-		maxFiles,
-		maxFileSize,
-		fileCount,
-		disabled = false,
-		onUpload,
-		onFileRejected,
-		accept,
-		css,
-		...rest
-	}: Partial<FileDropZoneProps> = $props();
-
-	if (maxFiles !== undefined && fileCount === undefined) {
-		console.warn(
-			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
-		);
-	}
-
-	let uploading = $state(false);
-
-	const drop = async (
-		e: DragEvent & {
-			currentTarget: EventTarget & HTMLLabelElement;
-		}
-	) => {
-		if (disabled || !canUploadFiles) return;
-
-		e.preventDefault();
-
-		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
-
-		await upload(droppedFiles);
-	};
-
-	const change = async (
-		e: Event & {
-			currentTarget: EventTarget & HTMLInputElement;
-		}
-	) => {
-		if (disabled) return;
-
-		const selectedFiles = e.currentTarget.files;
-
-		if (!selectedFiles) return;
-
-		await upload(Array.from(selectedFiles));
-
-		// this if a file fails and we upload the same file again we still get feedback
-		(e.target as HTMLInputElement).value = '';
-	};
-
-	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
-		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
-
-		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
-
-		if (!accept) return undefined;
-
-		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
-		const fileType = file.type.toLowerCase();
-		const fileName = file.name.toLowerCase();
-
-		const isAcceptable = acceptedTypes.some((pattern) => {
-			// check extension like .mp4
-			if (fileType.startsWith('.')) {
-				return fileName.endsWith(pattern);
-			}
-
-			// if pattern has wild card like video/*
-			if (pattern.endsWith('/*')) {
-				const baseType = pattern.slice(0, pattern.indexOf('/*'));
-				return fileType.startsWith(baseType + '/');
-			}
-
-			// otherwise it must be a specific type like video/mp4
-			return fileType === pattern;
-		});
-
-		if (!isAcceptable) return 'File type not allowed';
-
-		return undefined;
-	};
-
-	const upload = async (uploadFiles: File[]) => {
-		uploading = true;
-
-		const validFiles: File[] = [];
-
-		for (let i = 0; i < uploadFiles.length; i++) {
-			const file = uploadFiles[i];
-
-			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
-
-			if (rejectedReason) {
-				onFileRejected?.({ file, reason: rejectedReason });
-				continue;
-			}
-
-			validFiles.push(file);
-		}
-
-		await onUpload(validFiles);
-
-		uploading = false;
-	};
-
-	const canUploadFiles = $derived(
-		!disabled &&
-			!uploading &&
-			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
-	);
-</script>
-
-<label
-	ondragover={(e) => e.preventDefault()}
-	ondrop={drop}
-	for={id}
-	aria-disabled={!canUploadFiles}
-	class={cn(
-		'flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed border-border p-6 transition-all hover:cursor-pointer hover:bg-accent/25 aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
-		css ?? ''
-	)}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<div class="flex flex-col place-items-center justify-center gap-2">
-			<div
-				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="lucide lucide-upload-icon lucide-upload"
-					><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
-						points="17 8 12 3 7 8"
-					/><line x1="12" x2="12" y1="3" y2="15" /></svg
-				>
-			</div>
-			<div class="flex flex-col gap-0.5 text-center">
-				<span class="font-medium text-muted-foreground">
-					Drag 'n' drop files here, or click to select files
-				</span>
-				{#if maxFiles || maxFileSize}
-					<span class="text-sm text-muted-foreground/75">
-						{#if maxFiles}
-							<span>You can upload {maxFiles} files</span>
-						{/if}
-						{#if maxFiles && maxFileSize}
-							<span>(up to {displaySize(maxFileSize)} each)</span>
-						{/if}
-						{#if maxFileSize && !maxFiles}
-							<span>Maximum size {displaySize(maxFileSize)}</span>
-						{/if}
-					</span>
-				{/if}
-			</div>
-		</div>
-	{/if}
-	<input
-		{...rest}
-		disabled={!canUploadFiles}
-		{id}
-		name={id}
-		{accept}
-		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
-		type="file"
-		onchange={change}
-		class="hidden"
-	/>
-</label>

package/dist/components/form/Dropzone.svelte.d.ts

@@ -1,4 +0,0 @@
-import { type FileDropZoneProps } from './dropzone.js';
-declare const Dropzone: import("svelte").Component<Partial<FileDropZoneProps>, {}, "">;
-type Dropzone = ReturnType<typeof Dropzone>;
-export default Dropzone;

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

@@ -1,49 +0,0 @@
-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/*";
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-export type FileRejectedReason = 'Maximum file size exceeded' | 'File type not allowed' | 'Maximum files uploaded';
-export interface FileDropZoneProps extends Omit<HTMLInputAttributes, 'multiple'> {
-    /** Called with the uploaded files when the user drops or clicks and selects their files.
-     *
-     * @param files
-     */
-    onUpload: (files: File[]) => Promise<void>;
-    /** The maximum amount files allowed to be uploaded */
-    maxFiles?: number;
-    fileCount?: number;
-    /** The maximum size of a file in bytes */
-    maxFileSize?: number;
-    children?: Snippet<[]>;
-    css: string;
-    /** Called when a file does not meet the upload criteria (size, or type) */
-    onFileRejected?: (opts: {
-        reason: FileRejectedReason;
-        file: File;
-    }) => void;
-    /** Takes a comma separated list of one or more file types.
-     *
-     *  [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
-     *
-     * ### Usage
-     * ```svelte
-     * <FileDropZone
-     * 		accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-     * />
-     * ```
-     *
-     * ### Common Values
-     * ```svelte
-     * <FileDropZone accept="audio/*"/>
-     * <FileDropZone accept="image/*"/>
-     * <FileDropZone accept="video/*"/>
-     * ```
-     */
-    accept?: string;
-}

package/dist/components/form/dropzone.js

@@ -1,18 +0,0 @@
-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`;
-};
-// 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/*';