openapi-explorer 1.0.571 → 1.0.577

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

@@ -2,6 +2,9 @@
 import { html } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { isPatternProperty } from '../utils/schema-utils';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
 
 function generateFormRows(data, options, dataType = 'object', key = '', description = '', schemaLevel = 0) {
   const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
@@ -45,6 +48,20 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 
 
   const parsedData = JSON.parse(data);
+  return generatePrimitiveRow.call(this, parsedData, {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  });
+}
+
+function generatePrimitiveRow(rowData, parentRecursionOptions) {
+  var _this$duplicatedRowsB;
+
   const {
     type,
     format,
@@ -57,13 +74,46 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     schemaDescription,
     schemaTitle,
     deprecated
-  } = parsedData;
+  } = rowData;
+  const {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  } = parentRecursionOptions;
 
   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 || constraints || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? html`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<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 elementId = this.elementId || `${this.method}-${this.path}`;
+  const duplicateRowGeneratorKey = `${elementId}-${key}`;
+
+  const rowGenerator = e => {
+    var _e$target$dataset, _e$target$dataset2;
+
+    if (((_e$target$dataset = e.target.dataset) === null || _e$target$dataset === void 0 ? void 0 : _e$target$dataset.ptype) !== 'pattern-property-key' && !isPatternProperty((_e$target$dataset2 = e.target.dataset) === null || _e$target$dataset2 === void 0 ? void 0 : _e$target$dataset2.pname)) {
+      return;
+    } // If the row key has a value then add another row
+
+
+    const patternPropertyKeyEls = [...this.querySelectorAll("[data-ptype='pattern-property-key']")];
+    const patternPropertyInputEls = [...this.querySelectorAll("[data-ptype='form-input']")].filter(el => isPatternProperty(el.dataset.pname)); // If there is still some row that either has an empty key or an empty value, then skip adding a new row
+
+    if (patternPropertyKeyEls.some((keyElement, index) => !keyElement.value || !patternPropertyInputEls[index].value)) {
+      return;
+    }
+
+    if (e.target.value) {
+      this.duplicatedRowsByKey[duplicateRowGeneratorKey] = (this.duplicatedRowsByKey[duplicateRowGeneratorKey] || 1) + 1;
+      this.requestUpdate();
+    }
+  };
+
+  return map(range(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => html` <tr> ${inputFieldKeyLabel.call(this, key.startsWith('::OPTION'), keyLabel, keyDescr, dataType, deprecated, isRequired, schemaTitle, format || type, rowGenerator)} ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(marked(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? html`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.split('┃').filter(v => v !== '').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}"]`);
 
     if (inputEl) {
@@ -75,7 +125,17 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     if (inputEl) {
       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>` : ''}`;
+  }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`);
+}
+
+function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprecated, isRequired, schemaTitle, format, rowGenerator) {
+  if (isPatternProperty(keyLabel)) {
+    return html` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> <input placeholder="${keyLabel}" @change="${e => {
+      rowGenerator(e);
+    }}" .value="${''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="pattern-property-key" data-pname="${keyLabel}" data-default="${''}" data-array="false"> </div></td>`;
+  }
+
+  return html` <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>` : isOption ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescription}</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}</span>]` : `${format}`} </div> </td>`;
 } // function getObjectFormField(keyLabel, example, defaultValue, format, options) {
 //   return html`
 //     <td>
@@ -86,30 +146,36 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 //             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-ptype = "form-input"
 //             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>
+//           <textarea data-pname = "hidden-${keyLabel}" data-ptype = "hidden-form-input" class="is-hidden" style="display:none" .value="${defaultValue}"></textarea>
 //         </div>
 //       </div>
 //     </td>`;
 // }
 
 
-function getArrayFormField(keyLabel, example, defaultValue, format, options) {
+function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator) {
   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"> <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, keyLabel)}"> <div class="input-set row"> <input @change="${e => {
+      rowGenerator(e);
+    }}" type="file" part="file-input" class="file-input" data-pname="${keyLabel}" data-ptype="form-input" 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>`;
+  return html`<td style="min-width:100px"> <tag-input @change="${e => {
+    rowGenerator(e);
+  }}" style="width:100%" data-ptype="form-input" 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>`;
+function getPrimitiveFormField(keyLabel, example, defaultValue, format, options, rowGenerator) {
+  return html`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @change="${e => {
+    rowGenerator(e);
+  }}" .value="${options.fillRequestWithDefault && defaultValue || ''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="form-input" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="false"> </td>`;
 }
 
 export default function getRequestFormTable(data, mimeType) {
@@ -117,5 +183,5 @@ export default function getRequestFormTable(data, mimeType) {
     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>`;
+  return html` <table id="request-form-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/utils/schema-utils.js

@@ -385,6 +385,10 @@ function getSimpleValueResult(schema, config, namespace, prefix, xmlAttributes,
   const value = getSampleValueByType(schema, config.propertyName, config.skipExampleStrings);
   return [value];
 }
+
+export function isPatternProperty(label) {
+  return label.match(/^<any-key>|<pattern:/);
+}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -394,7 +398,6 @@ function getSimpleValueResult(schema, config, namespace, prefix, xmlAttributes,
  * @param {string} suffix - used for suffixing property names to avoid duplicate props during object composition
  */
 
-
 export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
   if (!rawSchema) {
     return undefined;

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

@@ -43,6 +43,7 @@ class ApiRequest extends _lit.LitElement {
 
   constructor() {
     super();
+    this.duplicatedRowsByKey = {};
     this.storedParamValues = {};
     this.responseMessage = '';
     this.responseStatus = '';
@@ -160,6 +161,10 @@ class ApiRequest extends _lit.LitElement {
         attribute: 'fetch-credentials'
       },
       // properties for internal tracking
+      duplicatedRowsByKey: {
+        type: Object
+      },
+      // Tracking duplicated rows in form table
       activeResponseTab: {
         type: String
       },
@@ -183,13 +188,8 @@ class ApiRequest extends _lit.LitElement {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('elementId')) {
-      this.selectedRequestBodyType = '';
-      this.selectedRequestBodyExample = '';
-    } // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.
+    // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.
     // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
-
-
     if (this.renderStyle !== 'focused') {
       return;
     } // dont update example as only tabs is switched
@@ -432,7 +432,7 @@ class ApiRequest extends _lit.LitElement {
       }
     }
 
-    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 => {
+    return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _languages.getI18nText)('operations.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;
       }
@@ -499,7 +499,8 @@ class ApiRequest extends _lit.LitElement {
       }
     };
     this.dispatchEvent(new CustomEvent('event', event));
-  }
+  } // onExecuteButtonClicked
+
 
   async onTryClick() {
     const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
@@ -624,14 +625,19 @@ class ApiRequest extends _lit.LitElement {
         fetchOptions.headers.append(el.dataset.pname, el.value);
       }
     }); // Request Body Params
+    // url-encoded Form Params (dynamic) - Parse JSON and generate Params
+
+    const formUrlDynamicTextAreaEl = requestPanelEl.querySelector("[data-ptype='dynamic-form']"); // url-encoded Form Params (regular)
+
+    const rawFormInputEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-input']")];
+    const patternPropertyKeyEls = [...requestPanelEl.querySelectorAll("[data-ptype='pattern-property-key']")];
+    const patternPropertyInputEls = rawFormInputEls.filter(el => (0, _schemaUtils.isPatternProperty)(el.dataset.pname));
+    const formInputEls = rawFormInputEls.filter(el => !(0, _schemaUtils.isPatternProperty)(el.dataset.pname));
 
     if (requestBodyContainerEl) {
       const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
 
       if (requestBodyType.includes('form-urlencoded')) {
-        // url-encoded Form Params (dynamic) - Parse JSON and generate Params
-        const formUrlDynamicTextAreaEl = requestPanelEl.querySelector("[data-ptype='dynamic-form']");
-
         if (formUrlDynamicTextAreaEl) {
           const val = formUrlDynamicTextAreaEl.value;
           const formUrlDynParams = new URLSearchParams();
@@ -658,17 +664,23 @@ class ApiRequest extends _lit.LitElement {
             curlData = ` \\\n  -d ${formUrlDynParams.toString()}`;
           }
         } else {
-          // url-encoded Form Params (regular)
-          const formUrlEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-urlencode']")];
           const formUrlParams = new URLSearchParams();
-          formUrlEls.filter(v => v.type !== 'file').forEach(el => {
+          patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {
+            var _patternPropertyKeyEl;
+
+            const keyName = ((_patternPropertyKeyEl = patternPropertyKeyEls[counter]) === null || _patternPropertyKeyEl === void 0 ? void 0 : _patternPropertyKeyEl.value) || el.dataset.pname;
+
+            if (el.type === 'file') {
+              return;
+            }
+
             if (el.dataset.array === 'false') {
               if (el.value) {
-                formUrlParams.append(el.dataset.pname, el.value);
+                formUrlParams.append(keyName, el.value);
               }
             } else {
               const vals = el.value && Array.isArray(el.value) ? el.value.join(',') : '';
-              formUrlParams.append(el.dataset.pname, vals);
+              formUrlParams.append(keyName, vals);
             }
           });
           fetchOptions.body = formUrlParams;
@@ -676,21 +688,24 @@ class ApiRequest extends _lit.LitElement {
         }
       } else if (requestBodyType.includes('form-data')) {
         const formDataParams = new FormData();
-        const formDataEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-data']")];
-        formDataEls.forEach(el => {
+        patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {
+          var _patternPropertyKeyEl2;
+
+          const keyName = ((_patternPropertyKeyEl2 = patternPropertyKeyEls[counter]) === null || _patternPropertyKeyEl2 === void 0 ? void 0 : _patternPropertyKeyEl2.value) || el.dataset.pname;
+
           if (el.dataset.array === 'false') {
             if (el.type === 'file' && el.files[0]) {
-              formDataParams.append(el.dataset.pname, el.files[0], el.files[0].name);
-              curlForm += ` \\\n  -F "${el.dataset.pname}=@${el.files[0].name}"`;
+              formDataParams.append(keyName, el.files[0], el.files[0].name);
+              curlForm += ` \\\n  -F "${keyName}=@${el.files[0].name}"`;
             } else if (el.value) {
-              formDataParams.append(el.dataset.pname, el.value);
-              curlForm += ` \\\n  -F "${el.dataset.pname}=${el.value}"`;
+              formDataParams.append(keyName, el.value);
+              curlForm += ` \\\n  -F "${keyName}=${el.value}"`;
             }
           } else if (el.value && Array.isArray(el.value)) {
             el.value.forEach(v => {
-              curlForm += ` \\\n  -F "${el.dataset.pname}[]=${v}"`;
+              curlForm += ` \\\n  -F "${keyName}[]=${v}"`;
             });
-            formDataParams.append(el.dataset.pname, el.value.join(','));
+            formDataParams.append(keyName, el.value.join(','));
           }
         });
         fetchOptions.body = formDataParams;
@@ -886,7 +901,7 @@ class ApiRequest extends _lit.LitElement {
     }
   }
 
-  onAddRemoveFileInput(e, pname, ptype) {
+  onAddRemoveFileInput(e, pname) {
     if (e.target.tagName.toLowerCase() !== 'button') {
       return;
     }
@@ -908,7 +923,7 @@ class ApiRequest extends _lit.LitElement {
     newInputEl.type = 'file';
     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-ptype', 'form-input');
     newInputEl.setAttribute('data-array', 'false');
     newInputEl.setAttribute('data-file-array', 'true'); // Remover Button
 

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

@@ -9,6 +9,12 @@ var _marked = require("marked");
 
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
 
+var _schemaUtils = require("../utils/schema-utils");
+
+var _map = require("lit/directives/map.js");
+
+var _range = require("lit/directives/range.js");
+
 /* eslint-disable indent */
 function generateFormRows(data, options, dataType = 'object', key = '', description = '', schemaLevel = 0) {
   const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
@@ -52,6 +58,20 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 
 
   const parsedData = JSON.parse(data);
+  return generatePrimitiveRow.call(this, parsedData, {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  });
+}
+
+function generatePrimitiveRow(rowData, parentRecursionOptions) {
+  var _this$duplicatedRowsB;
+
   const {
     type,
     format,
@@ -64,13 +84,46 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     schemaDescription,
     schemaTitle,
     deprecated
-  } = parsedData;
+  } = rowData;
+  const {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  } = parentRecursionOptions;
 
   if (readOrWriteOnly === '🆁') {
     return undefined;
   }
 
-  return (0, _lit.html)` <tr> <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? (0, _lit.html)`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? (0, _lit.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 ? (0, _lit.html)`<div class="param-description">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? (0, _lit.html)` <div class="param-constraint"> ${pattern ? (0, _lit.html)`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : 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" data-type="${type === 'array' ? type : 'string'}" data-enum="${v.trim()}" @click="${e => {
+  const elementId = this.elementId || `${this.method}-${this.path}`;
+  const duplicateRowGeneratorKey = `${elementId}-${key}`;
+
+  const rowGenerator = e => {
+    var _e$target$dataset, _e$target$dataset2;
+
+    if (((_e$target$dataset = e.target.dataset) === null || _e$target$dataset === void 0 ? void 0 : _e$target$dataset.ptype) !== 'pattern-property-key' && !(0, _schemaUtils.isPatternProperty)((_e$target$dataset2 = e.target.dataset) === null || _e$target$dataset2 === void 0 ? void 0 : _e$target$dataset2.pname)) {
+      return;
+    } // If the row key has a value then add another row
+
+
+    const patternPropertyKeyEls = [...this.querySelectorAll("[data-ptype='pattern-property-key']")];
+    const patternPropertyInputEls = [...this.querySelectorAll("[data-ptype='form-input']")].filter(el => (0, _schemaUtils.isPatternProperty)(el.dataset.pname)); // If there is still some row that either has an empty key or an empty value, then skip adding a new row
+
+    if (patternPropertyKeyEls.some((keyElement, index) => !keyElement.value || !patternPropertyInputEls[index].value)) {
+      return;
+    }
+
+    if (e.target.value) {
+      this.duplicatedRowsByKey[duplicateRowGeneratorKey] = (this.duplicatedRowsByKey[duplicateRowGeneratorKey] || 1) + 1;
+      this.requestUpdate();
+    }
+  };
+
+  return (0, _map.map)((0, _range.range)(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => (0, _lit.html)` <tr> ${inputFieldKeyLabel.call(this, key.startsWith('::OPTION'), keyLabel, keyDescr, dataType, deprecated, isRequired, schemaTitle, format || type, rowGenerator)} ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''} <td> ${description ? (0, _lit.html)`<div class="param-description">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? (0, _lit.html)` <div class="param-constraint"> ${pattern ? (0, _lit.html)`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.split('┃').filter(v => v !== '').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" data-type="${type === 'array' ? type : 'string'}" data-enum="${v.trim()}" @click="${e => {
     const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
 
     if (inputEl) {
@@ -82,7 +135,17 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     if (inputEl) {
       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>` : ''}`;
+  }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`);
+}
+
+function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprecated, isRequired, schemaTitle, format, rowGenerator) {
+  if ((0, _schemaUtils.isPatternProperty)(keyLabel)) {
+    return (0, _lit.html)` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> <input placeholder="${keyLabel}" @change="${e => {
+      rowGenerator(e);
+    }}" .value="${''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="pattern-property-key" data-pname="${keyLabel}" data-default="${''}" data-array="false"> </div></td>`;
+  }
+
+  return (0, _lit.html)` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? (0, _lit.html)`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : isOption ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescription}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? (0, _lit.html)`[<span>${format}</span>]` : `${format}`} </div> </td>`;
 } // function getObjectFormField(keyLabel, example, defaultValue, format, options) {
 //   return html`
 //     <td>
@@ -93,30 +156,36 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 //             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-ptype = "form-input"
 //             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>
+//           <textarea data-pname = "hidden-${keyLabel}" data-ptype = "hidden-form-input" class="is-hidden" style="display:none" .value="${defaultValue}"></textarea>
 //         </div>
 //       </div>
 //     </td>`;
 // }
 
 
-function getArrayFormField(keyLabel, example, defaultValue, format, options) {
+function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator) {
   if (format === 'binary') {
-    return (0, _lit.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 (0, _lit.html)`<td style="min-width:100px"> <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, keyLabel)}"> <div class="input-set row"> <input @change="${e => {
+      rowGenerator(e);
+    }}" type="file" part="file-input" class="file-input" data-pname="${keyLabel}" data-ptype="form-input" 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 (0, _lit.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>`;
+  return (0, _lit.html)`<td style="min-width:100px"> <tag-input @change="${e => {
+    rowGenerator(e);
+  }}" style="width:100%" data-ptype="form-input" 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 (0, _lit.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>`;
+function getPrimitiveFormField(keyLabel, example, defaultValue, format, options, rowGenerator) {
+  return (0, _lit.html)`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @change="${e => {
+    rowGenerator(e);
+  }}" .value="${options.fillRequestWithDefault && defaultValue || ''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="form-input" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="false"> </td>`;
 }
 
 function getRequestFormTable(data, mimeType) {
@@ -124,5 +193,5 @@ function getRequestFormTable(data, mimeType) {
     mimeType: mimeType,
     fillRequestWithDefault: this.fillRequestWithDefault === 'true'
   };
-  return (0, _lit.html)` <table role="presentation" class="request-form-table" style="border:1px solid var(--light-border-color);width:100%"> ${data ? (0, _lit.html)`${generateFormRows.call(this, data['::type'] === 'array' ? data['::props'] : data, options, data['::type'])}` : ''} </table>`;
+  return (0, _lit.html)` <table id="request-form-table" role="presentation" class="request-form-table" style="border:1px solid var(--light-border-color);width:100%"> ${data ? (0, _lit.html)`${generateFormRows.call(this, data['::type'] === 'array' ? data['::props'] : data, options, data['::type'])}` : ''} </table>`;
 }

package/dist/lib/utils/schema-utils.js

@@ -5,6 +5,7 @@ exports.generateExample = generateExample;
 exports.getExampleValuesFromSchema = getExampleValuesFromSchema;
 exports.getSampleValueByType = getSampleValueByType;
 exports.getTypeInfo = getTypeInfo;
+exports.isPatternProperty = isPatternProperty;
 exports.schemaInObjectNotation = schemaInObjectNotation;
 
 var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
@@ -402,6 +403,10 @@ function getSimpleValueResult(schema, config, namespace, prefix, xmlAttributes,
   const value = getSampleValueByType(schema, config.propertyName, config.skipExampleStrings);
   return [value];
 }
+
+function isPatternProperty(label) {
+  return label.match(/^<any-key>|<pattern:/);
+}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "1.0.571",
+  "version": "1.0.577",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "type": "module",