@securancy/file-explorer 1.0.2 → 1.0.4

package/dist/components/FileExplorer.svelte

@@ -4,9 +4,11 @@
 import FileExplorerBreadcrumb from "./FileExplorerBreadcrumb.svelte";
 import FileExplorerDisplayModeSwitcher from "./FileExplorerDisplayModeSwitcher.svelte";
 import { defaultTranslations, FileExplorerDisplayMode } from "../index.js";
-import FileExplorerDirectoryColumn from "./FileExplorerDirectoryColumn.svelte";
 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";
 export let displayMode = FileExplorerDisplayMode.Columns;
 export let filePath;
 export let documents;
@@ -106,44 +108,57 @@ function deleteFileInternal() {
 }
 </script>
 
-<div class="file-explorer file-explorer--display-mode-{displayMode}"
->
+<div class="file-explorer file-explorer--display-mode-{displayMode}">
   <div class="file-explorer__controls">
-    <FileExplorerBreadcrumb {filePath} />
+    <FileExplorerBreadcrumb {filePath} {routePrefix} />
     <FileExplorerDisplayModeSwitcher bind:displayMode />
   </div>
-  <div
-    bind:this={fileExplorerContentContainer}
-    class="file-explorer__content"
-    on:scroll={handleScroll}
-  >
-    <FileExplorerDirectoryColumn
-      {canEdit}
-      currentPath=""
-      directoryName={translations.items}
-      {displayMode}
-      {documents}
-      fileItems={$documents}
-      {filePath}
-      {getFilePreview}
-      {loading}
-      {routePrefix}
-      {showScrollBackButton}
-      {translations}
-      on:create-directory={handleCreateDirectory}
-      on:delete-file={handleDeleteFile}
-      on:scroll-back={handleScrollBack}
-      on:upload-file={handleUploadFile}
+  {#if $$slots.search}
+    <div class="file-explorer__search">
+      <slot name="search" />
+    </div>
+  {/if}
+  {#if loading}
+    <div class="file-explorer__loader">
+      <Icon class="fa-light fa-spinner-third fa-spin" />
+    </div>
+  {:else}
+    <div
+      bind:this={fileExplorerContentContainer}
+      class="file-explorer__content"
+      on:scroll={handleScroll}
     >
-      <svelte:fragment slot="top">
-        {#if $$slots.search}
-          <div class="file-explorer__search">
-            <slot name="search" />
-          </div>
-        {/if}
-      </svelte:fragment>
-    </FileExplorerDirectoryColumn>
-  </div>
+      <FileExplorerDirectory
+        {canEdit}
+        currentPath={filePath}
+        {displayMode}
+        {getFilePreview}
+        item={{
+          type: 'directory',
+          name: '',
+          path: '',
+          children: $documents,
+        }}
+        {routePrefix}
+        {translations}
+        on:create-directory={handleCreateDirectory}
+        on:delete-file={handleDeleteFile}
+        on:upload-file={handleUploadFile}
+      />
+    </div>
+  {/if}
+
+  <!-- Button to scroll back to the left -->
+  {#if showScrollBackButton}
+    <button
+      class="file-explorer__scroll-back-button"
+      type="button"
+      on:click={handleScrollBack}
+      transition:fade|local
+    >
+      <Icon class="fa-light fa-chevron-left" size="large" />
+    </button>
+  {/if}
 </div>
 
 {#if createDirectory}
@@ -294,8 +309,7 @@ function deleteFileInternal() {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -439,5 +453,9 @@ function deleteFileInternal() {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

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

@@ -19,7 +19,7 @@ declare const __propDef: {
         documents: Refreshable<FileSystemItem[]>;
         loading: boolean;
         routePrefix: string;
-        canEdit: boolean;
+        canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
         translations?: {
             createDirectoryModalTitle: string;
             cancel: string;
@@ -38,6 +38,7 @@ declare const __propDef: {
             uploadFile: string;
             size: string;
             items: string;
+            directoryAlreadyExists: string;
         };
         getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
         createDirectory?: ((request: CreateDirectoryRequest) => Promise<void>) | undefined;

package/dist/components/FileExplorerBreadcrumb.svelte

@@ -1,9 +1,26 @@
-<script>export let filePath;
+<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;
+}
 </script>
 
-<!-- @todo make it clickable -->
 <div class="file-explorer__breadcrumb">
-  {filePath}
+  <a href={routePrefix.startsWith('/') ? routePrefix : `/${routePrefix}`} title="Home">
+    <Icon class="fa-light fa-house" />
+  </a>
+  {#each parts as part, index}
+    <Icon class="fa-light fa-chevron-right" />
+    <a href={getHref(parts, index, routePrefix)} title={parts.slice(0, index + 1).join('/')}>
+      {part}
+    </a>
+  {/each}
 </div>
 
 <style>/* eslint-disable */
@@ -114,8 +131,7 @@
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -259,5 +275,9 @@
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         filePath: string;
+        routePrefix: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -4,6 +4,8 @@ export let createDirectoryModalOpen = false;
 export let documents;
 export let createDirectory;
 export let translations;
+$: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
+$: directoryAlreadyExists = existingFoldersInPath.some((x) => x.name === request.name);
 let request;
 let submitting = false;
 let input = void 0;
@@ -25,6 +27,16 @@ async function submitFiles() {
   });
   documents.refresh();
 }
+function getExistingFoldersInPath(path, documents2) {
+  if (!path || !documents2) return [];
+  const pathParts = 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;
+}
 </script>
 
 <Modal
@@ -33,8 +45,12 @@ async function submitFiles() {
 >
   <div class="create-directory">
     <span class="create-directory__path">{createDirectoryPath}/</span>
-    <FormElement clearable>
-      <input bind:this={input} bind:value={request.name}>
+    <FormElement
+      clearable
+      error={directoryAlreadyExists ? translations.directoryAlreadyExists : undefined}
+      floatError
+    >
+      <input bind:this={input} type="text" bind:value={request.name}>
     </FormElement>
   </div>
   <svelte:fragment slot="footer">
@@ -46,7 +62,7 @@ async function submitFiles() {
       {translations.cancel}
     </Button>
     <Button
-      disabled={(!request.name || request.name.length === 0) || submitting}
+      disabled={(!request.name || request.name.length === 0) || directoryAlreadyExists || submitting}
       on:click={submitFiles}
     >
       {#if submitting}

package/dist/components/FileExplorerDirectory.svelte

@@ -0,0 +1,329 @@
+<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;
+export let currentPath;
+export let canEdit;
+export let displayMode;
+export let getFilePreview;
+$: 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);
+});
+function canEditItem(item2, canEdit2) {
+  return typeof canEdit2 === "function" ? canEdit2(item2) : canEdit2 === true;
+}
+</script>
+
+{#if displayMode === 'columns'}
+  <FileExplorerDirectoryColumn
+    {activeFileItem}
+    canEdit={canEditItem(item, canEdit)}
+    {item}
+    {routePrefix}
+    {translations}
+    on:upload-file
+    on:create-directory
+  />
+{:else}
+  <FileExplorerDirectoryIndex
+    {activeFileItem}
+    canEdit={canEditItem(item, canEdit)}
+    {item}
+    {routePrefix}
+    {translations}
+    on:upload-file
+    on:create-directory
+  />
+{/if}
+
+<!-- The component repeats itself until there is no selected item or it reaches a fileItem -->
+{#if activeFileItem}
+  {#if activeFileItem.type === 'directory'}
+    <svelte:self
+      {canEdit}
+      {currentPath}
+      {displayMode}
+      {getFilePreview}
+      item={activeFileItem}
+      {routePrefix}
+      {translations}
+      on:upload-file
+      on:create-directory
+      on:delete-file
+    />
+  {:else}
+    <FileExplorerFileDetailColumn
+      canEdit={canEditItem(activeFileItem, canEdit)}
+      fileItem={activeFileItem}
+      {getFilePreview}
+      {translations}
+      on:delete-file
+    />
+  {/if}
+{/if}
+<style>/* eslint-disable */
+/**
+ * Media queries and devices
+ */
+/**
+ * Some mixins that can be used dynamically inside @each loops
+ */
+.file-explorer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--file-explorer-background);
+  overflow: hidden;
+}
+.file-explorer__controls {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: var(--file-explorer-border-style);
+    padding: var(--file-explorer-default-spacing);
+    background: var(--file-explorer-background-shade);
+  }
+.file-explorer__content {
+    flex-grow: 1;
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+  }
+/* Keep the index within screen */
+@media (width >= 769px) {
+      /* @formatter:off */
+      .file-explorer--display-mode-index .file-explorer__content {
+        /* @formatter:on */
+        overflow-x: inherit;
+      }
+  }
+.file-explorer__column, .file-explorer__index {
+    flex-shrink: 0;
+    border-right: var(--file-explorer-border-style);
+    background: var(--file-explorer-background);
+  }
+.file-explorer__column {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-column-default-width);
+    min-width: var(--file-explorer-column-min-width);
+    overflow: hidden;
+  }
+.file-explorer__column--file-detail {
+      flex-grow: 1;
+      width: var(--file-explorer-preview-default-width);
+      display: flex;
+      flex-direction: column;
+    }
+.file-explorer__column--sticky {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+.file-explorer__column::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      transition: background-color 0.2s ease-in-out;
+    }
+.file-explorer__column--dragover {
+      cursor: copy;
+    }
+.file-explorer__column--dragover::after {
+        pointer-events: all;
+        background-color: var(--file-explorer-background-dragover);
+      }
+.file-explorer__index {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-index-default-width);
+    overflow: hidden;
+  }
+@media (width >= 769px) {
+.file-explorer__index {
+      flex-shrink: 1
+  }
+    }
+.file-explorer__index--hidden {
+      display: none;
+    }
+.file-explorer__column-scroll-container, .file-explorer__index-scroll-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+.file-explorer__grid {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: var(--file-explorer-default-spacing);
+  }
+.file-explorer__breadcrumb {
+    /* @todo */
+  }
+.file-explorer__display-mode-switcher {
+    display: flex;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    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);
+  }
+.file-explorer__list {
+    margin-bottom: var(--file-explorer-default-spacing);
+  }
+.file-explorer__list-header {
+    display: flex;
+    justify-content: space-between;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    width: 100%;
+    margin-bottom: calc(0.5 * var(--file-explorer-default-spacing));
+    color: var(--file-explorer-list-header-color);
+  }
+.file-explorer__list-header span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-header button {
+      flex-shrink: 0;
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__grid-header {
+    width: 100%;
+  }
+.file-explorer__grid-header button {
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__list-item, .file-explorer__grid-item {
+    border-radius: var(--file-explorer-list-item-border-radius);
+    background: none;
+    color: var(--file-explorer-list-item-color);
+  }
+.file-explorer__list-item > :global(i), .file-explorer__grid-item > :global(i) {
+      flex-shrink: 0;
+    }
+.file-explorer__list-item:not(.file-explorer__list-item--active):hover, .file-explorer__grid-item:not(.file-explorer__grid-item--active):hover {
+      background: var(--file-explorer-list-item-background-hover);
+    }
+.file-explorer__list-item--active, .file-explorer__grid-item--active {
+      color: var(--file-explorer-list-item-color-active);
+      background: var(--file-explorer-list-item-background-active);
+    }
+.file-explorer__grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* 3 items in a grid, spaced out with default spacing means the width of 2 gaps must be subtracted from width */
+    width: calc(33.33% - (0.6666 * var(--file-explorer-default-spacing)));
+    padding: 5px 2px;
+  }
+@media (width >= 769px) {
+.file-explorer__grid-item {
+      width: 100px
+  }
+    }
+.file-explorer__grid-item--active {
+      /* @todo */
+    }
+.file-explorer__grid-item > span {
+      word-break: break-word;
+      margin-top: calc(0.25 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__list-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    text-align: left;
+    padding: var(--file-explorer-list-item-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+.file-explorer__list-item > span {
+      flex-grow: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-item > :global(i:first-child) {
+      margin-right: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__list-item > :global(i:last-child) {
+      margin-left: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__message {
+    display: block;
+    padding: var(--file-explorer-list-item-spacing) 0;
+    color: var(--file-explorer-message-color);
+  }
+.file-explorer__image-preview {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+.file-explorer-preview__title {
+      font-size: var(--font-size--h1);
+      font-weight: var(--font-weight--semi-bold);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+.file-explorer-preview__download {
+      color: var(--file-explorer-action-primary-color);
+      font-weight: var(--font-weight--semi-bold);
+    }
+.file-explorer-preview__download:hover {
+        text-decoration-line: underline;
+      }
+.file-explorer-preview__info {
+      margin-top: 14px;
+    }
+.file-explorer-preview__info span {
+        color: var(--file-explorer-message-color);
+      }
+.file-explorer-preview__info button {
+        cursor: pointer;
+      }
+.file-explorer__scroll-back-button {
+    position: fixed;
+    bottom: var(--file-explorer-default-spacing);
+    right: var(--file-explorer-default-spacing);
+    z-index: 2;
+    background: var(--file-explorer-action-primary-color);
+    color: var(--file-explorer-action-primary-color-contrast);
+    padding: var(--file-explorer-list-item-spacing);
+    border-radius: var(--file-explorer-list-item-border-radius);
+  }
+.file-explorer__file-icon--large {
+      width: 100%;
+      text-align: center;
+      padding: calc(2 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__file-icon--large :global(i) {
+        font-size: var(--file-explorer-preview-icon-size);
+      }
+.file-explorer__text--semi-bold {
+    font-weight: var(--file-explorer-text-semi-bold);
+  }
+.file-explorer__loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { FileExplorerDisplayMode, FileSystemItem } from '..';
+import { type DirectoryItem, type DocumentTranslations, type FileItem, type FilePreview } from '..';
+declare const __propDef: {
+    props: {
+        item: DirectoryItem;
+        translations: DocumentTranslations;
+        routePrefix: string;
+        currentPath: string;
+        canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
+        displayMode: FileExplorerDisplayMode;
+        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+    };
+    events: {
+        'upload-file': CustomEvent<import("..").UploadFileEvent>;
+        'create-directory': CustomEvent<import("..").CreateDirectoryEvent>;
+        'delete-file': CustomEvent<import("..").DeleteFileEvent>;
+    } & {
+        [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 {};

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -1,42 +1,24 @@
 <script>import { createEventDispatcher } from "svelte";
-import { fade } from "svelte/transition";
-import { FileExplorerDisplayMode } from "..";
+import {} from "..";
 import { resize, ResizeDirections } from "@securancy/svelte-utilities";
 import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, openItem } from "../utilities/index.js";
+import { getExtension, getItemHref } from "../utilities/index.js";
 import FileIcon from "./FileIcon.svelte";
-import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
-import FileExplorerDirectoryIndex from "./FileExplorerDirectoryIndex.svelte";
+import { joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
-export let directoryName;
-export let filePath;
-export let currentPath;
-export let fileItems;
-export let documents;
-export let displayMode;
+export let item;
 export let sticky = false;
-export let showScrollBackButton = false;
-export let loading;
 export let routePrefix;
 export let canEdit;
 export let translations;
-export let getFilePreview;
-let currentFileItem;
-let activeFileItem;
-let filePathSplit;
+export let activeFileItem;
 let dragoverIndex = 0;
 let innerWidth = 0;
-$: filePathSplit = filePath.split("/");
-$: currentFileItem = filePathSplit.shift();
-$: activeFileItem = fileItems.find((fi) => fi.name === currentFileItem);
-function handleScrollBack() {
-  dispatch("scroll-back");
-}
 function addItem() {
-  dispatch("upload-file", { path: currentPath });
+  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: currentPath });
+  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
 }
 function handleDragEnter(event) {
   event.preventDefault();
@@ -47,7 +29,7 @@ function handleDrop(event) {
   event.preventDefault();
   event.stopPropagation();
   dragoverIndex = 0;
-  const eventData = { path: currentPath };
+  const eventData = { path: joinPaths(item.path, item.name) };
   if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
     eventData.files = event.dataTransfer.files;
   }
@@ -89,49 +71,41 @@ function handleDragOver(event) {
     parentPadding: true,
   }}
 >
-  <slot name="top" />
   <div class="file-explorer__column-scroll-container">
     <div class="file-explorer__list">
       <div class="file-explorer__list-header">
-        {#if !loading}
-          <span>
-            {directoryName} ({fileItems?.length ?? 0})
-          </span>
-          {#if canEdit}
-            <Popover placement="bottom-end" trigger="click">
-              <button slot="trigger" type="button">
-                <Icon class="fa-solid fa-add" />
-              </button>
-              <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
-              <PopoverItem closeOnClick on:click={addItem}>{translations.uploadFile}</PopoverItem>
-            </Popover>
-          {/if}
+        <span>
+          {item.name === '' ? translations.items : item.name} ({item.children.length})
+        </span>
+        {#if canEdit}
+          <Popover placement="bottom-end" trigger="click">
+            <button slot="trigger" type="button">
+              <Icon class="fa-solid fa-add" />
+            </button>
+            <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
+            <PopoverItem closeOnClick on:click={addItem}>{translations.uploadFile}</PopoverItem>
+          </Popover>
         {/if}
       </div>
-      {#if fileItems.length > 0}
-        {#each fileItems as item}
-          <button
+      {#if item.children.length > 0}
+        {#each item.children as child}
+          <a
             class="file-explorer__list-item"
-            class:file-explorer__list-item--active={activeFileItem === item}
-            title={translations.itemTitle(item)}
-            type="button"
-            on:click={() => openItem(item, routePrefix)}
+            class:file-explorer__list-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
+            title={translations.itemTitle(child)}
           >
-            {#if item.type === 'directory'}
-              <Icon class="fa-light fa-folder{activeFileItem === item ? '-open' : ''}" />
+            {#if child.type === 'directory'}
+              <Icon class="fa-light fa-folder{activeFileItem === child ? '-open' : ''}" />
             {:else}
-              <FileIcon extension={getExtension(item.name)} />
+              <FileIcon extension={getExtension(child.name)} />
             {/if}
-            <span>{item.name}</span>
-            {#if item.type === 'directory'}
+            <span>{child.name}</span>
+            {#if child.type === 'directory'}
               <Icon class="fa-light fa-sm fa-chevron-right" size="custom" />
             {/if}
-          </button>
+          </a>
         {/each}
-      {:else if loading}
-        <div class="file-explorer__loader">
-          <Icon class="fa-light fa-spinner-third fa-spin" />
-        </div>
       {:else}
         <p class="file-explorer__message">
           {translations.emptyDirectory}
@@ -141,64 +115,6 @@ function handleDragOver(event) {
   </div>
 </div>
 
-<!-- The component repeats itself until the end of the filePath is reached or shows a FileDetail -->
-{#if activeFileItem}
-  {#if activeFileItem.type === 'directory'}
-    {#if displayMode === FileExplorerDisplayMode.Columns}
-      <svelte:self
-        {canEdit}
-        currentPath={[activeFileItem.path, activeFileItem.name].join('/')}
-        directoryName={currentFileItem || ''}
-        {displayMode}
-        {documents}
-        fileItems={activeFileItem.children || []}
-        filePath={filePathSplit.join('/')}
-        {getFilePreview}
-        {loading}
-        {routePrefix}
-        {translations}
-        on:upload-file
-        on:create-directory
-        on:delete-file
-      />
-    {:else}
-      <FileExplorerDirectoryIndex
-        {canEdit}
-        currentPath={[activeFileItem.path, activeFileItem.name].join('/')}
-        directoryName={currentFileItem || ''}
-        {documents}
-        fileItems={activeFileItem.children || []}
-        filePath={filePathSplit.join('/')}
-        {getFilePreview}
-        {routePrefix}
-        {translations}
-        on:upload-file
-        on:create-directory
-        on:delete-file
-      />
-    {/if}
-  {:else}
-    <FileExplorerFileDetailColumn
-      fileItem={activeFileItem}
-      {getFilePreview}
-      {translations}
-      on:delete-file
-    />
-  {/if}
-{/if}
-
-<!-- Button to scroll back to the left -->
-{#if showScrollBackButton}
-  <button
-    class="file-explorer__scroll-back-button"
-    type="button"
-    on:click={handleScrollBack}
-    transition:fade|local
-  >
-    <Icon class="fa-light fa-chevron-left" />
-  </button>
-{/if}
-
 <style>/* eslint-disable */
 /**
  * Media queries and devices
@@ -307,8 +223,7 @@ function handleDragOver(event) {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -452,5 +367,9 @@ function handleDragOver(event) {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

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

@@ -1,33 +1,24 @@
 import { SvelteComponent } from "svelte";
-import { type DocumentTranslations, FileExplorerDisplayMode, type FileItem, type FilePreview, type FileSystemItem } from '..';
-import type { Refreshable } from '@securancy/svelte-utilities';
+import type { UploadFileEvent } from './FileExplorer.svelte';
+import { type DirectoryItem, type DocumentTranslations, type FileSystemItem } from '..';
+import type { CreateDirectoryEvent } from './FileExplorer.svelte';
 declare const __propDef: {
     props: {
-        directoryName: string;
-        filePath: string;
-        currentPath: string;
-        fileItems: FileSystemItem[];
-        documents: Refreshable<FileSystemItem[]>;
-        displayMode: FileExplorerDisplayMode;
+        item: DirectoryItem;
         sticky?: boolean;
-        showScrollBackButton?: boolean;
-        loading: boolean;
         routePrefix: string;
         canEdit: boolean;
         translations: DocumentTranslations;
-        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+        activeFileItem: FileSystemItem | undefined;
     };
     events: {
-        'upload-file': CustomEvent<any>;
-        'create-directory': CustomEvent<any>;
-        'delete-file': CustomEvent<import("..").DeleteFileEvent>;
         'scroll-back': CustomEvent<void>;
+        'upload-file': CustomEvent<UploadFileEvent>;
+        'create-directory': CustomEvent<CreateDirectoryEvent>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        top: {};
-    };
+    slots: {};
     exports?: {} | undefined;
     bindings?: string | undefined;
 };

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -1,31 +1,20 @@
 <script>import FileIcon from "./FileIcon.svelte";
-import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
 import { createEventDispatcher } from "svelte";
 import { resize, ResizeDirections } from "@securancy/svelte-utilities";
 import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, openItem } from "../utilities/index.js";
+import { getExtension, getItemHref, joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
-export let directoryName;
-export let filePath;
-export let fileItems;
-export let currentPath;
+export let item;
 export let routePrefix;
 export let translations;
 export let canEdit;
-export let documents;
-export let getFilePreview;
-let currentFileItem;
-let activeFileItem;
-let filePathSplit;
+export let activeFileItem;
 let innerWidth = 0;
-$: filePathSplit = filePath.split("/");
-$: currentFileItem = filePathSplit.shift();
-$: activeFileItem = fileItems.find((fi) => fi.name === currentFileItem);
 function addItem() {
-  dispatch("upload-file", { path: currentPath });
+  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: currentPath });
+  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
 }
 </script>
 
@@ -44,7 +33,7 @@ function createDirectory() {
       <div class="file-explorer__grid">
         <div class="file-explorer__grid-header">
           <span>
-            {directoryName} ({fileItems?.length ?? 0})
+            {item.name === '' ? translations.items : item.name} ({item.children.length})
           </span>
           {#if canEdit}
             <div class="inline-block">
@@ -58,24 +47,23 @@ function createDirectory() {
             </div>
           {/if}
         </div>
-        {#each fileItems as item}
-          <button
+        {#each item.children as child}
+          <a
             class="file-explorer__grid-item"
-            class:file-explorer__grid-item--active={activeFileItem === item}
-            title={translations.itemTitle(item)}
-            type="button"
-            on:click={() => openItem(item, routePrefix)}
+            class:file-explorer__grid-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
+            title={translations.itemTitle(child)}
           >
-            {#if item.type === 'directory'}
+            {#if child.type === 'directory'}
               <Icon
-                class="fa-light fa-2xl fa-folder{activeFileItem?.name === item.name ? '-open' : ''}"
+                class="fa-light fa-2xl fa-folder{activeFileItem?.name === child.name ? '-open' : ''}"
                 size="custom"
               />
             {:else}
-              <FileIcon extension={getExtension(item.name)} size="grid" />
+              <FileIcon extension={getExtension(child.name)} size="grid" />
             {/if}
-            <span>{item.name}</span>
-          </button>
+            <span>{child.name}</span>
+          </a>
         {:else}
           <p class="file-explorer__message">
             {translations.emptyDirectory}
@@ -86,30 +74,6 @@ function createDirectory() {
   </div>
 {/if}
 
-<!-- The component repeats itself until the end of the filePath is reached or shows a FileDetail -->
-{#if activeFileItem}
-  {#if activeFileItem.type === 'directory'}
-    <svelte:self
-      {canEdit}
-      currentPath={[activeFileItem.path, activeFileItem.name].join('/')}
-      directoryName={currentFileItem || ''}
-      {documents}
-      fileItems={activeFileItem.children || []}
-      filePath={filePathSplit.join('/')}
-      {getFilePreview}
-      {routePrefix}
-      {translations}
-    />
-  {:else}
-    <FileExplorerFileDetailColumn
-      fileItem={activeFileItem}
-      {getFilePreview}
-      {translations}
-      on:delete-file
-    />
-  {/if}
-{/if}
-
 <style>/* eslint-disable */
 /**
  * Media queries and devices
@@ -218,8 +182,7 @@ function createDirectory() {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -363,5 +326,9 @@ function createDirectory() {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

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

@@ -1,21 +1,15 @@
 import { SvelteComponent } from "svelte";
-import type { DocumentTranslations, FileItem, FilePreview, FileSystemItem } from '../index.js';
-import type { Refreshable } from '@securancy/svelte-utilities';
+import type { DirectoryItem, DocumentTranslations, FileSystemItem } from '../index.js';
 import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
 declare const __propDef: {
     props: {
-        directoryName: string;
-        filePath: string;
-        fileItems: FileSystemItem[];
-        currentPath: string;
+        item: DirectoryItem;
         routePrefix: string;
         translations: DocumentTranslations;
         canEdit: boolean;
-        documents: Refreshable<FileSystemItem[]>;
-        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+        activeFileItem: FileSystemItem | undefined;
     };
     events: {
-        'delete-file': CustomEvent<import("./FileExplorer.svelte").DeleteFileEvent>;
         'upload-file': CustomEvent<UploadFileEvent>;
         'create-directory': CustomEvent<CreateDirectoryEvent>;
     } & {

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -136,8 +136,7 @@ const modeIcons = {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -281,6 +280,10 @@ const modeIcons = {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 label {
     position: relative;

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -7,6 +7,7 @@ import { createEventDispatcher } from "svelte";
 export let fileItem;
 export let getFilePreview;
 export let translations;
+export let canEdit;
 const dispatch = createEventDispatcher();
 const fileDateFormat = "cccc FF";
 let filePreview;
@@ -71,11 +72,13 @@ async function refresh(_fileItem) {
             <div>{DateTime.fromJSDate(filePreview.modifiedAt).toFormat(fileDateFormat)}</div>
           </div>
         {/if}
-        <div class="file-explorer-preview__info">
-          <button type="button" on:click={() => dispatch('delete-file', fileItem)}>
-            <Icon class="fa-solid fa-trash" />
-          </button>
-        </div>
+        {#if canEdit}
+          <div class="file-explorer-preview__info">
+            <button type="button" on:click={() => dispatch('delete-file', fileItem)}>
+              <Icon class="fa-solid fa-trash" />
+            </button>
+          </div>
+        {/if}
       </Card>
     {:else}
       <!-- @todo add loader if needed (test performance) -->
@@ -191,8 +194,7 @@ async function refresh(_fileItem) {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -336,5 +338,9 @@ async function refresh(_fileItem) {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         fileItem: FileItem;
         getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
         translations: DocumentTranslations;
+        canEdit: boolean;
     };
     events: {
         'delete-file': CustomEvent<DeleteFileEvent>;

package/dist/components/FileIcon.svelte

@@ -161,8 +161,7 @@ function determineIconString(_extension) {
     margin-left: auto;
   }
 .file-explorer__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -306,5 +305,9 @@ function determineIconString(_extension) {
 .file-explorer__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 </style>

package/dist/file-explorer.pcss

@@ -121,8 +121,7 @@
   }
 
   &__search {
-    margin-bottom: var(--file-explorer-default-spacing);
-    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+    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);
   }
 
   &__list {
@@ -300,5 +299,9 @@
   &__loader {
     display: flex;
     justify-content: center;
+    align-items: center;
+    min-height: 50px;
+    height: 100%;
+    font-size: 25px;
   }
 }

package/dist/models/translations.d.ts

@@ -17,5 +17,6 @@ export declare const defaultTranslations: {
     uploadFile: string;
     size: string;
     items: string;
+    directoryAlreadyExists: string;
 };
 export type DocumentTranslations = typeof defaultTranslations;

package/dist/models/translations.js

@@ -16,4 +16,5 @@ export const defaultTranslations = {
     uploadFile: 'Upload file',
     size: 'Size',
     items: 'Items',
+    directoryAlreadyExists: 'Directory already exists',
 };

package/dist/utilities/file-utilities.d.ts

@@ -1,8 +1,9 @@
 import type { FileSystemItem } from '../models/file-item.js';
-export declare function openItem(item: FileSystemItem, routePrefix: string): Promise<void>;
+export declare function getItemHref(item: FileSystemItem, routePrefix: string): string;
 export declare function getExtension(path: string): string;
 export declare const imageExtensions: string[];
 export declare const videoExtensions: string[];
 export declare function isImage(path: string): boolean;
 export declare function formatBytes(bytes: number, decimals?: number): string;
 export declare function formatBytesParts(bytes: number, decimals?: number): [number, string];
+export declare function joinPaths(...paths: string[]): string;

package/dist/utilities/file-utilities.js

@@ -1,5 +1,4 @@
-import { goto } from '$app/navigation';
-export async function openItem(item, routePrefix) {
+export function getItemHref(item, routePrefix) {
     const itemPath = [
         ...routePrefix.split('/'),
         ...item.path.split('/'),
@@ -8,7 +7,7 @@ export async function openItem(item, routePrefix) {
         .filter((node) => node !== '')
         .map(encodeURIComponent)
         .join('/');
-    await goto(itemPath.startsWith('/') ? itemPath : `/${itemPath}`);
+    return itemPath.startsWith('/') ? itemPath : `/${itemPath}`;
 }
 export function getExtension(path) {
     // extract file name from full path (supports `\\` and `/` separators)
@@ -47,3 +46,8 @@ export function formatBytesParts(bytes, decimals = 2) {
     const index = Math.floor(Math.log(bytes) / Math.log(k));
     return [Number.parseFloat((bytes / Math.pow(k, index)).toFixed(dm)), sizes[index]];
 }
+export function joinPaths(...paths) {
+    return paths
+        .filter((path) => path !== '')
+        .join('/');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -48,7 +48,7 @@
     "zod": "^3.23.8",
     "@securancy/eslint-config": "0.2.1",
     "@securancy/stylelint-config": "0.1.2",
-    "@securancy/svelte-components": "4.2.4",
+    "@securancy/svelte-components": "4.3.0",
     "@securancy/svelte-utilities": "2.0.1"
   },
   "peerDependencies": {