openapi-explorer 2.1.654 → 2.1.658

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

@@ -22,7 +22,6 @@ export default class ApiResponse extends LitElement {
     this.mimeResponsesForEachStatus = {};
     this.activeSchemaTab = 'model';
   }
-
   static get properties() {
     return {
       callback: {
@@ -37,11 +36,9 @@ export default class ApiResponse extends LitElement {
       includeNulls: {
         type: Boolean,
         attribute: 'display-nulls',
-
         converter(value) {
           return value === 'true';
         }
-
       },
       schemaStyle: {
         type: String,
@@ -73,46 +70,37 @@ export default class ApiResponse extends LitElement {
       }
     };
   }
-
   static finalizeStyles() {
     return [SchemaStyles, FontStyles, FlexStyles, TabStyles, TableStyles, InputStyles, BorderStyles, PrismStyles, css`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:var(--bg2,#333);color:var(--fg,#fff)}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
   }
-
   render() {
     return html` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : getI18nText('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
   }
-
   resetSelection() {
     this.selectedStatus = '';
     this.selectedMimeType = '';
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   responseTemplate() {
     if (!this.responses) {
       return '';
     }
-
     for (const statusCode in this.responses) {
       if (!this.selectedStatus) {
         this.selectedStatus = statusCode;
       }
-
       const allMimeResp = {};
-
       for (const mimeResp in this.responses[statusCode] && this.responses[statusCode].content) {
         const mimeRespObj = this.responses[statusCode].content[mimeResp];
-
         if (!this.selectedMimeType) {
           this.selectedMimeType = mimeResp;
-        } // Generate Schema
-
-
+        }
+        // Generate Schema
         const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {
           includeNulls: this.includeNulls
-        }); // Generate Example
-
+        });
+        // Generate Example
         const respExamples = generateExample(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
         allMimeResp[mimeResp] = {
           description: this.responses[statusCode].description,
@@ -120,26 +108,21 @@ export default class ApiResponse extends LitElement {
           selectedExample: respExamples[0] && respExamples[0].exampleId || '',
           schemaTree
         };
-      } // Headers for each response status
-
-
+      }
+      // Headers for each response status
       const tempHeaders = [];
-
       for (const key in this.responses[statusCode] && this.responses[statusCode].headers) {
         tempHeaders.push({
           name: key,
           ...this.responses[statusCode].headers[key]
         });
       }
-
       this.headersForEachRespStatus[statusCode] = tempHeaders;
       this.mimeResponsesForEachStatus[statusCode] = allMimeResp;
     }
-
     return html`<div class="row" style="flex-wrap:wrap"> ${Object.keys(this.responses).map(respStatus => html` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
     ? '' : html` <button @click="${() => {
       this.selectedStatus = respStatus;
-
       if (this.responses[respStatus].content && Object.keys(this.responses[respStatus].content)[0]) {
         this.selectedMimeType = Object.keys(this.responses[respStatus].content)[0];
       } else {
@@ -151,20 +134,17 @@ export default class ApiResponse extends LitElement {
       }
     }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${getI18nText('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${getI18nText('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? html`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? html`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : html`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
-
   responseHeaderListTemplate(respHeaders) {
     return html` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${getI18nText('operations.response-headers')}</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => {
       const typeData = getTypeInfo(v.schema);
       return html` <tr> <td style="padding:8px;vertical-align:baseline;min-width:160px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td class="${(typeData === null || typeData === void 0 ? void 0 : typeData.cssType) || ''}" style="padding:4px;vertical-align:baseline;min-width:100px;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.format) || (typeData === null || typeData === void 0 ? void 0 : typeData.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${unsafeHTML(marked(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.example) || ''} </td> </tr> `;
     })} </table>`;
   }
-
   mimeTypeDropdownTemplate(mimeTypes) {
     return html` <select aria-label="mime type" @change="${e => {
       this.selectedMimeType = e.target.value;
     }}" style="margin-bottom:-1px;z-index:1"> ${mimeTypes.map(mimeType => html`<option value="${mimeType}" ?selected="${mimeType === this.selectedMimeType}"> ${mimeType} </option>`)} </select>`;
   }
-
   onSelectExample(e) {
     const exampleContainerEl = e.target.closest('.example-panel');
     const exampleEls = [...exampleContainerEl.querySelectorAll('.example')];
@@ -172,27 +152,22 @@ export default class ApiResponse extends LitElement {
       v.style.display = v.dataset.example === e.target.value ? 'block' : 'none';
     });
   }
-
   mimeExampleTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
       return html` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
-
     return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} <syntax-highlighter class="example-panel generic-tree border-top pad-top-8" mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}">` : html` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => html` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
   }
-
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
       return html` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
     }
-
     return html` ${this.schemaStyle === 'table' ? html` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : html` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
   }
   /* eslint-enable indent */
+}
 
-
-} // Register the element with the browser
-
+// Register the element with the browser
 if (!customElements.get('openapi-explorer')) {
   customElements.define('api-response', ApiResponse);
 }

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

@@ -15,68 +15,54 @@ export default class JsonTree extends LitElement {
       }
     };
   }
+
   /**
    * @param {Map<string, object>} changedProperties Changed Properties
    */
-
-
   update(changedProperties) {
     if (changedProperties.has('data')) {
       this.interactive = false;
     }
-
     super.update(changedProperties);
   }
-
   updated() {
     this.interactive = true; // Note: interactive is not a reactive property
   }
-
   static finalizeStyles() {
     return [FontStyles, BorderStyles, InputStyles, KeyFrameStyles, css`:host{display:flex}.json-tree{background:var(--bg2);padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.open-bracket:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.open-bracket.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.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}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   render() {
     return html` <div class="json-tree tree ${this.interactive ? 'interactive' : ''}"> ${this.generateTree(this.data, true)} </div> `;
   }
-
   generateTree(data, isLast = false) {
     if (data === null) {
       return html`<div class="null" style="display:inline">null</div>`;
     }
-
     if (typeof data === 'object' && data instanceof Date === false) {
       const detailType = Array.isArray(data) ? 'array' : 'pure_object';
-
       if (Object.keys(data).length === 0) {
         return html`${Array.isArray(data) ? '[ ],' : '{ },'}`;
       }
-
       return html` <div class="open-bracket ${detailType === 'array' ? 'array' : 'object'}" @click="${this.toggleExpand}"> ${detailType === 'array' ? '[' : '{'}</div> <div class="inside-bracket-wrapper"> <div class="inside-bracket"> ${Object.keys(data).map((key, i, a) => html` <div class="item"> ${detailType === 'pure_object' ? html`"${key}":` : ''} ${this.generateTree(data[key], i === a.length - 1)} </div>`)} </div> <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div> </div> `;
     }
-
     return typeof data === 'string' || data instanceof Date ? html`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}` : html`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
   }
   /* eslint-enable indent */
 
-
   toggleExpand(e) {
     const openBracketEl = e.target;
     openBracketEl.classList.toggle('collapsed');
-
     if (openBracketEl.classList.contains('collapsed')) {
       e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
     } else {
       e.target.innerHTML = e.target.classList.contains('array') ? '[' : '{';
     }
-
     this.requestUpdate();
   }
-
-} // Register the element with the browser
-
+}
+// Register the element with the browser
 if (!customElements.get('openapi-explorer')) {
   customElements.define('json-tree', JsonTree);
 }

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

@@ -5,22 +5,17 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { isPatternProperty } from '../utils/schema-utils.js';
 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;
-
   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;
@@ -31,22 +26,21 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
   } 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 ${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 requiredStar" style="display:inline-block" title="Required">${keyLabel}</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 => !['::metadata', '::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
-
+    return html` ${newSchemaLevel >= 0 && key ? html` <tr class="complex-object-display ${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 requiredStar" style="display:inline-block" title="Required">${keyLabel}</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 => {
+      var _data$dataKey;
+      return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? 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);
   return generatePrimitiveRow.call(this, parsedData, {
     key,
@@ -58,10 +52,8 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     options
   });
 }
-
 function generatePrimitiveRow(rowData, parentRecursionOptions) {
   var _this$duplicatedRowsB;
-
   const {
     type,
     format,
@@ -84,54 +76,42 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
     isRequired,
     options
   } = parentRecursionOptions;
-
   if (readOrWriteOnly === '🆁') {
     return undefined;
   }
-
   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
-
-
+    }
+    // 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
-
+    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) {
       inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
     }
-
     this.computeCurlSyntax();
   }}"> ${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}"]`);
-
     if (inputEl) {
       inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
     }
-
     this.computeCurlSyntax();
   }}"> ${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}" @input="${e => {
@@ -139,9 +119,10 @@ function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprec
       this.computeCurlSyntax();
     }}" .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) {
+}
+
+// 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;">
@@ -164,7 +145,6 @@ function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprec
 //     </td>`;
 // }
 
-
 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)}"> <div class="input-set row"> <input @input="${e => {
@@ -172,20 +152,17 @@ function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator
       this.computeCurlSyntax();
     }}" 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 @change="${e => {
     rowGenerator(e);
     this.computeCurlSyntax();
   }}" 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, rowGenerator) {
   return html`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @input="${e => {
     rowGenerator(e);
     this.computeCurlSyntax();
   }}" .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) {
   const options = {
     mimeType: mimeType,

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

@@ -26,69 +26,63 @@ export default class SchemaTable extends LitElement {
       }
     };
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
       this.schemaExpandLevel = 99999;
     }
-
     if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) {
       this.schemaHideReadOnly = 'true';
     }
-
     if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) {
       this.schemaHideWriteOnly = 'true';
     }
   }
+
   /**
    * @param {Map<string, object>} changedProperties Changed Properties
    */
-
-
   update(changedProperties) {
     if (changedProperties.has('data')) {
       this.interactive = false;
     }
-
     super.update(changedProperties);
   }
-
   updated() {
     this.interactive = true; // Note: interactive is not a reactive property
   }
-
   static finalizeStyles() {
     return [FontStyles, KeyFrameStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}`];
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   render() {
-    return html` ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : ''} <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    var _this$data, _this$data2;
+    const displayLine = [(_this$data = this.data) === null || _this$data === void 0 ? void 0 : _this$data['::title'], (_this$data2 = this.data) === null || _this$data2 === void 0 ? void 0 : _this$data2['::description']].filter(d => d).join(' - ');
+    return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(marked(displayLine))}</span>` : ''} <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+  }
+  scrollToSchemaComponentByName(componentName) {
+    this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
+      bubbles: true,
+      composed: true,
+      detail: componentName
+    }));
   }
-
   generateTree(data, dataType = 'object', key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
     var _keyLabel;
-
     const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
-    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : indentLevel + 1; // 16px space indentation at each level, start the first one at 32px to align with the field hr key row object
-
+    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : indentLevel + 1;
+    // 16px space indentation at each level, start the first one at 32px to align with the field hr key row object
     const leftPadding = Math.max(firstColumnInitialPadding, tablePadding * newIndentLevel);
-
     if (!data) {
       return html`<div class="null" style="display:inline">null</div>`;
     }
-
     if (Object.keys(data).length === 0) {
       return html`<span class="td key object" style="padding-left:${leftPadding}px">${key}</span>`;
     }
-
     let keyLabel = '';
     let keyDescr = '';
     let isOneOfLabel = false;
-
     if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
       keyLabel = key.replace('::', '').replace('~', ' ');
       isOneOfLabel = true;
@@ -99,43 +93,41 @@ export default class SchemaTable extends LitElement {
     } else {
       keyLabel = key;
     }
-
     let detailObjType = '';
-
+    let displaySchemaLink = false;
     if ((data['::type'] || '').includes('xxx-of')) {
       detailObjType = '';
-    } else if (data['::type'] === 'object') {
-      if (dataType === 'array') {
-        detailObjType = `[${keyLabel.replace(/(s|Collection|List)[*]?$/i, '')}]`; // Array of Object
-      } else {
-        detailObjType = 'object'; // Object
-      }
     } else if (data['::type'] === 'array') {
       if (dataType === 'array') {
         detailObjType = 'array of array'; // Array of array
       } else {
         detailObjType = 'array';
       }
+    } else if (data['::type']) {
+      displaySchemaLink = data['::link'];
+      if (dataType === 'array') {
+        detailObjType = `[${data['::link']}]`; // Array of Object
+      } else {
+        detailObjType = data['::link'] || data['::type'];
+      }
     }
-
     if (typeof data === 'object') {
       var _data$Metadata, _data$Metadata$constr;
-
       const flags = data['::flags'] || {};
-
       if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
         return undefined;
       }
-
       if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
         return undefined;
       }
-
       const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> <div>${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr"> <span class="m-markdown-small">${unsafeHTML(marked(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => !['::metadata', '::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} <div> </div></div>`;
-    } // For Primitive Data types
-
+      return html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}">${detailObjType}</div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr"> <span class="m-markdown-small">${unsafeHTML(marked(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => {
+        var _data$dataKey;
+        return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
+      })}`} <div> </div></div>`;
+    }
 
+    // For Primitive Data types
     const {
       type,
       cssType,
@@ -150,27 +142,21 @@ export default class SchemaTable extends LitElement {
       schemaTitle,
       deprecated
     } = JSON.parse(data);
-
     if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
       return undefined;
     }
-
     if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
       return undefined;
     }
-
     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 requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</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"> <span class="m-markdown-small" style="vertical-align:middle"> ${unsafeHTML(marked(`${`${schemaTitle || title ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))} </span> ${constraints.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</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 */
 
-
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
     rowEl.classList.toggle('collapsed');
   }
-
 }
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('schema-table', SchemaTable);
 }