@functionalcms/svelte-components 4.8.10 → 4.8.12

package/dist/components/form/Dropzone.svelte

@@ -1,376 +1,218 @@
-<script lang="ts">
-	// import { fromEvent } from 'file-selector';
-	import {
-		fileAccepted,
-		fileMatchSize,
-		isEvtWithFiles,
-		isIeOrEdge,
-		isPropagationStopped,
-		TOO_MANY_FILES_REJECTION
-	} from './dropzone.ts';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-
-	interface Props {
-		accept: string | Array<string>; // = undefined;
-		disabled: boolean; // = false;
-		maxSize: number; // = Infinity;
-		minSize: number; // = 0;
-		multiple: boolean; // = true;
-		preventDropOnDocument: boolean; // = true;
-		noClick: boolean; // = false;
-		noKeyboard: boolean; // = false;
-		noDrag: boolean; // = false;
-		noDragEventsBubbling: boolean; // = false;
-		containerClasses: string; // = '';
-		containerStyles: string; // = '';
-		disableDefaultStyles: boolean; // = false;
-		name: string; // = '';
-		// inputElement?: boolean; // = undefined;
-		required: boolean; // = false;
+<script lang="ts" module>
+	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<[]>;
+		/** Called when a file does not meet the upload criteria (size, or type) */
+		onFileRejected?: (opts: { reason: FileRejectedReason; file: File }) => void;
+
+		// just for extra documentation
+		/** 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;
 	}
+</script>
+
+<script lang="ts">
+	import Upload from '@lucide/svelte/icons/upload.svelte';
+	import { displaySize } from './dropzone.ts';
+	import { cn } from '../../utils.ts';
 
 	let {
-		accept = undefined,
+		id,
+		children,
+		maxFiles,
+		maxFileSize,
+		fileCount,
 		disabled = false,
-		maxSize = Number.MAX_VALUE,
-		minSize = 0,
-		multiple = true,
-		preventDropOnDocument = true,
-		noClick = false,
-		noKeyboard = false,
-		noDrag = false,
-		noDragEventsBubbling = false,
-		containerClasses = '',
-		containerStyles = '',
-		disableDefaultStyles = false,
-		name = '',
-		// inputElement = undefined,
-		required = false
-	}: Partial<Props> = $props();
-
-	let inputElement: HTMLInputElement | undefined;
-
-	let state = $state({
-		isFocused: false,
-		isFileDialogActive: false,
-		isDragActive: false,
-		isDragAccept: false,
-		isDragReject: false,
-		draggedFiles: [],
-		acceptedFiles: [],
-		fileRejections: []
-	});
-
-	let rootRef: any;
-
-	function resetState() {
-		state.isFileDialogActive = false;
-		state.isDragActive = false;
-		state.draggedFiles = [];
-		state.acceptedFiles = [];
-		state.fileRejections = [];
-	}
+		onUpload,
+		onFileRejected,
+		accept,
+		class: className,
+		...rest
+	}: FileDropZoneProps = $props();
 
-	// Fn for opening the file dialog programmatically
-	function openFileDialog() {
-		if (inputElement) {
-			inputElement.value = null; // TODO check if null needs to be set
-			state.isFileDialogActive = true;
-			inputElement.click();
-		}
+	if (maxFiles !== undefined && fileCount === undefined) {
+		console.warn(
+			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
+		);
 	}
 
-	// Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-	function onKeyDownCb(event) {
-		// Ignore keyboard events bubbling up the DOM tree
-		if (!rootRef || !rootRef.isEqualNode(event.target)) {
-			return;
-		}
+	let uploading = $state(false);
 
-		if (event.keyCode === 32 || event.keyCode === 13) {
-			event.preventDefault();
-			openFileDialog();
+	const drop = async (
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLLabelElement;
 		}
-	}
+	) => {
+		if (disabled || !canUploadFiles) return;
 
-	// Update focus state for the dropzone
-	function onFocusCb() {
-		state.isFocused = true;
-	}
-	function onBlurCb() {
-		state.isFocused = false;
-	}
+		e.preventDefault();
 
-	// Cb to open the file dialog when click occurs on the dropzone
-	function onClickCb() {
-		if (noClick) {
-			return;
-		}
+		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+
+		await upload(droppedFiles);
+	};
 
-		// 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 change = async (
+		e: Event & {
+			currentTarget: EventTarget & HTMLInputElement;
 		}
-	}
+	) => {
+		if (disabled) return;
 
-	function onDragEnterCb(event) {
-		event.preventDefault();
-		stopPropagation(event);
+		const selectedFiles = e.currentTarget.files;
 
-		dragTargetsRef = [...dragTargetsRef, event.target];
+		if (!selectedFiles) return;
 
-		if (isEvtWithFiles(event)) {
-			Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
-				if (isPropagationStopped(event) && !noDragEventsBubbling) {
-					return;
-				}
+		await upload(Array.from(selectedFiles));
 
-				state.draggedFiles = draggedFiles;
-				state.isDragActive = true;
+		// this if a file fails and we upload the same file again we still get feedback
+		(e.target as HTMLInputElement).value = '';
+	};
 
-				dispatch('dragenter', {
-					dragEvent: event
-				});
-			});
-		}
-	}
-
-	function onDragOverCb(event) {
-		event.preventDefault();
-		stopPropagation(event);
+	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
+		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
 
-		if (event.dataTransfer) {
-			try {
-				event.dataTransfer.dropEffect = 'copy';
-			} catch {} /* eslint-disable-line no-empty */
-		}
+		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
 
-		if (isEvtWithFiles(event)) {
-			dispatch('dragover', {
-				dragEvent: event
-			});
-		}
+		if (!accept) return undefined;
 
-		return false;
-	}
+		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
+		const fileType = file.type.toLowerCase();
+		const fileName = file.name.toLowerCase();
 
-	function onDragLeaveCb(event) {
-		event.preventDefault();
-		stopPropagation(event);
-
-		// Only deactivate once the dropzone and all children have been left
-		const targets = dragTargetsRef.filter((target) => rootRef && rootRef.contains(target));
-		// Make sure to remove a target present multiple times only once
-		// (Firefox may fire dragenter/dragleave multiple times on the same element)
-		const targetIdx = targets.indexOf(event.target);
-		if (targetIdx !== -1) {
-			targets.splice(targetIdx, 1);
-		}
-		dragTargetsRef = targets;
-		if (targets.length > 0) {
-			return;
-		}
+		const isAcceptable = acceptedTypes.some((pattern) => {
+			// check extension like .mp4
+			if (fileType.startsWith('.')) {
+				return fileName.endsWith(pattern);
+			}
 
-		state.isDragActive = false;
-		state.draggedFiles = [];
+			// if pattern has wild card like video/*
+			if (pattern.endsWith('/*')) {
+				const baseType = pattern.slice(0, pattern.indexOf('/*'));
+				return fileType.startsWith(baseType + '/');
+			}
 
-		if (isEvtWithFiles(event)) {
-			dispatch('dragleave', {
-				dragEvent: event
-			});
-		}
-	}
+			// otherwise it must be a specific type like video/mp4
+			return fileType === pattern;
+		});
 
-	function onDropCb(event) {
-		event.preventDefault();
-		stopPropagation(event);
-
-		dragTargetsRef = [];
-
-		if (isEvtWithFiles(event)) {
-			dispatch('filedropped', {
-				event
-			});
-			Promise.resolve(getFilesFromEvent(event)).then((files) => {
-				if (isPropagationStopped(event) && !noDragEventsBubbling) {
-					return;
-				}
-
-				const acceptedFiles = [];
-				const fileRejections = [];
-
-				files.forEach((file) => {
-					const [accepted, acceptError] = fileAccepted(file, accept);
-					const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
-					if (accepted && sizeMatch) {
-						acceptedFiles.push(file);
-					} else {
-						const errors = [acceptError, sizeError].filter((e) => e);
-						fileRejections.push({ file, errors });
-					}
-				});
-
-				if (!multiple && acceptedFiles.length > 1) {
-					// Reject everything and empty accepted files
-					acceptedFiles.forEach((file) => {
-						fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] });
-					});
-					acceptedFiles.splice(0);
-				}
-
-				// Files dropped keep input in sync
-				if (event.dataTransfer) {
-					inputElement.files = event.dataTransfer.files;
-				}
-
-				state.acceptedFiles = acceptedFiles;
-				state.fileRejections = fileRejections;
-
-				dispatch('drop', {
-					acceptedFiles,
-					fileRejections,
-					event
-				});
-
-				if (fileRejections.length > 0) {
-					dispatch('droprejected', {
-						fileRejections,
-						event
-					});
-				}
-
-				if (acceptedFiles.length > 0) {
-					dispatch('dropaccepted', {
-						acceptedFiles,
-						event
-					});
-				}
-			});
-		}
-		resetState();
-	}
+		if (!isAcceptable) return 'File type not allowed';
 
-	let composeHandler = (fn: any) => (disabled ? null : fn);
+		return undefined;
+	};
 
-    let composeKeyboardHandler = (fn: any) => (noKeyboard ? null : composeHandler(fn));
+	const upload = async (uploadFiles: File[]) => {
+		uploading = true;
 
-	let composeDragHandler = (fn: any) => (noDrag ? null : composeHandler(fn));
+		const validFiles: File[] = [];
 
-	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");
+		for (let i = 0; i < uploadFiles.length; i++) {
+			const file = uploadFiles[i];
 
-	function stopPropagation(event) {
-		if (noDragEventsBubbling) {
-			event.stopPropagation();
-		}
-	}
+			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
 
-	// allow the entire document to be a drag target
-	function onDocumentDragOver(event) {
-		if (preventDropOnDocument) {
-			event.preventDefault();
-		}
-	}
+			if (rejectedReason) {
+				onFileRejected?.({ file, reason: rejectedReason });
+				continue;
+			}
 
-	let dragTargetsRef = [];
-	function onDocumentDrop(event) {
-		if (!preventDropOnDocument) {
-			return;
-		}
-		if (rootRef && rootRef.contains(event.target)) {
-			// If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
-			return;
+			validFiles.push(file);
 		}
-		event.preventDefault();
-		dragTargetsRef = [];
-	}
 
-	// Update file dialog active state when the window is focused on
-	function onWindowFocus() {
-		// Execute the timeout only if the file dialog is opened in the browser
-		if (state.isFileDialogActive) {
-			setTimeout(() => {
-				if (inputElement) {
-					const { files } = inputElement;
-
-					if (!files.length) {
-						state.isFileDialogActive = false;
-						dispatch('filedialogcancel');
-					}
-				}
-			}, 300);
-		}
-	}
+		await onUpload(validFiles);
 
-	onDestroy(() => {
-		// This is critical for canceling the timeout behaviour on `onWindowFocus()`
-		inputElement = null;
-	});
+		uploading = false;
+	};
 
-	function onInputElementClick(event) {
-		event.stopPropagation();
-	}
+	const canUploadFiles = $derived(
+		!disabled &&
+			!uploading &&
+			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
+	);
 </script>
 
-<svelte:window on:focus={onWindowFocus} on:dragover={onDocumentDragOver} on:drop={onDocumentDrop} />
-
-<div
-	bind:this={rootRef}
-	tabindex="0"
-	role="button"
-	class="{disableDefaultStyles ? '' : 'dropzone'}
-    {containerClasses}"
-	style={containerStyles}
-	on:keydown={composeKeyboardHandler(onKeyDownCb)}
-	on:focus={composeKeyboardHandler(onFocusCb)}
-	on:blur={composeKeyboardHandler(onBlurCb)}
-	on:click={composeHandler(onClickCb)}
-	on:dragenter={composeDragHandler(onDragEnterCb)}
-	on:dragover={composeDragHandler(onDragOverCb)}
-	on:dragleave={composeDragHandler(onDragLeaveCb)}
-	on:drop={composeDragHandler(onDropCb)}
-	{...$$restProps}
+<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',
+		className
+	)}
 >
+	{#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"
+			>
+				<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">
+					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
-		accept={accept?.toString()}
-		{multiple}
-		{required}
+		{...rest}
+		disabled={!canUploadFiles}
+		{id}
+		{accept}
+		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
 		type="file"
-		{name}
-		autocomplete="off"
-		tabindex="-1"
-		on:change={onDropCb}
-		on:click={onInputElementClick}
-		bind:this={inputElement}
-		style="display: none;"
+		onchange={change}
+		class="hidden"
 	/>
-	<slot>
-		<p>{defaultPlaceholderString}</p>
-	</slot>
-</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:focus {
-		border-color: #2196f3;
-	}
-</style>
+</label>

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

@@ -1,43 +1,43 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+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<[]>;
+    /** 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;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Dropzone: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Partial<{
-    accept: string | Array<string>;
-    disabled: boolean;
-    maxSize: number;
-    minSize: number;
-    multiple: boolean;
-    preventDropOnDocument: boolean;
-    noClick: boolean;
-    noKeyboard: boolean;
-    noDrag: boolean;
-    noDragEventsBubbling: boolean;
-    containerClasses: string;
-    containerStyles: string;
-    disableDefaultStyles: boolean;
-    name: string;
-    required: boolean;
-}>, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Dropzone = InstanceType<typeof Dropzone>;
+declare const Dropzone: import("svelte").Component<FileDropZoneProps, {}, "">;
+type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;