progress

Author: Templarian

package-lock.json

@@ -25,7 +25,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.67",
+    "@pictogrammers/element": "0.0.68",
     "@pictogrammers/element-jest": "^0.1.10",
     "@pictogrammers/element-webpack": "^0.1.56",
     "cross-env": "^7.0.3",

package.json

@@ -1,4 +1,4 @@
-# `<pg-button-toggle>`
+# `<pg-button-menu>`
 
 The `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.
 
@@ -8,27 +8,20 @@ import PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';
 ```
 
 ```html
-<pg-button-toggle>
-  <pg-icon slot="active" path="M...Z"></pg-icon>
-  <pg-icon slot="inactive" path="M...Z"></pg-icon>
-</pg-button-toggle>
+<pg-button-menu part="menu"></pg-button-toggle>
 ```
 
-| Slots       | Tested   | Description |
-| ----------- | -------- | ----------- |
-| default     | &#x2705; | Button contents. |
-
 | Attribute  | Tested   | Description |
 | ---------- | -------- | ----------- |
-| block      |          | block sizing |
-| active     |          | Depressed visual state. |
+| menu      |          | block sizing |
 | start      |          | Internal Only |
 | end        |          | Internal Only |
 | center     |          | Internal Only |
 
 | Events     | Tested   | Description |
 | ---------- | -------- | ----------- |
-| click      | &#x2705; | Standard click. |
+| open       | &#x2705; | Menu open. |
+| close      | &#x2705; | Menu close. |
 
 | CSS Variables       | Default   | Description |
 | ------------------- | --------- | ----------- |

src/pg/buttonMenu/README.md

@@ -10,6 +10,13 @@ The `pg-tree` is used to render a tree list of items.
 
 While setup for a normal file tree this can be used for any folder structure.
 
+```typescript
+import '@pictogrammers/components/pg/tree';
+import '@pictogrammers/components/pg/treeItem';
+import '@pictogrammers/components/pg/treeButtonIcon';
+import PgTree, { SelectedTreeItem } from '@pictogrammers/components/pg/tree';
+```
+
 ## Events
 
 - select
@@ -21,15 +28,16 @@ While setup for a normal file tree this can be used for any folder structure.
 ```typescript
 this.$tree.addEventListener('select', (e: any) => {
   const { items } = e.detail;
+  // items is a
   this.selectedItems = items;
 });
 ```
 
 ```typescript
 this.$tree.addEventListener('rename', (e: any) => {
-  const { indexes, label } = e.detail;
-  const item = this.#getItem(indexes);
-  item.label = label;
+  const { item, label } = e.detail;
+  const itemData = item.getData();
+  itemData.label = label;
 });
 ```
 

src/pg/tree/README.md

@@ -96,9 +96,9 @@ export default class XPgTreeBasic extends HTMLElement {
       });
     });
     this.$tree.addEventListener('rename', (e: any) => {
-      const { indexes, label } = e.detail;
-      const item = this.#getItem(indexes);
-      item.label = label;
+      const { item, label } = e.detail;
+      const itemData = item.getData();
+      itemData.label = label;
     });
     this.$tree.addEventListener('menu', (e: any) => {
       // menu
@@ -153,10 +153,4 @@ export default class XPgTreeBasic extends HTMLElement {
       });
     });
   }
-
-  #getItem(indexes: number[]) {
-    return indexes.reduce((item, index) => {
-      return item.items[index];
-    }, this.$tree);
-  }
 }

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

@@ -42,7 +42,7 @@ export default class PgTree extends HTMLElement {
       this.dispatchEvent(new CustomEvent('action', {
         detail: {
           actionIndex: e.detail.actionIndex,
-          item: this.#wrap(e.detail.indexes)
+          item: this.#wrap(e.detail.indexes),
         }
       }));
     });
@@ -52,7 +52,17 @@ export default class PgTree extends HTMLElement {
       this.dispatchEvent(new CustomEvent('move', {
         detail: {
           item: this.#wrap(e.detail.indexes),
-          position
+          position,
+        }
+      }));
+    });
+    this.$items.addEventListener('rename', (e: any) => {
+      const { indexes, label } = e.detail;
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('rename', {
+        detail: {
+          item: this.#wrap(indexes),
+          label,
         }
       }));
     });