@functionalcms/svelte-components 4.8.4 → 4.8.6

package/dist/components/form/Dropzone.svelte

@@ -0,0 +1,376 @@
+<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;
+	}
+
+	let {
+		accept = undefined,
+		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 = [];
+	}
+
+	// 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();
+		}
+	}
+
+	// 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;
+		}
+
+		if (event.keyCode === 32 || event.keyCode === 13) {
+			event.preventDefault();
+			openFileDialog();
+		}
+	}
+
+	// Update focus state for the dropzone
+	function onFocusCb() {
+		state.isFocused = true;
+	}
+	function onBlurCb() {
+		state.isFocused = false;
+	}
+
+	// Cb to open the file dialog when click occurs on the dropzone
+	function onClickCb() {
+		if (noClick) {
+			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();
+		}
+	}
+
+	function onDragEnterCb(event) {
+		event.preventDefault();
+		stopPropagation(event);
+
+		dragTargetsRef = [...dragTargetsRef, event.target];
+
+		if (isEvtWithFiles(event)) {
+			Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
+				if (isPropagationStopped(event) && !noDragEventsBubbling) {
+					return;
+				}
+
+				state.draggedFiles = draggedFiles;
+				state.isDragActive = true;
+
+				dispatch('dragenter', {
+					dragEvent: event
+				});
+			});
+		}
+	}
+
+	function onDragOverCb(event) {
+		event.preventDefault();
+		stopPropagation(event);
+
+		if (event.dataTransfer) {
+			try {
+				event.dataTransfer.dropEffect = 'copy';
+			} catch {} /* eslint-disable-line no-empty */
+		}
+
+		if (isEvtWithFiles(event)) {
+			dispatch('dragover', {
+				dragEvent: event
+			});
+		}
+
+		return false;
+	}
+
+	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;
+		}
+
+		state.isDragActive = false;
+		state.draggedFiles = [];
+
+		if (isEvtWithFiles(event)) {
+			dispatch('dragleave', {
+				dragEvent: event
+			});
+		}
+	}
+
+	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();
+	}
+
+	$: composeHandler = (fn) => (disabled ? null : fn);
+
+	$: composeKeyboardHandler = (fn) => (noKeyboard ? null : composeHandler(fn));
+
+	$: composeDragHandler = (fn) => (noDrag ? null : composeHandler(fn));
+
+	$: defaultPlaceholderString = multiple
+		? "Drag 'n' drop some files here, or click to select files"
+		: "Drag 'n' drop a file here, or click to select a file";
+
+	function stopPropagation(event) {
+		if (noDragEventsBubbling) {
+			event.stopPropagation();
+		}
+	}
+
+	// allow the entire document to be a drag target
+	function onDocumentDragOver(event) {
+		if (preventDropOnDocument) {
+			event.preventDefault();
+		}
+	}
+
+	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;
+		}
+		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);
+		}
+	}
+
+	onDestroy(() => {
+		// This is critical for canceling the timeout behaviour on `onWindowFocus()`
+		inputElement = null;
+	});
+
+	function onInputElementClick(event) {
+		event.stopPropagation();
+	}
+</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}
+>
+	<input
+		accept={accept?.toString()}
+		{multiple}
+		{required}
+		type="file"
+		{name}
+		autocomplete="off"
+		tabindex="-1"
+		on:change={onDropCb}
+		on:click={onInputElementClick}
+		bind:this={inputElement}
+		style="display: none;"
+	/>
+	<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>

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

@@ -0,0 +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;
+}
+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>;
+export default Dropzone;

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

@@ -0,0 +1,58 @@
+/**
+ * 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;

package/dist/components/form/dropzone.js

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

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

@@ -0,0 +1,7 @@
+export declare const COMMON_MIME_TYPES: Map<string, string>;
+export declare function toFileWithPath(file: FileWithPath, path?: string, h?: FileSystemHandle): FileWithPath;
+export interface FileWithPath extends File {
+    readonly path?: string;
+    readonly handle?: FileSystemFileHandle;
+    readonly relativePath?: string;
+}