@securancy/file-explorer 1.0.0

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -0,0 +1,367 @@
+<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";
+const dispatch = createEventDispatcher();
+export let directoryName;
+export let filePath;
+export let fileItems;
+export let currentPath;
+export let routePrefix;
+export let translations;
+export let canEdit;
+export let documents;
+export let getFilePreview;
+let currentFileItem;
+let activeFileItem;
+let filePathSplit;
+let innerWidth = 0;
+$: filePathSplit = filePath.split("/");
+$: currentFileItem = filePathSplit.shift();
+$: activeFileItem = fileItems.find((fi) => fi.name === currentFileItem);
+function addItem() {
+  dispatch("upload-file", { path: currentPath });
+}
+function createDirectory() {
+  dispatch("create-directory", { path: currentPath });
+}
+</script>
+
+<svelte:window bind:innerWidth />
+
+{#if !activeFileItem || (activeFileItem && activeFileItem.type !== 'directory')}
+  <div
+    class="file-explorer__index"
+    use:resize={{
+      disabled: innerWidth < 1024,
+      directions: [ResizeDirections.East],
+      parentPadding: true,
+    }}
+  >
+    <div class="file-explorer__index-scroll-container">
+      <div class="file-explorer__grid">
+        <div class="file-explorer__grid-header">
+          <span>
+            {directoryName} ({fileItems?.length ?? 0})
+          </span>
+          {#if canEdit}
+            <div class="inline-block">
+              <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>
+            </div>
+          {/if}
+        </div>
+        {#each fileItems as item}
+          <button
+            class="file-explorer__grid-item"
+            class:file-explorer__grid-item--active={activeFileItem === item}
+            title={translations.itemTitle(item)}
+            type="button"
+            on:click={() => openItem(item, routePrefix)}
+          >
+            {#if item.type === 'directory'}
+              <Icon
+                class="fa-light fa-2xl fa-folder{activeFileItem?.name === item.name ? '-open' : ''}"
+                size="custom"
+              />
+            {:else}
+              <FileIcon extension={getExtension(item.name)} size="grid" />
+            {/if}
+            <span>{item.name}</span>
+          </button>
+        {:else}
+          <p class="file-explorer__message">
+            {translations.emptyDirectory}
+          </p>
+        {/each}
+      </div>
+    </div>
+  </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
+ */
+/**
+ * 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/FileExplorerDirectoryIndex.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { DocumentTranslations, FileItem, FilePreview, FileSystemItem } from '../index.js';
+import type { Refreshable } from '@securancy/svelte-utilities';
+import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
+declare const __propDef: {
+    props: {
+        directoryName: string;
+        filePath: string;
+        fileItems: FileSystemItem[];
+        currentPath: string;
+        routePrefix: string;
+        translations: DocumentTranslations;
+        canEdit: boolean;
+        documents: Refreshable<FileSystemItem[]>;
+        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+    };
+    events: {
+        'delete-file': CustomEvent<import("./FileExplorer.svelte").DeleteFileEvent>;
+        'upload-file': CustomEvent<UploadFileEvent>;
+        'create-directory': CustomEvent<CreateDirectoryEvent>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FileExplorerDirectoryIndexProps = typeof __propDef.props;
+export type FileExplorerDirectoryIndexEvents = typeof __propDef.events;
+export type FileExplorerDirectoryIndexSlots = typeof __propDef.slots;
+export default class FileExplorerDirectoryIndex extends SvelteComponent<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
+}
+export {};

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -0,0 +1,300 @@
+<script>import { FileExplorerDisplayMode } from "../index.js";
+import { Icon } from "@securancy/svelte-components";
+export let displayMode;
+let modes = Object.values(FileExplorerDisplayMode);
+const modeLabels = {
+  columns: "Columns",
+  index: "Full directory"
+};
+const modeIcons = {
+  columns: "fa-columns-3",
+  index: "fa-grid"
+};
+</script>
+
+<div class="file-explorer__display-mode-switcher">
+  {#each modes as mode}
+    <label
+      aria-label={modeLabels[mode]}
+      title="Switch display mode to '{modeLabels[mode].toLowerCase()}'"
+    >
+      <input
+        name="displayMode"
+        type="radio"
+        value={mode}
+        bind:group={displayMode}>
+      <Icon class="fa-light {modeIcons[mode]}" />
+    </label>
+  {/each}
+</div>
+
+<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;
+  }
+label {
+    position: relative;
+    cursor: pointer;
+  }
+input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 1em;
+    height: 1em;
+    top: 0;
+    left: 0;
+  }
+input[type="radio"]:checked + :global(i) {
+      color: var(--file-explorer-action-primary-color);
+    }
+</style>