Extend UI Svelte

Docs / Files / File System

File System

File and folder tree browser with expand/collapse, selection events, keyboard navigation (arrow keys, Home/End, Enter, F2 to rename), and inline rename. Dark mode is controlled by the parent through isDark; the checkbox below is the page's own control.

Sample files

readme.txt

Selected: none

Last rename: none

Last opened: none

Differences from upstream

  • Same export name, FileSystem. class is accepted alongside the upstream className.
  • One tree view only. The icons, list, columns, and gallery views (defaultView, view, onViewChange) are not ported, nor are back/forward navigation, search, sort, filters, thumbnails and the page pager (loadPreviewImageUrl, renderFilePreview), lazy loadChildren, and the built-in viewer dialog.
  • onFileOpen is called when a file is double-clicked or opened with Enter, with its url or the getFileUrl result. Without it, nothing opens (upstream falls back to its built-in viewer). Double-click or Enter on a folder expands it in place instead of navigating into it.
  • Upstream preview fields on file items (previewImageUrl, previewImageUrls, previewPageCount, previewAspectRatio) are accepted but not shown.
  • Dark mode is set by the parent through isDark; the tree has no theme switch.
  • defaultPath expands the folders down to that path in the tree instead of opening a view inside that folder, since the tree has no inside-a-folder view.
  • Types for unported features are not exported: FileSystemView, FileSystemLoadChildrenArgs, FileSystemLoadChildrenResult, FileSystemViewerKind, FileSystemSortKey, and FileSystemFilterType.
  • Port additions: bind:selectedPath, onRename, and renamable (inline rename with F2).
  • Port-only exports, the tree-building helpers and normalized entry types (upstream keeps them private): ancestorFolderPaths, buildFileSystemIndex, flattenVisibleEntries, normalizeFolderPath, pathName, pathParent, FileSystemIndex, VisibleRow, FileEntry, FolderEntry, and FileSystemEntry.

Back to all components