- Name
service- Kind
- parameter
- Type
FileTreeService- Requirement
- required
DocsAPI referenceHeadlessfile-tree
file-tree headless API
The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.
@grassroot/ui-headless-core/file-tree
Core connector and vanilla API
connectFileTree
functiondeclare function connectFileTree(service: FileTreeService, scope: PartScope, options?: FileTreeConnectOptions): FileTreeApi;serviceFileTreeServicescopePartScopeoptionsFileTreeConnectOptionsreturnFileTreeApi- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
FileTreeConnectOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
FileTreeApi- Requirement
- n/a
fileTreeAnatomy
valueexport declare const fileTreeAnatomy: { readonly scope: "file-tree"; readonly parts: readonly ["root", "header", "tree", "row"];};partsreadonly ["root", "header", "tree", "row"]scope"file-tree"- Name
parts- Kind
- property
- Type
readonly ["root", "header", "tree", "row"]- Requirement
- required
- Name
scope- Kind
- property
- Type
"file-tree"- Requirement
- required
FileTreeApi
interfaceinterface FileTreeApi { rootProps(): PartProps; headerProps(): PartProps; treeProps(): PartProps; rowProps(row: FileTreeRow): PartProps; readonly rows: readonly FileTreeRow[]; readonly selected: string | undefined; readonly focusedId: string | undefined; readonly activeId: string | undefined;}activeIdstring | undefinedfocusedIdstring | undefinedheaderProps() => PartPropsrootProps() => PartPropsrowProps(row: FileTreeRow) => PartPropsrowsreadonly FileTreeRow[]selectedstring | undefinedtreeProps() => PartProps- Name
activeId- Kind
- property
- Type
string | undefined- Requirement
- required
- Name
focusedId- Kind
- property
- Type
string | undefined- Requirement
- required
- Name
headerProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
rootProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
rowProps- Kind
- method
- Type
(row: FileTreeRow) => PartProps- Requirement
- required
- Name
rows- Kind
- property
- Type
readonly FileTreeRow[]- Requirement
- required
- Name
selected- Kind
- property
- Type
string | undefined- Requirement
- required
- Name
treeProps- Kind
- method
- Type
() => PartProps- Requirement
- required
FileTreeConnectOptions
interfaceinterface FileTreeConnectOptions { readonly repo?: string | (() => string); readonly onSelect?: (detail: { value: string; reason: FileTreeChangeReason; }) => void; readonly messages?: Partial<FileTreeMessages>;}messagesPartial<FileTreeMessages>onSelect(detail: {
value: string;
reason: FileTreeChangeReason;
}) => voidrepostring | (() => string)- Name
messages- Kind
- property
- Type
Partial<FileTreeMessages>- Requirement
- optional
- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: FileTreeChangeReason; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string | (() => string)- Requirement
- optional
fileTreeMessages
valueexport declare const fileTreeMessages: FileTreeMessages;FileTreeMessages
typetype FileTreeMessages = Pick<MessageTable, "files">;FileTreeMount
interfaceinterface FileTreeMount { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly root: HTMLElement; destroy(): void;}connectorFileTreeApidestroy() => voidrootHTMLElementserviceFileTreeService- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
destroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
root- Kind
- property
- Type
HTMLElement- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
FileTreePart
typetype FileTreePart = (typeof fileTreeAnatomy.parts)[number];FileTreeService
typetype FileTreeService = Service<FileTreeInput, FileTreeStateValue, FileTreeContext, FileTreeEvent, FileTreeCommand>;mountFileTree
functiondeclare function mountFileTree(container: HTMLElement, options: MountFileTreeOptions): FileTreeMount;containerHTMLElementoptionsMountFileTreeOptionsreturnFileTreeMount- Name
container- Kind
- parameter
- Type
HTMLElement- Requirement
- required
- Name
options- Kind
- parameter
- Type
MountFileTreeOptions- Requirement
- required
- Name
return- Kind
- return value
- Type
FileTreeMount- Requirement
- n/a
MountFileTreeOptions
interfaceinterface MountFileTreeOptions extends FileTreeInput { readonly repo?: string; readonly onSelect?: (detail: { value: string; reason: string; }) => void; readonly messages?: FileTreeConnectOptions["messages"]; readonly renderRow?: (element: HTMLElement, row: { id: string; name: string; depth: number; isDir: boolean; open: boolean; git?: string; }) => void;}messagesFileTreeConnectOptions["messages"]onSelect(detail: {
value: string;
reason: string;
}) => voidrenderRow(element: HTMLElement, row: {
id: string;
name: string;
depth: number;
isDir: boolean;
open: boolean;
git?: string;
}) => voidrepostring- Name
messages- Kind
- property
- Type
FileTreeConnectOptions["messages"]- Requirement
- optional
- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: string; }) => void- Requirement
- optional
- Name
renderRow- Kind
- property
- Type
(element: HTMLElement, row: { id: string; name: string; depth: number; isDir: boolean; open: boolean; git?: string; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
runFileTreeCommand
functiondeclare function runFileTreeCommand(command: FileTreeCommand, _scope: PartScope, options?: Pick<FileTreeConnectOptions, "onSelect">): void;commandFileTreeCommand_scopePartScopeoptionsPick<FileTreeConnectOptions, "onSelect">returnvoid- Name
command- Kind
- parameter
- Type
FileTreeCommand- Requirement
- required
- Name
_scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
Pick<FileTreeConnectOptions, "onSelect">- Requirement
- optional
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Framework adapters
Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.
React imports
import { FileTree, Header, Root, RootProvider, Row, Tree } from "@grassroot/ui-headless-react/file-tree";Vue imports
<script setup lang="ts">import { FileTree, Header, Root, RootProvider, Row, Tree } from "@grassroot/ui-headless-vue/file-tree";</script>Angular imports
import { Component } from "@angular/core";import { GR_FILE_TREE_DECLARATIONS } from "@grassroot/ui-headless-angular/file-tree"; @Component({ standalone: true, imports: [GR_FILE_TREE_DECLARATIONS], template: `<!-- compose the file-tree parts here -->` })export class Example {}Svelte imports
<script lang="ts"> import { FileTree, Header, Root, RootProvider, Row, Tree } from "@grassroot/ui-headless-svelte/file-tree";</script>Solid imports
import { FileTree, Header, Root, RootProvider, Row, Tree } from "@grassroot/ui-headless-solid/file-tree";@grassroot/ui-headless-react/file-tree
React adapter
FileTree
valueexport declare const FileTree: { Root: import("react").ForwardRefExoticComponent<FileTreeRootProps & import("react").RefAttributes<HTMLDivElement>>; RootProvider: import("react").ForwardRefExoticComponent<FileTreeRootProviderProps & import("react").RefAttributes<HTMLDivElement>>; Header: import("react").ForwardRefExoticComponent<FileTreeHeaderProps & import("react").RefAttributes<HTMLDivElement>>; Tree: import("react").ForwardRefExoticComponent<FileTreeTreeProps & import("react").RefAttributes<HTMLDivElement>>; Row: import("react").ForwardRefExoticComponent<FileTreeRowProps & import("react").RefAttributes<HTMLDivElement>>;};Headerimport("react").ForwardRefExoticComponent<FileTreeHeaderProps & import("react").RefAttributes<HTMLDivElement>>Rootimport("react").ForwardRefExoticComponent<FileTreeRootProps & import("react").RefAttributes<HTMLDivElement>>RootProviderimport("react").ForwardRefExoticComponent<FileTreeRootProviderProps & import("react").RefAttributes<HTMLDivElement>>Rowimport("react").ForwardRefExoticComponent<FileTreeRowProps & import("react").RefAttributes<HTMLDivElement>>Treeimport("react").ForwardRefExoticComponent<FileTreeTreeProps & import("react").RefAttributes<HTMLDivElement>>- Name
Header- Kind
- property
- Type
import("react").ForwardRefExoticComponent<FileTreeHeaderProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
Root- Kind
- property
- Type
import("react").ForwardRefExoticComponent<FileTreeRootProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
import("react").ForwardRefExoticComponent<FileTreeRootProviderProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
Row- Kind
- property
- Type
import("react").ForwardRefExoticComponent<FileTreeRowProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
Tree- Kind
- property
- Type
import("react").ForwardRefExoticComponent<FileTreeTreeProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
FileTreeContext
valueexport declare const FileTreeContext: import("react").Context<FileTreeContextValue | null>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
FileTreeContextValue
interfaceinterface FileTreeContextValue { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope;}connectorFileTreeApiscopePartScopeserviceFileTreeService- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
FileTreeHeaderProps
interfaceinterface FileTreeHeaderProps extends ComponentPropsWithoutRef<"div"> { readonly asChild?: boolean;}asChildboolean- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
FileTreeRootProps
interfaceinterface FileTreeRootProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> { readonly asChild?: boolean; readonly nodes: FileTreeInput["nodes"]; readonly repo?: string; readonly selected?: string; readonly defaultSelected?: string; readonly onSelect?: UseFileTreeOptions["onSelect"]; readonly children?: ReactNode;}asChildbooleanchildrenReactNodedefaultSelectedstringnodesFileTreeInput["nodes"]onSelectUseFileTreeOptions["onSelect"]repostringselectedstring- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Name
children- Kind
- property
- Type
ReactNode- Requirement
- optional
- Name
defaultSelected- Kind
- property
- Type
string- Requirement
- optional
- Name
nodes- Kind
- property
- Type
FileTreeInput["nodes"]- Requirement
- required
- Name
onSelect- Kind
- property
- Type
UseFileTreeOptions["onSelect"]- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
- Name
selected- Kind
- property
- Type
string- Requirement
- optional
FileTreeRootProviderProps
interfaceinterface FileTreeRootProviderProps extends ComponentPropsWithoutRef<"div"> { readonly value: UseFileTreeResult; readonly asChild?: boolean;}asChildbooleanvalueUseFileTreeResult- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
UseFileTreeResult- Requirement
- required
FileTreeRowProps
interfaceinterface FileTreeRowProps extends ComponentPropsWithoutRef<"div"> { readonly asChild?: boolean; readonly row: FileTreeRow$1;}asChildbooleanrowFileTreeRow$1- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Name
row- Kind
- property
- Type
FileTreeRow$1- Requirement
- required
FileTreeTreeProps
interfaceinterface FileTreeTreeProps extends ComponentPropsWithoutRef<"div"> { readonly asChild?: boolean;}asChildboolean- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
Header
valueexport declare const Header: import("react").ForwardRefExoticComponent<FileTreeHeaderProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Root
valueexport declare const Root: import("react").ForwardRefExoticComponent<FileTreeRootProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
RootProvider
valueexport declare const RootProvider: import("react").ForwardRefExoticComponent<FileTreeRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Row
valueexport declare const Row: import("react").ForwardRefExoticComponent<FileTreeRowProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Tree
valueexport declare const Tree: import("react").ForwardRefExoticComponent<FileTreeTreeProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
useFileTree
functiondeclare function useFileTree(input: FileTreeInput, options?: UseFileTreeOptions): UseFileTreeResult;inputFileTreeInputoptionsUseFileTreeOptionsreturnUseFileTreeResult- Name
input- Kind
- parameter
- Type
FileTreeInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseFileTreeOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseFileTreeResult- Requirement
- n/a
useFileTreeContext
functiondeclare function useFileTreeContext(partName: string): FileTreeContextValue;partNamestringreturnFileTreeContextValue- Name
partName- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
FileTreeContextValue- Requirement
- n/a
UseFileTreeOptions
interfaceinterface UseFileTreeOptions { readonly repo?: string; readonly onSelect?: (detail: { value: string; reason: FileTreeChangeReason; }) => void;}onSelect(detail: {
value: string;
reason: FileTreeChangeReason;
}) => voidrepostring- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: FileTreeChangeReason; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
UseFileTreeResult
interfaceinterface UseFileTreeResult { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope; readonly snapshot: FileTreeSnapshot;}connectorFileTreeApiscopePartScopeserviceFileTreeServicesnapshotFileTreeSnapshot- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
FileTreeSnapshot- Requirement
- required
useServiceVersion
functionSubscribes a component to a service's committed-snapshot version.
declare function useServiceVersion<S extends Service<any, any, any, any, any, any>>(service: S): ReturnType<S["getSnapshot"]>;serviceSreturnReturnType<S["getSnapshot"]>- Name
service- Kind
- parameter
- Type
S- Requirement
- required
- Name
return- Kind
- return value
- Type
ReturnType<S["getSnapshot"]>- Requirement
- n/a
@grassroot/ui-headless-vue/file-tree
Vue adapter
FileTree
valueexport declare const FileTree: { Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ nodes: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: import("vue").PropType<string | undefined>; default: undefined; }; defaultSelected: { type: import("vue").PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { select: (_detail: { value: string; reason: string; }) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ nodes: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: import("vue").PropType<string | undefined>; default: undefined; }; defaultSelected: { type: import("vue").PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onSelect?: ((_detail: { value: string; reason: string; }) => any) | undefined; }>, { repo: string; selected: string | undefined; defaultSelected: string | undefined; asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ value: { type: import("vue").PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ value: { type: import("vue").PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Tree: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Row: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ row: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ row: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;};Headerimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Rootimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
nodes: {
type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>;
required: true;
};
repo: {
type: StringConstructor;
default: string;
};
selected: {
type: import("vue").PropType<string | undefined>;
default: undefined;
};
defaultSelected: {
type: import("vue").PropType<string | undefined>;
default: undefined;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
select: (_detail: {
value: string;
reason: string;
}) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
nodes: {
type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>;
required: true;
};
repo: {
type: StringConstructor;
default: string;
};
selected: {
type: import("vue").PropType<string | undefined>;
default: undefined;
};
defaultSelected: {
type: import("vue").PropType<string | undefined>;
default: undefined;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onSelect?: ((_detail: {
value: string;
reason: string;
}) => any) | undefined;
}>, {
repo: string;
selected: string | undefined;
defaultSelected: string | undefined;
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>RootProviderimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: import("vue").PropType<ReturnType<typeof useFileTree>>;
required: true;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: import("vue").PropType<ReturnType<typeof useFileTree>>;
required: true;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Rowimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
row: {
type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>;
required: true;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
row: {
type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>;
required: true;
};
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Treeimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Name
Header- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Root- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ nodes: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: import("vue").PropType<string | undefined>; default: undefined; }; defaultSelected: { type: import("vue").PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { select: (_detail: { value: string; reason: string; }) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ nodes: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: import("vue").PropType<string | undefined>; default: undefined; }; defaultSelected: { type: import("vue").PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onSelect?: ((_detail: { value: string; reason: string; }) => any) | undefined; }>, { repo: string; selected: string | undefined; defaultSelected: string | undefined; asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ value: { type: import("vue").PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ value: { type: import("vue").PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Row- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ row: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ row: { type: import("vue").PropType<import("@grassroot/ui-machines/file-tree").FileTreeRow>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Tree- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
FileTreeContextKey
valueexport declare const FileTreeContextKey: InjectionKey<FileTreeContextValue>;Header
valueexport declare const Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{}>, { asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;provideFileTreeContext
functiondeclare function provideFileTreeContext(value: FileTreeContextValue): void;valueFileTreeContextValuereturnvoid- Name
value- Kind
- parameter
- Type
FileTreeContextValue- Requirement
- required
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Root
valueexport declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ nodes: { type: PropType<FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: PropType<string | undefined>; default: undefined; }; defaultSelected: { type: PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { select: (_detail: { value: string; reason: string; }) => true;}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ nodes: { type: PropType<FileTreeInput["nodes"]>; required: true; }; repo: { type: StringConstructor; default: string; }; selected: { type: PropType<string | undefined>; default: undefined; }; defaultSelected: { type: PropType<string | undefined>; default: undefined; }; asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{ onSelect?: ((_detail: { value: string; reason: string; }) => any) | undefined;}>, { repo: string; selected: string | undefined; defaultSelected: string | undefined; asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;RootProvider
valueexport declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ value: { type: PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ value: { type: PropType<ReturnType<typeof useFileTree>>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{}>, { asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;Row
valueexport declare const Row: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ row: { type: PropType<FileTreeRow$1>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ row: { type: PropType<FileTreeRow$1>; required: true; }; asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{}>, { asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;Tree
valueexport declare const Tree: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{}>, { asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;useFileTree
functiondeclare function useFileTree(input: FileTreeInput | (() => FileTreeInput), options?: UseFileTreeOptions): UseFileTreeResult;inputFileTreeInput | (() => FileTreeInput)optionsUseFileTreeOptionsreturnUseFileTreeResult- Name
input- Kind
- parameter
- Type
FileTreeInput | (() => FileTreeInput)- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseFileTreeOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseFileTreeResult- Requirement
- n/a
useFileTreeContext
functiondeclare function useFileTreeContext(partName: string): FileTreeContextValue;partNamestringreturnFileTreeContextValue- Name
partName- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
FileTreeContextValue- Requirement
- n/a
UseFileTreeOptions
interfaceinterface UseFileTreeOptions { readonly repo?: string; readonly onSelect?: (detail: { value: string; reason: FileTreeChangeReason; }) => void;}onSelect(detail: {
value: string;
reason: FileTreeChangeReason;
}) => voidrepostring- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: FileTreeChangeReason; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
UseFileTreeResult
interfaceinterface UseFileTreeResult { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope; readonly snapshot: ShallowRef<FileTreeSnapshot>;}connectorFileTreeApiscopePartScopeserviceFileTreeServicesnapshotShallowRef<FileTreeSnapshot>- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
ShallowRef<FileTreeSnapshot>- Requirement
- required
@grassroot/ui-headless-angular/file-tree
Angular adapter
createFileTreeStore
functionexport declare function createFileTreeStore(initialInput: FileTreeInput, options?: FileTreeOptions): FileTreeStore;initialInputFileTreeInputoptionsFileTreeOptionsreturnFileTreeStore- Name
initialInput- Kind
- parameter
- Type
FileTreeInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
FileTreeOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
FileTreeStore- Requirement
- n/a
FILE_TREE_STORE
valueexport declare const FILE_TREE_STORE: InjectionToken<FileTreeStore>;FileTreeStore
interfaceexport interface FileTreeStore { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope; readonly version: WritableSignal<number>; start(): void; stop(): void; sync(input: FileTreeInput): void;}connectorFileTreeApiscopePartScopeserviceFileTreeServicestart() => voidstop() => voidsync(input: FileTreeInput) => voidversionWritableSignal<number>- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
- Name
start- Kind
- method
- Type
() => void- Requirement
- required
- Name
stop- Kind
- method
- Type
() => void- Requirement
- required
- Name
sync- Kind
- method
- Type
(input: FileTreeInput) => void- Requirement
- required
- Name
version- Kind
- property
- Type
WritableSignal<number>- Requirement
- required
export declare const GR_FILE_TREE_DECLARATIONS: readonly [typeof GrFileTreeRoot, typeof GrFileTreeHeader, typeof GrFileTreeTree, typeof GrFileTreeRow];GrFileTreeHeader
classexport declare class GrFileTreeHeader extends FileTreePart { constructor(); static ɵfac: i0.ɵɵFactoryDeclaration<GrFileTreeHeader, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrFileTreeHeader, "[grFileTreeHeader]", never, {}, {}, never, never, true, never>;}ɵdiri0.ɵɵDirectiveDeclaration<GrFileTreeHeader, "[grFileTreeHeader]", never, {}, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrFileTreeHeader, never>- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrFileTreeHeader, "[grFileTreeHeader]", never, {}, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrFileTreeHeader, never>- Requirement
- required
GrFileTreeRoot
classexport declare class GrFileTreeRoot implements OnDestroy { readonly nodes: import("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/file-tree").FileTreeNode[]>; readonly repo: import("@angular/core").InputSignal<string>; readonly selected: import("@angular/core").InputSignal<string | undefined>; readonly defaultSelected: import("@angular/core").InputSignal<string | undefined>; readonly select: import("@angular/core").OutputEmitterRef<{ value: string; reason: string; }>; private readonly injector; private readonly element; private readonly listeners; private readonly consumerProps; readonly store: import("./context.js").FileTreeStore; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrFileTreeRoot, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrFileTreeRoot, "[grFileTreeRoot]", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "repo": { "alias": "repo"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "defaultSelected": { "alias": "defaultSelected"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;}consumerPropsanydefaultSelectedimport("@angular/core").InputSignal<string | undefined>elementanyinjectoranylistenersanyngOnDestroy() => voidnodesimport("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/file-tree").FileTreeNode[]>ɵdiri0.ɵɵDirectiveDeclaration<GrFileTreeRoot, "[grFileTreeRoot]", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "repo": { "alias": "repo"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "defaultSelected": { "alias": "defaultSelected"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrFileTreeRoot, never>repoimport("@angular/core").InputSignal<string>selectimport("@angular/core").OutputEmitterRef<{
value: string;
reason: string;
}>selectedimport("@angular/core").InputSignal<string | undefined>storeimport("./context.js").FileTreeStore- Name
consumerProps- Kind
- property
- Type
any- Requirement
- required
- Name
defaultSelected- Kind
- property
- Type
import("@angular/core").InputSignal<string | undefined>- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
injector- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
nodes- Kind
- property
- Type
import("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/file-tree").FileTreeNode[]>- Requirement
- required
- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrFileTreeRoot, "[grFileTreeRoot]", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "repo": { "alias": "repo"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "defaultSelected": { "alias": "defaultSelected"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrFileTreeRoot, never>- Requirement
- required
- Name
repo- Kind
- property
- Type
import("@angular/core").InputSignal<string>- Requirement
- required
- Name
select- Kind
- property
- Type
import("@angular/core").OutputEmitterRef<{ value: string; reason: string; }>- Requirement
- required
- Name
selected- Kind
- property
- Type
import("@angular/core").InputSignal<string | undefined>- Requirement
- required
- Name
store- Kind
- property
- Type
import("./context.js").FileTreeStore- Requirement
- required
GrFileTreeRow
classexport declare class GrFileTreeRow implements OnDestroy { readonly row: import("@angular/core").InputSignal<FileTreeRow>; private readonly store; private readonly element; private readonly listeners; private readonly consumerProps; private key; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrFileTreeRow, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrFileTreeRow, "[grFileTreeRow]", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;}consumerPropsanyelementanykeyanylistenersanyngOnDestroy() => voidɵdiri0.ɵɵDirectiveDeclaration<GrFileTreeRow, "[grFileTreeRow]", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrFileTreeRow, never>rowimport("@angular/core").InputSignal<FileTreeRow>storeany- Name
consumerProps- Kind
- property
- Type
any- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
key- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrFileTreeRow, "[grFileTreeRow]", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrFileTreeRow, never>- Requirement
- required
- Name
row- Kind
- property
- Type
import("@angular/core").InputSignal<FileTreeRow>- Requirement
- required
- Name
store- Kind
- property
- Type
any- Requirement
- required
GrFileTreeTree
classexport declare class GrFileTreeTree extends FileTreePart { constructor(); static ɵfac: i0.ɵɵFactoryDeclaration<GrFileTreeTree, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrFileTreeTree, "[grFileTreeTree]", never, {}, {}, never, never, true, never>;}ɵdiri0.ɵɵDirectiveDeclaration<GrFileTreeTree, "[grFileTreeTree]", never, {}, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrFileTreeTree, never>- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrFileTreeTree, "[grFileTreeTree]", never, {}, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrFileTreeTree, never>- Requirement
- required
@grassroot/ui-headless-svelte/file-tree
Svelte adapter
createFileTree
functionexport declare function createFileTree(inputGetter: () => FileTreeInput, options?: UseFileTreeOptions): UseFileTreeResult;inputGetter() => FileTreeInputoptionsUseFileTreeOptionsreturnUseFileTreeResult- Name
inputGetter- Kind
- parameter
- Type
() => FileTreeInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseFileTreeOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseFileTreeResult- Requirement
- n/a
FileTree
valueexport declare const FileTree: { Root: import("svelte/legacy").LegacyComponentType; RootProvider: import("svelte/legacy").LegacyComponentType; Header: import("svelte/legacy").LegacyComponentType; Tree: import("svelte/legacy").LegacyComponentType; Row: import("svelte/legacy").LegacyComponentType;};Headerimport("svelte/legacy").LegacyComponentTypeRootimport("svelte/legacy").LegacyComponentTypeRootProviderimport("svelte/legacy").LegacyComponentTypeRowimport("svelte/legacy").LegacyComponentTypeTreeimport("svelte/legacy").LegacyComponentType- Name
Header- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Root- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Row- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Tree- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
Header
valueexport declare const Header: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
provideFileTreeContext
functionexport declare function provideFileTreeContext(value: FileTreeContextValue): void;valueFileTreeContextValuereturnvoid- Name
value- Kind
- parameter
- Type
FileTreeContextValue- Requirement
- required
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Root
valueexport declare const Root: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
RootProvider
valueexport declare const RootProvider: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
Row
valueexport declare const Row: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
Tree
valueexport declare const Tree: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
useFileTreeContext
functionexport declare function useFileTreeContext(partName: string): FileTreeContextValue;partNamestringreturnFileTreeContextValue- Name
partName- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
FileTreeContextValue- Requirement
- n/a
UseFileTreeOptions
interfaceexport interface UseFileTreeOptions { readonly repo?: string; readonly onSelect?: (detail: { value: string; reason: FileTreeChangeReason; }) => void;}onSelect(detail: {
value: string;
reason: FileTreeChangeReason;
}) => voidrepostring- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: FileTreeChangeReason; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
UseFileTreeResult
interfaceexport interface UseFileTreeResult { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope; readonly version: () => number; readonly snapshot: () => FileTreeSnapshot;}connectorFileTreeApiscopePartScopeserviceFileTreeServicesnapshot() => FileTreeSnapshotversion() => number- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
() => FileTreeSnapshot- Requirement
- required
- Name
version- Kind
- property
- Type
() => number- Requirement
- required
@grassroot/ui-headless-solid/file-tree
Solid adapter
FileTree
valueexport declare const FileTree: { Root: typeof FileTreeRoot; RootProvider: typeof RootProvider; Header: (props: { as?: string; children?: import("solid-js").JSX.Element; } & Record<string, unknown>) => import("solid-js").JSX.Element; Tree: (props: { as?: string; children?: import("solid-js").JSX.Element; } & Record<string, unknown>) => import("solid-js").JSX.Element; Row: typeof Row;};Header(props: {
as?: string;
children?: import("solid-js").JSX.Element;
} & Record<string, unknown>) => import("solid-js").JSX.ElementRoottypeof FileTreeRootRootProvidertypeof RootProviderRowtypeof RowTree(props: {
as?: string;
children?: import("solid-js").JSX.Element;
} & Record<string, unknown>) => import("solid-js").JSX.Element- Name
Header- Kind
- property
- Type
(props: { as?: string; children?: import("solid-js").JSX.Element; } & Record<string, unknown>) => import("solid-js").JSX.Element- Requirement
- required
- Name
Root- Kind
- property
- Type
typeof FileTreeRoot- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
typeof RootProvider- Requirement
- required
- Name
Row- Kind
- property
- Type
typeof Row- Requirement
- required
- Name
Tree- Kind
- property
- Type
(props: { as?: string; children?: import("solid-js").JSX.Element; } & Record<string, unknown>) => import("solid-js").JSX.Element- Requirement
- required
FileTreeContext
valueexport declare const FileTreeContext: import("solid-js").Context<FileTreeContextValue | undefined>;Header
valueexport declare const Header: (props: PartProps) => JSX.Element;propsPartPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
PartProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
Root
functionexport declare function FileTreeRoot(props: FileTreeRootProps): JSX.Element;propsFileTreeRootPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
FileTreeRootProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
RootProvider
functionexport declare function FileTreeRootProvider(props: FileTreeRootProviderProps): JSX.Element;propsFileTreeRootProviderPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
FileTreeRootProviderProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
Row
functionexport declare function FileTreeRowPart(props: { row: FileTreeRow; as?: string; children?: JSX.Element;} & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;props{
row: FileTreeRow;
as?: string;
children?: JSX.Element;
} & JSX.HTMLAttributes<HTMLDivElement>returnJSX.Element- Name
props- Kind
- parameter
- Type
{ row: FileTreeRow; as?: string; children?: JSX.Element; } & JSX.HTMLAttributes<HTMLDivElement>- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
Tree
valueexport declare const Tree: (props: PartProps) => JSX.Element;propsPartPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
PartProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
useFileTree
functionexport declare function useFileTree(input: Accessor<FileTreeInput>, options?: UseFileTreeOptions): UseFileTreeResult;inputAccessor<FileTreeInput>optionsUseFileTreeOptionsreturnUseFileTreeResult- Name
input- Kind
- parameter
- Type
Accessor<FileTreeInput>- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseFileTreeOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseFileTreeResult- Requirement
- n/a
useFileTreeContext
functionexport declare function useFileTreeContext(partName: string): FileTreeContextValue;partNamestringreturnFileTreeContextValue- Name
partName- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
FileTreeContextValue- Requirement
- n/a
UseFileTreeOptions
interfaceexport interface UseFileTreeOptions { readonly repo?: string; readonly onSelect?: (detail: { value: string; reason: FileTreeChangeReason; }) => void;}onSelect(detail: {
value: string;
reason: FileTreeChangeReason;
}) => voidrepostring- Name
onSelect- Kind
- property
- Type
(detail: { value: string; reason: FileTreeChangeReason; }) => void- Requirement
- optional
- Name
repo- Kind
- property
- Type
string- Requirement
- optional
UseFileTreeResult
interfaceexport interface UseFileTreeResult { readonly service: FileTreeService; readonly connector: FileTreeApi; readonly scope: PartScope; readonly snapshot: Accessor<FileTreeSnapshot>;}connectorFileTreeApiscopePartScopeserviceFileTreeServicesnapshotAccessor<FileTreeSnapshot>- Name
connector- Kind
- property
- Type
FileTreeApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
FileTreeService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
Accessor<FileTreeSnapshot>- Requirement
- required