rapidoc 9.3.8 → 10.0.0

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

@@ -1,110 +0,0 @@
-import { html } from 'lit';
-
-// Templates
-import expandedEndpointTemplate from '~/templates/expanded-endpoint-template';
-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, { 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';
-import SetTheme from '~/utils/theme';
-import { isValidHexColor } from '~/utils/color-utils';
-
-export default function mainBodyTemplate(isMini = false, pathsExpanded = false) {
-  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 : '',
-    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 : '',
-    navAccentTextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
-  };
-  /* eslint-disable indent */
-  if (this.resolvedSpec.specLoadError) {
-    return html`
-      ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <div id="spec-not-found" style='display:flex; align-items:center; justify-content: 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>
-    `;
-  }
-
-  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)}
-    
-    <!-- Advanced Search -->
-    ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
-
-    <div id='the-main-body' class='body ${this.cssClasses}' dir='${this.pageDirection}' >
-      <!-- Side Nav -->
-      ${((this.renderStyle === 'read' || this.renderStyle === 'focused')
-          && this.showSideNav === 'true'
-          && this.resolvedSpec
-        ) ? navbarTemplate.call(this) : ''
-      }
-
-      <!-- Main Content -->
-      <main class='main-content regular-font' tabindex='-1' 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); }}'>
-                  ${this.renderStyle === 'focused'
-                    ? html`${focusedEndpointTemplate.call(this)}`
-                    : html`
-                      ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
-                      ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
-                      ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
-                      <div id='operations-top' class='observe-me'>
-                        <slot name='operations-top'></slot>
-                      </div>  
-                      ${this.renderStyle === 'read'
-                        ? expandedEndpointTemplate.call(this)
-                        : endpointTemplate.call(this, isMini, pathsExpanded)
-                      }
-                    `
-                  }
-                  </div>
-                `
-              }`
-          }
-        </div>
-        <slot name='footer'></slot>
-      </main>
-    </div>  
-  `;
-}
-/* eslint-enable indent */

package/src/templates/navbar-template.js

@@ -1,272 +0,0 @@
-import { html } from 'lit';
-import { marked } from 'marked';
-import { getMatchedPaths } from '~/utils/common-utils';
-
-export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
-  const tagAndPathEl = navLinkEl?.closest('.nav-bar-tag-and-paths');
-  const pathsUnderTagEl = tagAndPathEl?.querySelector('.nav-bar-paths-under-tag');
-  if (tagAndPathEl) {
-    const isExpanded = tagAndPathEl.classList.contains('expanded');
-    if (isExpanded && (action === 'toggle' || action === 'collapse')) {
-      pathsUnderTagEl.style.maxHeight = 0;
-      tagAndPathEl.classList.replace('expanded', 'collapsed');
-    } else if (!isExpanded && (action === 'toggle' || action === 'expand')) {
-      tagAndPathEl.classList.replace('collapsed', 'expanded');
-      pathsUnderTagEl.style.maxHeight = `${pathsUnderTagEl.scrollHeight}px`;
-    }
-  }
-}
-
-export function expandCollapseAll(event, action = 'expand-all') {
-  if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
-    return;
-  }
-  const navEl = event.target.closest('.nav-scroll');
-  const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
-  if (action === 'expand-all') {
-    elList.forEach((el) => {
-      const navBarPathsUnderTagEl = el.querySelector('.nav-bar-paths-under-tag');
-      el.classList.replace('collapsed', 'expanded');
-      navBarPathsUnderTagEl.style.maxHeight = `${navBarPathsUnderTagEl?.scrollHeight}px`;
-    });
-  } else {
-    elList.forEach((el) => {
-      el.classList.replace('expanded', 'collapsed');
-      el.querySelector('.nav-bar-paths-under-tag').style.maxHeight = 0;
-    });
-  }
-}
-
-export function navBarClickAndEnterHandler(event) {
-  if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
-    return;
-  }
-  const navEl = event.target;
-  event.stopPropagation();
-  if (navEl.dataset?.action === 'navigate') {
-    this.scrollToEventTarget(event, false);
-  } else if (navEl.dataset?.action === 'expand-all' || (navEl.dataset?.action === 'collapse-all')) {
-    expandCollapseAll(event, navEl.dataset.action);
-  } else if (navEl.dataset?.action === 'expand-collapse-tag') {
-    expandCollapseNavBarTag(navEl, 'toggle');
-  }
-}
-
-/* eslint-disable indent */
-export default function navbarTemplate() {
-  if (!this.resolvedSpec || this.resolvedSpec.specLoadError) {
-    return html`
-      <nav class='nav-bar' part='section-navbar'>
-        <slot name='nav-logo' class='logo'></slot>
-      </nav>
-    `;
-  }
-  return html`
-  <nav class='nav-bar ${this.renderStyle}' part='section-navbar'>
-    <slot name='nav-logo' class='logo'></slot>
-    ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
-      ? ''
-      : html`
-        <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)' : ''}' part='section-navbar-search'>
-          ${this.allowSearch === 'false'
-            ? ''
-            : html`
-              <div style = 'display:flex; flex:1; line-height:22px;'>
-                <input id = 'nav-bar-search' 
-                  part = 'textbox textbox-nav-filter'
-                  style = 'width:100%; 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>  
-              ${this.searchVal
-                ? html`
-                  <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>`
-                : ''
-              }
-            `
-          }
-          ${this.allowAdvancedSearch === 'false' || this.searchVal
-            ? ''
-            : html`
-              <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>
-            `
-          }
-        </div>
-      `
-    }
-    ${html`<nav class='nav-scroll' tabindex='-1' part='section-navbar-scroll' @click='${(e) => navBarClickAndEnterHandler.call(this, e)}' @keyup='${(e) => navBarClickAndEnterHandler.call(this, e)}' >
-      ${(this.showInfo === 'false' || !this.resolvedSpec.info)
-        ? ''
-        : html`
-          ${(this.infoDescriptionHeadingsInNavBar === 'true')
-            ? html`
-              ${this.resolvedSpec.infoDescriptionHeaders.length > 0
-                ? html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-overview' data-content-id='overview' data-action='navigate' tabindex='0' part='section-navbar-item section-navbar-overview'> 
-                    ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
-                  </div>`
-                : ''
-              }
-              <div class='overview-headers'>
-                ${this.resolvedSpec.infoDescriptionHeaders.map((header) => html`
-                  <div
-                    class='nav-bar-h${header.depth} ${this.navActiveItemMarker}' 
-                    id='link-overview--${new marked.Slugger().slug(header.text)}'
-                    data-action='navigate' 
-                    data-content-id='overview--${new marked.Slugger().slug(header.text)}' 
-                  >
-                    ${header.text}
-                  </div>`)
-                }
-              </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 ${this.navActiveItemMarker}' id='link-overview' data-action='navigate' data-content-id='overview' tabindex='0'> 
-              ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
-            </div>`
-          }
-        `
-      }
-    
-      ${this.allowServerSelection === 'false'
-        ? ''
-        : html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-servers' data-action='navigate' data-content-id='servers' tabindex='0' part='section-navbar-item section-navbar-servers'> API Servers </div>`
-      }
-      ${(this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes)
-        ? ''
-        : html`<div class='nav-bar-info ${this.navActiveItemMarker}' id='link-auth' data-action='navigate' data-content-id='auth' tabindex='0' part='section-navbar-item section-navbar-auth'> Authentication </div>`
-      }
-
-      <div id='link-operations-top' class='nav-bar-section operations' data-action='navigate' data-content-id='${this.renderStyle === 'focused' ? '' : 'operations-top'}' part='section-navbar-item section-navbar-operations-top'>
-        <div style='font-size:16px; display:flex; margin-left:10px;'>
-          ${this.renderStyle === 'focused'
-            ? html`
-              <div class='nav-bar-expand-all'
-                data-action='expand-all'
-                tabindex='0' 
-                title='Expand all'
-              >▸</div>
-              <div class='nav-bar-collapse-all'
-                data-action='collapse-all'
-                tabindex='0' 
-                title='Collapse all'
-              >▸</div>`
-            : ''
-          }  
-        </div>
-        <div class='nav-bar-section-title'> OPERATIONS </div>
-      </div>
-
-      <!-- TAGS AND PATHS-->
-      ${this.resolvedSpec.tags
-        .filter((tag) => tag.paths.filter((path) => getMatchedPaths(this.searchVal, path, tag.name)).length)
-        .map((tag) => html`
-          <div class='nav-bar-tag-and-paths ${(this.renderStyle === 'read' ? 'expanded' : (tag.expanded ? 'expanded' : 'collapsed'))}' >
-            ${tag.name === 'General ⦂'
-              ? 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 ${this.navActiveItemMarker}'
-                  part='section-navbar-item section-navbar-tag'
-                  id='link-${tag.elementId}'
-                  data-action='${(this.renderStyle === 'read' ? 'navigate' : this.onNavTagClick === 'show-description') ? 'navigate' : 'expand-collapse-tag'}'
-                  data-content-id='${(this.renderStyle === 'read' ? `${tag.elementId}` : this.onNavTagClick === 'show-description') ? `${tag.elementId}` : ''}'
-                  data-first-path-id='${tag.firstPathId}'
-                  tabindex='0'
-                >
-                  <div style="pointer-events:none;">${tag.displayName || tag.name}</div>
-                  <div class='nav-bar-tag-icon' tabindex='0' data-action='expand-collapse-tag'></div>
-                </div>
-              `
-            }
-            ${(this.infoDescriptionHeadingsInNavBar === 'true')
-              ? html`
-                ${this.renderStyle === 'focused' && this.onNavTagClick === 'expand-collapse'
-                  ? ''
-                  : html`
-                    <div class='tag-headers'>
-                      ${tag.headers.map((header) => html`
-                      <div
-                        class='nav-bar-h${header.depth} ${this.navActiveItemMarker}'
-                        part='section-navbar-item section-navbar-h${header.depth}'
-                        id='link-${tag.elementId}--${new marked.Slugger().slug(header.text)}'
-                        data-action='navigate'
-                        data-content-id='${tag.elementId}--${new marked.Slugger().slug(header.text)}'
-                        tabindex='0'
-                      > ${header.text}</div>`)}
-                    </div>`
-                }`
-              : ''
-            }
-            <div class='nav-bar-paths-under-tag' style='max-height:${(tag.expanded || this.renderStyle === 'read') ? ((tag.paths?.length || 1) * 50) : 0}px;'>
-              <!-- Paths in each tag (endpoints) -->
-              ${tag.paths.filter((v) => {
-                if (this.searchVal) {
-                  return getMatchedPaths(this.searchVal, v, tag.name);
-                }
-                return true;
-              }).map((p) => html`
-              <div 
-                class='nav-bar-path ${this.navActiveItemMarker} ${this.usePathInNavBar === 'true' ? 'small-font' : ''}'
-                part='section-navbar-item section-navbar-path'
-                data-action='navigate'
-                data-content-id='${p.elementId}'
-                id='link-${p.elementId}'
-                tabindex='0'
-              >
-                <span style = 'display:flex; pointer-events: none; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}'>
-                  ${html`<span class='nav-method ${this.showMethodInNavBar} ${p.method}' style='pointer-events: none;'>
-                      ${this.showMethodInNavBar === 'as-colored-block' ? p.method.substring(0, 3).toUpperCase() : p.method.toUpperCase()}
-                    </span>`
-                  }
-                  ${p.isWebhook ? html`<span style='font-weight:bold; pointer-events: none; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)'>WEBHOOK</span>` : ''}
-                  ${this.usePathInNavBar === 'true'
-                    ? html`<span style='pointer-events: none;' class='mono-font'>${p.path}</span>`
-                    : p.summary || p.shortSummary
-                  }
-                </span>
-              </div>`)}
-            </div>
-          </div>
-        `)
-      }
-
-      <!-- COMPONENTS -->
-      ${this.resolvedSpec.components && this.showComponents === 'true' && this.renderStyle === 'focused'
-        ? html`
-          <div id='link-components' class='nav-bar-section components'>
-            <div></div>
-            <div class='nav-bar-section-title'>COMPONENTS</div>
-          </div>
-          ${this.resolvedSpec.components.map((component) => (component.subComponents.length
-            ? html`
-              <div class='nav-bar-tag'
-                part='section-navbar-item section-navbar-tag'
-                data-action='navigate' 
-                data-content-id='cmp--${component.name.toLowerCase()}' 
-                id='link-cmp--${component.name.toLowerCase()}'
-              >
-                ${component.name}
-              </div>
-              ${component.subComponents.filter((p) => p.expanded !== false).map((p) => html`
-                <div class='nav-bar-path' data-action='navigate' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}'>
-                  <span style = 'pointer-events: none;'> ${p.name} </span>
-                </div>`)
-              }`
-            : ''))
-          }`
-        : ''
-      }
-    </nav>`
-  }
-</nav>
-`;
-}
-/* eslint-enable indent */

package/src/templates/overview-template.js

@@ -1,79 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-import { downloadResource, viewResource } from '~/utils/common-utils';
-
-/* eslint-disable indent */
-function headingRenderer() {
-  const renderer = new marked.Renderer();
-  renderer.heading = ((text, level, raw, slugger) => `<h${level} class="observe-me" id="overview--${slugger.slug(raw)}">${text}</h${level}>`);
-  return renderer;
-}
-
-export default function overviewTemplate() {
-  return html`
-    <section id="overview" part="section-overview"
-      class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
-      ${this.resolvedSpec?.info
-        ? html`
-          <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'>
-                ${this.resolvedSpec.info.version}
-              </span>`
-            }
-          </div>
-          <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px); margin-top:8px;">
-            ${this.resolvedSpec.info.contact?.email
-              ? html`<span>${this.resolvedSpec.info.contact.name || 'Email'}: 
-                <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a>
-              </span>`
-              : ''
-            }
-            ${this.resolvedSpec.info.contact?.url
-              ? html`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>`
-              : ''
-            }
-            ${this.resolvedSpec.info.license
-              ? html`<span>License: 
-                ${this.resolvedSpec.info.license.url
-                ? html`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>`
-                : this.resolvedSpec.info.license.name
-              } </span>`
-              : ''
-            }
-            ${this.resolvedSpec.info.termsOfService
-              ? html`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">Terms of Service</a></span>`
-              : ''
-            }
-            ${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="min-width:170px" part="btn btn-outline" @click='${(e) => { downloadResource(this.specUrl, 'openapi-spec', e); }}'>Download OpenAPI spec</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>`
-              : ''
-            }
-          </div>
-          <slot name="overview"></slot>
-          <div id="api-description">
-          ${this.resolvedSpec.info.description
-            ? html`${
-              unsafeHTML(`
-                <div class="m-markdown regular-font">
-                ${marked(this.resolvedSpec.info.description, this.infoDescriptionHeadingsInNavBar === 'true' ? { renderer: headingRenderer() } : undefined)}
-              </div>`)}`
-            : ''
-          }
-          </div>
-        `
-        : ''
-      }
-    </section>
-  `;
-}
-/* eslint-enable indent */