openapi-explorer 2.1.658 → 2.1.660

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

@@ -198,8 +198,9 @@ export default class ApiRequest extends LitElement {
       if (!param.schema) {
         continue;
       }
-      const paramSchema = getTypeInfo(param.schema, {
-        includeNulls: this.includeNulls
+      const paramSchema = getTypeInfo(param, {
+        includeNulls: this.includeNulls,
+        enableExampleGeneration: true
       });
       if (!paramSchema) {
         continue;
@@ -254,7 +255,7 @@ export default class ApiRequest extends LitElement {
 
   exampleListTemplate(param, paramType) {
     const paramName = param.name;
-    const paramSchema = getTypeInfo(param.schema, {
+    const paramSchema = getTypeInfo(param, {
       includeNulls: this.includeNulls
     });
     const examples = generateExample(param.examples || param.example && {
@@ -355,7 +356,7 @@ export default class ApiRequest extends LitElement {
         this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
       }
       const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
-      reqBodyDefaultHtml = html` <div class="example-panel border-top pad-top-8"> ${reqBodyExamples.length === 1 ? '' : 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 => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
+      reqBodyDefaultHtml = html` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : 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 => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
         this.computeCurlSyntax();
       }}" 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')) {

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

@@ -136,8 +136,10 @@ export default class ApiResponse extends LitElement {
   }
   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> `;
+      const typeData = getTypeInfo(v, {
+        enableExampleGeneration: true
+      });
+      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) || (typeData === null || typeData === void 0 ? void 0 : typeData.default) || ''} </td> </tr> `;
     })} </table>`;
   }
   mimeTypeDropdownTemplate(mimeTypes) {
@@ -156,7 +158,7 @@ export default class ApiResponse extends LitElement {
     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> `} `;
+    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 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) {

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

@@ -106,7 +106,7 @@ export default class SchemaTable extends LitElement {
     } else if (data['::type']) {
       displaySchemaLink = data['::link'];
       if (dataType === 'array') {
-        detailObjType = `[${data['::link']}]`; // Array of Object
+        detailObjType = data['::link'] || keyLabel.replace(/(s|Collection|List)[*]?$/i, ''); // Array of Object
       } else {
         detailObjType = data['::link'] || data['::type'];
       }
@@ -121,7 +121,7 @@ export default class SchemaTable extends LitElement {
         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"> ${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 => {
+      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)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--primary)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </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>`;

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

@@ -8,13 +8,15 @@ const IS_MISSING_TYPE_INFO_TYPE = '';
 const EXAMPLE_VALUE_FOR_MISSING_TYPE = '';
 
 /* Generates an schema object containing type and constraint info */
-export function getTypeInfo(schema, options = {
-  includeNulls: false
+export function getTypeInfo(parameter, options = {
+  includeNulls: false,
+  enableExampleGeneration: false
 }) {
   var _schema$items, _schema$const;
-  if (!schema) {
+  if (!parameter) {
     return undefined;
   }
+  const schema = Object.assign({}, parameter, parameter.schema);
   let dataType = IS_MISSING_TYPE_INFO_TYPE;
   let format = schema.format || ((_schema$items = schema.items) === null || _schema$items === void 0 ? void 0 : _schema$items.format) || '';
   if (schema.circularReference) {
@@ -32,6 +34,7 @@ export function getTypeInfo(schema, options = {
       format += '┃null';
     }
   }
+  const examples = schema.examples || schema.example || (options === null || options === void 0 ? void 0 : options.enableExampleGeneration) && getSampleValueByType(schema, null) || '';
   const info = {
     type: dataType,
     format,
@@ -39,7 +42,7 @@ export function getTypeInfo(schema, options = {
     pattern: schema.pattern && !schema.enum ? schema.pattern.replace(/(^\^)|(\$$)/g, '') : '',
     readOrWriteOnly: schema.readOnly && '🆁' || schema.writeOnly && '🆆' || '',
     deprecated: !!schema.deprecated,
-    example: Array.isArray(schema.example) ? schema.example : typeof schema.example !== 'undefined' ? `${schema.example}` : '',
+    example: examples || '',
     default: schema.default || '',
     title: schema.title || '',
     description: schema.description || '',
@@ -411,7 +414,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
     if (Object.keys(objWithAnyOfProps).length) {
       resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     }
-    resultObj['::link'] = schema.title;
+    resultObj['::link'] = schema.title || '';
     resultObj['::type'] = schema.title || 'object';
     resultObj['::flags'] = {
       '🆁': readOnly && '🆁',
@@ -454,7 +457,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       }
     }
     if (complexTypes.length > 0) {
-      obj['::link'] = schema.title;
+      obj['::link'] = schema.title || '';
       obj['::type'] = 'object';
       const multiTypeOptions = {
         '::type': 'xxx-of-option'
@@ -477,7 +480,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
               '🆁': schema.readOnly && '🆁',
               '🆆': schema.writeOnly && '🆆'
             },
-            '::link': schema.title,
+            '::link': schema.title || '',
             '::type': schema.title || 'object',
             '::deprecated': schema.deprecated || false,
             '::metadata': metadata
@@ -499,7 +502,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
               '🆁': schema.readOnly && '🆁',
               '🆆': schema.writeOnly && '🆆'
             },
-            '::link': arrayItemsSchema.title || schema.title,
+            '::link': arrayItemsSchema.title || schema.title || '',
             '::type': 'array',
             // Array properties are read from the ::props object instead of reading from the keys of this object
             // '::props': schemaInObjectNotation(Object.assign({ deprecated: schema.deprecated, readOnly: schema.readOnly, writeOnly: schema.writeOnly }, arrayItemsSchema), options, (level + 1)),
@@ -523,7 +526,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       '🆁': schema.readOnly && '🆁',
       '🆆': schema.writeOnly && '🆆'
     };
-    obj['::link'] = schema.title;
+    obj['::link'] = schema.title || '';
     obj['::type'] = schema.title || 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;
@@ -553,7 +556,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       '🆁': schema.readOnly && '🆁',
       '🆆': schema.writeOnly && '🆆'
     };
-    obj['::link'] = arrayItemsSchema.title || schema.title;
+    obj['::link'] = arrayItemsSchema.title || schema.title || '';
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;

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

@@ -203,8 +203,9 @@ class ApiRequest extends _lit.LitElement {
       if (!param.schema) {
         continue;
       }
-      const paramSchema = (0, _schemaUtils.getTypeInfo)(param.schema, {
-        includeNulls: this.includeNulls
+      const paramSchema = (0, _schemaUtils.getTypeInfo)(param, {
+        includeNulls: this.includeNulls,
+        enableExampleGeneration: true
       });
       if (!paramSchema) {
         continue;
@@ -259,7 +260,7 @@ class ApiRequest extends _lit.LitElement {
 
   exampleListTemplate(param, paramType) {
     const paramName = param.name;
-    const paramSchema = (0, _schemaUtils.getTypeInfo)(param.schema, {
+    const paramSchema = (0, _schemaUtils.getTypeInfo)(param, {
       includeNulls: this.includeNulls
     });
     const examples = (0, _schemaUtils.generateExample)(param.examples || param.example && {
@@ -360,7 +361,7 @@ class ApiRequest extends _lit.LitElement {
         this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
       }
       const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
-      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>`} ${displayedBodyExample ? (0, _lit.html)` <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 @input="${() => {
+      reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel 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>`} ${displayedBodyExample ? (0, _lit.html)` <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 @input="${() => {
         this.computeCurlSyntax();
       }}" 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')) {

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

@@ -141,8 +141,10 @@ class ApiResponse extends _lit.LitElement {
   }
   responseHeaderListTemplate(respHeaders) {
     return (0, _lit.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _index.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 = (0, _schemaUtils.getTypeInfo)(v.schema);
-      return (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _marked.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> `;
+      const typeData = (0, _schemaUtils.getTypeInfo)(v, {
+        enableExampleGeneration: true
+      });
+      return (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _marked.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) || (typeData === null || typeData === void 0 ? void 0 : typeData.default) || ''} </td> </tr> `;
     })} </table>`;
   }
   mimeTypeDropdownTemplate(mimeTypes) {
@@ -161,7 +163,7 @@ class ApiResponse extends _lit.LitElement {
     if (!mimeRespDetails) {
       return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
-    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.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}">` : (0, _lit.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 => (0, _lit.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 => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
+    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} <syntax-highlighter class="example-panel generic-tree pad-top-8" mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}">` : (0, _lit.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 => (0, _lit.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 => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
   }
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {

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

@@ -111,7 +111,7 @@ class SchemaTable extends _lit.LitElement {
     } else if (data['::type']) {
       displaySchemaLink = data['::link'];
       if (dataType === 'array') {
-        detailObjType = `[${data['::link']}]`; // Array of Object
+        detailObjType = data['::link'] || keyLabel.replace(/(s|Collection|List)[*]?$/i, ''); // Array of Object
       } else {
         detailObjType = data['::link'] || data['::type'];
       }
@@ -126,7 +126,7 @@ class SchemaTable extends _lit.LitElement {
         return undefined;
       }
       const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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 ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}">${detailObjType}</div>` : (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _marked.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 ? (0, _lit.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>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => {
+      return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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 ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--primary)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </div>` : (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _marked.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 ? (0, _lit.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>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (0, _lit.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') ? (0, _lit.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>`;

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

@@ -17,13 +17,15 @@ const IS_MISSING_TYPE_INFO_TYPE = '';
 const EXAMPLE_VALUE_FOR_MISSING_TYPE = '';
 
 /* Generates an schema object containing type and constraint info */
-function getTypeInfo(schema, options = {
-  includeNulls: false
+function getTypeInfo(parameter, options = {
+  includeNulls: false,
+  enableExampleGeneration: false
 }) {
   var _schema$items, _schema$const;
-  if (!schema) {
+  if (!parameter) {
     return undefined;
   }
+  const schema = Object.assign({}, parameter, parameter.schema);
   let dataType = IS_MISSING_TYPE_INFO_TYPE;
   let format = schema.format || ((_schema$items = schema.items) === null || _schema$items === void 0 ? void 0 : _schema$items.format) || '';
   if (schema.circularReference) {
@@ -41,6 +43,7 @@ function getTypeInfo(schema, options = {
       format += '┃null';
     }
   }
+  const examples = schema.examples || schema.example || (options === null || options === void 0 ? void 0 : options.enableExampleGeneration) && getSampleValueByType(schema, null) || '';
   const info = {
     type: dataType,
     format,
@@ -48,7 +51,7 @@ function getTypeInfo(schema, options = {
     pattern: schema.pattern && !schema.enum ? schema.pattern.replace(/(^\^)|(\$$)/g, '') : '',
     readOrWriteOnly: schema.readOnly && '🆁' || schema.writeOnly && '🆆' || '',
     deprecated: !!schema.deprecated,
-    example: Array.isArray(schema.example) ? schema.example : typeof schema.example !== 'undefined' ? `${schema.example}` : '',
+    example: examples || '',
     default: schema.default || '',
     title: schema.title || '',
     description: schema.description || '',
@@ -420,7 +423,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
     if (Object.keys(objWithAnyOfProps).length) {
       resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     }
-    resultObj['::link'] = schema.title;
+    resultObj['::link'] = schema.title || '';
     resultObj['::type'] = schema.title || 'object';
     resultObj['::flags'] = {
       '🆁': readOnly && '🆁',
@@ -463,7 +466,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       }
     }
     if (complexTypes.length > 0) {
-      obj['::link'] = schema.title;
+      obj['::link'] = schema.title || '';
       obj['::type'] = 'object';
       const multiTypeOptions = {
         '::type': 'xxx-of-option'
@@ -486,7 +489,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
               '🆁': schema.readOnly && '🆁',
               '🆆': schema.writeOnly && '🆆'
             },
-            '::link': schema.title,
+            '::link': schema.title || '',
             '::type': schema.title || 'object',
             '::deprecated': schema.deprecated || false,
             '::metadata': metadata
@@ -508,7 +511,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
               '🆁': schema.readOnly && '🆁',
               '🆆': schema.writeOnly && '🆆'
             },
-            '::link': arrayItemsSchema.title || schema.title,
+            '::link': arrayItemsSchema.title || schema.title || '',
             '::type': 'array',
             // Array properties are read from the ::props object instead of reading from the keys of this object
             // '::props': schemaInObjectNotation(Object.assign({ deprecated: schema.deprecated, readOnly: schema.readOnly, writeOnly: schema.writeOnly }, arrayItemsSchema), options, (level + 1)),
@@ -532,7 +535,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       '🆁': schema.readOnly && '🆁',
       '🆆': schema.writeOnly && '🆆'
     };
-    obj['::link'] = schema.title;
+    obj['::link'] = schema.title || '';
     obj['::type'] = schema.title || 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;
@@ -562,7 +565,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       '🆁': schema.readOnly && '🆁',
       '🆆': schema.writeOnly && '🆆'
     };
-    obj['::link'] = arrayItemsSchema.title || schema.title;
+    obj['::link'] = arrayItemsSchema.title || schema.title || '';
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;

package/package.json

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