A Lit-based web component to show files in a directory structure
``bash`
npm i @qomponent/qui-directory-tree
`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
${this.selectedFilePath
? htmlSelected File Path: ${this.selectedFilePath}
: html}No file selected
;
}
}
customElements.define('my-main-component', MyMainComponent);
`
To run the example:
`bash``
npm install
npm start
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.