openapi-explorer 0.9.310 → 0.9.314

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

@@ -0,0 +1,191 @@
+import { LitElement, html, css } from 'lit-element';
+import { marked } from 'marked';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import FontStyles from '../styles/font-styles';
+import SchemaStyles from '../styles/schema-styles';
+import BorderStyles from '../styles/border-styles';
+export default class SchemaTree extends LitElement {
+  static get properties() {
+    return {
+      data: {
+        type: Object
+      },
+      schemaExpandLevel: {
+        type: Number,
+        attribute: 'schema-expand-level'
+      },
+      schemaDescriptionExpanded: {
+        type: String,
+        attribute: 'schema-description-expanded'
+      },
+      schemaHideReadOnly: {
+        type: String,
+        attribute: 'schema-hide-read-only'
+      },
+      schemaHideWriteOnly: {
+        type: String,
+        attribute: 'schema-hide-write-only'
+      }
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
+      this.schemaExpandLevel = 99999;
+    }
+
+    if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) {
+      this.schemaDescriptionExpanded = 'true';
+    }
+
+    if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) {
+      this.schemaHideReadOnly = 'true';
+    }
+
+    if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) {
+      this.schemaHideWriteOnly = 'true';
+    }
+  }
+
+  static get styles() {
+    return [FontStyles, SchemaStyles, BorderStyles, css`.tree{min-height:30px;background:#333;padding:10px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + 8px)}.collapsed-descr .m-markdown-small p{line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.tr.collapsed+.inside-bracket,.tr.collapsed+.inside-bracket+.close-bracket{display:none}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}`];
+  }
+  /* eslint-disable indent */
+
+
+  render() {
+    return html` <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> ${this.data && this.data['::description'] ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => {
+      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
+    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : html`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+  }
+
+  generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
+    if (!data) {
+      return html`<div class="null" style="display:inline">null</div>`;
+    }
+
+    if (Object.keys(data).length === 0) {
+      return html`<span class="key object">${key}:{ }</span>`;
+    }
+
+    let keyLabel = '';
+    let keyDescr = '';
+
+    if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
+      keyLabel = key.replace('::', '').replace('~', ' ');
+    } else if (key.startsWith('::OPTION')) {
+      const parts = key.split('~');
+      keyLabel = parts[1];
+      keyDescr = parts[2];
+    } else {
+      keyLabel = key;
+    }
+
+    const leftPadding = 16; // Min-width used for model keys: `td key `
+
+    const minFieldColWidth = 250 - indentLevel * leftPadding;
+    let openBracket = '';
+    let closeBracket = '';
+    const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1; // const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' ? indentLevel : (indentLevel + 1);
+
+    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : indentLevel + 1;
+
+    if (data['::type'] === 'object') {
+      if (dataType === 'array') {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
+        } else {
+          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+        }
+
+        closeBracket = '}]';
+      } else {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
+        } else {
+          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+        }
+
+        closeBracket = '}';
+      }
+    } else if (data['::type'] === 'array') {
+      if (dataType === 'array') {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = html`<span class="open-bracket array-of-array" @click="${this.toggleObjectExpand}">[[</span>`;
+        } else {
+          openBracket = html`<span class="open-bracket array-of-array" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+        }
+
+        closeBracket = ']]';
+      } else {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
+        } else {
+          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+        }
+
+        closeBracket = ']';
+      }
+    }
+
+    if (typeof data === 'object') {
+      const flags = data['::flags'] || {};
+
+      if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
+        return undefined;
+      }
+
+      if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
+        return undefined;
+      }
+
+      const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
+      return html` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(marked(displayLine))} </span> </div> </div> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => dataKey.startsWith('::') && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} `;
+    } // For Primitive Data types
+
+
+    const {
+      type,
+      readOrWriteOnly,
+      constraint,
+      defaultValue,
+      allowedValues,
+      pattern,
+      schemaDescription,
+      schemaTitle,
+      deprecated
+    } = JSON.parse(data);
+
+    if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
+      return undefined;
+    }
+
+    if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
+      return undefined;
+    }
+
+    const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
+    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span class="${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : `${type}`} </span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+  }
+  /* eslint-enable indent */
+
+
+  toggleObjectExpand(e) {
+    const rowEl = e.target.closest('.tr');
+
+    if (rowEl.classList.contains('expanded')) {
+      rowEl.classList.replace('expanded', 'collapsed');
+      e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{...}]' : e.target.classList.contains('array-of-array') ? '[[...]]' : e.target.classList.contains('array') ? '[...]' : '{...}';
+    } else {
+      rowEl.classList.replace('collapsed', 'expanded');
+      e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{' : e.target.classList.contains('array-of-array') ? '[[' : e.target.classList.contains('object') ? '{' : '[';
+    }
+  }
+
+}
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('schema-tree', SchemaTree);
+}

package/dist/es/components/tag-input.js

@@ -0,0 +1,67 @@
+import { LitElement, html, css } from 'lit-element';
+export default class TagInput extends LitElement {
+  render() {
+    const tagItemTemplate = html`${(this.value || []).filter(v => v.trim()).map(v => html`<span class="tag">${v}</span>`)}`;
+    return html` <div class="tags" tabindex="0"> ${tagItemTemplate} <input type="text" class="editor" @paste="${e => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}"> </div> `;
+  }
+
+  static get properties() {
+    return {
+      placeholder: {
+        type: String
+      },
+      value: {
+        type: Array,
+        attribute: 'value'
+      }
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!Array.isArray(this.value)) {
+      this.value = this.value !== '' ? [this.value] : [];
+    }
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'value') {
+      if (newVal && oldVal !== newVal) {
+        this.value = newVal.split(',').filter(v => v.trim());
+      }
+    }
+
+    super.attributeChangedCallback(name, oldVal, newVal);
+  }
+
+  afterPaste(e) {
+    const clipboardData = e.clipboardData || window.clipboardData;
+    const pastedData = clipboardData.getData('Text');
+    const pastedArray = pastedData && pastedData.split(',').filter(v => v.trim()) || [];
+    this.value = this.value.concat(pastedArray);
+    e.preventDefault();
+  }
+
+  afterKeyDown(e) {
+    if (e.keyCode === 13) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.value = this.value.concat(e.target.value || []);
+      e.target.value = '';
+    } else if (e.keyCode === 8) {
+      if (e.target.value.length === 0) {
+        this.value = this.value.slice(0, -1);
+      }
+    }
+  }
+
+  static get styles() {
+    return [css`.tags{display:flex;flex-wrap:wrap;outline:0;padding:0;border-radius:var(--border-radius);border:1px solid var(--border-color);cursor:text;overflow:hidden;background:var(--input-bg)}.editor,.tag{padding:3px;margin:2px}.tag{border:1px solid var(--border-color);background-color:var(--bg3);color:var(--fg3);border-radius:var(--border-radius);word-break:break-all;font-size:var(--font-size-small)}.tag:hover~#cursor{display:block}.editor{flex:1;border:1px solid transparent;color:var(--fg);min-width:60px;outline:0;line-height:inherit;font-family:inherit;background:0 0;font-size:calc(var(--font-size-small) + 1px)}.editor::placeholder{color:var(--placeholder-color);opacity:1}`];
+  }
+
+} // Register the element with the browser
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('tag-input', TagInput);
+}

package/{src → dist/es}/openapi-explorer-oauth-handler.js

@@ -1,11 +1,11 @@
 import { checkForAuthToken } from './templates/security-scheme-template';
-
 export default class OpenapiExplorerOauthHandler extends HTMLElement {
   connectedCallback() {
     checkForAuthToken(true);
   }
+
 }
 
 if (!customElements.get('openapi-explorer-oauth-handler')) {
   customElements.define('openapi-explorer-oauth-handler', OpenapiExplorerOauthHandler);
-}
+}