Wiring update

Author: Templarian

src/pg/json/__examples__/basic/basic.ts

@@ -20,10 +20,11 @@ export default class XPgJsonBasic extends HTMLElement {
       }]
     }; // Array or Object
     this.$json.addEventListener('change', (e: any) => {
-      const { parent, key, path, value } = e.detail;
+      const { parent, key, value } = e.detail;
       if (value !== parent[key]) {
         parent[key] = value;
       }
+      console.log(this.$json.value);
     });
   }
 }

src/pg/json/json.ts

@@ -86,12 +86,36 @@ export default class PgJson extends HTMLElement {
       if (typeof this.value === 'object') {
         const $object = document.createElement('pg-json-object') as PgJsonObject;
         $object.value = unwrapObject(this.value);
+        $object.addEventListener('update', this.handleUpdate.bind(this));
         this.$container.appendChild($object);
       } else if (Array.isArray(this.value)) {
         const $array = document.createElement('pg-json-array') as PgJsonArray;
         $array.value = unwrapArray(this.value);
+        $array.addEventListener('update', this.handleUpdate.bind(this));
         this.$container.appendChild($array);
       }
     }
   }
+
+  getParent(path: string[], parent) {
+    const key = path.pop();
+    if (key) {
+      return this.getParent(path, parent[key]);
+    }
+    return parent;
+  }
+
+  handleUpdate(e: any) {
+    const { path, key, value } = e.detail;
+    const parent = this.getParent(path, this.value);
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          parent,
+          key,
+          value,
+        }
+      })
+    )
+  }
 }

src/pg/jsonArray/jsonArray.ts

@@ -27,6 +27,21 @@ export default class PgJsonArray extends HTMLElement {
       container: this.$items,
       items: this.value,
       type: (item) => item.type,
+      create: ($item, item) => {
+        $item.addEventListener('update', (e: any) => {
+          const { path, key, value } = e.detail;
+          path.push(this.key);
+          this.dispatchEvent(
+            new CustomEvent('update', {
+              detail: {
+                path,
+                key,
+                value,
+              }
+            })
+          );
+        });
+      },
     });
   }
 

src/pg/jsonBoolean/jsonBoolean.ts

@@ -54,8 +54,10 @@ export default class PgJsonBoolean extends HTMLElement {
       items: this.options,
     });
     if (result !== undefined) {
-      this.dispatchEvent(new CustomEvent('change', {
+      this.dispatchEvent(new CustomEvent('update', {
         detail: {
+          path: [this.key],
+          key: this.key,
           value: result.value
         }
       }));

src/pg/jsonNumber/jsonNumber.ts

@@ -23,6 +23,7 @@ export default class PgJsonNumber extends HTMLElement {
         new CustomEvent('update', {
           detail: {
             path: [this.key],
+            key: this.key,
             value: e.detail.value,
           }
         })

src/pg/jsonObject/jsonObject.ts

@@ -29,13 +29,19 @@ export default class PgJsonObject extends HTMLElement {
       type: (item) => item.type,
       create: ($item, item) => {
         $item.addEventListener('update', (e: any) => {
+          const { path, key, value } = e.detail;
+          path.push(this.key);
           this.dispatchEvent(
             new CustomEvent('update', {
-
+              detail: {
+                path,
+                key,
+                value,
+              }
             })
           );
         });
-      }
+      },
     });
   }
 

src/pg/jsonString/jsonString.ts

@@ -23,6 +23,7 @@ export default class PgJsonString extends HTMLElement {
         new CustomEvent('update', {
           detail: {
             path: [this.key],
+            key: this.key,
             value: e.detail.value,
           }
         })