Upgrade with breaking changes to v2.0. fix #188.

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog #
 This package follows standard semvar, `<major>.<minor>.<build>`. No breaking changes will be introduced to existing `<minor>` versions.
 
+## 2.0
+* `show-server-selection` has now be inverted to be `hide-server-selection` this brings it in line with how html boolean attributes are supposed to work. If you set this value to false previously, now you can hide the section using the new property.
+* `allow-authentication` has now be inverted to be `hide-authentication` this brings it in line with how html boolean attributes are supposed to work. If you set this value to false previously, now you can hide the section using the new property.
+
 ## 1.1 ##
 * Support dynamic curl creation.
 * Support inline image displays.

README.md

@@ -65,6 +65,7 @@ Web Component Custom Element for Open-API spec viewing, with automatic integrati
 
 
 ## Documentation
+* [Migrating from v1 to v2 of openapi-explorer](./CHANGELOG.md#2.0) - Review the breaking changes
 * [Property and variables documentation](./docs/documentation.md)
 * [Examples (Vue, React, JS, and more)](./docs/examples.md)
 * Generate the open specification document necessary for this library - by using an editor or by following the [Open API Specification](https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md)

docs/documentation.md

@@ -16,8 +16,8 @@
 * `schema-expand-level` - [9999] Expands the display of schemas and models to this depth. Set to `1` to display only the first level properties.
 
 ### Hide/Show Sections
-* `show-authentication` - Show the authentication section
-* `show-server-selection` - Show server selection section
+* `hide-authentication` - Hide the authentication section
+* `hide-server-selection` - Hide server selection section
 * `hide-components` - Hide the OpenAPI specification components from being displayed
 
 ### Custom configuration

mocks/index.html

@@ -39,7 +39,14 @@
   </openapi-explorer> -->
 
   <!-- <openapi-explorer spec-url="https://api.authress.io/v1"></openapi-explorer> -->
-  <openapi-explorer spec-url="mocks/index-schema.json" schema-expand-level="1"></openapi-explorer>
+  <openapi-explorer
+    spec-url = "https://petstore3.swagger.io/api/v3/openapi.json"
+    enable-console = false
+    hide-authentication
+    hide-server-selection
+  >
+  </openapi-explorer>
+  <!-- <openapi-explorer spec-url="mocks/index-schema.json" schema-expand-level="1"></openapi-explorer> -->
     <script>
       document.addEventListener('DOMContentLoaded', async (event) => {
         // await document.getElementsByTagName("openapi-explorer")[0].loadSpec(objSpec);

src/openapi-explorer.js

@@ -68,12 +68,11 @@ export default class OpenApiExplorer extends LitElement {
 
       // Hide/Show Sections & Enable Disable actions
       showInfo: { type: String, attribute: 'show-info' },
-      allowAuthentication: { type: String, attribute: 'show-authentication' },
+      hideAuthentication: { type: Boolean, attribute: 'hide-authentication' },
       allowTry: { type: String, attribute: 'enable-console' },
       includeNulls: { type: Boolean, attribute: 'display-nulls' },
-      allowSearch: { type: String, attribute: 'allow-search' },
-      allowAdvancedSearch: { type: String, attribute: 'allow-advanced-search' },
-      allowServerSelection: { type: String, attribute: 'show-server-selection' },
+      hideSearch: { type: Boolean, attribute: 'hide-search' },
+      hideServerSelection: { type: Boolean, attribute: 'hide-server-selection' },
       hideComponents: { type: Boolean, attribute: 'hide-components' },
 
       // Main Colors and Font
@@ -383,16 +382,11 @@ export default class OpenApiExplorer extends LitElement {
       this.responseAreaHeight = '300px';
     }
 
-    if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }
-    if (!this.allowAdvancedSearch || !'true, false,'.includes(`${this.allowAdvancedSearch},`)) { this.allowAdvancedSearch = 'true'; }
-
     if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }
 
     if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }
 
     if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
-    if (!this.allowServerSelection || !'true, false,'.includes(`${this.allowServerSelection},`)) { this.allowServerSelection = 'true'; }
-    if (!this.allowAuthentication || !'true, false,'.includes(`${this.allowAuthentication},`)) { this.allowAuthentication = 'true'; }
 
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
 
@@ -616,10 +610,10 @@ export default class OpenApiExplorer extends LitElement {
     if (id === 'overview' && this.showInfo) {
       return true;
     }
-    if (id === 'servers' && this.allowServerSelection) {
+    if (id === 'servers' && !this.hideServerSelection) {
       return true;
     }
-    if (id === 'auth' && this.allowAuthentication) {
+    if (id === 'auth' && !this.hideAuthentication) {
       return true;
     }
     if (id.startsWith('tag--')) {

src/templates/focused-endpoint-template.js

@@ -37,9 +37,9 @@ export default function focusedEndpointTemplate() {
   let i = 0;
   if (focusElId.startsWith('overview') && this.showInfo === 'true') {
     focusedTemplate = overviewTemplate.call(this);
-  } else if (focusElId === 'auth' && this.allowAuthentication === 'true') {
+  } else if (focusElId === 'auth' && !this.hideAuthentication) {
     focusedTemplate = securitySchemeTemplate.call(this);
-  } else if (focusElId === 'servers' && this.allowServerSelection === 'true') {
+  } else if (focusElId === 'servers' && !this.hideServerSelection) {
     focusedTemplate = serverTemplate.call(this);
   } else if (focusElId.startsWith('section')) {
     focusedTemplate = html`

src/templates/mainBodyTemplate.js

@@ -30,7 +30,7 @@ export default function mainBodyTemplate() {
     ${SetTheme.call(this, newTheme)}
     
     <!-- Advanced Search -->
-    ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
+    ${this.hideSearch ? '' : advancedSearchTemplate.call(this)}
 
     <div id='the-main-body' class="body">
       <!-- Side Nav -->
@@ -52,8 +52,8 @@ export default function mainBodyTemplate() {
                   ? html`${focusedEndpointTemplate.call(this)}`
                   : html`
                     ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
-                    ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
-                    ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
+                    ${!this.hideServerSelection ? serverTemplate.call(this) : ''}
+                    ${!this.hideAuthentication ? securitySchemeTemplate.call(this) : ''}
                     <section id='section'
                       class='observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}'>
                       <slot name="custom-section"></slot>

src/templates/navbar-template.js

@@ -34,31 +34,21 @@ export default function navbarTemplate() {
   return html`
   <nav class='nav-bar ${this.renderStyle}' part="section-navbar">
     <slot name="nav-header"></slot>
-    ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
-      ? ''
+    ${this.hideSearch ? ''
       : 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)' : ''}">
-          ${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(--secondary-color); background-color:var(--nav-hover-bg-color)" 
-                  type = "text"
-                  placeholder = "${getI18nText('menu.filter')}"
-                  @input = "${this.onSearchChange}"  
-                  spellcheck = "false">
-              </div>`
-          }
-          ${this.allowAdvancedSearch === 'false'
-            ? ''
-            : html`
-              <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
-                ${getI18nText('menu.search')}
-              </button>
-            `
-          }
+        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:24px;">
+          <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(--secondary-color); background-color:var(--nav-hover-bg-color)" 
+              type = "text"
+              placeholder = "${getI18nText('menu.filter')}"
+              @input = "${this.onSearchChange}"  
+              spellcheck = "false">
+          </div>
+          <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
+            ${getI18nText('menu.search')}
+          </button>
         </div>
       `
     }
@@ -70,11 +60,11 @@ export default function navbarTemplate() {
         </div>`
       }
     
-      ${this.allowServerSelection === 'false'
+      ${this.hideServerSelection
         ? ''
         : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.api-servers')} </div>`
       }
-      ${(this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes)
+      ${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
         ? ''
         : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.authentication')} </div>`
       }