fixes #353 #354 - remove cache-control header from request and improve tag-input control

Author: mrin9

src/components/api-request.js

@@ -59,6 +59,7 @@ export default class ApiRequest extends LitElement {
       activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute
       selectedRequestBodyType: { type: String, attribute: 'selected-request-body-type' }, // internal tracking of selected request-body type
       selectedRequestBodyExample: { type: String, attribute: 'selected-request-body-example' }, // internal tracking of selected request-body example
+      renderedOnce: { type: Boolean },
     };
   }
 
@@ -282,7 +283,7 @@ export default class ApiRequest extends LitElement {
                     data-param-serialize-explode = "${paramExplode}"
                     data-array = "true"
                     placeholder= "add-multiple ⮐"
-                    .value = "${exampleVal}"
+                    value = "${Array.isArray(exampleVal) ? exampleVal.join(',') : exampleVal}"
                   >
                   </tag-input>`
                 : paramSchema.type === 'object'
@@ -654,7 +655,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(fieldSchema.example) ? fieldSchema.example.join('~|~') : fieldSchema.example || ''}"
                     data-array = "true"
                     placeholder = "add-multiple &#x2b90;"
-                    .value = "${fieldSchema.example || ''}"
+                    value = "${Array.isArray(fieldSchema.example) ? fieldSchema.example.join(',') : fieldSchema.example}"
                   >
                   </tag-input>
                 `
@@ -1170,9 +1171,6 @@ export default class ApiRequest extends LitElement {
       curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
 
-    fetchOptions.headers['Cache-Control'] = 'no-cache';
-    curlHeaders += ' -H "Cache-Control: no-cache" \\\n';
-
     me.responseUrl = '';
     me.responseHeaders = '';
     // me.responseText    = '';

src/components/tag-input.js

@@ -9,7 +9,7 @@ export default class TagInput extends LitElement {
         ? html`${this.value.map((v) => html`<span class='tag'> ${v} </span>`)}`
         : ''
       }
-      <input type="text" class='editor' @paste="${this.afterPaste}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder}">
+      <input type="text" class='editor' @paste="${this.afterPaste}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}">
     </div>
   `;
   }
@@ -22,6 +22,15 @@ export default class TagInput extends LitElement {
     };
   }
 
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'value') {
+      if (newVal && oldVal !== newVal) {
+        const tmpVal = newVal.split(',').filter((v) => v.trim() !== '');
+        this.value = tmpVal || '';
+      }
+    }
+  }
+
   afterPaste(e) {
     const clipboardData = e.clipboardData || window.clipboardData;
     const pastedData = clipboardData.getData('Text');