@securancy/file-explorer 1.0.0

package/dist/components/FileExplorerBreadcrumb.svelte

@@ -0,0 +1,263 @@
+<script>export let filePath;
+</script>
+
+<!-- @todo make it clickable -->
+<div class="file-explorer__breadcrumb">
+  {filePath}
+</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;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        filePath: string;
+    };
+    events: {
+        [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 {};

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -0,0 +1,77 @@
+<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;
+let submitting = false;
+let input = void 0;
+initDocumentUpload();
+$: if (createDirectoryModalOpen) initDocumentUpload();
+$: if (input) input.focus();
+function initDocumentUpload() {
+  request = {
+    path: createDirectoryPath,
+    name: ""
+  };
+}
+async function submitFiles() {
+  submitting = true;
+  await createDirectory(request).then(() => {
+    createDirectoryModalOpen = false;
+  }).finally(() => {
+    submitting = false;
+  });
+  documents.refresh();
+}
+</script>
+
+<Modal
+  title="Create new directory"
+  bind:opened={createDirectoryModalOpen}
+>
+  <div class="create-directory">
+    <span class="create-directory__path">{createDirectoryPath}/</span>
+    <FormElement clearable>
+      <input bind:this={input} bind:value={request.name}>
+    </FormElement>
+  </div>
+  <svelte:fragment slot="footer">
+    <Button
+      color="soft"
+      fill="clear"
+      on:click={() => createDirectoryModalOpen = false}
+    >
+      {translations.cancel}
+    </Button>
+    <Button
+      disabled={(!request.path || request.path.length === 0) || submitting}
+      on:click={submitFiles}
+    >
+      {#if submitting}
+        {translations.creating}
+      {:else}
+        {translations.create}
+      {/if}
+    </Button>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .create-directory {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+    .create-directory__path {
+      white-space: nowrap;
+    }
+
+    .create-directory input {
+      border: 1px solid var(--file-explorer-create-directory-border);
+      border-radius: var(--file-explorer-create-directory-border-radius);
+      padding: 10px;
+    }
+</style>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Refreshable } from '@securancy/svelte-utilities';
+import type { CreateDirectoryRequest, DocumentTranslations, FileSystemItem } from '../models/index.js';
+declare const __propDef: {
+    props: {
+        createDirectoryPath: string;
+        createDirectoryModalOpen?: boolean;
+        documents: Refreshable<FileSystemItem[]>;
+        createDirectory: (request: CreateDirectoryRequest) => Promise<void>;
+        translations: DocumentTranslations;
+    };
+    events: {
+        [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 {};