Progress.

Author: Templarian

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

@@ -29,7 +29,14 @@ function createItem(label, expanded = false) {
       enabled: false
     }],
     items: [{
-      label: 'Sub Item'
+      label: 'Sub Item 1'
+    }, {
+      label: 'Sub Item 2',
+      items: [{
+        label: 'Sub Item ?',
+      }]
+    }, {
+      label: 'Sub Item 3'
     }]
   };
 }

src/pg/tree/tree.css

@@ -8,4 +8,5 @@
   background: var(--pg-tree-background, transparent);
   padding: 0.25rem;
   gap: 0.25rem;
+  --x: 0;
 }

src/pg/tree/tree.ts

@@ -22,6 +22,17 @@ export default class PgTree extends HTMLElement {
         return PgTreeItem;
       }
     });
+    this.addEventListener('toggle', (e: any) => {
+      const { indexes } = e.detail;
+      let item = this.#getItem(indexes);
+      item.expanded = !item.expanded;
+    })
+  }
+
+  #getItem(indexes: number[]) {
+    return indexes.reduce((item: any, index) => {
+      return item.items[index];
+    }, this);
   }
 
   render(changes) {

src/pg/treeItem/treeItem.css

@@ -1,5 +1,6 @@
 :host {
   display: contents;
+  --y: calc(var(--x) + 1);
 }
 
 .hide {
@@ -54,6 +55,7 @@
 
 [part=item] {
   user-select: none;
+  padding-left: calc((var(--x) * 0.5rem) + 0.25rem)
 }
 
 [part=item]:hover {
@@ -73,30 +75,61 @@
   background: var(--pg-tree-item-background-selected, #453C4F);
 }
 
+[part=item]:not(.items) {
+  padding-left: calc((var(--x) * 0.5rem) + 1.25rem)
+}
+
 [part=actions] {
   display: flex;
   gap: 0.25rem;
   --pg-icon-color: var(--pg-tree-item-color, #453C4F);
 }
 
 [part=items] {
-  display: flex;
+  display: none;
   flex-direction: column;
-  padding-left: 1rem;
+  --x: calc(var(--y) + 1);
+}
+[part=items].expanded {
+  display: flex;
 }
 
 [part=toggle] {
+  display: none;
   margin-left: -0.125rem;
   margin-right: -0.375rem;
-  padding: 0;
+  margin-top: -0.125rem;
+  margin-bottom: -0.125rem;
+  padding: 0 0 0 1rem;
   width: 1rem;
   border: 0;
   background-repeat: no-repeat;
   background-position: center;
   background-color: transparent;
+}
+
+[part=toggle]:hover {
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 0.125rem;
+}
+
+[part=item].items:not(.expanded) [part=toggle] {
+  display: flex;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19' fill='rgb(69 60 79)' /></svg>");
+}
+
+[part=item].items.expanded [part=toggle] {
+  display: flex;
   background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11' fill='rgb(69 60 79)' /></svg>");
 }
 
-[part=item]:hover [part=toggle] {
+[part=item].items:not(.expanded):hover [part=toggle] {
+  display: flex;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19' fill='white' /></svg>");
+}
+
+[part=item].items.expanded:hover [part=toggle] {
+  display: flex;
   background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11' fill='white' /></svg>");
 }

src/pg/treeItem/treeItem.ts

@@ -22,6 +22,7 @@ export default class PgTreeItem extends HTMLElement {
   @Prop() actions: any[] = [];
   @Prop() items: any[] = [];
 
+  @Part() $toggle: HTMLButtonElement;
   @Part() $item: HTMLDivElement;
   @Part() $input: HTMLInputElement;
   @Part() $iconButton: HTMLButtonElement;
@@ -32,6 +33,7 @@ export default class PgTreeItem extends HTMLElement {
   @Part() $items: HTMLDivElement;
 
   connectedCallback() {
+    this.$toggle.addEventListener('click', this.#handleToggleClick.bind(this));
     this.$item.addEventListener('action', this.#handleAction.bind(this));
     this.$labelButton.addEventListener('dblclick', this.#handleDoubleClick.bind(this));
     this.$labelButton.addEventListener('click', this.#handleClick.bind(this));
@@ -40,6 +42,7 @@ export default class PgTreeItem extends HTMLElement {
     this.$item.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
     this.$input.addEventListener('blur', this.#handleBlur.bind(this));
     this.$input.addEventListener('keydown', this.#handleInputKeyDown.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));
     this.$items.addEventListener('up', this.#handleUp.bind(this));
@@ -81,15 +84,27 @@ export default class PgTreeItem extends HTMLElement {
       this.$item.classList.toggle('selected', this.selected);
     }
     if (changes.items) {
-      this.$items.classList.toggle('hide', this.items.length === 0);
+      this.$item.classList.toggle('items', this.items.length !== 0);
     }
     if (changes.expanded) {
       if (this.expanded) {
         this.#initItems();
       }
+      this.$item.classList.toggle('expanded', this.expanded);
+      this.$items.classList.toggle('expanded', this.expanded);
     }
   }
 
+  #handleToggleClick() {
+    this.dispatchEvent(new CustomEvent('toggle', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        indexes: [this.index]
+      }
+    }));
+  }
+
   #handleIconDoubleClick() {
     this.dispatchEvent(new CustomEvent('select', {
       bubbles: true,
@@ -135,6 +150,10 @@ export default class PgTreeItem extends HTMLElement {
     }));
   }
 
+  #handleToggle(e: any) {
+    e.detail.indexes.unshift(this.index);
+  }
+
   #handleRename(e: any) {
     e.detail.indexes.unshift(this.index);
   }