sly-svelte-file-tree
Version:
A customizable file tree view component for Svelte
160 lines (159 loc) • 5.17 kB
TypeScript
import type { ComponentType } from 'svelte';
import type { Readable } from "svelte/store";
/**
* Represents metadata for a file.
* @template T - The type of the value (string, number, Date, or boolean).
*/
export type FileMetadata<T extends string | number | Date | boolean> = {
/** The name of the metadata field */
name: string;
/** The value of the metadata field */
value: string | number | Date | boolean;
/** Whether the metadata should be hidden */
hidden?: boolean;
/** A function to transform the display value of the metadata */
displayValue?: DisplayValueTransformer<T>;
};
/**
* Extends FileMetadata with a key property.
* @template T - The type of the value (string, number, Date, or boolean).
*/
export type KeyFileMetadata<T extends string | number | Date | boolean> = FileMetadata<T> & {
/** The key of the metadata field */
key: string;
/** A function to transform the display value of the metadata */
displayValue: DisplayValueTransformer<T>;
};
/**
* A dictionary of FileMetadata objects.
*/
export type FileMetadataDescriptor = {
[key: string]: FileMetadata<any>;
};
/**
* Describes a file or folder in the file tree.
*/
export type FileDescriptor = {
/** Unique identifier for the file */
id: string;
/** Name of the file */
name: string;
/** Whether the file is selected */
selected: boolean;
/** Whether the folder is expanded (if applicable) */
expanded?: boolean;
/** Metadata associated with the file */
metadata?: FileMetadataDescriptor;
/** URL or path to access the file */
href: string;
/** MIME type of the file */
mimeType: string;
/** File system path */
path: string;
/** Child files or folders (if this is a folder) */
children?: FileDescriptor[];
};
/**
* Represents a selected file, omitting certain properties.
*/
export type SelectedFile = Omit<FileDescriptor, 'children' | 'selected'>;
/**
* A dictionary of selected files, keyed by their IDs.
*/
export type SelectedFiles = {
[id: string]: SelectedFile;
};
/**
* A function to transform a value for display.
* @template T - The type of the input value (string, number, boolean, or Date).
*/
export type DisplayValueTransformer<T extends string | number | boolean | Date> = (value: T) => string;
/**
* Describes a group of files.
*/
export type FileGroup = {
/** Name of the group */
name: string;
/** Type of ordering for the group */
orderOf: 'date' | 'number' | 'string' | 'boolean';
/** Optional function to transform the display value */
displayValue?: DisplayValueTransformer<any>;
};
/**
* A dictionary of FileGroup objects.
*/
export type FileGrouping = {
[key: string]: FileGroup;
};
/**
* Represents an expanded folder, omitting certain properties.
*/
export type ExpandedFolder = Omit<FileDescriptor, 'children' | 'expanded'>;
/**
* A dictionary of expanded folders, keyed by their IDs.
*/
export type ExpandedFolders = {
[id: string]: ExpandedFolder;
};
/**
* Describes how items should be sorted.
*/
export type SortGroup = {
/** Key to sort by */
key: string;
/** Sort order (ascending or descending) */
order: 'asc' | 'desc';
} & Pick<FileGroup, 'orderOf'>;
/**
* Context for the file tree component.
*/
export type FileTreeContext = {
/** Function to select items */
selectItems: (...items: Array<SelectedFile>) => void;
/** Function to deselect items */
deselectItems: (...items: Array<SelectedFile>) => void;
/** Function to expand folders */
expandFolders: (...items: Array<string>) => void;
/** Function to collapse folders */
collapseFolders: (...items: Array<string>) => void;
/** Function to get a value transformer for a metadata key */
getValueTransformer: (metadataKey: string) => (DisplayValueTransformer<any> | undefined);
/** Function to sort items */
sortItems: (sortGroup: SortGroup) => void;
/** Readable store for the current sort group */
sortGroup: Readable<SortGroup | undefined>;
/** Readable store for expanded items */
expandedItems: Readable<Array<string>>;
};
/**
* Represents a highlighted item in the file tree.
*/
export type HighlightedItem = {
/** The item to highlight */
highlightItem?: FileDescriptor | null;
/** CSS style to apply to the highlighted item */
highlightStyle?: string | null;
};
/**
* Represents a component type with a default export.
*/
export type LastItemComp = {
default: ComponentType;
};
/**
* Function types for importing the last item component.
*/
export type ImportLastItem = ((data: FileDescriptor) => LastItemComp) | (() => LastItemComp) | ((data: FileDescriptor) => Promise<LastItemComp>) | (() => Promise<LastItemComp>);
/**
* Represents the last item in a file tree node.
*/
export type LastItem = string | ComponentType | LastItemComp | ImportLastItem | null | undefined;
/**
* Represents the expanded state of an item.
*/
export type ItemExpandedState = {
/** Whether the item has been interacted with */
touched: boolean;
/** Whether the item is expanded */
expanded: boolean;
};