openapi-explorer 0.11.490 → 0.11.492

package/dist/es/components/request-form-table.js

@@ -0,0 +1,115 @@
+/* eslint-disable indent */
+import { html } from 'lit';
+import { marked } from 'marked';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+function generateFormRows(data, options, dataType = 'object', key = '', description = '', schemaLevel = 0) {
+  const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
+
+  if (!data) {
+    return null;
+  }
+
+  if (Object.keys(data).length === 0) {
+    return null;
+  }
+
+  let rawKeyLabel = '';
+  let keyDescr = '';
+  let isOneOfLabel = false;
+
+  if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
+    rawKeyLabel = key.replace('::', '').replace('~', ' ');
+    isOneOfLabel = true;
+  } else if (key.startsWith('::OPTION')) {
+    const parts = key.split('~');
+    rawKeyLabel = parts[1];
+    keyDescr = parts[2];
+  } else {
+    rawKeyLabel = key;
+  }
+
+  const keyLabel = rawKeyLabel.replace(/[*]$/, '');
+  const isRequired = rawKeyLabel.endsWith('*');
+
+  if (typeof data === 'object') {
+    const flags = data['::flags'] || {};
+
+    if (flags['🆁']) {
+      return undefined;
+    }
+
+    const displayLine = [description].filter(v => v).join(' ');
+    return html` ${newSchemaLevel >= 0 && key ? html` <tr class="complex-object-display no-select ${data['::type']}" data-obj="${keyLabel}"> <td class="key ${data['::deprecated'] ? 'deprecated' : ''}"> <div style="display:flex;align-items:center"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? html`<span class="key-label" style="display:inline-block">${keyLabel}</span><span style="color:var(--red)">*</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${unsafeHTML(marked(displayLine))}</td> </tr>` : html`${data['::type'] === 'array' && dataType === 'array' ? html`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? html`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : html`${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? html`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '')}`}`;
+  } // For Primitive Data types
+
+
+  const parsedData = JSON.parse(data);
+  const {
+    type,
+    format,
+    readOrWriteOnly,
+    constraint,
+    defaultValue,
+    example,
+    allowedValues,
+    pattern,
+    schemaDescription,
+    schemaTitle,
+    deprecated
+  } = parsedData;
+
+  if (readOrWriteOnly === '🆁') {
+    return undefined;
+  }
+
+  return html` <tr> <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? html`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? html`[<span>${format || type}</span>]` : `${format || type}`} </div> </td> ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, options) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(marked(description))}</div>` : ''} ${defaultValue || constraint || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraint ? html`<span style="font-weight:700">Constraints: </span>${constraint}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.split('┃').map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" data-type="${type === 'array' ? type : 'string'}" data-enum="${v.trim()}" @click="${e => {
+    const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
+    inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
+  }}"> ${v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? html`<tr class="form-parameter-description"> <td> </td> <td colspan="2" style="margin-top:0;padding:0 5px 8px 5px"> <span class="m-markdown-small">${unsafeHTML(marked(schemaDescription || ''))}</span> ${example ? html`<span> <span style="font-weight:700"> Example: </span> ${type === 'array' ? '[ ' : ''} <a part="anchor anchor-param-example" data-example-type="${type === 'array' ? type : 'string'}" data-example="${Array.isArray(example) && example.join('~|~') || example || ''}" @click="${e => {
+    const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
+    inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
+  }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`;
+} // function getObjectFormField(keyLabel, example, defaultValue, format, options) {
+//   return html`
+//     <td>
+//       <div class="tab-panel row" style="min-height:300px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
+//         <div class="tab-content col" data-tab = 'body' style="display: block; padding-left:5px; width:100%">
+//           <textarea
+//             class = "textarea" placeholder="${example || defaultValue || ''}"
+//             part = "textarea textarea-param"
+//             style = "width:100%; border:none; resize:vertical;"
+//             data-array = "false"
+//             data-ptype = "${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}"
+//             data-pname = "${keyLabel}"
+//             data-default = "${defaultValue || ''}"
+//             spellcheck = "false"
+//             .value="${options.fillRequestWithDefault === 'true' ? defaultValue : ''}"
+//           ></textarea>
+//           <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->
+//           <textarea data-pname = "hidden-${keyLabel}" data-ptype = "${options.mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none" .value="${defaultValue}"></textarea>
+//         </div>
+//       </div>
+//     </td>`;
+// }
+
+
+function getArrayFormField(keyLabel, example, defaultValue, format, options) {
+  if (format === 'binary') {
+    return html`<td style="min-width:100px"> <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, keyLabel, options.mimeType)}"> <div class="input-set row"> <input type="file" part="file-input" class="file-input" data-pname="${keyLabel}" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-array="false" data-file-array="true"> <button class="file-input-remove-btn"> &#x2715; </button> </div> <button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0;padding:2px 6px">ADD</button> </div> </td>`;
+  }
+
+  return html`<td style="min-width:100px"> <tag-input style="width:100%" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="true" placeholder="${(Array.isArray(example) ? example[0] : example) || defaultValue || 'add-multiple ↩'}" .value="${defaultValue || ''}"></tag-input> </td>`;
+}
+
+function getPrimitiveFormField(keyLabel, example, defaultValue, format, options) {
+  return html`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" .value="${options.fillRequestWithDefault && defaultValue || ''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="false"> </td>`;
+}
+
+export default function getRequestFormTable(data, mimeType) {
+  const options = {
+    mimeType: mimeType,
+    fillRequestWithDefault: this.fillRequestWithDefault === 'true'
+  };
+  return html` <table role="presentation" class="request-form-table" style="border:1px solid var(--light-border-color);width:100%"> ${data ? html`${generateFormRows.call(this, data['::type'] === 'array' ? data['::props'] : data, options, data['::type'])}` : ''} </table>`;
+}

package/dist/es/components/schema-table.js

@@ -143,7 +143,7 @@ export default class SchemaTable extends LitElement {
       return undefined;
     }
 
-    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${(_keyLabel = keyLabel) !== null && _keyLabel !== void 0 && _keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type"> <div>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</div> <div class="attributes ${cssType}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">${readOrWriteOnly}</div> </div> <div class="td key-descr"> ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''} <span class="m-markdown-small" style="vertical-align:middle"> ${unsafeHTML(marked(`${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
+    return html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${(_keyLabel = keyLabel) !== null && _keyLabel !== void 0 && _keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type"> <div>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</div> <div class="attributes ${cssType}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">${readOrWriteOnly}</div> </div> <div class="td key-descr"> ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''} <span class="m-markdown-small" style="vertical-align:middle"> ${unsafeHTML(marked(`${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/es/components/schema-tree.js

@@ -177,7 +177,7 @@ export default class SchemaTree extends LitElement {
       return undefined;
     }
 
-    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
+    return html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/es/languages/en.js

@@ -38,6 +38,7 @@ export default {
       'request-body': 'REQUEST BODY',
       'model': 'MODEL',
       'body': 'BODY',
+      'form': 'FORM',
       'request-headers': 'REQUEST HEADERS',
       'clear': 'CLEAR',
       'clear-response': 'CLEAR RESPONSE',

package/dist/es/languages/fr.js

@@ -38,6 +38,7 @@ export default {
       'request-body': 'CORPS DE LA REQUÊTE',
       'model': 'MODÈLE',
       'body': 'CORPS',
+      'form': 'FORME',
       'request-headers': 'EN-TÊTES DE LA REQUÊTE',
       'clear': 'VIDER',
       'clear-response': 'VIDER LA RÉPONSE',

package/dist/es/openapi-explorer.js

@@ -15,6 +15,7 @@ import 'prismjs/components/prism-csharp'; // Styles
 
 import FontStyles from './styles/font-styles.js';
 import InputStyles from './styles/input-styles';
+import SchemaStyles from './styles/schema-styles';
 import FlexStyles from './styles/flex-styles';
 import TableStyles from './styles/table-styles';
 import EndpointStyles from './styles/endpoint-styles';
@@ -220,7 +221,7 @@ export default class OpenApiExplorer extends LitElement {
   }
 
   static finalizeStyles() {
-    return [FontStyles, InputStyles, FlexStyles, TableStyles, EndpointStyles, PrismStyles, TabStyles, NavStyles, InfoStyles, advancedSearchStyles, apiRequestStyles, css`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}a{text-decoration:none}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{margin:0;padding:0 8px 0 4px;border-bottom:1px solid var(--border-color)}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:330px;display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
+    return [FontStyles, SchemaStyles, InputStyles, FlexStyles, TableStyles, EndpointStyles, PrismStyles, TabStyles, NavStyles, InfoStyles, advancedSearchStyles, apiRequestStyles, css`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}a{text-decoration:none}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{margin:0;padding:0 8px 0 4px;border-bottom:1px solid var(--border-color)}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:330px;display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
   } // Startup
 
 
@@ -265,7 +266,7 @@ export default class OpenApiExplorer extends LitElement {
     this.componentsCollapsed = this.collapsed;
     this.explorerLocation = this.explorerLocation || getCurrentElement();
 
-    if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) {
+    if (!this.defaultSchemaTab || !'body, model, form,'.includes(`${this.defaultSchemaTab},`)) {
       this.defaultSchemaTab = 'model';
     }
 

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.api-request,.api-request *,.api-request :after,.api-request :before,.api-request:after,.api-request:before{box-sizing:border-box}.api-request.focused-mode,.api-request.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}.api-request .param-name,.api-request .param-type{margin:1px 0;text-align:right;line-height:var(--font-size-small)}.api-request .param-name{color:var(--fg);font-family:var(--font-mono)}.api-request .param-name.deprecated{text-decoration:line-through}.api-request .param-type{color:var(--light-fg);font-family:var(--font-regular)}.api-request .param-constraint{min-width:100px}.api-request .param-constraint:empty{display:none}.api-request .param-description{min-width:100px}.api-request .param-description:empty{display:none}.api-request .param-description p{margin-block:0 .5em}.api-request .top-gap{margin-top:24px}.api-request .textarea{min-height:220px;padding:5px;resize:vertical}.api-request .response-message{font-weight:700;text-overflow:ellipsis}.api-request .response-message.error{color:var(--red)}.api-request .response-message.success{color:var(--blue)}.api-request .file-input-container{align-items:flex-end}.api-request .file-input-container .input-set:first-child .file-input-remove-btn{visibility:hidden}.api-request .file-input-remove-btn{font-size:16px;color:var(--red);outline:0;border:none;background:0 0;cursor:pointer}.api-request .v-tab-btn{font-size:var(--smal-font-size);height:24px;border:none;background:0 0;opacity:.3;cursor:pointer;padding:4px 8px}.api-request .v-tab-btn.active{font-weight:700;background:var(--bg);opacity:1}.api-request .border-top{border-top:1px solid var(--border-color)}.api-request .border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.api-request .light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.api-request .pad-8-16{padding:8px 16px}.api-request .pad-top-8{padding-top:8px}.api-request .mar-top-8{margin-top:8px}@media only screen and (min-width:768px){.api-request .textarea{padding:8px}}`;
+export default css`.api-request,.api-request *,.api-request :after,.api-request :before,.api-request:after,.api-request:before{box-sizing:border-box}.api-request.focused-mode,.api-request.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}.param-name,.param-type{margin:1px 0;text-align:right;line-height:var(--font-size-small)}.param-name{color:var(--fg);font-family:var(--font-mono)}.param-name.deprecated{text-decoration:line-through}.param-type{color:var(--light-fg);font-family:var(--font-regular)}.api-request .param-constraint{min-width:100px}.api-request .param-constraint:empty{display:none}.api-request .param-description{min-width:100px}.api-request .param-description:empty{display:none}.api-request .param-description p{margin-block:0 .5em}.api-request .top-gap{margin-top:24px}.api-request .textarea{min-height:220px;padding:5px;resize:vertical}.api-request .response-message{font-weight:700;text-overflow:ellipsis}.api-request .response-message.error{color:var(--red)}.api-request .response-message.success{color:var(--blue)}.api-request .file-input-container{align-items:flex-end}.api-request .file-input-container .input-set:first-child .file-input-remove-btn{visibility:hidden}.api-request .file-input-remove-btn{font-size:16px;color:var(--red);outline:0;border:none;background:0 0;cursor:pointer}.api-request .v-tab-btn{font-size:var(--smal-font-size);height:24px;border:none;background:0 0;opacity:.3;cursor:pointer;padding:4px 8px}.api-request .v-tab-btn.active{font-weight:700;background:var(--bg);opacity:1}.api-request .border-top{border-top:1px solid var(--border-color)}.api-request .border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.api-request .light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.api-request .pad-8-16{padding:8px 16px}.api-request .pad-top-8{padding-top:8px}.api-request .mar-top-8{margin-top:8px}@media only screen and (min-width:768px){.api-request .textarea{padding:8px}}`;

package/dist/es/styles/schema-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{line-height:1.7;font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;margin-bottom:1px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.binary,.byte,.date,.date-time,.datetime,.emai,.email,.host,.hostname,.ipv4,.pass,.password,.stri,.string,.uri,.url,.uuid{color:var(--green)}.blue,.deci,.decimal,.doub,.double,.floa,.float,.int3,.int32,.int6,.int64,.inte,.integer,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.cons,.const,.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:var(--secondary-color);flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}`;
+export default css`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{line-height:1.7;font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.binary,.byte,.date,.date-time,.datetime,.emai,.email,.host,.hostname,.ipv4,.pass,.password,.stri,.string,.uri,.url,.uuid{color:var(--green)}.blue,.deci,.decimal,.doub,.double,.floa,.float,.int3,.int32,.int6,.int64,.inte,.integer,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.cons,.const,.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:var(--secondary-color);flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}`;

package/dist/es/styles/table-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.m-table{border-spacing:0;border-collapse:separate;border:1px solid var(--light-border-color);border-radius:var(--border-radius);margin:0;max-width:100%}.m-table tr:first-child td,.m-table tr:first-child th{border-top:0 none}.m-table td,.m-table th{font-size:var(--font-size-small);padding:4px 5px 4px}.m-table td:not([align]),.m-table th:not([align]){text-align:left}.m-table th{color:var(--fg2);font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 18px);font-weight:600;letter-spacing:normal;background-color:var(--bg2);vertical-align:bottom;border-bottom:1px solid var(--light-border-color)}.m-table>tbody>tr>td,.m-table>tr>td{border-top:1px solid var(--light-border-color)}.table-title{font-size:var(--font-size-small);font-weight:700;vertical-align:middle;margin:12px 0 4px 0}`;
+export default css`.m-table{border-spacing:0;border-collapse:separate;border:1px solid var(--light-border-color);border-radius:var(--border-radius);margin:0;max-width:100%}.m-table tr:first-child td,.m-table tr:first-child th{border-top:0 none}.m-table td,.m-table th{font-size:var(--font-size-small);padding:4px 5px 4px}.m-table td:not([align]),.m-table th:not([align]){text-align:left}.m-table th{color:var(--fg2);font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 18px);font-weight:600;letter-spacing:normal;background-color:var(--bg2);vertical-align:bottom;border-bottom:1px solid var(--light-border-color)}.m-table>tbody>tr>td,.m-table>tr>td{border-top:1px solid var(--light-border-color)}.table-title{font-size:var(--font-size-small);font-weight:700;vertical-align:middle;margin:12px 0 4px 0}.request-form-table{border-spacing:0;border-collapse:separate;border:1px solid var(--light-border-color);border-radius:var(--border-radius);margin:0;max-width:100%}.request-form-table td,.request-form-table th{font-size:var(--font-size-small);padding:4px 5px 4px}.request-form-table td:not([align]),.request-form-table th:not([align]){text-align:left}.request-form-table th{color:var(--fg2);font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 18px);font-weight:600;letter-spacing:normal;background-color:var(--bg2);vertical-align:bottom;border-bottom:1px solid var(--light-border-color)}.request-form-table>tr:not(.complex-object-display)+tr:not(.form-parameter-description)>td{border-top:1px solid var(--light-border-color)}.request-form-table>tr:not(.complex-object-display)+tr.complex-object-display>td{border-top:1px solid var(--primary-color)!important}.request-form-table .input-set{width:100%;margin-top:2px}.request-form-table .file-input{width:100%;margin-top:2px}`;

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

@@ -25,6 +25,8 @@ require("./json-tree");
 
 require("./schema-tree");
 
+var _requestFormTable = _interopRequireDefault(require("./request-form-table"));
+
 require("./tag-input");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -309,9 +311,9 @@ class ApiRequest extends _lit.LitElement {
 
     let reqBodyTypeSelectorHtml = '';
     let reqBodyFileInputHtml = '';
-    let reqBodyFormHtml = '';
     let reqBodySchemaHtml = '';
     let reqBodyDefaultHtml = '';
+    let bodyTabNameUseBody = true;
     const requestBodyTypes = [];
     const content = this.request_body.content;
 
@@ -331,125 +333,59 @@ class ApiRequest extends _lit.LitElement {
 
     reqBodyTypeSelectorHtml = requestBodyTypes.length === 1 ? '' : (0, _lit.html)` <select aria-label="mime type" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onMimeTypeChange(e)}"> ${requestBodyTypes.map(reqBody => (0, _lit.html)` <option value="${reqBody.mimeType}" ?selected="${reqBody.mimeType === this.selectedRequestBodyType}"> ${reqBody.mimeType} </option> `)} </select> `; // For Loop - Main
 
-    requestBodyTypes.forEach(reqBody => {
-      let reqBodyExamples = [];
-
-      if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
-        // Generate Example
-        if (reqBody.mimeType === this.selectedRequestBodyType) {
-          reqBodyExamples = (0, _schemaUtils.generateExample)(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
+    const reqBody = requestBodyTypes.find(req => req.mimeType === this.selectedRequestBodyType); // Generate Example
 
-          if (!this.selectedRequestBodyExample) {
-            this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
-          }
+    if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
+      const reqBodyExamples = (0, _schemaUtils.generateExample)(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
 
-          reqBodyDefaultHtml = (0, _lit.html)` ${reqBodyDefaultHtml} <div class="example-panel border-top pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.html)` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select> `} ${reqBodyExamples.filter(v => v.exampleId === this.selectedRequestBodyExample).map(v => (0, _lit.html)` <div class="example ${v.exampleId === this.selectedRequestBodyExample ? 'example-selected' : ''}" data-default="${v.exampleId}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea class="textarea request-body-param-user-input" part="textarea textarea-param" spellcheck="false" data-ptype="${reqBody.mimeType}" data-default="${v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8)}" data-default-format="${v.exampleFormat}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8) : ''}"></textarea> </slot> <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical;display:none" .value="${v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 8)}"></textarea> </div> `)} </div> `;
-        }
-      } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
-        if (reqBody.mimeType === this.selectedRequestBodyType) {
-          const ex = (0, _schemaUtils.generateExample)(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
+      if (!this.selectedRequestBodyExample) {
+        this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
+      }
 
-          if (reqBody.schema) {
-            reqBodyFormHtml = this.formDataTemplate(reqBody.schema, reqBody.mimeType, ex[0] ? ex[0].exampleValue : '');
-          }
-        }
-      } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {
-        if (reqBody.mimeType === this.selectedRequestBodyType) {
-          reqBodyFileInputHtml = (0, _lit.html)` <div class="small-font-size bold-text row"> <input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false"> </div> `;
-        }
-      } // Generate Schema
+      const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample);
+      reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel border-top pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.html)` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea class="textarea request-body-param-user-input" part="textarea textarea-param" spellcheck="false" data-ptype="${reqBody.mimeType}" data-default="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}" data-default-format="${displayedBodyExample.exampleFormat}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical;display:none" .value="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"></textarea> </div> </div> `;
+    } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
+      bodyTabNameUseBody = false;
+      const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
+        includeNulls: this.includeNulls
+      });
+      reqBodyDefaultHtml = _requestFormTable.default.call(this, schemaAsObj, this.selectedRequestBodyType);
+    } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {
+      reqBodyFileInputHtml = (0, _lit.html)` <div class="small-font-size bold-text row"> <input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false"> </div> `;
+    } // Generate Schema
 
 
-      if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text')) {
-        const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
-          includeNulls: this.includeNulls
-        });
+    if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text') || reqBody.mimeType.includes('form-')) {
+      const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
+        includeNulls: this.includeNulls
+      });
 
-        if (this.schemaStyle === 'table') {
-          reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-table class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
-        } else {
-          reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-tree> `;
-        }
+      if (this.schemaStyle === 'table') {
+        reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-table class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
+      } else {
+        reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-tree> `;
       }
-    });
-    return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> REQUEST BODY ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text') ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
+    }
+
+    return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> REQUEST BODY ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.body')}</button> </div> ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`} ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`} </div>` : (0, _lit.html)` ${reqBodyFileInputHtml} ${reqBodyFormHtml}`} </div> `;
-  }
-
-  formDataTemplate(schema, mimeType, exampleValue = '') {
-    const formDataTableRows = [];
-
-    if (schema.properties) {
-      for (const fieldName in schema.properties) {
-        const fieldSchema = schema.properties[fieldName];
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${bodyTabNameUseBody ? (0, _languages.getI18nText)('operations.body') : (0, _languages.getI18nText)('operations.form')}</button> </div> ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`} ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`} </div>` : (0, _lit.html)`${reqBodyFileInputHtml}`} </div> `;
+  } // formDataTemplate(schema, mimeType, exampleValue = '') {
+  //   return html`
+  //     <textarea
+  //       class = "textarea dynamic-form-param ${mimeType}"
+  //       part = "textarea textarea-param"
+  //       spellcheck = "false"
+  //       data-pname="dynamic-form"
+  //       data-ptype="${mimeType}"
+  //       style="width:100%"
+  //     >${exampleValue}</textarea>
+  //     ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(marked(schema.description))}</span>` : ''}
+  //   `;
+  // }
 
-        if (fieldSchema.readOnly) {
-          continue;
-        }
-
-        const fieldType = fieldSchema.type;
-        const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(fieldSchema, {
-          includeNulls: this.includeNulls
-        });
-        const paramSchema = (0, _schemaUtils.getTypeInfo)(fieldSchema, {
-          includeNulls: this.includeNulls
-        });
-        const formdataPartExample = (0, _schemaUtils.generateExample)('', fieldSchema.example ? fieldSchema.example : '', fieldSchema, 'json', false, true, 'text', true);
-        formDataTableRows.push((0, _lit.html)` <tr> <td style="width:160px;min-width:100px"> <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}"> ${fieldName}${!fieldSchema.deprecated && (schema.required && schema.required.includes(fieldName) || fieldSchema.required) ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type"> ${paramSchema.type === 'array' ? (0, _lit.html)`[<span>${paramSchema.format || paramSchema.type}</span>]` : `${paramSchema.format || paramSchema.type}`} </div> </td> <td style="${fieldType === 'object' ? 'width:100%; padding:0;' : this.allowTry === 'true' ? '' : 'display:none;'} min-width:100px" colspan="${fieldType === 'object' ? 2 : 1}"> ${fieldType === 'array' ? fieldSchema.items && fieldSchema.items.format === 'binary' ? (0, _lit.html)` <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, fieldName, mimeType)}"> <div class="input-set row"> <input type="file" part="file-input" style="width:100%" data-pname="${fieldName}" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-array="false" data-file-array="true"> <button class="file-input-remove-btn"> &#x2715; </button> </div> <button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0;padding:2px 6px">ADD</button> </div> ` : (0, _lit.html)` <tag-input style="width:100%" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${fieldName}" data-default="${paramSchema.default || ''}" data-array="true" placeholder="${(Array.isArray(paramSchema.example) ? paramSchema.example[0] : paramSchema.example) || 'add-multiple ↩'}" .value="${paramSchema.default || ''}"> </tag-input> ` : (0, _lit.html)` ${fieldType === 'object' ? (0, _lit.html)` <div class="tab-panel row" style="min-height:300px;border-left:6px solid var(--light-border-color);align-items:stretch"> <div style="width:24px;background-color:var(--light-border-color)"> <div class="row" style="flex-direction:row-reverse;width:260px;height:24px;transform:rotate(270deg) translateX(-260px);transform-origin:top left;display:block" @click="${e => {
-          if (e.target.classList.contains('v-tab-btn')) {
-            const tab = e.target.dataset.tab;
-
-            if (tab) {
-              const tabPanelEl = e.target.closest('.tab-panel');
-              const selectedTabBtnEl = tabPanelEl.querySelector(`.v-tab-btn[data-tab="${tab}"]`);
-              const otherTabBtnEl = [...tabPanelEl.querySelectorAll(`.v-tab-btn:not([data-tab="${tab}"])`)];
-              const selectedTabContentEl = tabPanelEl.querySelector(`.tab-content[data-tab="${tab}"]`);
-              const otherTabContentEl = [...tabPanelEl.querySelectorAll(`.tab-content:not([data-tab="${tab}"])`)];
-              selectedTabBtnEl.classList.add('active');
-              selectedTabContentEl.style.display = 'block';
-              otherTabBtnEl.forEach(el => {
-                el.classList.remove('active');
-              });
-              otherTabContentEl.forEach(el => {
-                el.style.display = 'none';
-              });
-            }
-          }
-
-          if (e.target.tagName.toLowerCase() === 'button') {
-            this.activeSchemaTab = e.target.dataset.tab;
-          }
-        }}"> <button class="v-tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="v-tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.request-body')}</button> </div> </div> ${(0, _lit.html)` <div class="tab-content col" data-tab="model" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'};padding-left:5px;width:100%"> <schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}"> </schema-tree> </div>`} ${(0, _lit.html)` <div class="tab-content col" data-tab="body" style="display:${this.activeSchemaTab === 'body' ? 'block' : 'none'};padding-left:5px;width:100%"> <textarea class="textarea" placeholder="${formdataPartExample[0] && formdataPartExample[0].exampleValue || paramSchema.default || ''}" part="textarea textarea-param" style="width:100%;border:none;resize:vertical" data-array="false" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${fieldName}" data-default="${paramSchema.default || ''}" spellcheck="false" .value="${this.fillRequestWithDefault === 'true' ? paramSchema.default : ''}"></textarea> <textarea data-pname="hidden-${fieldName}" data-ptype="${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none" .value="${paramSchema.default}"></textarea> </div>`} </div>` : (0, _lit.html)` ${this.allowTry === 'true' ? (0, _lit.html)`<input placeholder="${paramSchema.example || paramSchema.default || ''}" .value="${this.fillRequestWithDefault === 'true' ? paramSchema.default || '' : ''}" spellcheck="false" type="${fieldSchema.format === 'binary' ? 'file' : fieldSchema.format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${fieldName}" data-default="${paramSchema.default || ''}" data-array="false">` : ''} `}`} </td> ${fieldType === 'object' ? '' : (0, _lit.html)` <td> ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern ? (0, _lit.html)` <div class="param-constraint"> ${paramSchema.pattern ? (0, _lit.html)`<span style="font-weight:700">Pattern: </span>${paramSchema.pattern}<br>` : ''} ${paramSchema.constraint ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraint}<br>` : ''} ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').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' ? paramSchema.type : 'string'}" data-enum="${v.trim()}" @click="${e => {
-          const inputEl = e.target.closest('table').querySelector(`[data-pname="${fieldName}"]`);
-
-          if (inputEl) {
-            if (e.target.dataset.type === 'array') {
-              inputEl.value = [e.target.dataset.enum];
-            } else {
-              inputEl.value = e.target.dataset.enum;
-            }
-          }
-        }}"> ${v} </a>`}`)} </div>` : ''} </td>`} </tr> ${fieldType === 'object' ? '' : (0, _lit.html)` <tr> <td style="border:none"> </td> <td colspan="2" style="border:none;margin-top:0;padding:0 5px 8px 5px"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(fieldSchema.description || ''))}</span> ${paramSchema.example ? (0, _lit.html)` <span> <span style="font-weight:700"> Example: </span> ${paramSchema.type === 'array' ? '[ ' : ''} <a part="anchor anchor-param-example" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-default-type="${paramSchema.type === 'array' ? paramSchema.type : 'string'}" data-default="${Array.isArray(paramSchema.example) && paramSchema.example.join('~|~') || paramSchema.example || ''}" @click="${e => {
-          const inputEl = e.target.closest('table').querySelector(`[data-pname="${fieldName}"]`);
-
-          if (inputEl) {
-            if (e.target.dataset.exampleType === 'array') {
-              inputEl.value = e.target.dataset.example.split('~|~');
-            } else {
-              inputEl.value = e.target.dataset.example;
-            }
-          }
-        }}"> ${paramSchema.type === 'array' ? paramSchema.example.join(', ') : paramSchema.example} </a> ${paramSchema.type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr> `}`);
-      }
-
-      return (0, _lit.html)` <table role="presentation" style="width:100%" class="m-table"> ${formDataTableRows} </table> `;
-    }
-
-    return (0, _lit.html)` <textarea class="textarea dynamic-form-param ${mimeType}" part="textarea textarea-param" spellcheck="false" data-pname="dynamic-form" data-ptype="${mimeType}" style="width:100%">${exampleValue}</textarea> ${schema.description ? (0, _lit.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(schema.description))}</span>` : ''} `;
-  }
 
   apiResponseTabTemplate() {
     const responseFormat = this.responseHeaders.includes('json') ? 'json' : this.responseHeaders.includes('html') || this.responseHeaders.includes('xml') ? 'html' : '';
@@ -897,7 +833,7 @@ class ApiRequest extends _lit.LitElement {
 
     const newInputEl = document.createElement('input');
     newInputEl.type = 'file';
-    newInputEl.style = 'width:200px; margin-top:2px;';
+    newInputEl.setAttribute('class', 'file-input');
     newInputEl.setAttribute('data-pname', pname);
     newInputEl.setAttribute('data-ptype', ptype.includes('form-urlencode') ? 'form-urlencode' : 'form-data');
     newInputEl.setAttribute('data-array', 'false');

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

@@ -168,7 +168,7 @@ class ApiResponse extends _lit.LitElement {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
 
   responseHeaderListTemplate(respHeaders) {