CataUiFileTree

A hierarchical tree component for displaying nested file or folder structures with expandable/collapsible nodes.

<CataUiFileTree 
  v-model="fileTreeVModel"
  :items="fileTreeData"
  color="#fff"
  iconOpen="bi-folder2-open"
  iconClosed="bi-folder2" />

Props

Prop	Description	Type	Default	Required
color	The color of icons and text in the file tree	String	'var(--color-grey-900)'	false
iconClosed	Icon displayed for closed/collapsed items (see Icons)	String	'bi-folder2'	false
iconOpen	Icon displayed for open/expanded items (see Icons)	String	'bi-folder2-open'	false
items	Array of hierarchical items to display in the file tree	Array		true
v-model	The currently selected/active item object	Object		true

Events

The component does not emit custom events beyond the standard v-model update.

Data Structure

Item Object Properties

Each item in the file tree should have the following properties:

Property	Description	Type	Required
id	Unique identifier for the item	Number/String	true
label	Display text for the item	String	true
data	Optional data to associate with the item (passed in v-model when selected)	Any	false
children	Array of child items (null for leaf nodes with no children)	Array/null	true
icon	Optional custom icon for leaf nodes	String	false

Example Data Structure

// Reference for the active item
const fileTreeVModel = ref({});

// File tree data structure
const fileTreeData = [
    {
        id: 1,
        label: 'Documents',
        data: { type: 'folder' }, // Optional custom data for your application logic
        children: [ // Array of child items - use null if the item has no children
            {
                id: 2,
                label: 'Report.pdf',
                data: { type: 'file', extension: 'pdf' },
                icon: 'bi-file-pdf', // Optional custom icon for leaf nodes
                children: null, // Leaf node with no children
            },
            {
                id: 3,
                label: 'Images',
                data: { type: 'folder' },
                children: [
                    {
                        id: 4,
                        label: 'Photo.jpg',
                        data: { type: 'file', extension: 'jpg' },
                        icon: 'bi-file-image',
                        children: null,
                    }
                ],
            }
        ],
    },
]