Nested menus.

Author: Templarian

src/components/pg/buttonMenu/__examples__/basic/basic.ts

@@ -37,7 +37,7 @@ export default class XPgButtonMenuBasic extends HTMLElement {
   }
 
   handleChange(e: any) {
-    const { active } = e.detail;
-    this.$value.textContent = `${active}`;
+    const { indexes, item } = e.detail;
+    this.$value.textContent = `indexes: ${indexes.join(',')}; item: ${JSON.stringify(item)}`;
   }
 }

src/components/pg/buttonMenu/buttonMenu.ts

@@ -52,9 +52,12 @@ export default class PgButtonMenu extends HTMLElement {
     });
     this.$icon.path = IconExpand;
     if (result !== undefined) {
+      const { indexes, item } = result;
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value: result.value
+          indexes,
+          item,
+          value: item.value
         }
       }));
     }

src/components/pg/menu/menu.ts

@@ -34,11 +34,12 @@ export default class PgMenu extends HTMLElement {
           }));
         });
         $item.addEventListener('select', (e: any) => {
-          const { index } = e.detail;
+          const { indexes, item } = e.detail;
+          const lastIndex = indexes[indexes.length - 1];
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              indexes: [index],
-              item
+              indexes,
+              item: item ? item : this.items[lastIndex],
             }
           }));
         });

src/components/pg/menuItem/menuItem.ts

@@ -56,10 +56,11 @@ export default class PgMenuItem extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
               item: result,
-              indexes: [this.index],
+              indexes: [...indexes, this.index],
             }
           }));
         } else {
@@ -73,7 +74,7 @@ export default class PgMenuItem extends HTMLElement {
         this.dispatchEvent(new CustomEvent('select', {
           detail: {
             indexes: [this.index],
-            item: this.items[this.index],
+            item: undefined, // determined by parent
           }
         }));
       }

src/components/pg/menuItemIcon/menuItemIcon.ts

@@ -63,9 +63,11 @@ export default class PgMenuItemIcon extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              item: result
+              indexes: [...indexes, this.index],
+              item,
             }
           }));
         } else {
@@ -78,8 +80,8 @@ export default class PgMenuItemIcon extends HTMLElement {
       } else {
         this.dispatchEvent(new CustomEvent('select', {
           detail: {
-            indexex: [this.index],
-            item: this.items[this.index]
+            indexes: [this.index],
+            item: undefined, // determined by parent
           }
         }));
       }
@@ -118,9 +120,11 @@ export default class PgMenuItemIcon extends HTMLElement {
             if (result === null) {
               this.focus();
             } else if (result) {
+              const { indexes, item } = result;
               this.dispatchEvent(new CustomEvent('select', {
                 detail: {
-                  item: result
+                  indexes: [...indexes, this.index],
+                  item,
                 }
               }));
             } else {

src/components/pg/overlayMenu/overlayMenu.ts

@@ -60,8 +60,12 @@ export default class PgOverlayMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    // e.detail.item.index = e.detail.index;
+    const { indexes, item } = e.detail;
+    this.close({
+      indexes,
+      item
+    });
     this.source?.focus();
   }
 }

src/components/pg/overlaySubMenu/overlaySubMenu.ts

@@ -96,8 +96,12 @@ export default class PgOverlaySubMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    const { item, indexes } = e.detail;
+    //e.detail.item.index = e.detail.indexes;
+    this.close({
+      indexes,
+      item,
+    });
     this.source?.focus();
   }
 }