diff --git a/src/renderer/src/stories/Dashboard.js b/src/renderer/src/stories/Dashboard.js index c8eb88988..367a960a3 100644 --- a/src/renderer/src/stories/Dashboard.js +++ b/src/renderer/src/stories/Dashboard.js @@ -241,7 +241,7 @@ export class Dashboard extends LitElement { }); // Skip right over the page if configured as such - if (previous.info.previous === this.page) this.page.onTransition(-1); + if (previous && previous.info.previous === this.page) this.page.onTransition(-1); else this.page.onTransition(1); } }); diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js index 70ea32652..28dff4eaf 100644 --- a/src/renderer/src/stories/JSONSchemaForm.js +++ b/src/renderer/src/stories/JSONSchemaForm.js @@ -101,6 +101,12 @@ const componentCSS = ` width:100%; } + .form-section { + display: flex; + flex-direction: column; + gap: 10px; + } + #empty { display: flex; align-items: center; @@ -427,7 +433,17 @@ export class JSONSchemaForm extends LitElement { #addMessage = (name, message, type) => { if (Array.isArray(name)) name = name.join("-"); // Convert array to string - const container = this.shadowRoot.querySelector(`#${encode(name)} .${type}`); + const parent = this.shadowRoot.querySelector(`#${encode(name)}`); + if (!parent) return; + + let container = parent.querySelector(`.${type}`); + + if (!container) { + container = document.createElement("div"); + container.classList.add(type); + parent.append(container); + } + const item = new InspectorListItem(message); container.appendChild(item); }; @@ -437,16 +453,18 @@ export class JSONSchemaForm extends LitElement { if (!localPath.length) return; - const container = this.shadowRoot.querySelector(`#${encode(localPath)} .${type}`); + const parent = this.shadowRoot.querySelector(`#${encode(localPath)}`); + if (!parent) return; - if (container) { - const nChildren = container.children.length; - container.innerHTML = ""; + const container = parent.querySelector(`.${type}`); + if (!container) return; - // Track errors and warnings - if (type === "errors") this.#nErrors -= nChildren; - if (type === "warnings") this.#nWarnings -= nChildren; - } + const nChildren = container.children.length; + container.innerHTML = ""; + + // Track errors and warnings + if (type === "errors") this.#nErrors -= nChildren; + if (type === "warnings") this.#nWarnings -= nChildren; }; status; @@ -665,14 +683,7 @@ export class JSONSchemaForm extends LitElement { this.inputs[localPath.join("-")] = interactiveInput; - return html` -
- ${interactiveInput} -
-
-
-
- `; + return html`
${interactiveInput}
`; }; load = () => { diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js index 668dbbc9c..a2b388697 100644 --- a/src/renderer/src/stories/JSONSchemaInput.js +++ b/src/renderer/src/stories/JSONSchemaInput.js @@ -361,9 +361,12 @@ export class JSONSchemaInput extends LitElement { background: rgb(255, 229, 228) !important; } + jsonschema-input { + width: 100%; + } + main { display: flex; - margin-top: 0.5rem; } #controls { @@ -425,7 +428,7 @@ export class JSONSchemaInput extends LitElement { width: 100%; padding-top: 4px; color: dimgray !important; - margin: 0 0 1em; + margin: 0 0; line-height: 1.4285em; } @@ -449,6 +452,7 @@ export class JSONSchemaInput extends LitElement { display: block; width: 100%; margin: 0; + margin-bottom: 10px; color: black; font-weight: 600; font-size: 1.2em !important; @@ -630,16 +634,15 @@ export class JSONSchemaInput extends LitElement { }
${input}${this.controls ? html`
${this.controls}
` : ""}
-

- ${ - schema.description - ? html`${unsafeHTML(capitalize(schema.description))}${schema.description.slice(-1)[0] === - "." + ${ + schema.description + ? html`

+ ${unsafeHTML(capitalize(schema.description))}${schema.description.slice(-1)[0] === "." ? "" - : "."}` - : "" - } -

+ : "."} +

` + : "" + } `; }