openapi-explorer 2.2.725 → 2.2.728

package/dist/es/components/api-request.js

@@ -195,7 +195,7 @@ export default class ApiRequest extends LitElement {
     }[paramLocation];
     const tableRows = [];
     for (const param of filteredParams) {
-      var _this$storedParamValu, _paramSchema$allowedV;
+      var _param$style, _param$explode;
       if (!param.schema) {
         continue;
       }
@@ -207,33 +207,57 @@ export default class ApiRequest extends LitElement {
         continue;
       }
       const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;
-      let paramStyle = 'form';
-      let paramExplode = true;
-      if (paramLocation === 'query') {
-        if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
-          paramStyle = param.style;
-        }
-        if (typeof param.explode === 'boolean') {
-          paramExplode = param.explode;
-        }
+      // Set the default style: https://spec.openapis.org/oas/v3.1.0.html#fixed-fields-9
+      const paramStyle = (_param$style = param.style) !== null && _param$style !== void 0 ? _param$style : {
+        query: 'form',
+        path: 'simple',
+        header: 'simple',
+        cookie: 'form'
+      }[paramLocation];
+      const paramExplode = (_param$explode = param.explode) !== null && _param$explode !== void 0 ? _param$explode : param.style === 'form';
+      const rowGenerator = ({
+        name: paramName,
+        description: paramDescription,
+        required: paramRequired
+      }, generatedParamSchema) => {
+        var _this$storedParamValu, _generatedParamSchema;
+        const displayAllowedValuesHints = (generatedParamSchema.type === 'object' || generatedParamSchema.type === 'array') && generatedParamSchema.allowedValues;
+        return html` <tr> <td colspan="1" style="width:160px;min-width:50px;vertical-align:top"> <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top:1rem"> ${paramName}${!generatedParamSchema.deprecated && paramRequired ? html`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type" style="margin-bottom:1rem"> ${generatedParamSchema.type === 'array' ? `${generatedParamSchema.arrayType}` : `${generatedParamSchema.format ? generatedParamSchema.format : generatedParamSchema.type}`}${!generatedParamSchema.deprecated && paramRequired ? html`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? generatedParamSchema.type === 'array' && html` <div style="margin-top:1rem;margin-bottom:1rem"> <tag-input class="request-param" autocomplete="on" id="request-param-${paramName}" style="width:100%" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="add-multiple ↩" @change="${e => {
+          this.storedParamValues[paramName] = e.detail.value;
+          this.computeCurlSyntax();
+        }}" .value="${(_this$storedParamValu = this.storedParamValues[paramName]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || generatedParamSchema.type === 'object' && html` <textarea autocomplete="on" id="request-param-${paramName}" @input="${() => {
+          this.computeCurlSyntax();
+        }}" class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${generatedParamSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || generatedParamSchema.allowedValues && html` <select aria-label="mime type" style="width:100%;margin-top:1rem;margin-bottom:1rem" data-ptype="${paramLocation}" data-pname="${paramName}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}" @change="${e => {
+          this.storedParamValues[paramName] = e;
+          this.computeCurlSyntax();
+        }}"> ${generatedParamSchema.allowedValues.map(allowedValue => html` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[paramName]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || html` <input type="${generatedParamSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" autocomplete="on" id="request-param-${paramName}" @input="${() => {
+          this.computeCurlSyntax();
+        }}" placeholder="${generatedParamSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, generatedParamSchema.type)} </td> ${this.renderStyle === 'focused' ? html` <td colspan="2" style="vertical-align:top"> ${paramDescription ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(toMarkdown(paramDescription))} </div>` : ''} ${generatedParamSchema.constraints.length || displayAllowedValuesHints || generatedParamSchema.pattern ? html` <div class="param-constraint" style="margin-top:1rem"> ${generatedParamSchema.constraints.length ? html`<span style="font-weight:700">Constraints: </span>${generatedParamSchema.constraints.join(', ')}<br>` : ''} ${generatedParamSchema.pattern ? html` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${generatedParamSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${generatedParamSchema.pattern}</div> </div> ` : ''} ${(_generatedParamSchema = generatedParamSchema.allowedValues) === null || _generatedParamSchema === void 0 ? void 0 : _generatedParamSchema.map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${generatedParamSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
+          const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
+          if (inputEl) {
+            inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
+          }
+        }}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> ` : ''} </tr>`;
+      };
+      let newRows = [];
+      if (paramStyle === 'form' && paramExplode) {
+        newRows = Object.keys(param.schema.properties).map(explodedParamKey => {
+          var _param$schema, _param$schema$require;
+          const explodedParam = param.schema.properties[explodedParamKey];
+          const explodedParamSchema = getTypeInfo(explodedParam, {
+            includeNulls: this.includeNulls,
+            enableExampleGeneration: true
+          });
+          return rowGenerator({
+            name: explodedParamKey,
+            description: explodedParam.description,
+            required: (_param$schema = param.schema) === null || _param$schema === void 0 ? void 0 : (_param$schema$require = _param$schema.required) === null || _param$schema$require === void 0 ? void 0 : _param$schema$require.includes(explodedParamKey)
+          }, explodedParamSchema);
+        });
+      } else {
+        newRows = rowGenerator(param, paramSchema);
       }
-      const displayAllowedValuesHints = (paramSchema.type === 'object' || paramSchema.type === 'array') && paramSchema.allowedValues;
-      tableRows.push(html` <tr> <td colspan="1" style="width:160px;min-width:50px;vertical-align:top"> <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}" style="margin-top:1rem"> ${param.name}${!paramSchema.deprecated && param.required ? html`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type" style="margin-bottom:1rem"> ${paramSchema.type === 'array' ? `${paramSchema.arrayType}` : `${paramSchema.format ? paramSchema.format : paramSchema.type}`}${!paramSchema.deprecated && param.required ? html`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? paramSchema.type === 'array' && html` <div style="margin-top:1rem;margin-bottom:1rem"> <tag-input class="request-param" autocomplete="on" id="request-param-${param.name}" style="width:100%" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="add-multiple ↩" @change="${e => {
-        this.storedParamValues[param.name] = e.detail.value;
-        this.computeCurlSyntax();
-      }}" .value="${(_this$storedParamValu = this.storedParamValues[param.name]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || paramSchema.type === 'object' && html` <textarea autocomplete="on" id="request-param-${param.name}" @input="${() => {
-        this.computeCurlSyntax();
-      }}" class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || paramSchema.allowedValues && html` <select aria-label="mime type" style="width:100%;margin-top:1rem;margin-bottom:1rem" data-ptype="${paramLocation}" data-pname="${param.name}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}" @change="${e => {
-        this.storedParamValues[param.name] = e;
-        this.computeCurlSyntax();
-      }}"> ${paramSchema.allowedValues.map(allowedValue => html` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[param.name]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || html` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" autocomplete="on" id="request-param-${param.name}" @input="${() => {
-        this.computeCurlSyntax();
-      }}" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, paramSchema.type)} </td> ${this.renderStyle === 'focused' ? html` <td colspan="2" style="vertical-align:top"> ${param.description ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(toMarkdown(param.description))} </div>` : ''} ${paramSchema.constraints.length || displayAllowedValuesHints || paramSchema.pattern ? html` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? html`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? html` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${paramSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${paramSchema.pattern}</div> </div> ` : ''} ${(_paramSchema$allowedV = paramSchema.allowedValues) === null || _paramSchema$allowedV === void 0 ? void 0 : _paramSchema$allowedV.map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
-        const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
-        if (inputEl) {
-          inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
-        }
-      }}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> ` : ''} </tr>`);
+      tableRows.push(newRows);
     }
     return html` <div class="table-title top-gap">${title}${paramLocation === 'path' ? html`<span style="color:var(--red)">*</span>` : ''}</div> <div style="display:block;overflow-x:auto;max-width:100%"> <table role="presentation" class="m-table" style="width:100%;word-break:break-word"> ${tableRows} </table> </div>`;
   }
@@ -459,7 +483,6 @@ export default class ApiRequest extends LitElement {
     const requestPanelEl = this.closest('.request-panel');
     const pathParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='path']")];
     const queryParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='query']")];
-    const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
     const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
     let pathUrl = `${this.serverUrl.replace(/\/$/, '')}${this.path.replaceAll(' ', '')}`;
@@ -507,7 +530,7 @@ export default class ApiRequest extends LitElement {
           } else if (paramSerializeStyle === 'pipeDelimited') {
             fetchUrl.searchParams.append(el.dataset.pname, values.join('|').replace(/^\||\|$/g, ''));
           } else {
-            if (paramSerializeExplode === 'true') {
+            if (paramSerializeExplode === 'true' || paramSerializeExplode === true) {
               // eslint-disable-line no-lonely-if
               values.forEach(v => {
                 fetchUrl.searchParams.append(el.dataset.pname, v);
@@ -520,40 +543,6 @@ export default class ApiRequest extends LitElement {
       }
     });
 
-    // Query Params (Dynamic - create from JSON)
-    queryParamObjTypeEls.map(el => {
-      try {
-        let queryParamObj = {};
-        const paramSerializeStyle = el.dataset.paramSerializeStyle;
-        const paramSerializeExplode = el.dataset.paramSerializeExplode;
-        queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
-        for (const key in queryParamObj) {
-          if (typeof queryParamObj[key] === 'object') {
-            if (Array.isArray(queryParamObj[key])) {
-              if (paramSerializeStyle === 'spaceDelimited') {
-                fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));
-              } else if (paramSerializeStyle === 'pipeDelimited') {
-                fetchUrl.searchParams.append(key, queryParamObj[key].join('|'));
-              } else {
-                if (paramSerializeExplode === 'true') {
-                  // eslint-disable-line no-lonely-if
-                  queryParamObj[key].forEach(v => {
-                    fetchUrl.searchParams.append(key, v);
-                  });
-                } else {
-                  fetchUrl.searchParams.append(key, queryParamObj[key]);
-                }
-              }
-            }
-          } else {
-            fetchUrl.searchParams.append(key, queryParamObj[key]);
-          }
-        }
-      } catch (err) {
-        console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console
-      }
-    });
-
     // Add Authentication api keys if provided
     this.api_keys.filter(v => v.finalKeyValue).forEach(v => {
       if (v.in === 'query') {
@@ -702,7 +691,7 @@ export default class ApiRequest extends LitElement {
       } = this.recomputeFetchOptions();
       const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
       const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
-      const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
+      const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value.replace(/"/g, '\\"')}"`, '');
       this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
     } catch (error) {
       /* There was an explicit issue and likely it was because the fetch options threw. */

package/dist/lib/components/api-request.js

@@ -200,7 +200,7 @@ class ApiRequest extends _lit.LitElement {
     }[paramLocation];
     const tableRows = [];
     for (const param of filteredParams) {
-      var _this$storedParamValu, _paramSchema$allowedV;
+      var _param$style, _param$explode;
       if (!param.schema) {
         continue;
       }
@@ -212,33 +212,57 @@ class ApiRequest extends _lit.LitElement {
         continue;
       }
       const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;
-      let paramStyle = 'form';
-      let paramExplode = true;
-      if (paramLocation === 'query') {
-        if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
-          paramStyle = param.style;
-        }
-        if (typeof param.explode === 'boolean') {
-          paramExplode = param.explode;
-        }
+      // Set the default style: https://spec.openapis.org/oas/v3.1.0.html#fixed-fields-9
+      const paramStyle = (_param$style = param.style) !== null && _param$style !== void 0 ? _param$style : {
+        query: 'form',
+        path: 'simple',
+        header: 'simple',
+        cookie: 'form'
+      }[paramLocation];
+      const paramExplode = (_param$explode = param.explode) !== null && _param$explode !== void 0 ? _param$explode : param.style === 'form';
+      const rowGenerator = ({
+        name: paramName,
+        description: paramDescription,
+        required: paramRequired
+      }, generatedParamSchema) => {
+        var _this$storedParamValu, _generatedParamSchema;
+        const displayAllowedValuesHints = (generatedParamSchema.type === 'object' || generatedParamSchema.type === 'array') && generatedParamSchema.allowedValues;
+        return (0, _lit.html)` <tr> <td colspan="1" style="width:160px;min-width:50px;vertical-align:top"> <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top:1rem"> ${paramName}${!generatedParamSchema.deprecated && paramRequired ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type" style="margin-bottom:1rem"> ${generatedParamSchema.type === 'array' ? `${generatedParamSchema.arrayType}` : `${generatedParamSchema.format ? generatedParamSchema.format : generatedParamSchema.type}`}${!generatedParamSchema.deprecated && paramRequired ? (0, _lit.html)`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? generatedParamSchema.type === 'array' && (0, _lit.html)` <div style="margin-top:1rem;margin-bottom:1rem"> <tag-input class="request-param" autocomplete="on" id="request-param-${paramName}" style="width:100%" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="add-multiple ↩" @change="${e => {
+          this.storedParamValues[paramName] = e.detail.value;
+          this.computeCurlSyntax();
+        }}" .value="${(_this$storedParamValu = this.storedParamValues[paramName]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || generatedParamSchema.type === 'object' && (0, _lit.html)` <textarea autocomplete="on" id="request-param-${paramName}" @input="${() => {
+          this.computeCurlSyntax();
+        }}" class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${generatedParamSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || generatedParamSchema.allowedValues && (0, _lit.html)` <select aria-label="mime type" style="width:100%;margin-top:1rem;margin-bottom:1rem" data-ptype="${paramLocation}" data-pname="${paramName}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}" @change="${e => {
+          this.storedParamValues[paramName] = e;
+          this.computeCurlSyntax();
+        }}"> ${generatedParamSchema.allowedValues.map(allowedValue => (0, _lit.html)` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[paramName]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || (0, _lit.html)` <input type="${generatedParamSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" autocomplete="on" id="request-param-${paramName}" @input="${() => {
+          this.computeCurlSyntax();
+        }}" placeholder="${generatedParamSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${paramName}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, generatedParamSchema.type)} </td> ${this.renderStyle === 'focused' ? (0, _lit.html)` <td colspan="2" style="vertical-align:top"> ${paramDescription ? (0, _lit.html)` <div class="param-description" style="margin-top:1rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(paramDescription))} </div>` : ''} ${generatedParamSchema.constraints.length || displayAllowedValuesHints || generatedParamSchema.pattern ? (0, _lit.html)` <div class="param-constraint" style="margin-top:1rem"> ${generatedParamSchema.constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${generatedParamSchema.constraints.join(', ')}<br>` : ''} ${generatedParamSchema.pattern ? (0, _lit.html)` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${generatedParamSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${generatedParamSchema.pattern}</div> </div> ` : ''} ${(_generatedParamSchema = generatedParamSchema.allowedValues) === null || _generatedParamSchema === void 0 ? void 0 : _generatedParamSchema.map((v, i) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.html)` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${generatedParamSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
+          const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
+          if (inputEl) {
+            inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
+          }
+        }}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> ` : ''} </tr>`;
+      };
+      let newRows = [];
+      if (paramStyle === 'form' && paramExplode) {
+        newRows = Object.keys(param.schema.properties).map(explodedParamKey => {
+          var _param$schema, _param$schema$require;
+          const explodedParam = param.schema.properties[explodedParamKey];
+          const explodedParamSchema = (0, _schemaUtils.getTypeInfo)(explodedParam, {
+            includeNulls: this.includeNulls,
+            enableExampleGeneration: true
+          });
+          return rowGenerator({
+            name: explodedParamKey,
+            description: explodedParam.description,
+            required: (_param$schema = param.schema) === null || _param$schema === void 0 ? void 0 : (_param$schema$require = _param$schema.required) === null || _param$schema$require === void 0 ? void 0 : _param$schema$require.includes(explodedParamKey)
+          }, explodedParamSchema);
+        });
+      } else {
+        newRows = rowGenerator(param, paramSchema);
       }
-      const displayAllowedValuesHints = (paramSchema.type === 'object' || paramSchema.type === 'array') && paramSchema.allowedValues;
-      tableRows.push((0, _lit.html)` <tr> <td colspan="1" style="width:160px;min-width:50px;vertical-align:top"> <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}" style="margin-top:1rem"> ${param.name}${!paramSchema.deprecated && param.required ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type" style="margin-bottom:1rem"> ${paramSchema.type === 'array' ? `${paramSchema.arrayType}` : `${paramSchema.format ? paramSchema.format : paramSchema.type}`}${!paramSchema.deprecated && param.required ? (0, _lit.html)`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? paramSchema.type === 'array' && (0, _lit.html)` <div style="margin-top:1rem;margin-bottom:1rem"> <tag-input class="request-param" autocomplete="on" id="request-param-${param.name}" style="width:100%" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="add-multiple ↩" @change="${e => {
-        this.storedParamValues[param.name] = e.detail.value;
-        this.computeCurlSyntax();
-      }}" .value="${(_this$storedParamValu = this.storedParamValues[param.name]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || paramSchema.type === 'object' && (0, _lit.html)` <textarea autocomplete="on" id="request-param-${param.name}" @input="${() => {
-        this.computeCurlSyntax();
-      }}" class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || paramSchema.allowedValues && (0, _lit.html)` <select aria-label="mime type" style="width:100%;margin-top:1rem;margin-bottom:1rem" data-ptype="${paramLocation}" data-pname="${param.name}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}" @change="${e => {
-        this.storedParamValues[param.name] = e;
-        this.computeCurlSyntax();
-      }}"> ${paramSchema.allowedValues.map(allowedValue => (0, _lit.html)` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[param.name]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || (0, _lit.html)` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" autocomplete="on" id="request-param-${param.name}" @input="${() => {
-        this.computeCurlSyntax();
-      }}" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, paramSchema.type)} </td> ${this.renderStyle === 'focused' ? (0, _lit.html)` <td colspan="2" style="vertical-align:top"> ${param.description ? (0, _lit.html)` <div class="param-description" style="margin-top:1rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(param.description))} </div>` : ''} ${paramSchema.constraints.length || displayAllowedValuesHints || paramSchema.pattern ? (0, _lit.html)` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? (0, _lit.html)` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${paramSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${paramSchema.pattern}</div> </div> ` : ''} ${(_paramSchema$allowedV = paramSchema.allowedValues) === null || _paramSchema$allowedV === void 0 ? void 0 : _paramSchema$allowedV.map((v, i) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.html)` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
-        const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
-        if (inputEl) {
-          inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
-        }
-      }}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> ` : ''} </tr>`);
+      tableRows.push(newRows);
     }
     return (0, _lit.html)` <div class="table-title top-gap">${title}${paramLocation === 'path' ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''}</div> <div style="display:block;overflow-x:auto;max-width:100%"> <table role="presentation" class="m-table" style="width:100%;word-break:break-word"> ${tableRows} </table> </div>`;
   }
@@ -464,7 +488,6 @@ class ApiRequest extends _lit.LitElement {
     const requestPanelEl = this.closest('.request-panel');
     const pathParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='path']")];
     const queryParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='query']")];
-    const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
     const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
     let pathUrl = `${this.serverUrl.replace(/\/$/, '')}${this.path.replaceAll(' ', '')}`;
@@ -512,7 +535,7 @@ class ApiRequest extends _lit.LitElement {
           } else if (paramSerializeStyle === 'pipeDelimited') {
             fetchUrl.searchParams.append(el.dataset.pname, values.join('|').replace(/^\||\|$/g, ''));
           } else {
-            if (paramSerializeExplode === 'true') {
+            if (paramSerializeExplode === 'true' || paramSerializeExplode === true) {
               // eslint-disable-line no-lonely-if
               values.forEach(v => {
                 fetchUrl.searchParams.append(el.dataset.pname, v);
@@ -525,40 +548,6 @@ class ApiRequest extends _lit.LitElement {
       }
     });
 
-    // Query Params (Dynamic - create from JSON)
-    queryParamObjTypeEls.map(el => {
-      try {
-        let queryParamObj = {};
-        const paramSerializeStyle = el.dataset.paramSerializeStyle;
-        const paramSerializeExplode = el.dataset.paramSerializeExplode;
-        queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
-        for (const key in queryParamObj) {
-          if (typeof queryParamObj[key] === 'object') {
-            if (Array.isArray(queryParamObj[key])) {
-              if (paramSerializeStyle === 'spaceDelimited') {
-                fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));
-              } else if (paramSerializeStyle === 'pipeDelimited') {
-                fetchUrl.searchParams.append(key, queryParamObj[key].join('|'));
-              } else {
-                if (paramSerializeExplode === 'true') {
-                  // eslint-disable-line no-lonely-if
-                  queryParamObj[key].forEach(v => {
-                    fetchUrl.searchParams.append(key, v);
-                  });
-                } else {
-                  fetchUrl.searchParams.append(key, queryParamObj[key]);
-                }
-              }
-            }
-          } else {
-            fetchUrl.searchParams.append(key, queryParamObj[key]);
-          }
-        }
-      } catch (err) {
-        console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console
-      }
-    });
-
     // Add Authentication api keys if provided
     this.api_keys.filter(v => v.finalKeyValue).forEach(v => {
       if (v.in === 'query') {
@@ -707,7 +696,7 @@ class ApiRequest extends _lit.LitElement {
       } = this.recomputeFetchOptions();
       const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
       const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
-      const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
+      const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value.replace(/"/g, '\\"')}"`, '');
       this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
     } catch (error) {
       /* There was an explicit issue and likely it was because the fetch options threw. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "2.2.725",
+  "version": "2.2.728",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Authress Developers <developers@authress.io>",
   "type": "module",