@pictogrammers/components 0.4.8 → 0.5.0

package/pg/inputText/inputText.css

@@ -1,21 +1,28 @@
 :host {
   display: block;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
 }
 
-[part="input"] {
+[part=input] {
   border: 1px solid var(--pg-input-text-border-color, #453C4F);
   border-radius: 0.125rem;
-  padding: calc(0.5rem - 1px) 0.75rem;
-  font-family: var(--pg-font-family);
+  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
   font-size: 1rem;
   outline: none;
-  width: calc(100% - 1.5rem - 2px);
+  field-sizing: content;
+  min-width: calc(100% - 0.5rem - 2px);
+  max-width: calc(var(--pg-input-text-max-width, 100%) - 0.5rem - 2px);
+  background-color: transparent;
 }
 
-[part="input"]:active {
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
   box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
 }
-[part="input"]:focus {
+[part=input]:focus {
   box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
 }

package/pg/inputText/inputText.ts

@@ -12,6 +12,7 @@ export default class PgInputText extends HTMLElement {
   @Prop() name: string = '';
   @Prop() value: string = '';
   @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
 
   @Part() $input: HTMLInputElement;
 
@@ -29,6 +30,9 @@ export default class PgInputText extends HTMLElement {
     if (changes.placeholder) {
       this.$input.placeholder = this.placeholder;
     }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
     this.skipValue = false;
   }
 
@@ -56,4 +60,4 @@ export default class PgInputText extends HTMLElement {
       })
     );
   }
-}
+}

package/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.

package/pg/json/__examples__/basic/basic.html

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

package/pg/json/__examples__/basic/basic.ts

@@ -0,0 +1,31 @@
+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;
+  @Part() $output: HTMLPreElement;
+
+  connectedCallback() {
+    this.$json.value = {
+      users: [{
+        name: 'Dipper Pines',
+        age: 12,
+        selected: false,
+      }]
+    }; // Array or Object
+    this.$json.addEventListener('change', (e: any) => {
+      const { parent, key, value } = e.detail;
+      if (value !== parent[key]) {
+        parent[key] = value;
+      }
+      this.$output.textContent = JSON.stringify(this.$json.value);
+    });
+  }
+}

package/pg/json/json.css

@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+[part=container] {
+  --pg-json-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--pg-json-font-family);
+  user-select: none;
+}

package/pg/json/json.html

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

package/pg/json/json.ts

@@ -0,0 +1,124 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgJsonArray from '../jsonArray/jsonArray';
+import PgJsonObject from '../jsonObject/jsonObject';
+import PgJsonString from '../jsonString/jsonString';
+import PgJsonBoolean from '../jsonBoolean/jsonBoolean';
+import PgJsonNumber from '../jsonNumber/jsonNumber';
+
+import template from './json.html';
+import style from './json.css';
+
+function getType(value) {
+  if (typeof value === 'string') {
+    return PgJsonString;
+  }
+  if (typeof value === 'boolean') {
+    return PgJsonBoolean;
+  }
+  if (typeof value === 'number') {
+    return PgJsonNumber;
+  }
+}
+
+function unwrapObject(obj: any) {
+  return Object.keys(obj).map((key) => {
+    if (Array.isArray(obj[key])) {
+      return {
+        key,
+        value: unwrapArray(obj[key]),
+        type: PgJsonArray,
+      };
+    }
+    if (typeof obj[key] === 'object') {
+      return {
+        key,
+        value: unwrapObject(obj[key]),
+        type: PgJsonObject,
+      };
+    }
+    return {
+      key,
+      value: obj[key],
+      type: getType(obj[key]),
+    };
+  });
+}
+
+function unwrapArray(items: any) {
+  return items.map((item, i) => {
+    if (Array.isArray(item)) {
+      return {
+        key: i.toString(),
+        value: unwrapArray(item),
+        type: PgJsonArray,
+      };
+    }
+    if (typeof item === 'object') {
+      return {
+        key: i.toString(),
+        value: unwrapObject(item),
+        type: PgJsonObject,
+      };
+    }
+    return {
+      key: i.toString(),
+      value: item,
+      type: getType(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 (this.$container.children.length === 1) {
+        this.$container.children[0].remove();
+      }
+      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 && (typeof parent[key] === 'object' || parent[key] instanceof Array)) {
+      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,
+        }
+      })
+    )
+  }
+}

package/pg/jsonArray/README.md

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

package/pg/jsonArray/jsonArray.css

@@ -0,0 +1,15 @@
+:host {
+  display: contents;
+}
+
+.hide {
+  display: none;
+}
+
+[part=items] {
+  padding-left: 1rem;
+}
+
+[part=start] {
+  display: flex;
+}

package/pg/jsonArray/jsonArray.html

@@ -0,0 +1,7 @@
+<div part="start">
+  <div part="key"></div>
+  <div part="seperator">:&nbsp;</div>
+  <div part="startLabel">[</div>
+</div>
+<div part="items"></div>
+<div part="endLabel">]</div>

package/pg/jsonArray/jsonArray.ts

@@ -0,0 +1,55 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import PgJsonObject from '../jsonObject/jsonObject';
+import PgJsonString from '../jsonString/jsonString';
+import PgJsonBoolean from '../jsonBoolean/jsonBoolean';
+import PgJsonNumber from '../jsonNumber/jsonNumber';
+
+import template from './jsonArray.html';
+import style from './jsonArray.css';
+
+@Component({
+  selector: 'pg-json-array',
+  style,
+  template,
+})
+export default class PgJsonArray extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: any[] = [];
+  @Prop() expanded: boolean = false;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $seperator: HTMLDivElement;
+  @Part() $items: HTMLDivElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.value,
+      type: (item) => item.type,
+      create: ($item, item) => {
+        $item.addEventListener('update', (e: any) => {
+          const { path, key, value } = e.detail;
+          this.key && path.push(this.key);
+          this.dispatchEvent(
+            new CustomEvent('update', {
+              detail: {
+                path,
+                key,
+                value,
+              }
+            })
+          );
+        });
+      },
+    });
+  }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.classList.toggle('hide', this.key === '');
+      this.$seperator.classList.toggle('hide', this.key === '');
+      this.$key.textContent = this.key;
+    }
+  }
+}

package/pg/jsonBoolean/README.md

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

package/pg/jsonBoolean/jsonBoolean.css

@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+}
+
+[part=key],
+[part=seperator] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[part=value] {
+  margin: 0 -0.25rem;
+  background-color: transparent;
+  border: 0;
+  font-size: 1rem;
+  padding: 0.125rem 0.25rem;
+  vertical-align: middle;
+  font-family: inherit;
+  z-index: 1;
+  position: relative;
+  outline: 0;
+  border-radius: 0.125rem;
+}
+
+[part=value]:focus-visible {
+    box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

package/pg/jsonBoolean/jsonBoolean.html

@@ -0,0 +1,5 @@
+<div part="key"></div>
+<div part="seperator">:&nbsp;</div>
+<div part="container">
+  <button part="value"></button>
+</div>

package/pg/jsonBoolean/jsonBoolean.ts

@@ -0,0 +1,69 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgOverlaySelectMenu from '../overlaySelectMenu/overlaySelectMenu';
+
+import template from './jsonBoolean.html';
+import style from './jsonBoolean.css';
+
+@Component({
+  selector: 'pg-json-boolean',
+  style,
+  template,
+})
+export default class PgJsonBoolean extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: boolean = false;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $value: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$value.addEventListener('click', this.#handleClick.bind(this));
+    // this.$value.value = e.detail.value;
+    // this.dispatchEvent(
+    //   new CustomEvent('update', {
+    //     detail: {
+    //       path: [this.key],
+    //       value: e.detail.value,
+    //     }
+    //   })
+    // );
+  }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.textContent = this.key;
+    }
+    if (changes.value) {
+      this.$value.textContent = this.value ? 'true' : 'false';
+    }
+  }
+
+  options = [
+    { label: 'true', value: 'true' },
+    { label: 'false', value: 'false' },
+  ];
+
+  #menuOpen = false;
+  async #handleClick() {
+    if (this.#menuOpen) { return; }
+    this.#menuOpen = true;
+    const result = await PgOverlaySelectMenu.open({
+      source: this.$value,
+      value: this.options.find(x => x.value === `${this.value}`) ?? 'false',
+      items: this.options,
+    });
+    if (result !== undefined) {
+      this.dispatchEvent(new CustomEvent('update', {
+        detail: {
+          path: [this.key],
+          key: this.key,
+          value: result.value === 'true'
+        }
+      }));
+      this.$value.textContent = result.label;
+      this.value = result.value === 'true';
+    }
+    this.#menuOpen = false;
+  }
+}

package/pg/jsonNumber/README.md

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

package/pg/jsonNumber/jsonNumber.css

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+}
+
+[part=key],
+[part=seperator]  {
+  display: inline-flex;
+  align-items: center;
+}
+
+[part=value] {
+  user-select: text;
+  --pg-input-text-padding: 0 0.25rem;
+  --pg-input-text-border-color: transparent;
+  --pg-input-number-font-family: var(--pg-json-font-family);
+  display: inline-flex;
+  vertical-align: middle;
+  margin: 0 -0.25rem;
+  z-index: 1;
+  position: relative;
+}

package/pg/jsonNumber/jsonNumber.html

@@ -0,0 +1,5 @@
+<div part="key"></div>
+<div part="seperator">:&nbsp;</div>
+<div part="container">
+  <pg-input-number part="value"></pg-input-number>
+</div>

package/pg/jsonNumber/jsonNumber.ts

@@ -0,0 +1,42 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputNumber from '../inputNumber/inputNumber';
+
+import template from './jsonNumber.html';
+import style from './jsonNumber.css';
+
+@Component({
+  selector: 'pg-json-number',
+  style,
+  template,
+})
+export default class PgJsonNumber extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: number = 0;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $value: PgInputNumber;
+
+  connectedCallback() {
+    this.$value.addEventListener('input', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('update', {
+          detail: {
+            path: [this.key],
+            key: this.key,
+            value: Number.parseInt(e.detail.value, 10),
+          }
+        })
+      );
+    });
+  }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.textContent = this.key;
+    }
+    if (changes.value) {
+      this.$value.value = `${this.value}`;
+    }
+  }
+}

package/pg/jsonObject/README.md

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

package/pg/jsonObject/jsonObject.css

@@ -0,0 +1,11 @@
+:host {
+  display: contents;
+}
+
+.hide {
+  display: none;
+}
+
+[part=items] {
+  padding-left: 1rem;
+}

package/pg/jsonObject/jsonObject.html

@@ -0,0 +1,5 @@
+<div part="key"></div>
+<div part="seperator">:</div>
+<div part="startLabel">{</div>
+<div part="items"></div>
+<div part="endLabel">}</div>

package/pg/jsonObject/jsonObject.ts

@@ -0,0 +1,55 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import PgJsonArray from '../jsonArray/jsonArray';
+import PgJsonString from '../jsonString/jsonString';
+import PgJsonBoolean from '../jsonBoolean/jsonBoolean';
+import PgJsonNumber from '../jsonNumber/jsonNumber';
+
+import template from './jsonObject.html';
+import style from './jsonObject.css';
+
+@Component({
+  selector: 'pg-json-object',
+  style,
+  template,
+})
+export default class PgJsonObject extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: any[] = [];
+  @Prop() expanded: boolean = false;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $seperator: HTMLDivElement;
+  @Part() $items: HTMLDivElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.value,
+      type: (item) => item.type,
+      create: ($item, item) => {
+        $item.addEventListener('update', (e: any) => {
+          const { path, key, value } = e.detail;
+          this.key && path.push(this.key);
+          this.dispatchEvent(
+            new CustomEvent('update', {
+              detail: {
+                path,
+                key,
+                value,
+              }
+            })
+          );
+        });
+      },
+    });
+  }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.classList.toggle('hide', this.key === '' || !isNaN(this.key as any));
+      this.$seperator.classList.toggle('hide', this.key === '' || !isNaN(this.key as any));
+      this.$key.textContent = this.key;
+    }
+  }
+}

package/pg/jsonString/README.md

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

package/pg/jsonString/jsonString.css

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+}
+
+[part=key],
+[part=seperator]  {
+  display: inline-flex;
+  align-items: center;
+}
+
+[part=value] {
+  user-select: text;
+  --pg-input-text-padding: 0 0.25rem;
+  --pg-input-text-border-color: transparent;
+  --pg-input-text-font-family: var(--pg-json-font-family);
+  display: inline-flex;
+  vertical-align: middle;
+  margin: 0 -0.25rem;
+  z-index: 1;
+  position: relative;
+}

package/pg/jsonString/jsonString.html

@@ -0,0 +1,5 @@
+<div part="key"></div>
+<div part="seperator">:&nbsp;</div>
+<div part="container">
+  <span>&quot;</span><pg-input-text part="value"></pg-input-text><span>&quot;</span>
+</div>