Fix form data with show curl before try

docs/specs/form-data-test.json

@@ -0,0 +1,42 @@
+{
+  "openapi": "3.0.3",
+  "paths": {
+    "/api/form-data-test": {
+      "post": {
+        "requestBody": {
+          "required": true,
+          "content": {
+            "multipart/form-data": {
+              "schema": {
+                "type": "object",
+                "allOf": [
+                  { "$ref": "#/components/schemas/FormDataTestRequest" }
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "FormDataTestRequest": {
+        "properties": {
+          "items": { "type": "array", "items": { "type": "string" } },
+          "itemType": {
+            "type": "string",
+            "enum": [
+              "typeA",
+              "typeB",
+              "typeC",
+              "typeD",
+              "typeE"
+            ]
+          }
+        },
+        "type": "object"
+      }
+    }
+  }
+}

src/components/api-request.js

@@ -924,7 +924,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(fieldExamples) ? fieldExamples.join('~|~') : fieldExamples}"
                     data-array = "true"
                     placeholder = "add-multiple ↩"
-                    .value = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : fieldExamples : []}"
+                    .initialValue = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : fieldExamples : []}"
                   >
                   </tag-input>
                 `
@@ -975,6 +975,8 @@ export default class ApiRequest extends LitElement {
                                   inputEl.value = e.target.dataset.enum;
                                 }
                               }
+                              const event = new Event('input');
+                              inputEl.dispatchEvent(event);
                             }}"
                           > 
                             ${v} 
@@ -1428,7 +1430,9 @@ export default class ApiRequest extends LitElement {
               formDataParams.append(el.dataset.pname, el.value);
             }
           } else if (el.value && Array.isArray(el.value)) {
-            formDataParams.append(el.dataset.pname, el.value.join(','));
+            for (const value of el.value) {
+              formDataParams.append(`${el.dataset.pname}[]`, value);
+            }
           }
         });
         fetchOptions.body = formDataParams;
@@ -1693,14 +1697,6 @@ export default class ApiRequest extends LitElement {
           return [...aggregator, ` -F "${key}=@${value.name}"`];
         }
 
-        const multiple = value.match(/([^,],)/gm);
-
-        if (multiple) {
-          const multipleResults = multiple.map((one) => `-F "${key}[]=${one}"`);
-
-          return [...aggregator, ...multipleResults];
-        }
-
         return [...aggregator, ` -F "${key}=${value}"`];
       }, []).join('\\\n');
     } else if (requestBodyContainerEl && requestBodyContainerEl.dataset.selectedRequestBodyType) {
@@ -1778,6 +1774,23 @@ export default class ApiRequest extends LitElement {
     }
   }
 
+  firstUpdated() {
+    if (this.showCurlBeforeTry === 'true') {
+      this.shadowRoot.querySelectorAll('tag-input').forEach((el) => {
+        el.addEventListener('contentChanged', (/* event */) => {
+          this.applyCURLSyntax(this.shadowRoot);
+        });
+      });
+
+      this.shadowRoot.querySelectorAll('input').forEach((el) => {
+        window.console.log('registerEvent', el);
+        el.addEventListener('input', (/* event */) => {
+          this.applyCURLSyntax(this.shadowRoot);
+        });
+      });
+    }
+  }
+
   disconnectedCallback() {
     this.curlSyntax = '';
     // Cleanup ObjectURL for the blob data if this component created one

src/components/tag-input.js

@@ -1,6 +1,11 @@
 import { LitElement, html, css } from 'lit';
 
 export default class TagInput extends LitElement {
+  connectedCallback() {
+    this.value = this.initialValue ?? [];
+    super.connectedCallback();
+  }
+
   /* eslint-disable indent */
   render() {
     let tagItemTmpl = '';
@@ -19,13 +24,31 @@ export default class TagInput extends LitElement {
   }
   /* eslint-enable indent */
 
+  get value() {
+    /* eslint-disable-next-line no-underscore-dangle */
+    return this._value;
+  }
+
+  set value(newValue) {
+    /* eslint-disable no-underscore-dangle */
+    const oldValue = this._value;
+    this._value = newValue;
+    /* eslint-enable no-underscore-dangle */
+    this.requestUpdate('value', oldValue);
+    this.sendContentChanged();
+  }
+
   static get properties() {
     return {
       placeholder: { type: String },
       value: { type: Array, attribute: 'value' },
     };
   }
 
+  sendContentChanged() {
+    this.dispatchEvent(new CustomEvent('contentChanged', { bubbles: true, composed: true }));
+  }
+
   attributeChangedCallback(name, oldVal, newVal) {
     if (name === 'value') {
       if (newVal && oldVal !== newVal) {