Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix nested input rendering #674

Merged
merged 8 commits into from
Mar 15, 2024
Merged

Fix nested input rendering #674

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
56c930f
Fix nested input rendering
garrettmflynn Mar 14, 2024
36358e7
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 14, 2024
d647ed1
Fix tests
garrettmflynn Mar 14, 2024
10f3c24
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 14, 2024
517adeb
Fix tests pt2
garrettmflynn Mar 14, 2024
abeb71a
Merge branch 'main' into fix-nested-input-rendering
CodyCBakerPhD Mar 15, 2024
05bdda0
Merge branch 'main' into fix-nested-input-rendering
CodyCBakerPhD Mar 15, 2024
f9b007b
Attempt fix for missing variable
garrettmflynn Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 28 additions & 17 deletions src/renderer/src/stories/JSONSchemaForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@ const componentCSS = `
width:100%;
}

.form-section {
display: flex;
flex-direction: column;
gap: 10px;
}

#empty {
display: flex;
align-items: center;
Expand Down Expand Up @@ -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);
};
Expand All @@ -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;
Expand Down Expand Up @@ -665,14 +683,7 @@ export class JSONSchemaForm extends LitElement {

this.inputs[localPath.join("-")] = interactiveInput;

return html`
<div id=${encode(localPath.join("-"))} class="form-section">
${interactiveInput}
<div class="errors"></div>
<div class="warnings"></div>
<div class="info"></div>
</div>
`;
return html` <div id=${encode(localPath.join("-"))} class="form-section">${interactiveInput}</div> `;
};

load = () => {
Expand Down
25 changes: 14 additions & 11 deletions src/renderer/src/stories/JSONSchemaInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -630,16 +634,15 @@ export class JSONSchemaInput extends LitElement {
}
</label>
<main>${input}${this.controls ? html`<div id="controls">${this.controls}</div>` : ""}</main>
<p class="guided--text-input-instructions">
${
schema.description
? html`${unsafeHTML(capitalize(schema.description))}${schema.description.slice(-1)[0] ===
"."
${
schema.description
? html`<p class="guided--text-input-instructions">
${unsafeHTML(capitalize(schema.description))}${schema.description.slice(-1)[0] === "."
? ""
: "."}`
: ""
}
</p>
: "."}
</p>`
: ""
}
</div>
`;
}
Expand Down
Loading