Cleaning up the demo

Author: Templarian

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

@@ -4,17 +4,18 @@ import PgTree from '../../tree';
 import template from './basic.html';
 import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
 
+const IconAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
 const IconEye = 'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z';
 const IconEyeOff = 'M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z';
 const IconLock = 'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z';
 const IconUnlock = 'M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z';
 
-function createItem(key) {
+function createItem(label) {
   return {
     icon: {
-      path: IconEye
+      path: IconAccount
     },
-    label: 'Item 1',
+    label,
     actions: [{
       type: PgTreeButtonIcon,
       icon:  IconEye,
@@ -25,6 +26,9 @@ function createItem(key) {
       label: 'Delete',
       icon: IconUnlock,
       enabled: false
+    }],
+    items: [{
+      label: 'Sub Item'
     }]
   };
 }
@@ -61,54 +65,33 @@ export default class XPgTreeBasic extends HTMLElement {
       }
     });
     this.$tree.addEventListener('rename', (e: any) => {
-      const { index, label } = e.detail;
-      this.$tree.items[index].label = label;
+      const { indexes, label } = e.detail;
+      const item = this.#getItem(indexes);
+      item.label = label;
     });
+    let previousIndexes = null;
     this.$tree.addEventListener('select', (e: any) => {
       const { indexes } = e.detail;
-      const item = indexes.reduce((item, index) => {
-        return item.items[index];
-      }, this.$tree);
+      const item = this.#getItem(indexes);
       item.selected = true;
+      if (previousIndexes) {
+        const previousItem = this.#getItem(previousIndexes);
+        previousItem.selected = false;
+      }
+      previousIndexes = indexes;
     });
     this.$tree.addEventListener('menu', (e: any) => {
       // action clicked
     });
-    this.$tree.items = [{
-      icon: {
-        path: IconEye
-      },
-      selected: true,
-      label: 'Item 1',
-      actions: [{
-        type: PgTreeButtonIcon,
-        icon:  IconEye,
-        enabled: true
-      },
-      {
-        type: PgTreeButtonIcon,
-        label: 'Delete',
-        icon: IconUnlock,
-        enabled: false
-      }]
-    },
-    {
-      label: 'Item 2',
-      items: [
-        {
-          label: 'Nested'
-        }
-      ]
-    }];
-    // Push to same array instance!
-    this.$tree.items.push({ label: 'testing' });
+    this.$tree.items = [
+      createItem('Item 1'),
+      createItem('Item 2')
+    ];
 
     let next: number = 2;
     this.$addItem.addEventListener('click', () => {
       next++;
-      this.$tree.items.push({
-        label: `Item ${next}`
-      });
+      this.$tree.items.push(createItem(`Item ${next}`));
     });
 
     this.$removeItem.addEventListener('click', () => {
@@ -120,4 +103,10 @@ export default class XPgTreeBasic extends HTMLElement {
       this.$tree.items[1].label = `Updated ${updatedTimes++}`;
     });
   }
+
+  #getItem(indexes: number[]) {
+    return indexes.reduce((item, index) => {
+      return item.items[index];
+    }, this.$tree);
+  }
 }

src/pg/tree/tree.css

@@ -7,4 +7,5 @@
   flex-direction: column;
   background: var(--pg-tree-background, #2C2C2C);
   padding: 0.25rem;
+  gap: 0.25rem;
 }

src/pg/treeItem/treeItem.ts

@@ -36,12 +36,13 @@ export default class PgTreeItem extends HTMLElement {
 
   connectedCallback() {
     this.$item.addEventListener('action', this.#handleAction.bind(this));
-    this.$button.addEventListener('dblclick', this.#handleRename.bind(this));
+    this.$button.addEventListener('dblclick', this.#handleDoubleClick.bind(this));
     this.$button.addEventListener('click', this.#handleClick.bind(this));
     this.$item.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
     this.$input.addEventListener('blur', this.#handleBlur.bind(this));
     this.$input.addEventListener('keydown', this.#handleKeyDown.bind(this));
     this.$items.addEventListener('select', this.#handleSelect.bind(this));
+    this.$items.addEventListener('rename', this.#handleRename.bind(this));
     forEach({
       container: this.$actions,
       items: this.actions,
@@ -68,6 +69,9 @@ export default class PgTreeItem extends HTMLElement {
     if (changes.selected) {
       this.$item.classList.toggle('selected', this.selected);
     }
+    if (changes.items) {
+      this.$items.classList.toggle('hide', this.items.length === 0);
+    }
   }
 
   #handleClick() {
@@ -92,6 +96,10 @@ export default class PgTreeItem extends HTMLElement {
     }));
   }
 
+  #handleRename(e: any) {
+    e.detail.indexes.unshift(this.index);
+  }
+
   #handleSelect(e: any) {
     e.detail.indexes.unshift(this.index);
   }
@@ -100,7 +108,7 @@ export default class PgTreeItem extends HTMLElement {
     e.preventDefault();
   }
 
-  #handleRename(e) {
+  #handleDoubleClick(e) {
     this.$button.classList.add('hide');
     this.$actions.classList.add('hide');
     this.$input.classList.remove('hide');
@@ -118,7 +126,7 @@ export default class PgTreeItem extends HTMLElement {
       bubbles: true,
       composed: true,
       detail: {
-        index: this.index,
+        indexes: [this.index],
         label: this.$input.value
       }
     }));