Schema displayed as table by default.

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog #
 This package follows standard semvar, `<major>.<minor>.<build>`. No breaking changes will be introduced to existing `<minor>` versions.
 
+## 2.2
+* The `table` view is now the default as the `tree` view becomes deprecated. To display the `tree` view, use the `tree` attribute on the openapi-explorer html element.
+
 ## 2.1
 * Add `x-locale` vendor extension to specify the locale of the spec.
 * Add `path` and `query` parameters into request interceptor.

docs/documentation.md

@@ -11,7 +11,7 @@
 * `display-nulls` - [false] Force rendering of null types in the models. By default the models will assume `null` is equivalent to `not-required`.
 * `hide-defaults` - [false] Prevents filling the request data with the default data.
 * `collapse` - [false] Set the operations and components collapsed by default
-* `table` - [false] Converts the body displays from object json to a table for schemas
+* `tree` - [false] Converts the body displays from schema tables to object jsons.
 * `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

src/openapi-explorer.js

@@ -71,8 +71,8 @@ export default class OpenApiExplorer extends LitElement {
       },
 
       // Schema Styles
-      displaySchemaAsTable: {
-        type: Boolean, attribute: 'table',
+      displaySchemaAsTree: {
+        type: Boolean, attribute: 'tree',
         converter(value) {
           return value !== 'false' && value !== false;
         }

src/templates/callback-template.js

@@ -31,7 +31,7 @@ export default function callbackTemplate(callbacks) {
                       display-nulls="${!!this.includeNulls}"
                       enable-console = "false"
                       render-style="${this.renderStyle}" 
-                      schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}"
+                      schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}"
                       active-schema-tab = "${this.defaultSchemaTab}"
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-hide-read-only = "${this.schemaHideReadOnly}"
@@ -45,7 +45,7 @@ export default function callbackTemplate(callbacks) {
                       .responses="${method[1] && method[1].responses}"
                       display-nulls="${!!this.includeNulls}"
                       render-style="${this.renderStyle}"
-                      schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}"
+                      schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}"
                       active-schema-tab = "${this.defaultSchemaTab}"
                       schema-expand-level = "${this.schemaExpandLevel}"
                       @scrollToSchemaComponentByName=${v => this.scrollToSchemaComponentByName(v)}

src/templates/components-template.js

@@ -13,7 +13,7 @@ function componentBodyTemplate(sComponent) {
   <div class='expanded-endpoint-component observe-me ${sComponent.name}' id='cmp--${sComponent.id}'>
     <h2 @click='${() => this.scrollTo(`cmp--${sComponent.id}`)}'>${sComponent.name}</h2>
     <div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg2)'> 
-    ${this.displaySchemaAsTable
+    ${!this.displaySchemaAsTree
     ? html`<schema-table
       .data = '${formdataPartSchema}'
       @scrollToSchemaComponentByName=${v => this.scrollToSchemaComponentByName(v)}

src/templates/endpoint-template.js

@@ -96,7 +96,7 @@ function endpointBodyTemplate(path) {
           display-nulls="${!!this.includeNulls}"
           enable-console = "${!this.hideExecution}"
           render-style="${this.renderStyle}" 
-          schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}"
+          schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}"
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-hide-read-only = "${this.schemaHideReadOnly}"
           fetch-credentials = "${this.fetchCredentials}"
@@ -111,7 +111,7 @@ function endpointBodyTemplate(path) {
         display-nulls="${!!this.includeNulls}"
         active-schema-tab = "${this.defaultSchemaTab}" 
         render-style="${this.renderStyle}" 
-        schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}"
+        schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}"
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"

src/templates/expanded-endpoint-template.js

@@ -53,7 +53,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           display-nulls="${!!this.includeNulls}"
           enable-console = "${!this.hideExecution}"
           render-style="${this.renderStyle}" 
-          schema-style = "${this.displaySchemaAsTable ? 'table' : 'tree'}"
+          schema-style = "${this.displaySchemaAsTree ? 'tree' : 'table'}"
           active-schema-tab = "${this.defaultSchemaTab}"
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-hide-read-only = "${this.schemaHideReadOnly}"
@@ -69,7 +69,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           .responses = "${path.responses}"
           display-nulls="${!!this.includeNulls}"
           render-style = "${this.renderStyle}"
-          schema-style = "${this.displaySchemaAsTable ? 'table' : 'tree'}"
+          schema-style = "${this.displaySchemaAsTree ? 'tree' : 'table'}"
           active-schema-tab = "${this.defaultSchemaTab}"
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-hide-write-only = "${this.schemaHideWriteOnly}"