Expand val to value

- `val` -> `value`
- `valTransformer` -> `valueTransformer`

README.md

@@ -33,7 +33,7 @@ jsonpanel({
         arr: [0, 1, 2, 3]
     }
   },
-  valTransformer: str => str.trim() // function to transform values before render
+  valueTransformer: str => str.trim() // function to transform values before render
 });
 ```
 

src/pair.js

@@ -4,8 +4,8 @@ import Panel from './panel.js';
 class Pair {
   constructor(key, value, valueTransformer) {
     this.key = key;
-    this.val = value;
-    this.valTransformer = valueTransformer;
+    this.value = value;
+    this.valueTransformer = valueTransformer;
   }
 
   static create(key, value, valueTransformer) {
@@ -20,18 +20,18 @@ class Pair {
     return `<span class="key">${this.key}</span>`;
   }
 
-  get valType() {
-    return typeof this.val;
+  get valueType() {
+    return typeof this.value;
   }
 
-  getValInnerMarkup() {
-    return JSON.stringify(this.val);
+  getValueInnerMarkup() {
+    return JSON.stringify(this.value);
   }
 
   createTagInnerMarkup() {
-    return `${this.getKeyMarkup()}: <span class="val ${
-      this.valType
-    }">${this.getValInnerMarkup()}</span>`;
+    return `${this.getKeyMarkup()}: <span class="value ${
+      this.valueType
+    }">${this.getValueInnerMarkup()}</span>`;
   }
 
   get class() {
@@ -55,30 +55,30 @@ class SimplePair extends Pair {
     return `${super.class} simple`;
   }
 
-  getValInnerMarkup() {
-    if (this.valTransformer instanceof Function) {
-      return this.valTransformer(super.getValInnerMarkup());
+  getValueInnerMarkup() {
+    if (this.valueTransformer instanceof Function) {
+      return this.valueTransformer(super.getValueInnerMarkup());
     }
 
-    return super.getValInnerMarkup();
+    return super.getValueInnerMarkup();
   }
 }
 
 class ExpandablePair extends Pair {
-  get valType() {
-    return Array.isArray(this.val) ? 'array' : 'object';
+  get valueType() {
+    return Array.isArray(this.value) ? 'array' : 'object';
   }
 
   get class() {
     return `${super.class} expandable`;
   }
 
-  getValInnerMarkup() {
-    const valueString = super.getValInnerMarkup();
-    // Truncate the array / object preview using val-inner class.
-    // eg. { key: "val" } -> {<span class="val-inner">key: "val"</span>}
+  getValueInnerMarkup() {
+    const valueString = super.getValueInnerMarkup();
+    // Truncate the array / object preview using value-inner class.
+    // eg. { key: "value" } -> {<span class="value-inner">key: "value"</span>}
     const valueMatch = valueString.match(/^([{[])(.*)([}\]])$/);
-    return `${valueMatch[1]}<span class="val-inner">${valueMatch[2]}</span>${valueMatch[3]}`;
+    return `${valueMatch[1]}<span class="value-inner">${valueMatch[2]}</span>${valueMatch[3]}`;
   }
 
   createTagInnerMarkup() {
@@ -99,8 +99,8 @@ class ExpandablePair extends Pair {
   expand() {
     // Open new panel
     Panel.renderToEl(this.el, {
-      data: this.val,
-      valTransformer: this.valTransformer,
+      data: this.value,
+      valueTransformer: this.valueTransformer,
     });
     this.el.classList.add('expanded');
   }

src/panel.js

@@ -13,8 +13,8 @@ export default class Panel {
     return this.options.data;
   }
 
-  get valTransformer() {
-    return this.options.valTransformer;
+  get valueTransformer() {
+    return this.options.valueTransformer;
   }
 
   isArray() {
@@ -35,7 +35,7 @@ export default class Panel {
   }
 
   createListItem(key, value) {
-    const pair = createPair(key, value, this.valTransformer);
+    const pair = createPair(key, value, this.valueTransformer);
     pair.render();
     return pair.el;
   }

src/styles/jsonpanel-next.scss

@@ -56,16 +56,16 @@
     }
 
     // Commas after every non-nested link item
-    .val:after {
+    .value:after {
       content: ",";
     }
-    &:last-child .val:after {
+    &:last-child .value:after {
       display: none;
     }
   }
 
   // Only applies in collapsed state
-  .val-inner {
+  .value-inner {
     display: inline-block;
     max-width: 28em;
     overflow: hidden;
@@ -101,7 +101,7 @@
         content: "-";
       }
 
-      .val {
+      .value {
         // Hide the Array/Object indicator
         opacity: 0;
       }
@@ -123,7 +123,7 @@
   }
   .array,
   .object {
-    .val-inner {
+    .value-inner {
       color: #a5a5a5;
     }
   }
@@ -148,7 +148,7 @@
   animation-fill-mode: forwards; 
 }
 
-.val {
+.value {
   opacity: 1;
   transition: opacity 0.4s ease; 
 }

test/jsonpanel.test.js

@@ -91,11 +91,11 @@ describe('value transformer', () => {
       data: {
         testString,
       },
-      valTransformer: (string) => string.toLowerCase(),
+      valueTransformer: (string) => string.toLowerCase(),
     });
 
     const transformedValue =
-      document.body.querySelector('.val.string').textContent;
+      document.body.querySelector('.value.string').textContent;
     expect(transformedValue).toBe(`"${testString.toLowerCase()}"`);
   });
 
@@ -108,12 +108,12 @@ describe('value transformer', () => {
           testString,
         },
       },
-      valTransformer: (string) => string.toLowerCase(),
+      valueTransformer: (string) => string.toLowerCase(),
     });
 
     document.body.querySelector('.expander').click();
     const transformedValue =
-      document.body.querySelector('.val.string').textContent;
+      document.body.querySelector('.value.string').textContent;
     expect(transformedValue).toBe(`"${testString.toLowerCase()}"`);
   });
 });