Add Tuple support

lib/components/JsonSchema/json-schema-common.scss

@@ -77,6 +77,12 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   font-weight: $base-font-weight;
 }
 
+.param-type.tuple:before {
+  content: "Tuple";
+  color: $black;
+  font-weight: $base-font-weight;
+}
+
 .param-type.with-hint {
   display: inline-block;
   margin-bottom: 0.4em;
@@ -86,7 +92,6 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 }
 
 .param-type-trivial {
-  margin: 10px 10px 0;
   display: inline-block;
 }
 

lib/components/JsonSchema/json-schema.html

@@ -21,7 +21,17 @@
     <span *ngFor="let enumItem of schema.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
   </div>
 </span>
-<table *ngIf="!schema.isTrivial" class="params-wrap" [ngClass]="{'params-array': _isArray}">
+<div *ngIf="schema._isTuple" class="params-wrap params-array array-tuple">
+  <template ngFor [ngForOf]="schema.items" let-item="$implicit" let-idx="index" [ngForTrackBy]="trackByIdx">
+    <div class="tuple-item">
+      <span class="tuple-item-index"> [{{idx}}]: </span>
+      <json-schema class="nested-schema" [pointer]="item._pointer" [isArray]='item._isArray'
+      [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema">
+      </json-schema>
+    </div>
+  </template>
+</div>
+<table *ngIf="!schema.isTrivial && !schema.isTuple" class="params-wrap" [ngClass]="{'params-array': _isArray}">
   <!-- <caption> {{_displayType}} </caption> -->
   <template ngFor [ngForOf]="properties" let-prop="$implicit" let-last="last" [ngForTrackBy]="trackByIdx">
     <tr class="param" [ngClass]="{'last': last,
@@ -40,7 +50,7 @@
       </td>
       <td class="param-info">
         <div>
-          <span class="param-type {{prop.type}}" [ngClass]="{'with-hint': prop._displayTypeHint}"
+          <span class="param-type {{prop.type}}" [ngClass]="{'with-hint': prop._displayTypeHint, 'tuple': prop._isTuple}"
           title="{{prop._displayTypeHint}}"> {{prop._displayType}} {{prop._displayFormat}}
           <span class="param-range" *ngIf="prop._range"> {{prop._range}} </span>
           </span>
@@ -60,7 +70,7 @@
         </div>
       </td>
     </tr>
-    <tr class="param-schema" [ngClass]="{'param-array': prop._isArray, 'last': last}" [hidden]="!prop._pointer">
+    <tr class="param-schema" [ngClass]="{'last': last}" [hidden]="!prop._pointer">
       <td colspan="2">
         <zippy #subSchema title="Expand" [headless]="true" (open)="lazySchema.load()" [visible]="autoExpand">
           <json-schema-lazy #lazySchema [auto]="autoExpand" class="nested-schema" [pointer]="prop._pointer" [isArray]='prop._isArray'
@@ -73,7 +83,7 @@
   <tr *ngIf="hasDescendants" class="param-wrap discriminator-wrap" [ngClass]="{empty:activeDescendant.empty}">
     <td colspan="2">
       <div class="derived-schema" *ngFor="let descendant of schema._descendants" [ngClass]="{active: descendant.active, empty: descendant.empty}">
-        <json-schema class="discriminator-part" *ngIf="!descendant.empty" [childFor]="pointer"
+        <json-schema class="discriminator-part" *ngIf="!descendant.empty" [childFor]="pointer" [nestOdd]="nestOdd"
         pointer="{{descendant.$ref}}" [final]="descendant.final" [isRequestSchema]="isRequestSchema">
         </json-schema>
       </div>

lib/components/JsonSchema/json-schema.scss

@@ -58,11 +58,13 @@ $array-marker-line-height: 1.5;
     border-top-color: white;
   }
 
-  > .params-wrap > .param:first-of-type > .param-name:before, > .params-wrap > .param:last-of-type > .param-name:after {
+  > .params-wrap > .param:first-of-type > .param-name:before,
+  > .params-wrap > .param:last-of-type > .param-name:after {
     border-color: $side-menu-active-bg-color;
   }
 
-  > .params-wrap > .param:last-of-type, > .params-wrap > .param.last {
+  > .params-wrap > .param:last-of-type,
+  > .params-wrap > .param.last {
     > .param-name:after {
       border-color: $side-menu-active-bg-color;
     }
@@ -119,11 +121,13 @@ table {
 
 .params-wrap.params-array:after {
   content: "]";
+  font-family: monospace;
 }
 
 .params-wrap.params-array:before {
   content: "Array [";
   padding-top: 1em;
+  font-family: monospace;
 }
 
 .params-wrap.params-array {
@@ -201,3 +205,21 @@ li:before {
   content: "- ";
   font-weight: bold;
 }
+
+.array-tuple > .tuple-item {
+  margin-top: 1.5em;
+  display: flex;
+
+  > span {
+    flex: 0;
+    padding: 10px 15px;
+    font-family: monospace;
+  }
+
+  > json-schema {
+    flex: 1;
+    &:before, &:after {
+      display: none;
+    }
+  }
+}

lib/services/schema-helper.service.ts

@@ -59,9 +59,9 @@ const injectors = {
       injectTo.discriminator = propertySchema.discriminator;
     }
   },
-  array: {
+  simpleArray: {
     check: (propertySchema) => {
-      return propertySchema.type === 'array';
+      return propertySchema.type === 'array' && !Array.isArray(propertySchema.items);
     },
     inject: (injectTo, propertySchema = injectTo, propPointer) => {
       injectTo._isArray = true;
@@ -71,6 +71,22 @@ const injectors = {
       SchemaHelper.runInjectors(injectTo, propertySchema.items, propPointer);
     }
   },
+  tuple: {
+    check: (propertySchema) => {
+      return propertySchema.type === 'array' && Array.isArray(propertySchema.items);
+    },
+    inject: (injectTo, propertySchema = injectTo, propPointer) => {
+      injectTo._isTuple = true;
+      injectTo._displayType = '';
+      let itemsPtr = JsonPointer.join(propertySchema._pointer || propPointer, ['items']);
+      for (let i=0; i < propertySchema.items.length; i++) {
+        let itemSchema = propertySchema.items[i];
+        itemSchema._pointer = itemSchema._pointer || JsonPointer.join(itemsPtr, [i.toString()]);
+      }
+
+      // SchemaHelper.runInjectors(injectTo, propertySchema.items, propPointer);
+    }
+  },
   object: {
     check: (propertySchema) => {
       return propertySchema.type === 'object' && propertySchema.properties;
@@ -240,7 +256,7 @@ export class SchemaHelper {
 
   static unwrapArray(schema, pointer) {
     var res = schema;
-    if (schema && schema.type === 'array') {
+    if (schema && schema.type === 'array' && !Array.isArray(schema.items)) {
       let ptr = schema.items._pointer || JsonPointer.join(pointer, ['items']);
       res = schema.items;
       res._isArray = true;