qomponent
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 93 additions & 0 deletions b/‎README.md‎
Lines changed: 93 additions & 0 deletions
diff --git a/‎example/index.html‎
Lines changed: 50 additions & 0 deletions b/‎example/index.html‎
Lines changed: 50 additions & 0 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -0,0 +1,93 @@
+# 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`
+      <h2>Directory Tree</h2>
+      <qui-directory-tree
+        .directory="${this.directoryData}"
+        header="Files and Folders"
+        @file-select="${this.handleFileSelect}"
+      ></qui-directory-tree>
+
+      ${this.selectedFilePath
+        ? html`<div class="file-info">Selected File Path: ${this.selectedFilePath}</div>`
+        : html`<div class="file-info">No file selected</div>`}
+    `;
+  }
+}
+
+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](http://www.apache.org/licenses/LICENSE-2.0)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+  <head>
+    <title>Directory tree web component demo</title>
+    <script type="module" src="./qui-directory-tree.js"></script>
+    <style>
+        .row {
+            display: flex;
+            align-items: baseline;
+        }
+        .col {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+    </style>
+
+  </head>
+  <body>
+    <h1>Directory Tree</h1>
+        <!-- Use the directory tree component -->
+        <qui-directory-tree></qui-directory-tree>
+
+        <script>
+            // Define sample data for the directory structure
+            const 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' },
+            ];
+
+            // Set the directory data to the component
+            const treeComponent = document.querySelector('qui-directory-tree');
+            treeComponent.directory = directoryData;
+
+            treeComponent.addEventListener('file-select', (event) => {
+                console.log('File selected:', event.detail.file);
+            });
+        </script>
+  </body>
+</html>