fixes #331 - one-of options style shouuld be uniform

Author: mrin9

src/components/schema-table.js

@@ -139,7 +139,7 @@ export default class SchemaTable extends LitElement {
                   : ''
                 }
                 ${data['::type'] === 'xxx-of-option' || prevKey.startsWith('::OPTION')
-                  ? html`<span class='xxx-of-key'>${newPrevKey}</span>`
+                  ? html`<span class='xxx-of-key' style='margin-left:-6px' >${newPrevKey}</span>`
                   : newPrevKey.endsWith('*')
                     ? html`<span style="display:inline-block; margin-left:-6px;"> ${newPrevKey.substring(0, newPrevKey.length - 1)}</span><span style='color:var(--red);'>*</span>`
                     : html`<span style="display:inline-block; margin-left:-6px;">${newPrevKey}</span>`
@@ -175,7 +175,9 @@ export default class SchemaTable extends LitElement {
         <div class='td key' style='padding-left:${leftPadding}px' >
           ${newPrevKey.endsWith('*')
             ? html`${newPrevKey.substring(0, newPrevKey.length - 1)}<span style='color:var(--red);'>*</span>`
-            : newPrevKey
+            : prevKey.startsWith('::OPTION')
+              ? html`<span class='xxx-of-key'>${newPrevKey}</span>`
+              : html`${newPrevKey}`
           }
         </div>
         <div class='td key-type ${dataTypeCss}'>${prevDataType === 'array' ? `[${itemParts[0]}]` : itemParts[0]} <span style="font-family: var(--font-mono);">${itemParts[1]}</span> </div>

src/components/schema-tree.js

@@ -185,10 +185,12 @@ export default class SchemaTree extends LitElement {
         <div class='td key' style='min-width:${minFieldColWidth}px' >
           ${newPrevKey.endsWith('*')
             ? html`${newPrevKey.substring(0, newPrevKey.length - 1)}<span style='color:var(--red);'>*</span>`
-            : newPrevKey
+            : prevKey.startsWith('::OPTION')
+              ? html`<span class='xxx-of-key'>${newPrevKey}</span>`
+              : html`${newPrevKey}`
           }:
           <span class='${dataTypeCss}'> 
-            ${prevDataType === 'array' ? `[${itemParts[0]}]` : itemParts[0]}
+            ${prevDataType === 'array' ? `[${itemParts[0]}]` : `${itemParts[0]}`}
             <span>${itemParts[1]}</span>
           </span>
         </div>

src/styles/schema-styles.js

@@ -40,7 +40,6 @@ export default css`
 }
 
 .tr.xxx-of{
-  color:var(--primary-color);
   border-top: 1px dotted var(--primary-color);
 }
 

src/utils/schema-utils.js

@@ -347,20 +347,18 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       }
     }
     // 2. Then show allof/anyof objects
-    let i = 1;
     const objWithAnyOfProps = {};
     const xxxOf = schema.anyOf ? 'anyOf' : 'oneOf';
-    schema[xxxOf].forEach((v) => {
+    schema[xxxOf].forEach((v, index) => {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         const partialObj = schemaInObjectNotation(v, {});
-        objWithAnyOfProps[`::OPTION~${i}`] = partialObj;
+        objWithAnyOfProps[`::OPTION~${index + 1}`] = partialObj;
         objWithAnyOfProps['::type'] = 'xxx-of-option';
-        i++;
       } else if (v.type === 'array' || v.items) {
         const partialObj = [schemaInObjectNotation(v, {})];
         Object.assign(objWithAnyOfProps, partialObj);
       } else {
-        const prop = `prop${Object.keys(objWithAnyOfProps).length}`;
+        const prop = `::OPTION~${index + 1}`;
         objWithAnyOfProps[prop] = `${getTypeInfo(v).html}`;
       }
     });