Fixing bugs.

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -169,15 +169,19 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$colors.columns = [{
       label: 'Red',
       key: 'r',
+      editable: true,
     }, {
       label: 'Green',
       key: 'g',
+      editable: true,
     }, {
       label: 'Blue',
       key: 'b',
+      editable: true,
     }, {
       label: 'Alpha',
       key: 'a',
+      editable: true,
     }, {
       label: 'Delete',
       key: 'delete',

src/pg/inputText/inputText.css

@@ -3,19 +3,26 @@
   font-family: var(--pg-font-family);
 }
 
-[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;
+  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
   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));
 }

src/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;
   }
 

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

@@ -16,6 +16,7 @@ export default class XPgJsonBasic extends HTMLElement {
       users: [{
         name: 'Dipper Pines',
         age: 12,
+        selected: false,
       }]
     }; // Array or Object
     this.$json.addEventListener('change', (e: any) => {

src/pg/json/json.css

@@ -1,4 +1,8 @@
 :host {
-  display: inline-flex;
-  color: var(--pg-icon-color, #222);
+  display: contents;
 }
+
+[part=container] {
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  user-select: none;
+}

src/pg/json/json.ts

@@ -2,27 +2,45 @@ 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]),
     };
   });
 }
@@ -33,17 +51,20 @@ function unwrapArray(items: any) {
       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),
     }
   });
 }

src/pg/jsonArray/jsonArray.css

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

src/pg/jsonArray/jsonArray.html

@@ -1,3 +1,7 @@
-<div part="startLabel">[</div>
+<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>

src/pg/jsonArray/jsonArray.ts

@@ -1,6 +1,6 @@
 import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
-import PgJsonObject from '../jsonArray/jsonArray';
+import PgJsonObject from '../jsonObject/jsonObject';
 import PgJsonString from '../jsonString/jsonString';
 import PgJsonBoolean from '../jsonBoolean/jsonBoolean';
 import PgJsonNumber from '../jsonNumber/jsonNumber';
@@ -18,29 +18,23 @@ export default class PgJsonArray extends HTMLElement {
   @Prop() value: any[] = [];
   @Prop() expanded: boolean = false;
 
-  @Part() $items: HTMLElement;
+  @Part() $key: HTMLDivElement;
+  @Part() $seperator: HTMLDivElement;
+  @Part() $items: HTMLDivElement;
 
   connectedCallback() {
     forEach({
       container: this.$items,
       items: this.value,
-      type: (item) => {
-        if (Array.isArray(item.value)) {
-          return PgJsonArray;
-        }
-        if (typeof item.value === 'object') {
-          return PgJsonObject;
-        }
-        if (typeof item.value === 'string') {
-          return PgJsonString;
-        }
-        if (typeof item.value === 'boolean') {
-          return PgJsonBoolean;
-        }
-        if (typeof item.value === 'number') {
-          return PgJsonNumber;
-        }
-      },
+      type: (item) => item.type,
     });
   }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.classList.toggle('hide', this.key === '');
+      this.$seperator.classList.toggle('hide', this.key === '');
+      this.$key.textContent = this.key;
+    }
+  }
 }

src/pg/jsonBoolean/jsonBoolean.css

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