rapidoc 9.1.0 → 9.1.4

package/src/rapidoc-mini.js

@@ -1,5 +1,5 @@
 import { css, LitElement } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-yaml';
@@ -49,6 +49,7 @@ export default class RapiDocMini extends LitElement {
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       showSummaryWhenCollapsed: { type: String, attribute: 'show-summary-when-collapsed' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
 
       // Schema Styles
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -166,6 +167,7 @@ export default class RapiDocMini extends LitElement {
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
 
     if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }
@@ -318,6 +320,8 @@ export default class RapiDocMini extends LitElement {
       }
     }
     this.requestUpdate();
+    // eslint-disable-next-line no-await-in-loop
+    while (!await this.updateComplete);
     const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });
     this.dispatchEvent(specLoadedEvent);
   }

package/src/rapidoc.js

@@ -1,5 +1,5 @@
 import { css, LitElement, unsafeCSS } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-yaml';
@@ -63,6 +63,7 @@ export default class RapiDoc extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
       onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
       // Schema Styles
@@ -88,6 +89,7 @@ export default class RapiDoc extends LitElement {
       allowTry: { type: String, attribute: 'allow-try' },
       allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
       allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
+      allowSpecFileDownload: { type: String, attribute: 'allow-spec-file-download' },
       allowSearch: { type: String, attribute: 'allow-search' },
       allowAdvancedSearch: { type: String, attribute: 'allow-advanced-search' },
       allowServerSelection: { type: String, attribute: 'allow-server-selection' },
@@ -245,19 +247,18 @@ export default class RapiDoc extends LitElement {
       .only-large-screen{
         display:none;
       }
-      .header-title{
-        font-size:calc(var(--font-size-regular) + 8px); 
-        padding:0 8px;
-      }
       .tag.title {
         text-transform: uppercase;
       }
-      .header{
+      .header {
         background-color:var(--header-bg);
         color:var(--header-fg);
         width:100%;
       }
-
+      .header-title {
+        font-size:calc(var(--font-size-regular) + 8px); 
+        padding:0 8px;
+      }
       input.header-input{
         background:var(--header-color-darker);
         color:var(--header-fg);
@@ -434,6 +435,7 @@ export default class RapiDoc extends LitElement {
     this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
     this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '300px';
@@ -709,6 +711,8 @@ export default class RapiDoc extends LitElement {
       }
     }
     this.requestUpdate();
+    // eslint-disable-next-line no-await-in-loop
+    while (!await this.updateComplete);
     const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });
     this.dispatchEvent(specLoadedEvent);
 

package/src/styles/font-styles.js

@@ -88,8 +88,9 @@ export default css`
     font-size: var(--font-size-regular);
     line-height:calc(var(--font-size-regular) + 8px);
   }
-  .m-markdown li{
-    line-height:calc(var(--font-size-regular) + 12px);
+  .m-markdown li {
+    font-size: var(--font-size-regular);
+    line-height:calc(var(--font-size-regular) + 10px);
   }
   
   .m-markdown-small p,

package/src/styles/nav-styles.js

@@ -15,8 +15,8 @@ export default css`
   flex-wrap:nowrap;
   word-break:break-word;
 }
-::slotted(*){
-  padding:16px 30px 0 16px;
+::slotted([slot=nav-logo]){
+  padding:16px 16px 0 16px;
 }
 .nav-scroll {
   overflow-x: hidden;

package/src/templates/components-template.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-console */
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { schemaInObjectNotation } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
@@ -11,7 +10,7 @@ function schemaBodyTemplate(sComponent) {
   return html`
   <div class='divider'></div>
   <div class='expanded-endpoint-body observe-me ${sComponent.name}' id='cmp--${sComponent.id}' >
-    <h1> ${sComponent.name} </h1>
+    <div style="font-weight:bold"> ${sComponent.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400;"> Schema </span></div>
   ${this.schemaStyle === 'table'
     ? html`
       <schema-table
@@ -20,8 +19,8 @@ function schemaBodyTemplate(sComponent) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-        schema-hide-read-only = false
-        schema-hide-write-only = ${this.schemaHideWriteOnly}
+        schema-hide-read-only = "false"
+        schema-hide-write-only = "${this.schemaHideWriteOnly}"
       > </schema-tree> `
     : html`
       <schema-tree
@@ -30,14 +29,14 @@ function schemaBodyTemplate(sComponent) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-        schema-hide-read-only = false
-        schema-hide-write-only = ${this.schemaHideWriteOnly}
+        schema-hide-read-only = "false"
+        schema-hide-write-only = "${this.schemaHideWriteOnly}"
       > </schema-tree>`
 }
   </div>`;
 }
 
-function componentBodyTemplate(sComponent) {
+function componentBodyTemplate(sComponent, componentType) {
   if (sComponent.id.indexOf('schemas-') !== -1) {
     return schemaBodyTemplate.call(this, sComponent);
   }
@@ -45,7 +44,7 @@ function componentBodyTemplate(sComponent) {
   <div class='divider'></div>
   <div class='expanded-endpoint-body observe-me ${sComponent.name}' id='cmp--${sComponent.id}' >
     ${html`
-      <h1> ${sComponent.name} </h1>
+      <div style="font-weight:bold"> ${sComponent.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400"> ${componentType} </span> </div>
       ${sComponent.component
     ? html`
       <div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg2)'> 
@@ -68,7 +67,7 @@ export default function componentsTemplate() {
       </div>
     </div>
     <div class='regular-font section-gap--read-mode'>
-      ${component.subComponents.filter((c) => c.expanded !== false).map((sComponent) => componentBodyTemplate.call(this, sComponent))}
+      ${component.subComponents.filter((c) => c.expanded !== false).map((sComponent) => componentBodyTemplate.call(this, sComponent, component.name))}
     </div>
     `)
 }

package/src/templates/endpoint-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import '~/components/api-request';
 import '~/components/api-response';
 import codeSamplesTemplate from '~/templates/code-samples-template';

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { rapidocApiKey } from '~/utils/common-utils';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
 import codeSamplesTemplate from '~/templates/code-samples-template';

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { expandedEndpointBodyTemplate } from '~/templates/expanded-endpoint-template';
 import '~/components/api-request';
 import '~/components/api-response';

package/src/templates/header-template.js

@@ -52,7 +52,7 @@ export default function headerTemplate() {
         `
       }
       
-      ${(this.allowSearch === 'false' || this.allowAdvancedSearch === 'false' || 'read focused'.includes(this.renderStyle))
+      ${(this.allowAdvancedSearch === 'false' || 'read focused'.includes(this.renderStyle))
         ? ''
         : html`
           <button class="m-btn primary only-large-screen" part="btn btn-fill btn-search" style="margin-left:10px;" @click="${this.onShowSearchModalClicked}">

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

@@ -0,0 +1,184 @@
+import { html } from 'lit-element';
+import { marked } from 'marked';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+
+// Templates
+import overviewTemplate from '~/templates/overview-template';
+import headerTemplate from '~/templates/header-template';
+import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
+import '~/components/json-tree';
+import '~/components/schema-tree';
+import SetTheme from '~/utils/theme';
+import { isValidHexColor } from '~/utils/color-utils';
+
+/* eslint-disable indent */
+// Json Schema Nav Template
+function jsonSchemaNavTemplate() {
+  return html`
+  <nav class='nav-bar' part="section-navbar">
+    <slot name="nav-logo" class="logo"></slot>
+    <div style="display:flex;line-height:22px; padding:8px">
+      <input id="nav-bar-search" 
+        part = "textbox textbox-nav-filter"
+        style = "width:100%; height: 26px; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)" 
+        type = "text"
+        placeholder = "Filter" 
+        @change = "${this.onSearchChange}"  
+        spellcheck = "false" 
+      >
+      <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div>
+    </div>
+    <nav style="flex:1" class='nav-scroll' part="section-navbar-scroll">
+      ${this.resolvedSpec.schemaAndExamples.map((v) => html`
+        <div class='nav-bar-path' data-content-id='${v.elementId}' id='link-${v.elementId}'
+          @click = '${(e) => {
+            this.scrollToEventTarget(e, false);
+          }}'
+        > 
+          ${v.name}
+        </div>`)
+      }
+    </nav>  
+  </nav>
+  `;
+}
+
+// Json Schema Body Template
+function jsonSchemaBodyTemplate() {
+  return html`
+    ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
+    <div style="font-size:var(--font-size-regular);">
+    ${this.resolvedSpec.schemaAndExamples.map((jSchemaBody) => {
+      const examplesObj = generateExample(jSchemaBody.schema, 'json', jSchemaBody.examples, jSchemaBody.example, true, false, 'json', true);
+      jSchemaBody.selectedExample = examplesObj[0]?.exampleId;
+      return html`
+        <section id='${jSchemaBody.elementId}' class='json-schema-and-example regular-font' style="display:flex; flex-direction: column; border:1px solid var(--border-color); margin-bottom:32px; border-top: 5px solid var(--border-color)">
+          <div style="padding:16px; border-bottom: 1px solid var(--border-color)">
+            <div style="font-size:var(--font-size-small); font-weight:bold">${jSchemaBody.name}</div>
+            <span class="json-schema-description m-markdown ">${unsafeHTML(marked(jSchemaBody.description || ''))}</span>
+          </div>  
+          <div style="display:flex; flex-direction: row; gap:16px;">
+            <div class="json-schema-def" style="flex:1; padding:16px 0 16px 16px; ">
+              <schema-tree
+                .data = "${schemaInObjectNotation(jSchemaBody.schema, {})}"
+                schema-expand-level = "${this.schemaExpandLevel}"
+                schema-description-expanded = "${this.schemaDescriptionExpanded}"
+                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                schema-hide-read-only = "false"
+                schema-hide-write-only = "false"
+              > </schema-tree>
+            </div>
+            <div class="json-schema-example-panel" style="width:400px; background-color: var(--input-bg); padding:16px 0 16px 16px; border-left: 1px dashed var(--border-color);">
+              ${examplesObj.length > 1
+                ? html`<select style="min-width:100px; max-width:100%" @change='${(e) => this.onSelectExample(e, jSchemaBody)}'>
+                    ${examplesObj.map((v) => html`
+                      <option value="${v.exampleId}" ?selected=${(v.exampleId === jSchemaBody.selectedExample)}> 
+                        ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary}
+                      </option>`)
+                    }
+                  </select>`
+                : html`<div style="font-size: var(--font-size-small);font-weight:700; margin:5px 0"> ${examplesObj[0].exampleSummary}</div>`
+              }
+              ${examplesObj.map((v) => html`
+                <json-tree 
+                  .data = "${v.exampleValue}"
+                  data-example = "${v.exampleId}"
+                  class = "example"
+                  style = "margin-top:16px; display: ${v.exampleId === jSchemaBody.selectedExample ? 'flex' : 'none'}"
+                ></json-tree>`)
+              }
+            </div>
+          </div>
+        </section>`;
+      })
+    }
+    </div>
+  `;
+}
+/* eslint-enable indent */
+
+// Json Schema Root Template
+export default function jsonSchemaViewerTemplate(isMini = false) {
+// export default function jsonSchemaViewerTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+  if (!this.resolvedSpec) {
+    return '';
+  }
+  const newTheme = {
+    bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',
+    fg1: isValidHexColor(this.textColor) ? this.textColor : '',
+    headerColor: isValidHexColor(this.headerColor) ? this.headerColor : '',
+    primaryColor: isValidHexColor(this.primaryColor) ? this.primaryColor : '',
+    navBgColor: isValidHexColor(this.navBgColor) ? this.navBgColor : '',
+    navTextColor: isValidHexColor(this.navTextColor) ? this.navTextColor : '',
+    navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
+    navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
+    navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
+  };
+  /* eslint-disable indent */
+  if (this.resolvedSpec.specLoadError) {
+    if (isMini) {
+      return html`
+        ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
+        <div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+      `;
+    }
+    return html`
+      ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
+      <!-- Header -->
+      ${headerTemplate.call(this)}
+      <h1> Header </h1>
+      <main class="main-content regular-font" part="section-main-content">
+        <slot></slot>
+        <div style="margin:24px; text-align: center;">
+          <h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
+          <div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+        </div>
+      </main>  
+    `;
+  }
+  if (this.resolvedSpec.isSpecLoading) {
+    return html`
+      ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
+      <main class="main-content regular-font" part="section-main-content">
+        <slot></slot>
+        <div class="main-content-inner--${this.renderStyle}-mode">
+          <div class="loader"></div>
+        </div>
+      </main>  
+    `;
+  }
+
+  return html`
+    ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
+
+    <!-- Header -->
+    ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}
+    
+    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+
+      <!-- Side Nav -->
+      ${jsonSchemaNavTemplate.call(this)}
+
+      <!-- Main Content -->
+      <main class="main-content regular-font" part="section-main-content">
+        <slot></slot>
+        <div class="main-content-inner--${this.renderStyle}-mode">
+          ${this.loading === true
+            ? html`<div class="loader"></div>`
+            : html`
+              ${this.loadFailed === true
+                ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`
+                : html`
+                  <div class="operations-root" @click="${(e) => { this.handleHref(e); }}">
+                    ${jsonSchemaBodyTemplate.call(this)}
+                  </div>
+                `
+              }`
+          }
+        </div>
+        <slot name="footer"></slot>
+      </main>
+    </div>  
+  `;
+}
+/* eslint-enable indent */

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

@@ -6,7 +6,7 @@ import focusedEndpointTemplate from '~/templates/focused-endpoint-template';
 import overviewTemplate from '~/templates/overview-template';
 import endpointTemplate from '~/templates/endpoint-template';
 import serverTemplate from '~/templates/server-template';
-import securitySchemeTemplate from '~/templates/security-scheme-template';
+import securitySchemeTemplate, { recoverPersistedApiKeys } from '~/templates/security-scheme-template';
 import headerTemplate from '~/templates/header-template';
 import navbarTemplate from '~/templates/navbar-template';
 import advancedSearchTemplate from '~/templates/advance-search-template';
@@ -17,6 +17,9 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
   if (!this.resolvedSpec) {
     return '';
   }
+  if (this.persistAuth === 'true') {
+    recoverPersistedApiKeys.call(this);
+  }
   const newTheme = {
     bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',
     fg1: isValidHexColor(this.textColor) ? this.textColor : '',

package/src/templates/navbar-template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { pathIsInSearch } from '~/utils/common-utils';
 
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
@@ -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: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:center; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
           ${this.allowSearch === 'false'
             ? ''
             : html`
@@ -136,7 +136,7 @@ export default function navbarTemplate() {
         .map((tag) => html`
           <div class='nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}'>
             ${tag.name === 'General ⦂'
-              ? html`<hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.4; margin:-1px 0 0 0;"/>`
+              ? html`<hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.3; margin:-1px 0 0 0;"/>`
               : html`
                 <div 
                   class='nav-bar-tag' 

package/src/templates/overview-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import marked from 'marked';
+import { marked } from 'marked';
 import { downloadResource, viewResource } from '~/utils/common-utils';
 
 /* eslint-disable indent */
@@ -47,11 +47,14 @@ export default function overviewTemplate() {
               ? html`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">Terms of Service</a></span>`
               : ''
             }
-            ${this.specUrl
+            ${this.specUrl && this.allowSpecFileDownload === 'true'
               ? html`
                 <div style="display:flex; margin:12px 0; gap:8px; justify-content: start;">
                   <button class="m-btn thin-border" style="width:170px" part="btn btn-outline" @click='${(e) => { downloadResource(this.specUrl, 'openapi-spec', e); }}'>Download OpenAPI spec</button>
-                  <button class="m-btn thin-border" style="width:200px" part="btn btn-outline" @click='${(e) => { viewResource(this.specUrl, e); }}'>View OpenAPI spec (New Tab)</button>
+                  ${this.specUrl?.trim().toLowerCase().endsWith('json')
+                    ? html`<button class="m-btn thin-border" style="width:200px" part="btn btn-outline" @click='${(e) => { viewResource(this.specUrl, e); }}'>View OpenAPI spec (New Tab)</button>`
+                    : ''
+                  }
                 </div>`
               : ''
             }