improved tag-input component - will support comma separated text pasting

Author: mrin9

src/components/api-request.js

@@ -282,7 +282,7 @@ export default class ApiRequest extends LitElement {
                     data-param-serialize-explode = "${paramExplode}"
                     data-array = "true"
                     placeholder = "add-multiple ↩"
-                    value = "${Array.isArray(exampleVal) ? exampleVal.join(',') : exampleVal}"
+                    .value = "${Array.isArray(exampleVal) ? exampleVal : exampleVal.split(',')}"
                   >
                   </tag-input>`
                 : paramSchema.type === 'object'
@@ -353,7 +353,7 @@ export default class ApiRequest extends LitElement {
                 ${paramSchema.type === 'array' ? '[' : ''}
                 <a class = "${this.allowTry === 'true' ? '' : 'inactive-link'}"
                   data-example-type="${paramSchema.type === 'array' ? paramSchema.type : 'string'}"
-                  data-example = "${paramSchema.type === 'array' ? (v.value?.join('~|~') || '') : (v.value || '')}"
+                  data-example = "${v.value && Array.isArray(v.value) ? (v.value?.join('~|~') || '') : (v.value || '')}"
                   @click="${(e) => {
                     const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
                     if (inputEl) {
@@ -659,7 +659,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(fieldSchema.example) ? fieldSchema.example.join('~|~') : fieldSchema.example || ''}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
-                    value = "${Array.isArray(fieldSchema.example) ? fieldSchema.example.join(',') : fieldSchema.example}"
+                    .value = "${Array.isArray(fieldSchema.example) ? fieldSchema.example : fieldSchema.example.split(',')}"
                   >
                   </tag-input>
                 `
@@ -995,14 +995,14 @@ export default class ApiRequest extends LitElement {
           const paramSerializeExplode = el.dataset.paramSerializeExplode;
           const vals = (el.value && Array.isArray(el.value)) ? el.value : [];
           if (paramSerializeStyle === 'spaceDelimited') {
-            urlQueryParam.append(el.dataset.pname, vals.join(' '));
+            urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
           } else if (paramSerializeStyle === 'pipeDelimited') {
-            urlQueryParam.append(el.dataset.pname, vals.join('|'));
+            urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
           } else {
             if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
               vals.forEach((v) => { urlQueryParam.append(el.dataset.pname, v); });
             } else {
-              urlQueryParam.append(el.dataset.pname, vals.join(','));
+              urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
             }
           }
         }

src/components/tag-input.js

@@ -3,15 +3,19 @@ import { LitElement, html, css } from 'lit-element';
 export default class TagInput extends LitElement {
   /* eslint-disable indent */
   render() {
+    let tagItemTmpl = '';
+    if (Array.isArray(this.value)) {
+      tagItemTmpl = html`${this.value
+        .filter((v) => v.trim() !== '')
+        .map((v) => html`<span class='tag'>${v}</span>`)
+      }`;
+    }
     return html`
-    <div class='tags' tabindex="0">
-      ${Array.isArray(this.value) && this.value.length > 0
-        ? 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 || ''}">
-    </div>
-  `;
+      <div class='tags' tabindex="0">
+        ${tagItemTmpl}
+        <input type="text" class='editor' @paste="${(e) => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}">
+      </div>
+    `;
   }
   /* eslint-enable indent */
 
@@ -25,8 +29,7 @@ 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 || '';
+        this.value = newVal.split(',').filter((v) => v.trim() !== '');
       }
     }
     super.attributeChangedCallback(name, oldVal, newVal);
@@ -35,7 +38,8 @@ export default class TagInput extends LitElement {
   afterPaste(e) {
     const clipboardData = e.clipboardData || window.clipboardData;
     const pastedData = clipboardData.getData('Text');
-    console.log(pastedData); // eslint-disable-line no-console
+    this.value = pastedData ? pastedData.split(',').filter((v) => v.trim() !== '') : '';
+    e.preventDefault();
   }
 
   afterKeyDown(e) {