Skip to content

Commit 2c6a4ed

Browse files
mrin9mrin9
committed
improved schema constraint styling
1 parent ff17060 commit 2c6a4ed

File tree

4 files changed

+20
-23
lines changed

4 files changed

+20
-23
lines changed

‎src/components/json-tree.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,12 @@ export default class JsonTree extends LitElement {
5959
.boolean{color:var(--purple);}
6060
.object{color:var(--fg)}
6161
.toolbar {
62+
position: absolute;
63+
top:5px;
64+
right:6px;
6265
display:flex;
63-
width:100%;
64-
padding: 2px 0;
65-
color:var(--primary-color);
66-
font-family: var(--font-regular);
67-
margin-bottom:4px;
66+
padding:2px;
6867
align-items: center;
69-
font-size: calc(var(--font-size-small) - 1px);
7068
}`,
7169
CustomStyles,
7270
];
@@ -77,7 +75,7 @@ export default class JsonTree extends LitElement {
7775
return html`
7876
<div class = "json-tree" >
7977
<div class='toolbar'>
80-
<button class="toolbar-btn" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
78+
<button class="toolbar-btn" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
8179
</div>
8280
${this.generateTree(this.data, true)}
8381
</div>

‎src/components/schema-table.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ export default class SchemaTable extends LitElement {
237237
if (readorWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
238238
return;
239239
}
240-
const dataTypeCss = type.replace(/\{|\[/g, '').substring(0, 4).toLowerCase();
240+
const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
241241
return html`
242242
<div class = "tr primitive">
243243
<div class="td key ${deprecated}" style='padding-left:${leftPadding}px' >
@@ -253,10 +253,10 @@ export default class SchemaTable extends LitElement {
253253
<span style="font-family: var(--font-mono);">${readorWriteOnly} </span> </div>
254254
<div class='td key-descr'>
255255
${dataType === 'array' ? description : ''}
256-
${constraint ? html`<div style='color: var(--fg2); padding-bottom:3px;'> <span class='bold-text'>Constraints:</span> ${constraint}</div>` : ''}
257-
${defaultValue ? html`<div style='color: var(--fg2); padding-bottom:3px;'> <span class='bold-text'>Default:</span> ${defaultValue}</div>` : ''}
258-
${allowedValues ? html`<div style='color: var(--fg2); padding-bottom:3px;'> <span class='bold-text'>Allowed: </span> &nbsp; ${allowedValues}</div>` : ''}
259-
${pattern ? html`<div style='color: var(--fg2); padding-bottom:3px;'> <span class='bold-text'>Pattern:</span> &nbsp; ${pattern}</div>` : ''}
256+
${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}
257+
${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
258+
${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
259+
${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
260260
${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(schemaDescription))}</span>` : ''}
261261
</div>
262262
</div>

‎src/components/schema-tree.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ export default class SchemaTree extends LitElement {
230230
if (readorWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
231231
return;
232232
}
233-
const dataTypeCss = type.replace(/\{|\[/g, '').substring(0, 4).toLowerCase();
233+
const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
234234
return html`
235235
<div class = "tr primitive">
236236
<div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px' >
@@ -249,10 +249,10 @@ export default class SchemaTree extends LitElement {
249249
</div>
250250
<div class='td key-descr'>
251251
${dataType === 'array' ? description : ''}
252-
${constraint ? html`<div style='color: var(--fg2)'><span class='bold-text'>Constraints:</span> &nbsp;${constraint}</div>` : ''}
253-
${defaultValue ? html`<div style='color: var(--fg2)'><span class='bold-text'>Default:</span> ${defaultValue}</div>` : ''}
254-
${allowedValues ? html`<div style='color: var(--fg2)'><span class='bold-text'>Allowed:</span> &nbsp; ${allowedValues}</div>` : ''}
255-
${pattern ? html`<div style='color: var(--fg2)'><span class='bold-text'>Pattern:</span> ${pattern}</div>` : ''}
252+
${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${constraint}</div>` : ''}
253+
${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
254+
${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
255+
${pattern ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
256256
${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(schemaDescription))}</span>` : ''}
257257
</div>
258258
</div>

‎src/utils/schema-utils.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -473,12 +473,11 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
473473
primitiveType.push(v);
474474
} else if (v === 'array' && typeof subSchema.items?.type === 'string' && subSchema.items?.type.match(/integer|number|string|null|boolean/g)) {
475475
// Array with primitive types should also be treated as primitive type
476-
477-
// if (subSchema.items.type === 'string' && subSchema.items.format) {
478-
// primitiveType.push(`[${subSchema.items.format}]`);
479-
// } else {
480-
primitiveType.push(`[${subSchema.items.type}]`);
481-
// }
476+
if (subSchema.items.type === 'string' && subSchema.items.format) {
477+
primitiveType.push(`[${subSchema.items.format}]`);
478+
} else {
479+
primitiveType.push(`[${subSchema.items.type}]`);
480+
}
482481
} else {
483482
complexTypes.push(v);
484483
}

0 commit comments

Comments
 (0)