qui-directory-tree

A Lit-based web component to show files in a directory structure.

Installation

``bash
npm i @qomponent/qui-directory-tree
`

Usage

`javascript


import { LitElement, html, css } from 'lit';
import '@qomponent/qui-directory-tree';

class MyMainComponent extends LitElement {
static styles = css
.file-info {
font-weight: bold;
color: blue;
margin-top: 10px;
}
;

static properties = {
selectedFilePath: { type: String },
};

constructor() {
super();
this.selectedFilePath = '';
this.directoryData = [
{
name: 'Folder1',
type: 'folder',
children: [
{ name: 'File1.txt', type: 'file' },
{
name: 'SubFolder1',
type: 'folder',
children: [{ name: 'File2.txt', type: 'file' }],
},
],
},
{ name: 'File3.txt', type: 'file' },
];
}

handleFileSelect(event) {
const { file } = event.detail;
this.selectedFilePath = file.path;
}

render() {
return html

Directory Tree

.directory="${this.directoryData}"
header="Files and Folders"
@file-select="${this.handleFileSelect}"
>

${this.selectedFilePath
? html

Selected File Path: ${this.selectedFilePath}

: html

No file selected

}
;
}
}

customElements.define('my-main-component', MyMainComponent);


`

Example

To run the example:

`bash
npm install
npm start
``

Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

License

Apache 2