Progress on json editor

Author: Templarian

src/pg/json/README.md

@@ -0,0 +1,59 @@
+# `<pg-json>`
+
+The `pg-json` component renders json and allows values to be modified. The default data type rendering is below.
+
+- `PgJsonArray`
+- `PgJsonObject` - `null` is hardcoded
+- `PgJsonString`
+- `PgJsonBoolean`
+- `PgJsonNumber`
+
+```typescript
+import '@pictogrammers/components/pg/json';
+import PgIcon from '@pictogrammers/components/pg/json';
+```
+
+```html
+<pg-json part="json"></pg-json>
+```
+
+| Attributes | Tested   | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| value      |          | `{}`    | Set json data |
+| root       |          | `[]`    | Root of object to render |
+| schema     |          | `null`  | JSON Schema |
+| expand     |          | `0`     | Default level to expand |
+| limit      |          | `10`    | Arrays max items "...{total - max} view more" |
+| loadMore   |          | `10`    | Amount to render after clicking load more |
+
+For a root array type set `root: ['items']` and value `{ items: [] }`.
+
+## Event
+
+```typescript
+this.$json.value = {
+  users: [{
+    name: 'Dipper Pines',
+    age: 12,
+  }]
+}; // Array or Object
+this.$json.addEventListener('change', (e: any) => {
+  const { parent, key, path, value } = e.detail;
+  if (value !== parent[key]) {
+    parent[key] = value;
+  }
+});
+```
+
+The `path` array gives the deep nesting for the record being modified.
+
+```typescript
+// Modifying Dipper's name for instance
+path = ['users', 0, 'name'];
+```
+
+## Schema
+
+Not required if simply editing existing data. To allow complex editing add a defined schema object.
+
+See https://json-schema.org for tutorials on writing your own schema.

src/pg/json/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <pg-json part="json"></pg-json>
+</div>

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

@@ -0,0 +1,28 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgJson from '../../json';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-json-basic',
+  template
+})
+export default class XPgJsonBasic extends HTMLElement {
+  @Part() $json: PgJson;
+
+  connectedCallback() {
+    this.$json.value = {
+      users: [{
+        name: 'Dipper Pines',
+        age: 12,
+      }]
+    }; // Array or Object
+    this.$json.addEventListener('change', (e: any) => {
+      const { parent, key, path, value } = e.detail;
+      if (value !== parent[key]) {
+        parent[key] = value;
+      }
+    });
+  }
+}

src/pg/json/json.css

@@ -0,0 +1,4 @@
+:host {
+  display: inline-flex;
+  color: var(--pg-icon-color, #222);
+}

src/pg/json/json.html

@@ -0,0 +1 @@
+<div part="container"></div>

src/pg/json/json.ts

@@ -0,0 +1,57 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgJsonArray from '../jsonArray/jsonArray';
+import PgJsonObject from '../jsonObject/jsonObject';
+
+import template from './json.html';
+import style from './json.css';
+
+function unwrapObject(obj: any) {
+  return {
+    items: Object.keys(obj).map((key) => {
+      return {
+        key,
+        value: obj[key],
+      }
+    })
+  };
+}
+
+function unwrapArray(items: any) {
+  return {
+    items: items.map((item) => {
+      if (Array.isArray(item)) {
+        return unwrapArray(item);
+      } else {
+        return unwrapObject(item);
+      }
+    })
+  };
+}
+
+@Component({
+  selector: 'pg-json',
+  style,
+  template,
+})
+export default class PgJson extends HTMLElement {
+  @Prop() value: any = null;
+  @Prop() root = [];
+  @Prop() schema: any = null;
+
+  @Part() $container: HTMLElement;
+
+  render(changes) {
+    if (changes.value && this.value !== null) {
+      if (typeof this.value === 'object') {
+        const $object = document.createElement('pg-json-object') as PgJsonObject;
+        $object.items = unwrapObject(this.value).items;
+        this.$container.appendChild($object);
+      } else if (Array.isArray(this.value)) {
+        const $array = document.createElement('pg-json-array') as PgJsonArray;
+        $array.items = unwrapArray(this.value).items;
+        this.$container.appendChild($array);
+      }
+    }
+  }
+}

src/pg/jsonArray/README.md

@@ -0,0 +1,3 @@
+# `<pg-json>`
+
+The `PgJsonArray` is used in `pg-json`.

src/pg/jsonArray/jsonArray.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

src/pg/jsonArray/jsonArray.html

@@ -0,0 +1,3 @@
+<div part="startLabel">[</div>
+<div part="items"></div>
+<div part="endLabel">]</div>

src/pg/jsonArray/jsonArray.ts

@@ -0,0 +1,21 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './json.html';
+import style from './json.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-json-array',
+  style,
+  template,
+})
+export default class PgJsonArray extends HTMLElement {
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLElement;
+
+  render(changes) {
+
+  }
+}