@securancy/file-explorer 1.0.6 → 1.1.1

package/dist/components/FileExplorer.svelte

@@ -1,15 +1,16 @@
-<script context="module"></script>
+<script context="module">export {};
+</script>
 
-<script>import { createEventDispatcher, tick } from "svelte";
-import FileExplorerBreadcrumb from "./FileExplorerBreadcrumb.svelte";
-import FileExplorerDisplayModeSwitcher from "./FileExplorerDisplayModeSwitcher.svelte";
-import { defaultTranslations, FileExplorerDisplayMode } from "../index.js";
-import FileExplorerCreateDirectory from "./FileExplorerCreateDirectory.svelte";
-import { Button, Modal } from "@securancy/svelte-components";
-import FileExplorerDirectory from "./FileExplorerDirectory.svelte";
-import { Icon } from "@securancy/svelte-components";
-import { fade } from "svelte/transition";
-import { pathsEqual } from "../utilities";
+<script>import { createEventDispatcher, tick } from 'svelte';
+import FileExplorerBreadcrumb from './FileExplorerBreadcrumb.svelte';
+import FileExplorerDisplayModeSwitcher from './FileExplorerDisplayModeSwitcher.svelte';
+import { defaultTranslations, FileExplorerDisplayMode } from '../index.js';
+import FileExplorerCreateDirectory from './FileExplorerCreateDirectory.svelte';
+import { Button, Modal } from '@securancy/svelte-components';
+import FileExplorerDirectory from './FileExplorerDirectory.svelte';
+import { Icon } from '@securancy/svelte-components';
+import { fade } from 'svelte/transition';
+import { pathsEqual } from '../utilities';
 export let displayMode = FileExplorerDisplayMode.Columns;
 export let filePath;
 export let documents;
@@ -18,128 +19,146 @@ export let routePrefix;
 export let canEdit;
 export let translations = defaultTranslations;
 export let getFilePreview;
-export let createDirectory = void 0;
-export let uploadFiles = void 0;
-export let deleteFile = void 0;
+// When provided, it will use the default implementation for creating directories, otherwise it will dispatch an event
+export let createDirectory = undefined;
+// When provided, it will use the default implementation for uploading files, otherwise it will dispatch an event
+export let uploadFiles = undefined;
+// When provided, it will use the default implementation for deleting files, otherwise it will dispatch an event
+export let deleteFile = undefined;
 const dispatch = createEventDispatcher();
 const scrollBackButtonThreshold = 200;
 let fileExplorerContentContainer;
 let showScrollBackButton = false;
+// Create directory state
 let createDirectoryPath;
 let createDirectoryModalOpen = false;
+// Delete item state
 let deleteFileModalOpen = false;
 let deleteFileEvent;
 let deleting = false;
 let overrideFilesModalOpen = false;
 let overrideFiles = [];
 let uploadFilesRequest;
-$: if (filePath) tick().then(() => scrollToRight());
+// If the route changes, always scroll to the right to show the new column
+$: if (filePath)
+    tick().then(() => scrollToRight());
 async function scrollToRight() {
-  if (!fileExplorerContentContainer) return;
-  fileExplorerContentContainer.scroll({
-    left: fileExplorerContentContainer.scrollWidth,
-    behavior: "smooth"
-  });
+    if (!fileExplorerContentContainer)
+        return;
+    fileExplorerContentContainer.scroll({
+        left: fileExplorerContentContainer.scrollWidth,
+        behavior: 'smooth',
+    });
 }
 function handleScroll() {
-  showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
+    showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
 }
 function handleScrollBack() {
-  fileExplorerContentContainer.scroll({
-    left: 0,
-    behavior: "smooth"
-  });
+    fileExplorerContentContainer.scroll({
+        left: 0,
+        behavior: 'smooth',
+    });
 }
 async function handleUploadFile(event) {
-  if (uploadFiles) {
-    if (event.detail.files) {
-      await uploadFilesInternal({
-        path: event.detail.path,
-        files: event.detail.files
-      });
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.multiple = true;
-      input.click();
-      input.addEventListener("change", async () => {
-        if (input.files) {
-          await uploadFilesInternal({
-            path: event.detail.path,
-            files: input.files
-          });
+    // When the uploadFiles function is set, use the default implementation
+    if (uploadFiles) {
+        // If the user has dropped files, upload them
+        if (event.detail.files) {
+            await uploadFilesInternal({
+                path: event.detail.path,
+                files: event.detail.files,
+            });
+        }
+        else {
+            // When the user has not dropped files, allow the user to select files from their filesystem
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.click();
+            input.addEventListener('change', async () => {
+                if (input.files) {
+                    await uploadFilesInternal({
+                        path: event.detail.path,
+                        files: input.files,
+                    });
+                }
+            });
         }
-      });
     }
-  } else {
-    dispatch("upload-file", event.detail);
-  }
+    else {
+        // Otherwise, dispatch an event
+        dispatch('upload-file', event.detail);
+    }
 }
 async function uploadFilesInternal(request) {
-  const filesInDirectory = Array.from(flattenedFiles($documents)).filter((x) => pathsEqual(x.path, request.path));
-  const existingFiles = Array.from(request.files).filter((file) => filesInDirectory.some((document2) => document2.name === file.name));
-  if (existingFiles.length > 0) {
-    overrideFiles = existingFiles;
-    overrideFilesModalOpen = true;
-    uploadFilesRequest = request;
-  } else {
-    await uploadFiles(request);
-    documents.refresh();
-  }
+    const filesInDirectory = Array.from(flattenedFiles($documents)).filter(x => pathsEqual(x.path, request.path));
+    const existingFiles = Array.from(request.files).filter(file => filesInDirectory.some(document => document.name === file.name));
+    if (existingFiles.length > 0) {
+        overrideFiles = existingFiles;
+        overrideFilesModalOpen = true;
+        uploadFilesRequest = request;
+    }
+    else {
+        await uploadFiles(request);
+        documents.refresh();
+    }
 }
 async function confirmOverrideFiles() {
-  await uploadFiles(uploadFilesRequest);
-  documents.refresh();
-  overrideFilesModalOpen = false;
-  overrideFiles = [];
-  uploadFilesRequest = void 0;
+    await uploadFiles(uploadFilesRequest);
+    documents.refresh();
+    overrideFilesModalOpen = false;
+    overrideFiles = [];
+    uploadFilesRequest = undefined;
 }
 async function cancelOverrideFiles() {
-  overrideFilesModalOpen = false;
-  overrideFiles = [];
-  uploadFilesRequest = void 0;
+    overrideFilesModalOpen = false;
+    overrideFiles = [];
+    uploadFilesRequest = undefined;
 }
 function handleCreateDirectory(event) {
-  if (createDirectory) {
-    createDirectoryPath = event.detail.path;
-    setTimeout(() => createDirectoryModalOpen = true);
-  } else {
-    dispatch("create-directory", event.detail);
-  }
+    if (createDirectory) {
+        createDirectoryPath = event.detail.path;
+        // To avoid closing the modal immediately
+        setTimeout(() => createDirectoryModalOpen = true);
+    }
+    else {
+        dispatch('create-directory', event.detail);
+    }
 }
 function handleDeleteFile(event) {
-  if (deleteFile) {
-    deleteFileEvent = event.detail;
-    deleteFileModalOpen = true;
-  } else {
-    dispatch("delete-file", event.detail);
-  }
+    if (deleteFile) {
+        deleteFileEvent = event.detail;
+        deleteFileModalOpen = true;
+    }
+    else {
+        dispatch('delete-file', event.detail);
+    }
 }
 function deleteFileInternal() {
-  if (deleteFile && deleteFileEvent) {
-    deleting = true;
-    deleteFile({
-      type: "file",
-      ...deleteFileEvent
-    }).then(() => {
-      documents.refresh();
-      deleteFileModalOpen = false;
-    }).catch((error) => {
-      console.error("Failed to delete item.", error);
-    }).finally(() => {
-      deleting = false;
-      deleteFileModalOpen = false;
-    });
-  }
+    if (deleteFile && deleteFileEvent) {
+        deleting = true;
+        deleteFile({
+            type: 'file',
+            ...deleteFileEvent,
+        }).then(() => {
+            documents.refresh();
+            deleteFileModalOpen = false;
+        }).catch((error) => {
+            console.error('Failed to delete item.', error);
+        }).finally(() => {
+            deleting = false;
+            deleteFileModalOpen = false;
+        });
+    }
 }
-function* flattenedFiles(documents2) {
-  for (const document2 of documents2) {
-    if (document2.type === "file") {
-      yield document2;
-      continue;
+function* flattenedFiles(documents) {
+    for (const document of documents) {
+        if (document.type === 'file') {
+            yield document;
+            continue;
+        }
+        yield* flattenedFiles(document.children);
     }
-    yield* flattenedFiles(document2.children);
-  }
 }
 </script>
 
@@ -245,7 +264,7 @@ function* flattenedFiles(documents2) {
       {translations.overrideFilesConfirmation}
     </div>
     <div class="file-explorer__text file-explorer__text--semi-bold">
-      {overrideFiles.map((file) => file.name).join(', ')}
+      {overrideFiles.map(file => file.name).join(', ')}
     </div>
     <svelte:fragment slot="footer">
       <Button
@@ -262,8 +281,7 @@ function* flattenedFiles(documents2) {
   </Modal>
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -323,7 +341,7 @@ function* flattenedFiles(documents2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -370,7 +388,7 @@ function* flattenedFiles(documents2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -508,6 +526,12 @@ function* flattenedFiles(documents2) {
 .file-explorer__file-icon--large :global(i) {
         font-size: var(--file-explorer-preview-icon-size);
       }
+.file-explorer__file-name {
+    min-width: 0;
+  }
+.file-explorer__file-name--directory-index {
+      word-break: break-word;
+    }
 .file-explorer__text--semi-bold {
     font-weight: var(--file-explorer-text-semi-bold);
   }
@@ -518,5 +542,4 @@ function* flattenedFiles(documents2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorer.svelte.d.ts

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-export type UploadFileEvent = {
+import { SvelteComponentTyped } from "svelte";
+export interface UploadFileEvent {
     path: string;
     files?: FileList;
-};
-export type CreateDirectoryEvent = {
+}
+export interface CreateDirectoryEvent {
     path: string;
-};
-export type DeleteFileEvent = {
+}
+export interface DeleteFileEvent {
     path: string;
     name: string;
-};
+}
 import type { Refreshable } from '@securancy/svelte-utilities';
 import { type CreateDirectoryRequest, FileExplorerDisplayMode, type FileItem, type FilePreview, type FileSystemItem, type UploadFilesRequest } from '../index.js';
 declare const __propDef: {
@@ -65,12 +65,10 @@ declare const __propDef: {
     slots: {
         search: {};
     };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerProps = typeof __propDef.props;
 export type FileExplorerEvents = typeof __propDef.events;
 export type FileExplorerSlots = typeof __propDef.slots;
-export default class FileExplorer extends SvelteComponent<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
+export default class FileExplorer extends SvelteComponentTyped<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
 }
 export {};

package/dist/components/FileExplorerBreadcrumb.svelte

@@ -1,13 +1,16 @@
-<script>import { Icon } from "@securancy/svelte-components";
+<script>import { Icon } from '@securancy/svelte-components';
 export let filePath;
 export let routePrefix;
-$: parts = filePath.split("/");
-function getHref(parts2, index, routePrefix2) {
-  const href = [
-    ...routePrefix2.split("/"),
-    ...parts2.slice(0, index + 1)
-  ].filter((node) => node !== "").map(encodeURIComponent).join("/");
-  return "/" + href;
+$: parts = filePath.split('/');
+function getHref(parts, index, routePrefix) {
+    const href = [
+        ...routePrefix.split('/'),
+        ...parts.slice(0, index + 1),
+    ]
+        .filter(node => node !== '')
+        .map(encodeURIComponent)
+        .join('/');
+    return '/' + href;
 }
 </script>
 
@@ -23,8 +26,7 @@ function getHref(parts2, index, routePrefix2) {
   {/each}
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -84,7 +86,7 @@ function getHref(parts2, index, routePrefix2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -131,7 +133,7 @@ function getHref(parts2, index, routePrefix2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -269,6 +271,12 @@ function getHref(parts2, index, routePrefix2) {
 .file-explorer__file-icon--large :global(i) {
         font-size: var(--file-explorer-preview-icon-size);
       }
+.file-explorer__file-name {
+    min-width: 0;
+  }
+.file-explorer__file-name--directory-index {
+      word-break: break-word;
+    }
 .file-explorer__text--semi-bold {
     font-weight: var(--file-explorer-text-semi-bold);
   }
@@ -279,5 +287,4 @@ function getHref(parts2, index, routePrefix2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerBreadcrumb.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         filePath: string;
@@ -8,12 +8,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerBreadcrumbProps = typeof __propDef.props;
 export type FileExplorerBreadcrumbEvents = typeof __propDef.events;
 export type FileExplorerBreadcrumbSlots = typeof __propDef.slots;
-export default class FileExplorerBreadcrumb extends SvelteComponent<FileExplorerBreadcrumbProps, FileExplorerBreadcrumbEvents, FileExplorerBreadcrumbSlots> {
+export default class FileExplorerBreadcrumb extends SvelteComponentTyped<FileExplorerBreadcrumbProps, FileExplorerBreadcrumbEvents, FileExplorerBreadcrumbSlots> {
 }
 export {};

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -1,33 +1,36 @@
-<script>import { Button, FormElement, Modal } from "@securancy/svelte-components";
+<script>import { Button, FormElement, Modal } from '@securancy/svelte-components';
 export let createDirectoryPath;
 export let createDirectoryModalOpen = false;
 export let documents;
 export let createDirectory;
 export let translations;
-let request = { path: "", name: "" };
+let request = { path: '', name: '' };
 let submitting = false;
-let input = void 0;
+let input = undefined;
 $: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
-$: directoryAlreadyExists = existingFoldersInPath.some((x) => x.name === request.name);
-$: request.path = createDirectoryPath ?? "";
-$: if (input) input.focus();
+$: directoryAlreadyExists = existingFoldersInPath.some(x => x.name === request.name);
+$: request.path = createDirectoryPath ?? '';
+// Clear inputs when modal is opened
+$: if (input)
+    input.focus();
 async function submitFiles() {
-  submitting = true;
-  await createDirectory(request).then(() => {
-    createDirectoryModalOpen = false;
-  }).finally(() => {
-    submitting = false;
-  });
-  documents.refresh();
+    submitting = true;
+    await createDirectory(request)
+        .then(() => {
+        createDirectoryModalOpen = false;
+    }).finally(() => {
+        submitting = false;
+    });
+    documents.refresh();
 }
-function getExistingFoldersInPath(path, documents2) {
-  const pathParts = path ? path.split("/") : [];
-  let existingFoldersInPath2 = documents2.filter((x) => x.type === "directory");
-  for (const pathPart of pathParts) {
-    const currentFolder = existingFoldersInPath2.find((document) => document.name === pathPart);
-    existingFoldersInPath2 = currentFolder ? currentFolder.children.filter((x) => x.type === "directory") : [];
-  }
-  return existingFoldersInPath2;
+function getExistingFoldersInPath(path, documents) {
+    const pathParts = path ? path.split('/') : [];
+    let existingFoldersInPath = documents.filter(x => x.type === 'directory');
+    for (const pathPart of pathParts) {
+        const currentFolder = existingFoldersInPath.find(document => document.name === pathPart);
+        existingFoldersInPath = currentFolder ? currentFolder.children.filter(x => x.type === 'directory') : [];
+    }
+    return existingFoldersInPath;
 }
 </script>
 
@@ -87,5 +90,4 @@ function getExistingFoldersInPath(path, documents2) {
       border: 1px solid var(--file-explorer-create-directory-border);
       border-radius: var(--file-explorer-create-directory-border-radius);
       padding: 10px;
-    }
-</style>
+    }</style>

package/dist/components/FileExplorerCreateDirectory.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { Refreshable } from '@securancy/svelte-utilities';
 import type { CreateDirectoryRequest, DocumentTranslations, FileSystemItem } from '../models/index.js';
 declare const __propDef: {
@@ -13,12 +13,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerCreateDirectoryProps = typeof __propDef.props;
 export type FileExplorerCreateDirectoryEvents = typeof __propDef.events;
 export type FileExplorerCreateDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerCreateDirectory extends SvelteComponent<FileExplorerCreateDirectoryProps, FileExplorerCreateDirectoryEvents, FileExplorerCreateDirectorySlots> {
+export default class FileExplorerCreateDirectory extends SvelteComponentTyped<FileExplorerCreateDirectoryProps, FileExplorerCreateDirectoryEvents, FileExplorerCreateDirectorySlots> {
 }
 export {};

package/dist/components/FileExplorerDirectory.svelte

@@ -1,7 +1,7 @@
-<script>import {} from "..";
-import FileExplorerDirectoryColumn from "./FileExplorerDirectoryColumn.svelte";
-import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
-import FileExplorerDirectoryIndex from "./FileExplorerDirectoryIndex.svelte";
+<script>import {} from '..';
+import FileExplorerDirectoryColumn from './FileExplorerDirectoryColumn.svelte';
+import FileExplorerFileDetailColumn from './FileExplorerFileDetailColumn.svelte';
+import FileExplorerDirectoryIndex from './FileExplorerDirectoryIndex.svelte';
 export let item;
 export let translations;
 export let routePrefix;
@@ -9,16 +9,16 @@ export let currentPath;
 export let canEdit;
 export let displayMode;
 export let getFilePreview;
-$: currentPathParts = currentPath.split("/");
+$: currentPathParts = currentPath.split('/');
 $: activeFileItem = item.children.find((fileItem) => {
-  const parts = [
-    ...fileItem.path.split("/").filter((part) => part !== ""),
-    fileItem.name
-  ];
-  return parts.every((part, index) => currentPathParts[index] === part);
+    const parts = [
+        ...fileItem.path.split('/').filter(part => part !== ''),
+        fileItem.name,
+    ];
+    return parts.every((part, index) => currentPathParts[index] === part);
 });
-function canEditItem(item2, canEdit2) {
-  return typeof canEdit2 === "function" ? canEdit2(item2) : canEdit2 === true;
+function canEditItem(item, canEdit) {
+    return typeof canEdit === 'function' ? canEdit(item) : canEdit === true;
 }
 </script>
 
@@ -69,8 +69,7 @@ function canEditItem(item2, canEdit2) {
     />
   {/if}
 {/if}
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -130,7 +129,7 @@ function canEditItem(item2, canEdit2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -177,7 +176,7 @@ function canEditItem(item2, canEdit2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -315,6 +314,12 @@ function canEditItem(item2, canEdit2) {
 .file-explorer__file-icon--large :global(i) {
         font-size: var(--file-explorer-preview-icon-size);
       }
+.file-explorer__file-name {
+    min-width: 0;
+  }
+.file-explorer__file-name--directory-index {
+      word-break: break-word;
+    }
 .file-explorer__text--semi-bold {
     font-weight: var(--file-explorer-text-semi-bold);
   }
@@ -325,5 +330,4 @@ function canEditItem(item2, canEdit2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerDirectory.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { FileExplorerDisplayMode, FileSystemItem } from '..';
 import { type DirectoryItem, type DocumentTranslations, type FileItem, type FilePreview } from '..';
 declare const __propDef: {
@@ -19,12 +19,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDirectoryProps = typeof __propDef.props;
 export type FileExplorerDirectoryEvents = typeof __propDef.events;
 export type FileExplorerDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerDirectory extends SvelteComponent<FileExplorerDirectoryProps, FileExplorerDirectoryEvents, FileExplorerDirectorySlots> {
+export default class FileExplorerDirectory extends SvelteComponentTyped<FileExplorerDirectoryProps, FileExplorerDirectoryEvents, FileExplorerDirectorySlots> {
 }
 export {};