rapidoc 9.3.3 → 9.3.5

package/src/components/schema-tree.js

@@ -41,13 +41,10 @@ export default class SchemaTree extends LitElement {
       .tree .tr:hover{
         background-color:var(--hover-color);
       }
-      .collapsed-descr .tr {
+      .collapsed-all-descr .tr:not(.expanded-descr) {
+        overflow: hidden;
         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;
       }
@@ -63,7 +60,9 @@ export default class SchemaTree extends LitElement {
       .tr.expanded:hover + .inside-bracket + .close-bracket {
         color: var(--primary-color);
       }
-
+      .inside-bracket.xxx-of-option {
+        border-left: 1px solid transparent;
+      }
       .open-bracket{
         display:inline-block;
         padding: 0 20px 0 0;
@@ -82,17 +81,12 @@ export default class SchemaTree extends LitElement {
       }
       .tr.collapsed + .inside-bracket,
       .tr.collapsed + .inside-bracket + .close-bracket{
+        overflow: hidden;
         display:none;
       }
       .inside-bracket.object,
       .inside-bracket.array {
         border-left: 1px dotted var(--border-color);
-      }
-      .inside-bracket.xxx-of {
-        padding:5px 0px;
-        border-style: dotted;
-        border-width: 0 0 1px 0;
-        border-color:var(--primary-color);
       }`,
       CustomStyles,
     ];
@@ -101,23 +95,19 @@ export default class SchemaTree extends LitElement {
   /* eslint-disable indent */
   render() {
     return html`
-      <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
+      <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-all-descr' : 'collapsed-all-descr'}" @click="${(e) => this.handleAllEvents(e)}">
         <div class="toolbar">
           <div class="toolbar-item schema-root-type ${this.data?.['::type'] || ''} "> ${this.data?.['::type'] || ''} </div>
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div part="schema-toolbar-item schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-toolbar-item schema-multiline-toggle" class='toolbar-item schema-multiline-toggle'> 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
-              </div>
-            `
+              </div>`
             : ''
           }
         </div>
-        ${this.data?.['::description']
-          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
-          : ''
-        }
+        <span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data?.['::description'] || ''))}</span>
         ${this.data
           ? html`
             ${this.generateTree(
@@ -138,7 +128,7 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data && data['::readwrite'] === 'readonly') {
+      if (data?.['::readwrite'] === 'readonly') {
         return;
       }
     }
@@ -148,7 +138,7 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data && data['::readwrite'] === 'writeonly') {
+      if (data?.['::readwrite'] === 'writeonly') {
         return;
       }
     }
@@ -174,8 +164,7 @@ export default class SchemaTree extends LitElement {
       keyLabel = key.replace('::', '').replace('~', ' ');
     } else if (key.startsWith('::OPTION')) {
       const parts = key.split('~');
-      keyLabel = parts[1]; // eslint-disable-line prefer-destructuring
-      keyDescr = parts[2]; // eslint-disable-line prefer-destructuring
+      [, keyLabel, keyDescr] = parts;
     } else {
       keyLabel = key;
     }
@@ -190,16 +179,16 @@ export default class SchemaTree extends LitElement {
     if (data['::type'] === 'object') {
       if (dataType === 'array') {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
+          openBracket = html`<span class="open-bracket array-of-object" >[{</span>`;
         } else {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+          openBracket = html`<span class="open-bracket array-of-object">[{...}]</span>`;
         }
         closeBracket = '}]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
+          openBracket = html`<span class="open-bracket object">${data['::nullable'] ? 'null┃' : ''}{</span>`;
         } else {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+          openBracket = html`<span class="open-bracket object">${data['::nullable'] ? 'null┃' : ''}{...}</span>`;
         }
         closeBracket = '}';
       }
@@ -207,23 +196,23 @@ export default class SchemaTree extends LitElement {
       if (dataType === 'array') {
         const arrType = arrayType !== 'object' ? arrayType : '';
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
+          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}">[[ ${arrType} </span>`;
         } else {
-          openBracket = html`<span class="open-bracket array-of-array"  data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+          openBracket = html`<span class="open-bracket array-of-array"  data-array-type="${arrType}">[[...]]</span>`;
         }
         closeBracket = ']]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
+          openBracket = html`<span class="open-bracket array">[</span>`;
         } else {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+          openBracket = html`<span class="open-bracket array">[...]</span>`;
         }
         closeBracket = ']';
       }
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
           <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>`
@@ -236,7 +225,6 @@ export default class SchemaTree extends LitElement {
                     </span>`
                   : ''
             }
-            ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
             ${openBracket}
           </div>
           <div class='td key-descr m-markdown-small'>${unsafeHTML(marked(description || ''))}</div>
@@ -246,7 +234,7 @@ export default class SchemaTree extends LitElement {
             ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
-                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel'].includes(dataKey)
+                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
                   ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                     ? html`${this.generateTree(
                       data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -264,7 +252,7 @@ export default class SchemaTree extends LitElement {
                     data[dataKey]['::type'],
                     data[dataKey]['::array-type'] || '',
                     dataKey,
-                    data[dataKey]['::description'],
+                    data[dataKey]?.['::description'] || '',
                     newSchemaLevel,
                     newIndentLevel,
                     data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
@@ -282,6 +270,7 @@ export default class SchemaTree extends LitElement {
     }
 
     // For Primitive types and array of Primitives
+    // eslint-disable-next-line no-unused-vars
     const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
     if (primitiveReadOrWrite === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
@@ -290,7 +279,7 @@ export default class SchemaTree extends LitElement {
       return;
     }
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-
+    const descrExpander = `${constraint || defaultValue || allowedValues || pattern ? `<span class="descr-expand-toggle ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : ''}">➔</span>` : ''}`;
     let finalReadWriteText = '';
     let finalReadWriteTip = '';
     if (dataType === 'array') {
@@ -302,12 +291,12 @@ export default class SchemaTree extends LitElement {
         finalReadWriteTip = 'Write-Only';
       }
     } else if (primitiveReadOrWrite === '🆁') {
-        finalReadWriteText = '🆁';
-        finalReadWriteTip = 'Read-Only';
-      } else if (primitiveReadOrWrite === '🆆') {
-        finalReadWriteText = '🆆';
-        finalReadWriteTip = 'Write-Only';
-      }
+      finalReadWriteText = '🆁';
+      finalReadWriteTip = 'Read-Only';
+    } else if (primitiveReadOrWrite === '🆆') {
+      finalReadWriteText = '🆆';
+      finalReadWriteTip = 'Write-Only';
+    }
 
     return html`
       <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
@@ -325,20 +314,20 @@ export default class SchemaTree extends LitElement {
           </span>
         </div>
         <div class='td key-descr'>
-          ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
-          ${schemaDescription
-            ? html`<span class="m-markdown-small">
-              ${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription} ${constraint || defaultValue || allowedValues || pattern ? '<span class="more-content">⤵</span>' : ''}`))}
+          ${description || schemaTitle || schemaDescription
+            ? html`${html`<span class="m-markdown-small">
+                ${unsafeHTML(marked(dataType === 'array'
+                  ? `${descrExpander} ${description}`
+                  : schemaTitle
+                    ? `${descrExpander} <b>${schemaTitle}:</b> ${schemaDescription}`
+                    : `${descrExpander} ${schemaDescription}`))}
               </span>`
-            : schemaTitle
-              ? html`${schemaTitle} ${constraint || defaultValue || allowedValues || pattern
-                ? html`<span class="more-content">⤵</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>` : ''}
+          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>${type === 'const' ? 'Value' : '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>
@@ -346,8 +335,23 @@ export default class SchemaTree extends LitElement {
   }
   /* eslint-enable indent */
 
+  handleAllEvents(e) {
+    if (e.target.classList.contains('open-bracket')) {
+      this.toggleObjectExpand(e);
+    } else if (e.target.classList.contains('schema-multiline-toggle')) {
+      this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true');
+    } else if (e.target.classList.contains('descr-expand-toggle')) {
+      const trEl = e.target.closest('.tr');
+      if (trEl) {
+        trEl.classList.toggle('expanded-descr');
+        trEl.style.maxHeight = trEl.scrollHeight;
+      }
+    }
+  }
+
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
+    const nullable = rowEl.classList.contains('nullable');
     if (rowEl.classList.contains('expanded')) {
       rowEl.classList.replace('expanded', 'collapsed');
       e.target.innerHTML = e.target.classList.contains('array-of-object')
@@ -356,7 +360,7 @@ export default class SchemaTree extends LitElement {
           ? '[[...]]'
           : e.target.classList.contains('array')
             ? '[...]'
-            : '{...}';
+            : `${nullable ? 'null┃' : ''}{...}`;
     } else {
       rowEl.classList.replace('collapsed', 'expanded');
       e.target.innerHTML = e.target.classList.contains('array-of-object')
@@ -364,7 +368,7 @@ export default class SchemaTree extends LitElement {
         : e.target.classList.contains('array-of-array')
           ? `[[ ${e.target.dataset.arrayType}`
           : e.target.classList.contains('object')
-            ? '{'
+            ? `${nullable ? 'null┃' : ''}{`
             : '[';
     }
   }

package/src/components/tag-input.js

@@ -6,12 +6,12 @@ export default class TagInput extends LitElement {
     let tagItemTmpl = '';
     if (Array.isArray(this.value)) {
       tagItemTmpl = html`${this.value
-        .filter((v) => v.trim() !== '')
+        .filter((v) => typeof v === 'string' && v.trim() !== '')
         .map((v) => html`<span class='tag'>${v}</span>`)
       }`;
     }
     return html`
-      <div class='tags' tabindex="0">
+      <div class='tags'>
         ${tagItemTmpl}
         <input type="text" class='editor' @paste="${(e) => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" @blur="${this.onBlur}" placeholder="${this.placeholder || ''}">
       </div>
@@ -84,7 +84,7 @@ export default class TagInput extends LitElement {
 
   static get styles() {
     return [css`
-      .tags{
+      .tags {
         display:flex;
         flex-wrap: wrap;
         outline: none;
@@ -110,7 +110,7 @@ export default class TagInput extends LitElement {
       .tag:hover ~ #cursor {
         display: block;
       }
-      .editor{
+      .editor {
         flex:1;
         border:1px solid transparent;
         color:var(--fg);
@@ -121,6 +121,9 @@ export default class TagInput extends LitElement {
         background:transparent;
         font-size: calc(var(--font-size-small) + 1px);
       }
+      .editor:focus-visible {
+        outline: 1px solid;
+      }
       .editor::placeholder {
         color: var(--placeholder-color);
         opacity:1;

package/src/json-schema-viewer.js

@@ -259,7 +259,7 @@ export default class JsonSchemaViewer extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 
@@ -287,6 +287,7 @@ export default class JsonSchemaViewer extends LitElement {
         specUrl,
         this.generateMissingTags === 'true',
         this.sortTags === 'true',
+        this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
       );
       this.loading = false;

package/src/rapidoc-mini.js

@@ -264,7 +264,7 @@ export default class RapiDocMini extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }