@functionalcms/svelte-components 2.34.8 → 2.34.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.34.8",
+	"version": "2.34.11",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -46,7 +46,6 @@
 		"svelte": "^4.2.8"
 	},
 	"devDependencies": {
-		"@floating-ui/dom": "^1.6.12",
 		"@functionalcms/services": "latest",
 		"@sveltejs/adapter-auto": "^3.1.0",
 		"@sveltejs/package": "^2.2.5",
@@ -61,7 +60,7 @@
 		"vite": "^5.0.10"
 	},
 	"dependencies": {
-		"@inlang/paraglide-sveltekit": "^0.11.5",
+		"@floating-ui/dom": "^1.6.12",
 		"@splidejs/svelte-splide": "^0.2.9",
 		"date-picker-svelte": "^2.14.1",
 		"ioredis": "^5.4.1",
@@ -71,7 +70,9 @@
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-slug": "^6.0.0",
 		"remark-abbr": "^1.4.2",
-		"remark-github": "^12.0.0"
+		"remark-github": "^12.0.0",
+		"svelte-dropzone": "^1.0.6",
+		"svelte-file-dropzone": "^2.0.9"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

package/dist/components/files/Dropzone.svelte

@@ -1,366 +0,0 @@
-<script>
-    import { fromEvent } from "./file-selector.js";
-    import {
-      fileAccepted,
-      fileMatchSize,
-      isEvtWithFiles,
-      isIeOrEdge,
-      isPropagationStopped,
-      TOO_MANY_FILES_REJECTION
-    } from "./utils.js";
-    import { onMount, onDestroy, createEventDispatcher } from "svelte";
-  
-    //props
-    /**
-     * Set accepted file types.
-     * See https://github.com/okonet/attr-accept for more information.
-     */
-    /**
-     * @type {string | Array<string>}
-     */
-    export let accept = undefined;
-    export let disabled = false;
-    export let getFilesFromEvent = fromEvent;
-    export let maxSize = Infinity;
-    export let minSize = 0;
-    export let multiple = true;
-    export let preventDropOnDocument = true;
-    export let noClick = false;
-    export let noKeyboard = false;
-    export let noDrag = false;
-    export let noDragEventsBubbling = false;
-    export let containerClasses = "";
-    export let containerStyles = "";
-    export let disableDefaultStyles = false;
-    export let name = "";
-    export let inputElement = undefined;
-    export let required = false;
-    const dispatch = createEventDispatcher();
-  
-    //state
-  
-    let state = {
-      isFocused: false,
-      isFileDialogActive: false,
-      isDragActive: false,
-      isDragAccept: false,
-      isDragReject: false,
-      draggedFiles: [],
-      acceptedFiles: [],
-      fileRejections: []
-    };
-  
-    let rootRef;
-  
-    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/files/Dropzone.svelte.d.ts

@@ -1,82 +0,0 @@
-/** @typedef {typeof __propDef.props}  DropzoneProps */
-/** @typedef {typeof __propDef.events}  DropzoneEvents */
-/** @typedef {typeof __propDef.slots}  DropzoneSlots */
-export default class Dropzone extends SvelteComponent<{
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    name?: string | undefined;
-    accept?: string | string[] | undefined;
-    minSize?: number | undefined;
-    maxSize?: number | undefined;
-    multiple?: boolean | undefined;
-    getFilesFromEvent?: typeof fromEvent | undefined;
-    preventDropOnDocument?: boolean | undefined;
-    noClick?: boolean | undefined;
-    noKeyboard?: boolean | undefined;
-    noDrag?: boolean | undefined;
-    noDragEventsBubbling?: boolean | undefined;
-    containerClasses?: string | undefined;
-    containerStyles?: string | undefined;
-    disableDefaultStyles?: boolean | undefined;
-    inputElement?: any;
-    required?: boolean | undefined;
-}, {
-    dragenter: CustomEvent<any>;
-    dragover: CustomEvent<any>;
-    dragleave: CustomEvent<any>;
-    filedropped: CustomEvent<any>;
-    drop: CustomEvent<any>;
-    droprejected: CustomEvent<any>;
-    dropaccepted: CustomEvent<any>;
-    filedialogcancel: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type DropzoneProps = typeof __propDef.props;
-export type DropzoneEvents = typeof __propDef.events;
-export type DropzoneSlots = typeof __propDef.slots;
-import { fromEvent } from "./file-selector.js";
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        accept?: string | string[] | undefined;
-        minSize?: number | undefined;
-        maxSize?: number | undefined;
-        multiple?: boolean | undefined;
-        getFilesFromEvent?: typeof fromEvent | undefined;
-        preventDropOnDocument?: boolean | undefined;
-        noClick?: boolean | undefined;
-        noKeyboard?: boolean | undefined;
-        noDrag?: boolean | undefined;
-        noDragEventsBubbling?: boolean | undefined;
-        containerClasses?: string | undefined;
-        containerStyles?: string | undefined;
-        disableDefaultStyles?: boolean | undefined;
-        inputElement?: any;
-        required?: boolean | undefined;
-    };
-    events: {
-        dragenter: CustomEvent<any>;
-        dragover: CustomEvent<any>;
-        dragleave: CustomEvent<any>;
-        filedropped: CustomEvent<any>;
-        drop: CustomEvent<any>;
-        droprejected: CustomEvent<any>;
-        dropaccepted: CustomEvent<any>;
-        filedialogcancel: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/files/attr-accept.d.ts

@@ -1 +0,0 @@
-export default function _default(file: any, acceptedFiles: any): any;

package/dist/components/files/attr-accept.js

@@ -1,22 +0,0 @@
-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;
-  }

package/dist/components/files/file-selector.d.ts

@@ -1,15 +0,0 @@
-/**
- * Copied from https://github.com/react-dropzone/file-selector/tree/master
- */
-import { FileWithPath } from './file.js';
-/**
- * Convert a DragEvent's DataTrasfer object to a list of File objects
- * NOTE: If some of the items are folders,
- * everything will be flattened and placed in the same list but the paths will be kept as a {path} property.
- *
- * EXPERIMENTAL: A list of https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle objects can also be passed as an arg
- * and a list of File objects will be returned.
- *
- * @param evt
- */
-export declare function fromEvent(evt: Event | any): Promise<(FileWithPath | DataTransferItem)[]>;

package/dist/components/files/file-selector.js

@@ -1,167 +0,0 @@
-/**
- * Copied from https://github.com/react-dropzone/file-selector/tree/master
- */
-import { FileWithPath, toFileWithPath } from './file.js';
-const FILES_TO_IGNORE = [
-    // Thumbnail cache files for macOS and Windows
-    '.DS_Store', // macOs
-    'Thumbs.db' // Windows
-];
-/**
- * Convert a DragEvent's DataTrasfer object to a list of File objects
- * NOTE: If some of the items are folders,
- * everything will be flattened and placed in the same list but the paths will be kept as a {path} property.
- *
- * EXPERIMENTAL: A list of https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle objects can also be passed as an arg
- * and a list of File objects will be returned.
- *
- * @param evt
- */
-export async function fromEvent(evt) {
-    if (isObject(evt) && isDataTransfer(evt.dataTransfer)) {
-        return getDataTransferFiles(evt.dataTransfer, evt.type);
-    }
-    else if (isChangeEvt(evt)) {
-        return getInputFiles(evt);
-    }
-    else if (Array.isArray(evt) && evt.every(item => 'getFile' in item && typeof item.getFile === 'function')) {
-        return getFsHandleFiles(evt);
-    }
-    return [];
-}
-function isDataTransfer(value) {
-    return isObject(value);
-}
-function isChangeEvt(value) {
-    return isObject(value) && isObject(value.target);
-}
-function isObject(v) {
-    return typeof v === 'object' && v !== null;
-}
-function getInputFiles(evt) {
-    return fromList(evt.target.files).map(file => toFileWithPath(file));
-}
-// Ee expect each handle to be https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
-async function getFsHandleFiles(handles) {
-    const files = await Promise.all(handles.map(h => h.getFile()));
-    return files.map(file => toFileWithPath(file));
-}
-async function getDataTransferFiles(dt, type) {
-    // IE11 does not support dataTransfer.items
-    // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
-    if (dt.items) {
-        const items = fromList(dt.items)
-            .filter(item => item.kind === 'file');
-        // According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,
-        // only 'dragstart' and 'drop' has access to the data (source node)
-        if (type !== 'drop') {
-            return items;
-        }
-        const files = await Promise.all(items.map(toFilePromises));
-        return noIgnoredFiles(flatten(files));
-    }
-    return noIgnoredFiles(fromList(dt.files)
-        .map(file => toFileWithPath(file)));
-}
-function noIgnoredFiles(files) {
-    return files.filter(file => FILES_TO_IGNORE.indexOf(file.name) === -1);
-}
-// IE11 does not support Array.from()
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility
-// https://developer.mozilla.org/en-US/docs/Web/API/FileList
-// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList
-function fromList(items) {
-    if (items === null) {
-        return [];
-    }
-    const files = [];
-    // tslint:disable: prefer-for-of
-    for (let i = 0; i < items.length; i++) {
-        const file = items[i];
-        files.push(file);
-    }
-    return files;
-}
-// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
-function toFilePromises(item) {
-    if (typeof item.webkitGetAsEntry !== 'function') {
-        return fromDataTransferItem(item);
-    }
-    const entry = item.webkitGetAsEntry();
-    // Safari supports dropping an image node from a different window and can be retrieved using
-    // the DataTransferItem.getAsFile() API
-    // NOTE: FileSystemEntry.file() throws if trying to get the file
-    if (entry && entry.isDirectory) {
-        return fromDirEntry(entry);
-    }
-    return fromDataTransferItem(item, entry);
-}
-function flatten(items) {
-    return items.reduce((acc, files) => [
-        ...acc,
-        ...(Array.isArray(files) ? flatten(files) : [files])
-    ], []);
-}
-function fromDataTransferItem(item, entry) {
-    if (typeof item.getAsFileSystemHandle === 'function') {
-        return item.getAsFileSystemHandle()
-            .then(async (h) => {
-            const file = await h.getFile();
-            file.handle = h;
-            return toFileWithPath(file);
-        });
-    }
-    const file = item.getAsFile();
-    if (!file) {
-        return Promise.reject(`${item} is not a File`);
-    }
-    const fwp = toFileWithPath(file, entry?.fullPath ?? undefined);
-    return Promise.resolve(fwp);
-}
-// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry
-async function fromEntry(entry) {
-    return entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry);
-}
-// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry
-function fromDirEntry(entry) {
-    const reader = entry.createReader();
-    return new Promise((resolve, reject) => {
-        const entries = [];
-        function readEntries() {
-            // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader
-            // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries
-            reader.readEntries(async (batch) => {
-                if (!batch.length) {
-                    // Done reading directory
-                    try {
-                        const files = await Promise.all(entries);
-                        resolve(files);
-                    }
-                    catch (err) {
-                        reject(err);
-                    }
-                }
-                else {
-                    const items = Promise.all(batch.map(fromEntry));
-                    entries.push(items);
-                    // Continue reading
-                    readEntries();
-                }
-            }, (err) => {
-                reject(err);
-            });
-        }
-        readEntries();
-    });
-}
-// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry
-async function fromFileEntry(entry) {
-    return new Promise((resolve, reject) => {
-        entry.file((file) => {
-            const fwp = toFileWithPath(file, entry.fullPath);
-            resolve(fwp);
-        }, (err) => {
-            reject(err);
-        });
-    });
-}

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

@@ -1,10 +0,0 @@
-/**
- * Copied from https://github.com/react-dropzone/file-selector/tree/master
- */
-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;
-}