rapidoc 9.2.0 → 9.3.0

package/src/templates/expanded-endpoint-template.js

@@ -37,81 +37,85 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
   return html`
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
-    ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
-    ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
-    ${html`
-      ${path.xBadges && path.xBadges?.length > 0
-        ? html`
-          <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
-            ${path.xBadges.map((v) => (
-                html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
-              ))
-            }
-          </div>
+      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
+      ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
+      ${html`
+        ${path.xBadges && path.xBadges?.length > 0
+          ? html`
+            <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
+              ${path.xBadges.map((v) => (
+                  html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                ))
+              }
+            </div>
+            `
+          : ''
+        }
+        <h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
+        ${path.isWebhook
+          ? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
+          : html`
+            <div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
+              <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
+              <span part="label-operation-path">${path.path}</span>
+            </div>
           `
-        : ''
+        }
+        <slot name="${path.elementId}"></slot>`
       }
-      <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
-      ${path.isWebhook
-        ? html`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
-        : html`
-          <div class='mono-font part="section-operation-url" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
-            <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
-            <span part="label-operation-path">${path.path}</span>
-          </div>
-        `
-      }
-      <slot name="${path.elementId}"></slot>`
-    }
-    ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-    ${pathSecurityTemplate.call(this, path.security)}
-    ${codeSampleTabPanel}
-    <div class='expanded-req-resp-container'>
-      <api-request
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        method = "${path.method}"
-        path = "${path.path}"
-        .security = "${path.security}"
-        .parameters = "${path.parameters}"
-        .request_body = "${path.requestBody}"
-        .api_keys = "${nonEmptyApiKeys}"
-        .servers = "${path.servers}"
-        server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
-        fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-        allow-try = "${this.allowTry}"
-        accept = "${accept}"
-        render-style="${this.renderStyle}" 
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-read-only = "${this.schemaHideReadOnly}"
-        fetch-credentials = "${this.fetchCredentials}"
-        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
-          file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
-          anchor:anchor, anchor-param-example:anchor-param-example"
-      > </api-request>
+      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${pathSecurityTemplate.call(this, path.security)}
+      ${codeSampleTabPanel}
+      <div class='expanded-req-resp-container'>
+        <api-request
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          method = "${path.method}"
+          path = "${path.path}"
+          .security = "${path.security}"
+          .parameters = "${path.parameters}"
+          .request_body = "${path.requestBody}"
+          .api_keys = "${nonEmptyApiKeys}"
+          .servers = "${path.servers}"
+          server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
+          fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
+          use-summary-to-list-example = "${this.useSummaryToListExamples}"
+          allow-try = "${this.allowTry}"
+          accept = "${accept}"
+          render-style="${this.renderStyle}" 
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
+          schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : false}"
+          fetch-credentials = "${this.fetchCredentials}"
+          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+            anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-request>
 
-      ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
+        ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
 
-      <api-response
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        .responses = "${path.responses}"
-        render-style = "${this.renderStyle}"
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly}"
-        selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
-      > </api-response>
+        <api-response
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          .responses = "${path.responses}"
+          render-style = "${this.renderStyle}"
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
+          schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
+          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
+          exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
+          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-response>
+      </div>
     </div>
-  </div>
   `;
 }
 
@@ -120,7 +124,7 @@ export default function expandedEndpointTemplate() {
   return html`
   ${this.resolvedSpec.tags.map((tag) => html`
     <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
-      <div class="title tag" part="label-tag-title">${tag.name}</div>
+      <div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
       <slot name="${tag.elementId}"></slot>
       <div class="regular-font-size">
       ${

package/src/templates/header-template.js

@@ -4,7 +4,7 @@ import logoTemplate from '~/templates/logo-template';
 /* eslint-disable indent */
 export default function headerTemplate() {
   return html`
-  <header class="row header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
+  <header class="row main-header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
     <div class="only-large-screen-flex" style="align-items: center;">
       <slot name="logo" class="logo" part="section-logo">
         ${logoTemplate('height:36px;width:36px;margin-left:5px')}

package/src/templates/json-schema-viewer-template.js

@@ -154,7 +154,7 @@ export default function jsonSchemaViewerTemplate(isMini = false) {
     <!-- Header -->
     ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}
     
-    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection}>
 
       <!-- Side Nav -->
       ${jsonSchemaNavTemplate.call(this)}

package/src/templates/main-body-template.js

@@ -73,7 +73,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     <!-- Advanced Search -->
     ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
 
-    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection} >
       <!-- Side Nav -->
       ${((this.renderStyle === 'read' || this.renderStyle === 'focused')
           && this.showSideNav === 'true'

package/src/templates/navbar-template.js

@@ -50,7 +50,7 @@ export default function navbarTemplate() {
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`
-        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
+        <div style="display:flex; flex-direction:row; justify-content:center; align-items:stretch; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
           ${this.allowSearch === 'false'
             ? ''
             : html`
@@ -67,7 +67,9 @@ export default function navbarTemplate() {
               </div>  
               ${this.matchPaths
                 ? html`
-                  <div @click = '${this.onClearSearch}' style='margin-left:5px; cursor:pointer; align-self:center; color:var(--nav-text-color)' class='small-font-size primary-text bold-text'> CLEAR </div>`
+                  <button @click = '${this.onClearSearch}' class="m-btn thin-border" style="margin-left:5px; color:var(--nav-text-color); width:75px; padding:6px 8px;" part="btn btn-outline btn-clear-filter">
+                    CLEAR
+                  </button>`
                 : ''
               }
             `
@@ -75,8 +77,8 @@ export default function navbarTemplate() {
           ${this.allowAdvancedSearch === 'false' || this.matchPaths
             ? ''
             : html`
-              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
-                Search
+              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px; padding:6px 8px; width:75px" @click="${this.onShowSearchModalClicked}">
+                SEARCH
               </button>
             `
           }
@@ -89,7 +91,12 @@ export default function navbarTemplate() {
         : html`
           ${(this.infoDescriptionHeadingsInNavBar === 'true')
             ? html`
-              ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' > Overview </div>` : ''}
+              ${this.resolvedSpec.infoDescriptionHeaders.length > 0
+                ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+                    ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
+                  </div>`
+                : ''
+              }
               <div class="overview-headers">
                 ${this.resolvedSpec.infoDescriptionHeaders.map((header) => html`
                   <div 
@@ -104,7 +111,9 @@ export default function navbarTemplate() {
               </div>
               ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<hr style='border-top: 1px solid var(--nav-hover-bg-color); border-width:1px 0 0 0; margin: 15px 0 0 0'/>` : ''}
             `
-            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> Overview </div>`
+            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+            ${this.resolvedSpec.info?.title?.trim() || 'Overview'} 
+              </div>`
           }
         `
       }
@@ -197,10 +206,14 @@ export default function navbarTemplate() {
                   this.scrollToEventTarget(e, false);
                 }}'
               >
-                <span style = "${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                <span style = "display:flex; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                  ${html`<span class="nav-method ${this.showMethodInNavBar} ${p.method}">
+                      ${this.showMethodInNavBar === 'as-colored-block' ? p.method.substring(0, 3).toUpperCase() : p.method.toUpperCase()}
+                    </span>`
+                  }
                   ${p.isWebhook ? html`<span style="font-weight:bold; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)">WEBHOOK</span>` : ''}
                   ${this.usePathInNavBar === 'true'
-                    ? html`<span class='mono-font'>${p.method.toUpperCase()} ${p.path}</span>`
+                    ? html`<span class='mono-font'>${p.path}</span>`
                     : p.summary || p.shortSummary
                   }
                 </span>

package/src/templates/overview-template.js

@@ -16,7 +16,7 @@ export default function overviewTemplate() {
       class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
       ${this.resolvedSpec?.info
         ? html`
-          <div id="api-title" part="label-overview-title" style="font-size:32px">
+          <div id="api-title" part="section-overview-title" style="font-size:32px">
             ${this.resolvedSpec.info.title}
             ${!this.resolvedSpec.info.version ? '' : html`
               <span style = 'font-size:var(--font-size-small);font-weight:bold'>

package/src/templates/security-scheme-template.js

@@ -252,7 +252,7 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 
 /* eslint-disable indent */
 
-function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = []) {
+function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header') {
   let { authorizationUrl, tokenUrl, refreshUrl } = authFlow;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
@@ -337,8 +337,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                 ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
                   ? html`
                     <select style="margin-right:5px;" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
-                      <option value = 'header' selected> Authorization Header </option>
-                      <option value = 'request-body'> Request Body </option>
+                      <option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>
+                      <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>
                     </select>`
                   : ''
                 }`
@@ -462,7 +462,7 @@ export default function securitySchemeTemplate() {
               ? html`
                 <tr>
                   <td style="border:none; padding-left:48px">
-                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f], v['x-default-scopes']))}
+                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f], v['x-default-scopes'], v['x-receive-token-in']))}
                   </td>
                 </tr>
                 `
@@ -483,21 +483,28 @@ export function pathSecurityTemplate(pathSecurity) {
     pathSecurity.forEach((pSecurity) => {
       const andSecurityKeys1 = [];
       const andKeyTypes = [];
-      Object.keys(pSecurity).forEach((pathSecurityKey) => {
-        let pathScopes = '';
-        const s = this.resolvedSpec.securitySchemes.find((ss) => ss.securitySchemeId === pathSecurityKey);
-        if (pSecurity[pathSecurityKey] && Array.isArray(pSecurity[pathSecurityKey])) {
-          pathScopes = pSecurity[pathSecurityKey].join(', ');
-        }
-        if (s) {
-          andKeyTypes.push(s.typeDisplay);
-          andSecurityKeys1.push({ ...s, ...({ scopes: pathScopes }) });
-        }
-      });
-      orSecurityKeys1.push({
-        securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
-        securityDefs: andSecurityKeys1,
-      });
+      if (Object.keys(pSecurity).length === 0) {
+        orSecurityKeys1.push({
+          securityTypes: 'None',
+          securityDefs: [],
+        });
+      } else {
+        Object.keys(pSecurity).forEach((pathSecurityKey) => {
+          let pathScopes = '';
+          const s = this.resolvedSpec.securitySchemes.find((ss) => ss.securitySchemeId === pathSecurityKey);
+          if (pSecurity[pathSecurityKey] && Array.isArray(pSecurity[pathSecurityKey])) {
+            pathScopes = pSecurity[pathSecurityKey].join(', ');
+          }
+          if (s) {
+            andKeyTypes.push(s.typeDisplay);
+            andSecurityKeys1.push({ ...s, ...({ scopes: pathScopes }) });
+          }
+        });
+        orSecurityKeys1.push({
+          securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
+          securityDefs: andSecurityKeys1,
+        });
+      }
     });
     return html`<div style="position:absolute; top:3px; right:2px; font-size:var(--font-size-small); line-height: 1.5;">
       <div style="position:relative; display:flex; min-width:350px; max-width:700px; justify-content: flex-end;">
@@ -513,7 +520,10 @@ export function pathSecurityTemplate(pathSecurity) {
               ${i !== 0 ? html`<div style="padding:3px 4px;"> OR </div>` : ''}
               <div class="tooltip">
                 <div style = "padding:2px 4px; white-space:nowrap; text-overflow:ellipsis;max-width:150px; overflow:hidden;">
-                  <a part="anchor anchor-operation-security" href="#auth"> ${orSecurityItem1.securityTypes} </a>
+                  ${this.updateRoute === 'true' && this.allowAuthentication === 'true'
+                    ? html`<a part="anchor anchor-operation-security" href="#auth"> ${orSecurityItem1.securityTypes} </a>`
+                    : html`${orSecurityItem1.securityTypes}`
+                  }
                 </div>
                 <div class="tooltip-text" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
                   ${orSecurityItem1.securityDefs.length > 1 ? html`<div>Requires <b>all</b> of the following </div>` : ''}

package/src/templates/server-template.js

@@ -35,7 +35,7 @@ function serverVarsTemplate() {
   // const selectedServerObj = this.resolvedSpec.servers.find((v) => (v.url === this.selectedServer));
   return this.selectedServer && this.selectedServer.variables
     ? html`
-    <div class="table-title"> SERVER VARIABLES</div>
+    <div class="table-title">SERVER VARIABLES</div>
     <table class='m-table'>
       ${Object.entries(this.selectedServer.variables).map((kv) => html`
         <tr>
@@ -86,7 +86,7 @@ export default function serverTemplate() {
   if (!this.resolvedSpec || this.resolvedSpec.specLoadError) { return ''; }
   return html`
   <section id = 'servers' part="section-servers" style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;" class='regular-font observe-me ${'read focused'.includes(this.renderStyle) ? 'section-gap--read-mode' : 'section-gap'}'>
-    <div class = 'sub-title'>API SERVER</div>
+    <div part = "section-servers-title" class = "sub-title">API SERVER</div>
     <div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
       ${!this.resolvedSpec.servers || this.resolvedSpec.servers?.length === 0
         ? ''

package/src/utils/schema-utils.js

@@ -12,7 +12,7 @@ export function getTypeInfo(schema) {
     const schemaNode = schema.$ref.substring(n + 1);
     dataType = `{recursive: ${schemaNode}} `;
   } else if (schema.type) {
-    dataType = Array.isArray(schema.type) ? schema.type.join('┃') : schema.type;
+    dataType = Array.isArray(schema.type) ? schema.type.join(schema.length === 2 ? ' or ' : '┃') : schema.type;
     if (schema.format || schema.enum) {
       dataType = dataType.replace('string', schema.enum ? 'enum' : schema.format);
     }
@@ -389,12 +389,20 @@ export function schemaToSampleObj(schema, config = { }) {
         const oneOfSamples = schemaToSampleObj(schema.oneOf[key], config);
         for (const sampleKey in oneOfSamples) {
           // 2. In the final example include a one-of item along with properties
-          if (oneOfSamples[sampleKey] === null) {
-            const finalExample = Object.assign(oneOfSamples[sampleKey], objWithSchemaProps);
-            obj[`example-${i}`] = finalExample;
-            addSchemaInfoToExample(schema.oneOf[key], obj[`example-${i}`]);
-            i++;
+          let finalExample;
+          if (Object.keys(objWithSchemaProps).length > 0) {
+            if (oneOfSamples[sampleKey] === null || typeof oneOfSamples[sampleKey] !== 'object') {
+              // This doesn't really make sense since every oneOf schema _should_ be an object if there are common properties, so we'll skip this
+              continue;
+            } else {
+              finalExample = Object.assign(oneOfSamples[sampleKey], objWithSchemaProps);
+            }
+          } else {
+            finalExample = oneOfSamples[sampleKey];
           }
+          obj[`example-${i}`] = finalExample;
+          addSchemaInfoToExample(schema.oneOf[key], obj[`example-${i}`]);
+          i++;
         }
       }
     }
@@ -460,18 +468,22 @@ export function schemaToSampleObj(schema, config = { }) {
       }
     }
   } else if (schema.type === 'array' || schema.items) {
-    if (schema.example) {
-      obj['example-0'] = schema.example;
-    } else if (schema.items?.example) { // schemas and properties support single example but not multiple examples.
-      obj['example-0'] = [schema.items.example];
-    } else {
-      const samples = schemaToSampleObj(schema.items, config);
-      let i = 0;
-      for (const key in samples) {
-        obj[`example-${i}`] = [samples[key]];
-        addSchemaInfoToExample(schema.items, obj[`example-${i}`]);
-        i++;
+    if (schema.items || schema.example) {
+      if (schema.example) {
+        obj['example-0'] = schema.example;
+      } else if (schema.items?.example) { // schemas and properties support single example but not multiple examples.
+        obj['example-0'] = [schema.items.example];
+      } else {
+        const samples = schemaToSampleObj(schema.items, config);
+        let i = 0;
+        for (const key in samples) {
+          obj[`example-${i}`] = [samples[key]];
+          addSchemaInfoToExample(schema.items, obj[`example-${i}`]);
+          i++;
+        }
       }
+    } else {
+      obj['example-0'] = [];
     }
   } else {
     return { 'example-0': getSampleValueByType(schema) };
@@ -484,15 +496,15 @@ function generateMarkdownForArrayAndObjectDescription(schema, level = 0) {
   if (schema.title) {
     markdown = `**${schema.title}:** `;
   }
+  if (schema.description) {
+    markdown = `${markdown} ${schema.description} ${schema.minItems || schema.maxItems ? '<span class="more-content">⤵</span><br/>' : ''}`;
+  }
   if (schema.minItems) {
     markdown = `${markdown} **Min Items:** ${schema.minItems}`;
   }
   if (schema.maxItems) {
     markdown = `${markdown} **Max Items:** ${schema.maxItems}`;
   }
-  if (schema.description) {
-    markdown = `${markdown} ${schema.description}`;
-  }
   if (level > 0 && schema.items?.description) {
     let itemsMarkdown = '';
     if (schema.items.minProperties) {
@@ -600,7 +612,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
     });
     let multiPrimitiveTypes;
     if (primitiveType.length > 0) {
-      subSchema.type = primitiveType.join('┃');
+      subSchema.type = primitiveType.join(primitiveType.length === 2 ? ' or ' : '┃');
       multiPrimitiveTypes = getTypeInfo(subSchema);
       if (complexTypes.length === 0) {
         return `${multiPrimitiveTypes?.html || ''}`;
@@ -670,7 +682,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
-    if (schema.items.items) {
+    if (schema.items?.items) {
       obj['::array-type'] = schema.items.items.type;
     }
     obj['::props'] = schemaInObjectNotation(schema.items, {}, (level + 1));

package/src/utils/spec-parser.js

@@ -106,7 +106,7 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
     } else if (v.type === 'oauth2') {
       v.typeDisplay = `OAuth (${v.securitySchemeId})`;
     } else {
-      v.typeDisplay = v.type;
+      v.typeDisplay = v.type || 'None';
     }
   });
 

package/src/utils/theme.js

@@ -11,7 +11,7 @@ export default function setTheme(baseTheme, theme = {}) {
 
   // Dark and Light Theme colors
   if (baseTheme === 'dark') {
-    const bg1 = theme.bg1 ? theme.bg1 : '#333';
+    const bg1 = theme.bg1 ? theme.bg1 : '#2a2b2c';
     const fg1 = theme.fg1 ? theme.fg1 : '#bbb';
 
     const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, 5); // or #383838;
@@ -27,7 +27,7 @@ export default function setTheme(baseTheme, theme = {}) {
     const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);
 
     const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, 10);
-    const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
+    const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.50');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);
@@ -96,7 +96,7 @@ export default function setTheme(baseTheme, theme = {}) {
       codeOperatorColor: theme.codeOperatorColor || '#67cdcc',
     };
   } else {
-    const bg1 = (theme.bg1 ? theme.bg1 : '#ffffff');
+    const bg1 = (theme.bg1 ? theme.bg1 : '#fafbfc');
     const fg1 = (theme.fg1 ? theme.fg1 : '#444444');
     const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, -5); // or '#fafafa'
     const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, -15); // or '#f6f6f6'
@@ -118,7 +118,7 @@ export default function setTheme(baseTheme, theme = {}) {
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : primaryColor;
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;
     */
-    const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -180);
+    const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -200);
     const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
@@ -260,6 +260,13 @@ export default function setTheme(baseTheme, theme = {}) {
     --nav-hover-text-color:${newTheme.navHoverTextColor};
     --nav-accent-color:${newTheme.navAccentColor};
 
+    /* Nav API Method Colors*/
+    --nav-get-color:${newTheme.blue};
+    --nav-put-color:${newTheme.orange};
+    --nav-post-color:${newTheme.green};
+    --nav-delete-color:${newTheme.red};
+    --nav-head-color:${newTheme.yellow};
+
     /* Primary Colors */  
     --primary-color:${newTheme.primaryColor};
     --primary-color-invert:${newTheme.primaryColorInvert};

package/webpack.config.js

@@ -29,7 +29,7 @@ const rapidocBanner = `
 * @preserve
 * RapiDoc ${rapidocVersion.replace()} - WebComponent to View OpenAPI docs
 * License: MIT
-* Repo   : https://github.com/mrin9/RapiDoc
+* Repo   : https://github.com/rapi-doc/RapiDoc
 * Author : Mrinmoy Majumdar
 *`;
 

package/.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-  "cSpell.ignoreWords": [
-    "doc",
-    "gtag",
-    "rapi"
-  ],
-  "cSpell.words": [
-    "descr",
-    "prismjs",
-    "webcomponent"
-  ]
-}

package/dist/index.html

@@ -1,6 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes"><title>RapiDoc</title><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css"><script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script><script defer="defer" src="rapidoc-min.js"></script></head><script>window.addEventListener('DOMContentLoaded', (event) => {
-    const docEl = document.getElementById('thedoc');
-    docEl.addEventListener('before-try', (e) => {
-      e.detail.request.headers.append('AAA-BBB', 'CCC DDDD');
-    });
-  });</script><body><rapi-doc spec-url="./specs/aaa.yaml" id="thedoc" theme="dark" render-style="read" schema-style="tree" use-path-in-nav-bar="true" show-components="true" show-info="true" show-header="true" allow-search="false" allow-advanced-search="true" allow-spec-url-load="false" allow-spec-file-load="false" allow-spec-file-download="true" allow-server-selection="true" allow-authentication="true" update-route="false" match-type="regex" persist-auth="true"></rapi-doc></body></html>