Bump element to fix bugs

Author: Templarian

package-lock.json

@@ -26,7 +26,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.41",
+    "@pictogrammers/element": "0.0.42",
     "@pictogrammers/element-jest": "^0.1.7",
     "@pictogrammers/element-webpack": "^0.1.40",
     "cross-env": "^7.0.3",

package.json

@@ -20,6 +20,9 @@ export default class PgIcon extends HTMLElement {
     if (changes.path) {
       const viewBox = getComputedStyle(this).getPropertyValue('--pg-icon-viewbox');
       this.$svg.setAttribute('viewBox', viewBox || '0 0 24 24');
+      if (!this.path) {
+        throw new Error('invalid path set on pg-icon');
+      }
       this.$path.setAttribute('d', this.path);
     }
   }

src/pg/icon/icon.ts

@@ -1 +1,3 @@
-# Tree
+# Tree
+
+The `pg-tree` is used to render a tree list of items.

src/pg/tree/README.md

@@ -1,7 +1,5 @@
 <div>
   <pg-tree part="tree"></pg-tree>
-  <hr/>
-  <pg-tree part="tree2"></pg-tree>
   <h2>Tools</h2>
   <button part="addItem">Add Item</button>
   <button part="removeItem">Remove Item</button>

src/pg/tree/__examples__/basic/basic.html

@@ -35,7 +35,6 @@ function createItem(key) {
 })
 export default class XPgTreeBasic extends HTMLElement {
   @Part() $tree: PgTree;
-  @Part() $tree2: PgTree;
   @Part() $addItem: HTMLButtonElement;
   @Part() $removeItem: HTMLButtonElement;
   @Part() $updateItem: HTMLButtonElement;
@@ -65,13 +64,21 @@ export default class XPgTreeBasic extends HTMLElement {
       const { index, label } = e.detail;
       this.$tree.items[index].label = label;
     });
+    this.$tree.addEventListener('select', (e: any) => {
+      const { indexes } = e.detail;
+      const item = indexes.reduce((item, index) => {
+        return item.items[index];
+      }, this.$tree);
+      item.selected = true;
+    });
     this.$tree.addEventListener('menu', (e: any) => {
       // action clicked
     });
     this.$tree.items = [{
       icon: {
         path: IconEye
       },
+      selected: true,
       label: 'Item 1',
       actions: [{
         type: PgTreeButtonIcon,
@@ -86,10 +93,13 @@ export default class XPgTreeBasic extends HTMLElement {
       }]
     },
     {
-      label: 'Item 2'
+      label: 'Item 2',
+      items: [
+        {
+          label: 'Nested'
+        }
+      ]
     }];
-    // Assign to same array instance!
-    this.$tree2.items = this.$tree.items;
     // Push to same array instance!
     this.$tree.items.push({ label: 'testing' });
 

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

@@ -1 +1,3 @@
-# Tree Item
+# Tree Item
+
+Tree items are used in the `pg-tree` component.

src/pg/treeItem/README.md

@@ -30,9 +30,19 @@
 }
 
 [part="item"]:hover {
-  background: var(--pg-tree-item-background-hover, #383838)
+  background: var(--pg-tree-item-background-hover, #383838);
+}
+
+[part="item"].selected {
+  background: var(--pg-tree-item-background-selected, #4B5876)
 }
 
 [part="actions"] {
   display: flex;
 }
+
+[part="items"] {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1rem;
+}

src/pg/treeItem/treeItem.css

@@ -5,4 +5,5 @@
     <div part="label"></div>
   </button>
   <div part="actions"></div>
-</div>
+</div>
+<div part="items"></div>

src/pg/treeItem/treeItem.html

@@ -21,34 +21,40 @@ export default class PgTreeItem extends HTMLElement {
 
   @Prop() index: number;
   @Prop() label: string = '';
+  @Prop() selected: boolean = false;
   @Prop() icon: { path: string };
   @Prop() actions: any[] = [];
+  @Prop() items: any[] = [];
 
   @Part() $item: HTMLDivElement;
   @Part() $input: HTMLInputElement;
   @Part() $button: HTMLButtonElement;
   @Part() $icon: PgIcon;
   @Part() $label: HTMLDivElement;
   @Part() $actions: HTMLDivElement;
+  @Part() $items: HTMLDivElement;
 
   connectedCallback() {
     this.$item.addEventListener('action', this.#handleAction.bind(this));
     this.$button.addEventListener('dblclick', this.#handleRename.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));
     forEach({
       container: this.$actions,
       items: this.actions,
       type: (item) => {
         return PgTreeButtonIcon;
-      },
-      create: ($item, item) => {
-        // after creation of $item element
-      },
-      update: ($item, item) => {
-        // after every $item update
-      },
+      }
+    });
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: (item) => {
+        return PgTreeItem;
+      }
     });
   }
 
@@ -59,6 +65,19 @@ export default class PgTreeItem extends HTMLElement {
     if (changes.icon && this.icon) {
       this.$icon.path = this.icon.path;
     }
+    if (changes.selected) {
+      this.$item.classList.toggle('selected', this.selected);
+    }
+  }
+
+  #handleClick() {
+    this.dispatchEvent(new CustomEvent('select', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        indexes: [this.index]
+      }
+    }));
   }
 
   #handleAction(e) {
@@ -73,6 +92,10 @@ export default class PgTreeItem extends HTMLElement {
     }));
   }
 
+  #handleSelect(e: any) {
+    e.detail.indexes.unshift(this.index);
+  }
+
   #handleContextMenu(e) {
     e.preventDefault();
   }
@@ -102,8 +125,17 @@ export default class PgTreeItem extends HTMLElement {
   }
 
   #handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      this.#handleBlur();
+    switch (e.key ) {
+      case 'Enter':
+        this.#handleBlur();
+        break;
+      case 'Escape':
+        this.$button.classList.remove('hide');
+        this.$actions.classList.remove('hide');
+        this.$input.classList.add('hide');
+        this.$input.value = this.label;
+        this.$button.focus();
+        break;
     }
   }