@securancy/file-explorer 1.0.6 → 1.1.0

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -1,10 +1,10 @@
-<script>import { createEventDispatcher } from "svelte";
-import {} from "..";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, getItemHref } from "../utilities/index.js";
-import FileIcon from "./FileIcon.svelte";
-import { joinPaths } from "../utilities/index.js";
+<script>import { createEventDispatcher } from 'svelte';
+import {} from '..';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
+import { getExtension, getItemHref } from '../utilities/index.js';
+import FileIcon from './FileIcon.svelte';
+import { joinPaths } from '../utilities/index.js';
 const dispatch = createEventDispatcher();
 export let item;
 export let sticky = false;
@@ -12,42 +12,42 @@ export let routePrefix;
 export let canEdit;
 export let translations;
 export let activeFileItem;
-let dragoverIndex = 0;
+let dragoverIndex = 0; // Incremented/decremented when entering/leaving a child element of the column
 let innerWidth = 0;
 function addItem() {
-  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
+    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
+    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
 }
 function handleDragEnter(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex++;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex++;
 }
 function handleDrop(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex = 0;
-  const eventData = { path: joinPaths(item.path, item.name) };
-  if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
-    eventData.files = event.dataTransfer.files;
-  }
-  dispatch("upload-file", eventData);
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex = 0;
+    const eventData = { path: joinPaths(item.path, item.name) };
+    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+        eventData.files = event.dataTransfer.files;
+    }
+    dispatch('upload-file', eventData);
 }
 function handleDragLeave(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex--;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex--;
 }
 function handleDragEnd(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex = 0;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex = 0;
 }
 function handleDragOver(event) {
-  event.preventDefault();
-  event.stopPropagation();
+    event.preventDefault();
+    event.stopPropagation();
 }
 </script>
 
@@ -115,8 +115,7 @@ function handleDragOver(event) {
   </div>
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -176,7 +175,7 @@ function handleDragOver(event) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -223,7 +222,7 @@ function handleDragOver(event) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -371,5 +370,4 @@ function handleDragOver(event) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { UploadFileEvent } from './FileExplorer.svelte';
 import { type DirectoryItem, type DocumentTranslations, type FileSystemItem } from '..';
 import type { CreateDirectoryEvent } from './FileExplorer.svelte';
@@ -12,19 +12,17 @@ declare const __propDef: {
         activeFileItem: FileSystemItem | undefined;
     };
     events: {
-        'scroll-back': CustomEvent<void>;
+        'scroll-back': CustomEvent<undefined>;
         'upload-file': CustomEvent<UploadFileEvent>;
         'create-directory': CustomEvent<CreateDirectoryEvent>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDirectoryColumnProps = typeof __propDef.props;
 export type FileExplorerDirectoryColumnEvents = typeof __propDef.events;
 export type FileExplorerDirectoryColumnSlots = typeof __propDef.slots;
-export default class FileExplorerDirectoryColumn extends SvelteComponent<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
+export default class FileExplorerDirectoryColumn extends SvelteComponentTyped<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
 }
 export {};

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -1,8 +1,8 @@
-<script>import FileIcon from "./FileIcon.svelte";
-import { createEventDispatcher } from "svelte";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, getItemHref, joinPaths } from "../utilities/index.js";
+<script>import FileIcon from './FileIcon.svelte';
+import { createEventDispatcher } from 'svelte';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
+import { getExtension, getItemHref, joinPaths } from '../utilities/index.js';
 const dispatch = createEventDispatcher();
 export let item;
 export let routePrefix;
@@ -11,10 +11,10 @@ export let canEdit;
 export let activeFileItem;
 let innerWidth = 0;
 function addItem() {
-  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
+    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
+    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
 }
 </script>
 
@@ -74,8 +74,7 @@ function createDirectory() {
   </div>
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -135,7 +134,7 @@ function createDirectory() {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -182,7 +181,7 @@ function createDirectory() {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -330,5 +329,4 @@ function createDirectory() {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { DirectoryItem, DocumentTranslations, FileSystemItem } from '../index.js';
 import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
 declare const __propDef: {
@@ -16,12 +16,10 @@ declare const __propDef: {
         [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 default class FileExplorerDirectoryIndex extends SvelteComponentTyped<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
 }
 export {};

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -1,11 +1,11 @@
-<script>import { FileExplorerDisplayMode } from "../index.js";
-import { Icon } from "@securancy/svelte-components";
+<script>import { FileExplorerDisplayMode } from '../index.js';
+import { Icon } from '@securancy/svelte-components';
 export let displayMode;
 export let translations;
 let modes = Object.values(FileExplorerDisplayMode);
 const modeIcons = {
-  columns: "fa-columns-3",
-  index: "fa-grid"
+    columns: 'fa-columns-3',
+    index: 'fa-grid',
 };
 </script>
 
@@ -25,8 +25,7 @@ const modeIcons = {
   {/each}
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -86,7 +85,7 @@ const modeIcons = {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -133,7 +132,7 @@ const modeIcons = {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -296,5 +295,4 @@ input[type="radio"] {
   }
 input[type="radio"]:checked + :global(i) {
       color: var(--file-explorer-action-primary-color);
-    }
-</style>
+    }</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import { type DocumentTranslations, FileExplorerDisplayMode } from '../index.js';
 declare const __propDef: {
     props: {
@@ -9,12 +9,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDisplayModeSwitcherProps = typeof __propDef.props;
 export type FileExplorerDisplayModeSwitcherEvents = typeof __propDef.events;
 export type FileExplorerDisplayModeSwitcherSlots = typeof __propDef.slots;
-export default class FileExplorerDisplayModeSwitcher extends SvelteComponent<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
+export default class FileExplorerDisplayModeSwitcher extends SvelteComponentTyped<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
 }
 export {};

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -1,24 +1,25 @@
-<script>import { Card, Icon } from "@securancy/svelte-components";
-import FileIcon from "./FileIcon.svelte";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { formatBytes, getExtension, isImage } from "../utilities/index.js";
-import { DateTime } from "luxon";
-import { createEventDispatcher } from "svelte";
+<script>import { Card, Icon } from '@securancy/svelte-components';
+import FileIcon from './FileIcon.svelte';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { formatBytes, getExtension, isImage } from '../utilities/index.js';
+import { DateTime } from 'luxon';
+import { createEventDispatcher } from 'svelte';
 export let fileItem;
 export let getFilePreview;
 export let translations;
 export let canEdit;
 const dispatch = createEventDispatcher();
-const fileDateFormat = "cccc FF";
+const fileDateFormat = 'cccc FF';
 let filePreview;
 let extension;
 $: refresh(fileItem);
 async function refresh(_fileItem) {
-  filePreview = await getFilePreview(_fileItem).catch((error) => {
-    console.error(error);
-    return void 0;
-  });
-  extension = getExtension(_fileItem.name);
+    filePreview = await getFilePreview(_fileItem)
+        .catch((error) => {
+        console.error(error);
+        return undefined;
+    });
+    extension = getExtension(_fileItem.name);
 }
 </script>
 
@@ -86,8 +87,7 @@ async function refresh(_fileItem) {
   </div>
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -147,7 +147,7 @@ async function refresh(_fileItem) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -194,7 +194,7 @@ async function refresh(_fileItem) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -342,5 +342,4 @@ async function refresh(_fileItem) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { DocumentTranslations, FileItem, FilePreview } from '..';
 import type { DeleteFileEvent } from './FileExplorer.svelte';
 declare const __propDef: {
@@ -14,12 +14,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerFileDetailColumnProps = typeof __propDef.props;
 export type FileExplorerFileDetailColumnEvents = typeof __propDef.events;
 export type FileExplorerFileDetailColumnSlots = typeof __propDef.slots;
-export default class FileExplorerFileDetailColumn extends SvelteComponent<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
+export default class FileExplorerFileDetailColumn extends SvelteComponentTyped<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
 }
 export {};

package/dist/components/FileIcon.svelte

@@ -1,43 +1,45 @@
-<script>import { Icon } from "@securancy/svelte-components";
-import { imageExtensions, videoExtensions } from "../utilities/index.js";
+<script>import { Icon } from '@securancy/svelte-components';
+import { imageExtensions, videoExtensions } from '../utilities/index.js';
 export let extension;
-export let size = "default";
+export let size = 'default';
 let iconClass;
 $: iconClass = determineIconString(extension);
 function determineIconString(_extension) {
-  if (imageExtensions.includes(_extension)) return "fa-file-image";
-  if (videoExtensions.includes(_extension)) return "fa-file-video";
-  switch (_extension) {
-    case "pdf": {
-      return "fa-file-pdf";
+    if (imageExtensions.includes(_extension))
+        return 'fa-file-image';
+    if (videoExtensions.includes(_extension))
+        return 'fa-file-video';
+    switch (_extension) {
+        case 'pdf': {
+            return 'fa-file-pdf';
+        }
+        case 'doc':
+        case 'docx': {
+            return 'fa-file-word';
+        }
+        case 'xls':
+        case 'xlsx': {
+            return 'fa-file-spreadsheet';
+        }
+        case 'ppt':
+        case 'pptx': {
+            return 'fa-file-powerpoint';
+        }
+        case 'csv': {
+            return 'fa-file-csv';
+        }
+        case 'txt': {
+            return 'fa-file-lines';
+        }
+        case 'zip':
+        case 'tar':
+        case 'rar': {
+            return 'fa-file-zipper';
+        }
+        default: {
+            return 'fa-file';
+        }
     }
-    case "doc":
-    case "docx": {
-      return "fa-file-word";
-    }
-    case "xls":
-    case "xlsx": {
-      return "fa-file-spreadsheet";
-    }
-    case "ppt":
-    case "pptx": {
-      return "fa-file-powerpoint";
-    }
-    case "csv": {
-      return "fa-file-csv";
-    }
-    case "txt": {
-      return "fa-file-lines";
-    }
-    case "zip":
-    case "tar":
-    case "rar": {
-      return "fa-file-zipper";
-    }
-    default: {
-      return "fa-file";
-    }
-  }
 }
 </script>
 
@@ -53,8 +55,7 @@ function determineIconString(_extension) {
   {/if}
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -114,7 +115,7 @@ function determineIconString(_extension) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -161,7 +162,7 @@ function determineIconString(_extension) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -309,5 +310,4 @@ function determineIconString(_extension) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

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

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

package/dist/file-explorer.pcss

@@ -1,4 +1,3 @@
-/* eslint-disable */
 @import url("@securancy/svelte-components/styles/custom-media.pcss");
 
 .file-explorer {
@@ -64,7 +63,7 @@
     }
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -121,7 +120,7 @@
   }
 
   &__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 
   &__list {

package/dist/models/file-item.d.ts

@@ -1,8 +1,8 @@
 export type FileSystemItem = FileItem | DirectoryItem;
-type FileSystemItemProperties = {
+interface FileSystemItemProperties {
     name: string;
     path: string;
-};
+}
 export type FileItem = {
     type: 'file';
 } & FileSystemItemProperties;

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

@@ -5,6 +5,5 @@ 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;
 export declare function pathsEqual(path1: string, path2: string): boolean;

package/dist/utilities/file-utilities.js

@@ -4,7 +4,7 @@ export function getItemHref(item, routePrefix) {
         ...item.path.split('/'),
         item.name,
     ]
-        .filter((node) => node !== '')
+        .filter(node => node !== '')
         .map(encodeURIComponent)
         .join('/');
     return itemPath.startsWith('/') ? itemPath : `/${itemPath}`;
@@ -37,23 +37,23 @@ export function formatBytes(bytes, decimals = 2) {
     const values = formatBytesParts(bytes, decimals);
     return `${values[0]} ${values[1]}`;
 }
-export function formatBytesParts(bytes, decimals = 2) {
+function formatBytesParts(bytes, decimals = 2) {
     if (bytes === 0)
         return [0, 'Bytes'];
     const k = 1000;
-    const dm = decimals < 0 ? 0 : decimals;
+    const dm = Math.max(decimals, 0);
     const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
     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
-        .map((path) => path.split('/').filter((part) => part !== '').join('/'))
-        .filter((path) => path !== '')
+        .map(path => path.split('/').filter(part => part !== '').join('/'))
+        .filter(path => path !== '')
         .join('/');
 }
 export function pathsEqual(path1, path2) {
-    const path1Parts = path1.split('/').filter((part) => part !== '');
-    const path2Parts = path2.split('/').filter((part) => part !== '');
+    const path1Parts = path1.split('/').filter(part => part !== '');
+    const path2Parts = path2.split('/').filter(part => part !== '');
     return path1Parts.length === path2Parts.length && path1Parts.every((part, index) => part === path2Parts[index]);
 }