rapidoc 9.3.8 → 10.0.0

package/src/templates/server-template.js

@@ -1,115 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
-import { marked } from 'marked';
-
-export function setApiServer(serverUrl) {
-  const serverObj = this.resolvedSpec?.servers.find((s) => s.url === serverUrl);
-  if (!serverObj) {
-    return false;
-  }
-  this.selectedServer = serverObj;
-  this.requestUpdate();
-  this.dispatchEvent(new CustomEvent('api-server-change', {
-    bubbles: true,
-    composed: true,
-    detail: {
-      selectedServer: serverObj,
-    },
-  }));
-  return true;
-}
-
-function onApiServerVarChange(e, serverObj) {
-  const inputEls = [...e.currentTarget.closest('table').querySelectorAll('input, select')];
-  let tempUrl = serverObj.url;
-  inputEls.forEach((v) => {
-    const regex = new RegExp(`{${v.dataset.var}}`, 'g');
-    tempUrl = tempUrl.replace(regex, v.value);
-  });
-  serverObj.computedUrl = tempUrl;
-  this.requestUpdate();
-}
-
-/* eslint-disable indent */
-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>
-    <table class='m-table' role='presentation'>
-      ${Object.entries(this.selectedServer.variables).map((kv) => html`
-        <tr>
-          <td style="vertical-align: middle;" >${kv[0]}</td>
-          <td>
-            ${kv[1].enum
-            ? html`
-            <select
-              data-var = "${kv[0]}"
-              @input = ${(e) => { onApiServerVarChange.call(this, e, this.selectedServer); }}
-            >
-            ${Object.entries(kv[1].enum).map((e) => (kv[1].default === e[1]
-              ? html`
-              <option
-                selected
-                label = ${e[1]}
-                value = ${e[1]}
-              />`
-              : html`
-              <option
-                label = ${e[1]}
-                value = ${e[1]}
-              />`
-            ))}
-            </select>`
-            : html`
-            <input
-              type = "text"
-              part="textbox textbox-server-var"
-              spellcheck = "false"
-              data-var = "${kv[0]}"
-              value = "${kv[1].default}"
-              @input = ${(e) => { onApiServerVarChange.call(this, e, this.selectedServer); }}
-            />`}
-          </td>
-        </tr>
-        ${kv[1].description
-          ? html`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${unsafeHTML(marked(kv[1].description))} </span></td></tr>`
-          : ''
-        }
-      `)}
-    </table>
-    `
-    : '';
-}
-
-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 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
-        ? ''
-        : html`
-          ${this.resolvedSpec?.servers.map((server, i) => html`
-            <input type = 'radio'
-              name = 'api_server'
-              id = 'srvr-opt-${i}'
-              value = '${server.url}'
-              @change = ${() => { setApiServer.call(this, server.url); }}
-              .checked = '${this.selectedServer.url === server.url}'
-              style = 'margin:4px 0; cursor:pointer'
-            />
-              <label style='cursor:pointer' for='srvr-opt-${i}'>
-                ${server.url} ${server.description ? html`- <span class='regular-font'>${server.description} </span>` : ''}
-              </label>
-            <br/>
-          `)}
-      `}
-      <div class="table-title primary-text" part="label-selected-server"> SELECTED: ${this.selectedServer?.computedUrl || 'none'}</div>
-    </div>
-    <slot name="servers"></slot>
-    ${serverVarsTemplate.call(this)}
-  </section>`;
-}
-/* eslint-enable indent */

package/src/utils/color-utils.js

@@ -1,59 +0,0 @@
-export default {
-  color: {
-    inputReverseFg: '#fff',
-    inputReverseBg: '#333',
-    headerBg: '#444',
-    getRgb(hex) {
-      if (hex.indexOf('#') === 0) {
-        hex = hex.slice(1, 7);
-      }
-      // convert 3-digit hex to 6-digits.
-      if (hex.length === 3 || hex.length === 4) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-      }
-      if (hex.length !== 6) {
-        throw new Error('Invalid HEX color.');
-      }
-      return {
-        r: parseInt(hex.slice(0, 2), 16),
-        g: parseInt(hex.slice(2, 4), 16),
-        b: parseInt(hex.slice(4, 6), 16),
-      };
-    },
-    luminanace(hexColorCode) {
-      const rgb = this.getRgb(hexColorCode);
-      return (rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
-    },
-    invert(hexColorCode) {
-      return this.luminanace(hexColorCode) > 135 ? '#000' : '#fff'; // compare with `>=128`, but giving little more preference to white over black
-    },
-    opacity(hex, opacity) {
-      const rgb = this.getRgb(hex);
-      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-    },
-    brightness(hex, amt) {
-      const rgb = this.getRgb(hex);
-      rgb.r += amt;
-      rgb.g += amt;
-      rgb.b += amt;
-      if (rgb.r > 255) rgb.r = 255;
-      else if (rgb.r < 0) rgb.r = 0;
-
-      if (rgb.g > 255) rgb.g = 255;
-      else if (rgb.g < 0) rgb.g = 0;
-
-      if (rgb.b > 255) rgb.b = 255;
-      else if (rgb.b < 0) rgb.b = 0;
-      return `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
-    },
-    hasGoodContrast(hexColorCode1, hexColorCode2) {
-      const lum1 = this.luminanace(hexColorCode1);
-      const lum2 = this.luminanace(hexColorCode2);
-      return (lum1 - lum2);
-    },
-  },
-};
-
-export function isValidHexColor(colorCode) {
-  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
-}

package/src/utils/common-utils.js

@@ -1,168 +0,0 @@
-/* For Delayed Event Handler Execution */
-export function debounce(fn, delay) {
-  let timeoutID = null;
-  return (...args) => {
-    clearTimeout(timeoutID);
-    const that = this;
-    timeoutID = setTimeout(() => {
-      fn.apply(that, args);
-    }, delay);
-  };
-}
-
-export const invalidCharsRegEx = /[\s#:?&={}]/g; // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
-export const rapidocApiKey = '_rapidoc_api_key';
-
-export function sleep(ms) {
-  // eslint-disable-next-line no-promise-executor-return
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export function copyToClipboard(data, e) {
-  const btnEl = e.target;
-  const textArea = document.createElement('textarea');
-  textArea.value = data;
-  textArea.style.position = 'fixed'; // avoid scrolling to bottom
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
-  try {
-    document.execCommand('copy');
-    btnEl.innerText = 'Copied';
-    setTimeout(() => {
-      btnEl.innerText = 'Copy';
-    }, 5000);
-  } catch (err) {
-    console.error('Unable to copy', err); // eslint-disable-line no-console
-  }
-  document.body.removeChild(textArea);
-}
-
-export function getBaseUrlFromUrl(url) {
-  const pathArray = url.split('/');
-  return `${pathArray[0]}//${pathArray[2]}`;
-}
-
-export async function wait(ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-
-export function getMatchedComponents(searchVal, component) {
-  return component.name.toLowerCase().includes(searchVal.toLowerCase());
-}
-
-export function getMatchedPaths(searchVal, path, tagName = '') {
-  const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''} ${tagName}`.toLowerCase();
-  return stringToSearch.includes(searchVal.toLowerCase());
-}
-
-export function schemaKeys(schemaProps, result = new Set()) {
-  if (!schemaProps) {
-    return result;
-  }
-  Object.keys(schemaProps).forEach((key) => {
-    result.add(key);
-    if (schemaProps[key].properties) {
-      schemaKeys(schemaProps[key].properties, result);
-    } else if (schemaProps[key].items?.properties) {
-      schemaKeys(schemaProps[key].items?.properties, result);
-    }
-  });
-  return result;
-}
-
-export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
-  if (!searchVal.trim() || searchOptions.length === 0) {
-    return;
-  }
-
-  const pathsMatched = [];
-  allSpecTags.forEach((tag) => {
-    tag.paths.forEach((path) => {
-      let stringToSearch = '';
-      if (searchOptions.includes('search-api-path')) {
-        stringToSearch = path.path;
-      }
-      if (searchOptions.includes('search-api-descr')) {
-        stringToSearch = `${stringToSearch} ${(path.summary || '') + (path.description || '')}`;
-      }
-      if (searchOptions.includes('search-api-params')) {
-        stringToSearch = `${stringToSearch} ${path.parameters?.map((v) => v.name).join(' ') || ''}`;
-      }
-
-      if (searchOptions.includes('search-api-request-body') && path.requestBody) {
-        let schemaKeySet = new Set();
-        for (const contentType in path.requestBody?.content) {
-          if (path.requestBody.content[contentType].schema?.properties) {
-            schemaKeySet = schemaKeys(path.requestBody.content[contentType].schema?.properties);
-          }
-          stringToSearch = `${stringToSearch} ${[...schemaKeySet].join(' ')}`;
-        }
-      }
-
-      if (searchOptions.includes('search-api-resp-descr')) {
-        stringToSearch = `${stringToSearch} ${Object.values(path.responses).map((v) => v.description || '').join(' ')}`;
-      }
-
-      if (stringToSearch.toLowerCase().includes(searchVal.trim().toLowerCase())) {
-        pathsMatched.push({
-          elementId: path.elementId,
-          method: path.method,
-          path: path.path,
-          summary: path.summary || path.description || '',
-          deprecated: path.deprecated,
-        });
-      }
-    });
-  });
-  return pathsMatched;
-}
-
-/*
-export function prettyXml(sourceXmlString) {
-  const xmlDoc = new DOMParser().parseFromString(sourceXmlString, 'text/xml');
-  const xsltDoc = new DOMParser().parseFromString([
-    // describes how we want to modify the XML - indent everything
-    `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-      <xsl:strip-space elements="*"/>
-        <xsl:template match="para[content-style][not(text())]">
-          <xsl:value-of select="normalize-space(.)"/>
-        </xsl:template>
-        <xsl:template match="node()|@*">
-          <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>
-        </xsl:template>
-        <xsl:output indent="yes"/>
-      </xsl:stylesheet>`,
-  ].join('\n'), 'application/xml');
-  const xsltProcessor = new XSLTProcessor();
-  xsltProcessor.importStylesheet(xsltDoc);
-  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
-  return new XMLSerializer().serializeToString(resultDoc);
-}
-*/
-
-export function downloadResource(url, fileName) {
-  if (url) {
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.style = 'display: none';
-    a.href = url;
-    a.download = fileName;
-    a.click();
-    a.remove();
-  }
-}
-
-export function viewResource(url) {
-  if (url) {
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.style = 'display: none';
-    a.href = url;
-    a.target = '_blank';
-    a.click();
-    a.remove();
-  }
-}