Starting docs.

Author: Templarian

src/pg/tree/README.md

@@ -2,5 +2,10 @@
 
 The `pg-tree` is used to render a tree list of items.
 
+- Folder / Item symbols
+- Drag and Drop
+- Context Menu
+
 ## Usage
 
+While setup for a normal file tree this can be used for any folder structure.

src/pg/tree/__examples__/basic/basic.ts

@@ -70,9 +70,10 @@ export default class XPgTreeBasic extends HTMLElement {
 
   connectedCallback() {
     this.$tree.addEventListener('action', (e: any) => {
+      const item = e.detail.item as SelectedTreeItem;
       // action clicked
-      const { index, actionIndex } = e.detail;
-      const action = this.$tree.items[index].actions[actionIndex];
+      const { actionIndex } = e.detail;
+      const action = item.getData().actions[actionIndex];
       const { enabled } = action;
       if (actionIndex === 0 && enabled) {
         action.icon = IconEyeOff;

src/pg/tree/tree.ts

@@ -32,6 +32,16 @@ export default class PgTree extends HTMLElement {
         return PgTreeItem;
       }
     });
+    this.$items.addEventListener('action', (e: any) => {
+      e.stopPropagation();
+      console.log(e.detail);
+      this.dispatchEvent(new CustomEvent('action', {
+        detail: {
+          actionIndex: e.detail.actionIndex,
+          item: this.#wrap(e.detail.indexes)
+        }
+      }));
+    });
     this.$items.addEventListener('toggle', (e: any) => {
       const { indexes } = e.detail;
       let item = this.#getItem(indexes);
@@ -61,9 +71,6 @@ export default class PgTree extends HTMLElement {
           }),
         }
       }));
-      //Array.from(this.#selectedIndexes).map(([key, value]) => {
-      //      return this.#getItem(value);
-      //    })
     });
     this.$items.addEventListener('keydown', (e: any) => {
       if (e.key === 'Delete') {

src/pg/treeItem/treeItem.ts

@@ -38,7 +38,7 @@ export default class PgTreeItem extends HTMLElement {
 
   connectedCallback() {
     this.$toggle.addEventListener('click', this.#handleToggleClick.bind(this));
-    this.$item.addEventListener('action', this.#handleAction.bind(this));
+    this.$item.addEventListener('action', this.#handleItemAction.bind(this));
     this.$item.addEventListener('pointerenter', this.#handlePointerEnter.bind(this));
     this.$item.addEventListener('pointerleave', this.#handlePointerLeave.bind(this));
     this.$item.addEventListener('dragstart', this.#handleDragStart.bind(this));
@@ -52,6 +52,7 @@ export default class PgTreeItem extends HTMLElement {
     this.$input.addEventListener('blur', this.#handleBlur.bind(this));
     this.$input.addEventListener('keydown', this.#handleInputKeyDown.bind(this));
     // Append Indexes
+    this.$items.addEventListener('action', this.#handleAction.bind(this));
     this.$items.addEventListener('toggle', this.#handleToggle.bind(this));
     this.$items.addEventListener('select', this.#handleSelect.bind(this));
     this.$items.addEventListener('rename', this.#handleRename.bind(this));
@@ -196,18 +197,22 @@ export default class PgTreeItem extends HTMLElement {
     }));
   }
 
-  #handleAction(e) {
+  #handleItemAction(e) {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('action', {
       bubbles: true,
       composed: true,
       detail: {
-        index: this.index,
+        indexes: [this.index],
         actionIndex: e.detail.index
       }
     }));
   }
 
+  #handleAction(e) {
+    e.detail.indexes.unshift(this.index);
+  }
+
   #handleToggle(e: any) {
     e.detail.indexes.unshift(this.index);
   }