CnFolderSidebar

Source-agnostic folder navigation sidebar. Renders an "All" reset entry plus a (nested) folder tree, and emits select with the chosen folder id (or null for "All"). Drop it into an index page's sidebar to filter the list by folder.

Folder sources (source prop)

• custom (default) — the parent supplies folders (flat with parentField, or already-nested via childrenField) and handles CRUD via the create / rename / delete events. Fits app-owned folder tables, OpenRegister folder objects, anything.
• field — no folder entity: the tree is built from the distinct values of a groupBy field across objects. Lightweight grouping, no nesting.
• files — real Nextcloud folders/collections under filesPath, loaded over WebDAV via fetchWebdavFolderTree (override with the fetcher prop, e.g. for tests).

<!-- App-owned folders -->
<CnFolderSidebar :folders="folderTree" :selected-id="folderId" allow-create
  @select="onFolder" @create="onCreateFolder" />

<!-- Group by any field -->
<CnFolderSidebar source="field" :objects="rows" group-by="status"
  :selected-id="status" @select="onFolder" />

<!-- Real Nextcloud folders -->
<CnFolderSidebar source="files" files-path="/Vault" :selected-id="path" @select="onFolder" />

Props

Prop	Type	Default	Description
source	String	'custom'	Folder source: custom | field | files.
folders	Array	[]	custom source: the folders (flat or nested).
objects	Array	[]	field source: the objects whose values become folders.
groupBy	String	''	field source: the property to group by.
filesPath	String	'/'	files source: root path to list.
maxDepth	Number	1	files source: recursion depth.
fetcher	Function	null	files source: async loader override.
selectedId	String | Number	null	The selected folder id (null = All).
title	String	''	Optional heading above the tree.
allLabel	String	(i18n)	Label for the "All" reset entry.
allIcon	String	''	MDI name for the "All" entry (empty = built-in).
idField / nameField / parentField / childrenField	String	id / name / parentId / children	Field names for the custom source.
allowCreate	Boolean	false	Show a "New folder" button.
createLabel	String	(i18n)	Label for the New-folder button.

Events

• @select(id \| null) — a folder (or "All") was chosen.
• @create({ parentId }) — the New-folder button was clicked (opt-in).

Props

Name	Type	Required	Default	Description
source	string		'custom'	Folder source strategy.
folders	Array<object>		[]	custom source: the folders, flat (with parentField) or nested (with childrenField). Each needs at least idField + nameField.
objects	array		[]	field source: the objects whose groupBy values become folders.
groupBy	string		''	field source: the object property to group by.
filesPath	string		'/'	files source: the folder path to list children of (root of the tree).
maxDepth	number		1	files source: how deep to recurse under filesPath (each level is a WebDAV request per folder — keep small). 1 = immediate children only.
fetcher	Function		null	files source: async loader override. Signature ({ path, depth }) =&gt; Promise&lt;folders&gt;. Defaults to a built-in WebDAV PROPFIND loader. Inject in tests.
selectedId	string&#124;number		null	The currently selected folder id (or null for "All").
title	string		''	Optional heading above the tree.
allLabel	string		() =&gt; t('nextcloud-vue', 'All')	Label for the "All" reset entry.
allIcon	string		''	MDI icon name for the "All" entry (resolved via CnIcon; empty = the built-in all-inclusive icon).
idField	string		'id'	Property holding each folder's id (custom source).
nameField	string		'name'	Property holding each folder's display name (custom source).
parentField	string		'parentId'	Property holding the parent id for flat custom folders.
childrenField	string		'children'	Property holding pre-nested children (custom source).
allowCreate	boolean		false	Show a "New folder" button (custom source).
createLabel	string		() =&gt; t('nextcloud-vue', 'New folder')	Label for the New-folder button.

Events

Name	Payload	Description
create	—	Emitted when the New-folder button is clicked.
select	—	Emitted when a folder (or "All") is chosen.