@securancy/file-explorer 1.0.0

package/README.md

@@ -0,0 +1,7 @@
+# @securancy/file-explorer
+
+A ready-to-use component for browsing files and directories.
+
+## Building
+
+Run `nx build @securancy/file-explorer` to build the library.

package/default-styling.pcss

@@ -0,0 +1,39 @@
+:root {
+  /* Theming */
+  --file-explorer-background: var(--color-background);
+  --file-explorer-background-shade: var(--color-background--dimmed);
+  --file-explorer-background-dragover: rgba(var(--color-primary-rgb), 40%);
+  --file-explorer-border-style: solid 1px var(--color-border);
+  --file-explorer-message-color: var(--color-text--soft);
+  --file-explorer-action-primary-color: var(--color-primary);
+  --file-explorer-action-secondary-color: var(--color-secondary);
+  --file-explorer-action-primary-color-contrast: white;
+  --file-explorer-text-semi-bold: var(--font-weight--semi-bold);
+  --file-explorer-create-directory-border: var(--color-border);
+  --file-explorer-create-directory-border-radius: var(--border-radius--large);
+
+  /* List items */
+  --file-explorer-list-item-color: var(--color-text);
+  --file-explorer-list-item-color-active: var(--file-explorer-action-primary-color);
+  --file-explorer-list-item-border-radius: 4px;
+  --file-explorer-list-header-color: var(--color-text);
+  --file-explorer-list-item-background-hover: var(--color-background--dimmed);
+  --file-explorer-list-item-background-active: rgba(var(--color-primary-rgb), 10%);
+
+  /* Columns */
+  --file-explorer-column-default-width: 270px;
+  --file-explorer-index-default-width: 100%;
+  --file-explorer-preview-default-width: 320px;
+  --file-explorer-column-min-width: 80%;
+
+  /* Spacing & sizing */
+  --file-explorer-list-item-spacing: 16px;
+  --file-explorer-default-spacing: 20px;
+  --file-explorer-preview-icon-size: 150px;
+
+  @media (--screen-sm) {
+    --file-explorer-column-min-width: 140px;
+    --file-explorer-index-default-width: auto;
+    --file-explorer-list-item-spacing: 8px;
+  }
+}

package/dist/components/FileExplorer.svelte

@@ -0,0 +1,443 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher, tick } from "svelte";
+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";
+export let displayMode = FileExplorerDisplayMode.Columns;
+export let filePath;
+export let documents;
+export let loading;
+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;
+const dispatch = createEventDispatcher();
+const scrollBackButtonThreshold = 200;
+let fileExplorerContentContainer;
+let showScrollBackButton = false;
+let createDirectoryPath;
+let createDirectoryModalOpen = false;
+let deleteFileModalOpen = false;
+let deleteFileEvent;
+let deleting = false;
+$: if (filePath) tick().then(() => scrollToRight());
+async function scrollToRight() {
+  if (!fileExplorerContentContainer) return;
+  fileExplorerContentContainer.scroll({
+    left: fileExplorerContentContainer.scrollWidth,
+    behavior: "smooth"
+  });
+}
+function handleScroll() {
+  showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
+}
+function handleScrollBack() {
+  fileExplorerContentContainer.scroll({
+    left: 0,
+    behavior: "smooth"
+  });
+}
+async function handleUploadFile(event) {
+  if (uploadFiles) {
+    if (event.detail.files) {
+      await uploadFiles({
+        path: event.detail.path,
+        files: event.detail.files
+      });
+      documents.refresh();
+    } else {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.click();
+      input.addEventListener("change", async (changeEvent) => {
+        if (input.files && uploadFiles) {
+          await uploadFiles({
+            path: event.detail.path,
+            files: input.files
+          });
+          documents.refresh();
+        }
+      });
+    }
+  } else {
+    dispatch("upload-file", event.detail);
+  }
+}
+function handleCreateDirectory(event) {
+  if (createDirectory) {
+    createDirectoryPath = event.detail.path;
+    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);
+  }
+}
+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;
+    });
+  }
+}
+</script>
+
+<div class="file-explorer file-explorer--display-mode-{displayMode}"
+>
+  <div class="file-explorer__controls">
+    <FileExplorerBreadcrumb {filePath} />
+    <FileExplorerDisplayModeSwitcher bind:displayMode />
+  </div>
+  <div
+    bind:this={fileExplorerContentContainer}
+    class="file-explorer__content"
+    on:scroll={handleScroll}
+  >
+    <FileExplorerDirectoryColumn
+      {canEdit}
+      currentPath=""
+      directoryName="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}
+    >
+      <svelte:fragment slot="top">
+        {#if $$slots.search}
+          <div class="file-explorer__search">
+            <slot name="search" />
+          </div>
+        {/if}
+      </svelte:fragment>
+    </FileExplorerDirectoryColumn>
+  </div>
+</div>
+
+{#if createDirectory}
+  <FileExplorerCreateDirectory
+    {createDirectory}
+    {createDirectoryPath}
+    {documents}
+    {translations}
+    bind:createDirectoryModalOpen
+  />
+{/if}
+
+{#if deleteFile}
+  <Modal
+    title={translations.deleteFile}
+    bind:opened={deleteFileModalOpen}
+  >
+    <div>
+      {translations.deleteFileConfirmation}
+    </div>
+    <div class="file-explorer__text--semi-bold">
+      {filePath.split('/').at(-1)}?
+    </div>
+    <svelte:fragment slot="footer">
+      <Button
+        color="soft"
+        fill="clear"
+        on:click={() => deleteFileModalOpen = false}
+      >
+        {translations.cancel}
+      </Button>
+      <Button color="danger" on:click={deleteFileInternal}>
+        {#if deleting}
+          {translations.deleting}
+        {:else}
+          {translations.delete}
+        {/if}
+      </Button>
+    </svelte:fragment>
+  </Modal>
+{/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 {
+    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);
+  }
+.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;
+  }
+</style>

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

@@ -0,0 +1,63 @@
+import { SvelteComponent } from "svelte";
+export type UploadFileEvent = {
+    path: string;
+    files?: FileList;
+};
+export type CreateDirectoryEvent = {
+    path: string;
+};
+export type 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: {
+    props: {
+        displayMode?: FileExplorerDisplayMode;
+        filePath: string;
+        documents: Refreshable<FileSystemItem[]>;
+        loading: boolean;
+        routePrefix: string;
+        canEdit: boolean;
+        translations?: {
+            readonly createNewDirectoryModalTitle: "Create new directory";
+            readonly cancel: "Cancel";
+            readonly create: "Create";
+            readonly creating: "Creating...";
+            readonly itemTitle: (item: FileSystemItem) => string;
+            readonly emptyDirectory: "Empty directory";
+            readonly previewFile: "Preview file";
+            readonly createdAt: "Created at";
+            readonly modifiedAt: "Last modified at";
+            readonly deleteFile: "Delete file";
+            readonly deleteFileConfirmation: "Are you sure you want to delete:";
+            readonly deleting: "Deleting...";
+            readonly delete: "Delete";
+            readonly createDirectory: "Create directory";
+            readonly uploadFile: "Upload file";
+        };
+        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+        createDirectory?: ((request: CreateDirectoryRequest) => Promise<void>) | undefined;
+        uploadFiles?: ((request: UploadFilesRequest) => Promise<void>) | undefined;
+        deleteFile?: ((fileItem: FileItem) => Promise<void>) | undefined;
+    };
+    events: {
+        'upload-file': CustomEvent<UploadFileEvent>;
+        'create-directory': CustomEvent<CreateDirectoryEvent>;
+        'delete-file': CustomEvent<DeleteFileEvent>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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 {};