@securancy/file-explorer 1.0.3 → 1.0.4

package/dist/components/FileExplorerDirectory.svelte

@@ -2,7 +2,6 @@
 import FileExplorerDirectoryColumn from "./FileExplorerDirectoryColumn.svelte";
 import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
 import FileExplorerDirectoryIndex from "./FileExplorerDirectoryIndex.svelte";
-import { joinPaths } from "../utilities";
 export let item;
 export let translations;
 export let routePrefix;
@@ -10,7 +9,14 @@ export let currentPath;
 export let canEdit;
 export let displayMode;
 export let getFilePreview;
-$: activeFileItem = item.children.find((fi) => currentPath.startsWith(joinPaths(fi.path, fi.name)));
+$: 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;
 }

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -2,7 +2,7 @@
 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 { joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
@@ -89,12 +89,11 @@ function handleDragOver(event) {
       </div>
       {#if item.children.length > 0}
         {#each item.children as child}
-          <button
+          <a
             class="file-explorer__list-item"
             class:file-explorer__list-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
             title={translations.itemTitle(child)}
-            type="button"
-            on:click={() => openItem(child, routePrefix)}
           >
             {#if child.type === 'directory'}
               <Icon class="fa-light fa-folder{activeFileItem === child ? '-open' : ''}" />
@@ -105,7 +104,7 @@ function handleDragOver(event) {
             {#if child.type === 'directory'}
               <Icon class="fa-light fa-sm fa-chevron-right" size="custom" />
             {/if}
-          </button>
+          </a>
         {/each}
       {:else}
         <p class="file-explorer__message">

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -2,7 +2,7 @@
 import { createEventDispatcher } from "svelte";
 import { resize, ResizeDirections } from "@securancy/svelte-utilities";
 import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, joinPaths, openItem } from "../utilities/index.js";
+import { getExtension, getItemHref, joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
 export let item;
 export let routePrefix;
@@ -48,12 +48,11 @@ function createDirectory() {
           {/if}
         </div>
         {#each item.children as child}
-          <button
+          <a
             class="file-explorer__grid-item"
             class:file-explorer__grid-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
             title={translations.itemTitle(child)}
-            type="button"
-            on:click={() => openItem(child, routePrefix)}
           >
             {#if child.type === 'directory'}
               <Icon
@@ -64,7 +63,7 @@ function createDirectory() {
               <FileIcon extension={getExtension(child.name)} size="grid" />
             {/if}
             <span>{child.name}</span>
-          </button>
+          </a>
         {:else}
           <p class="file-explorer__message">
             {translations.emptyDirectory}

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

@@ -1,5 +1,5 @@
 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[];

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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -52,8 +52,7 @@
     "@securancy/svelte-utilities": "2.0.1"
   },
   "peerDependencies": {
-    "svelte": "^4.2.18",
-    "@sveltejs/kit": "^2.5.18"
+    "svelte": "^4.2.18"
   },
   "scripts": {
     "dev": "vite dev",