Finish Recording diff --git a/packages/ui/src/components/common-button.ts b/packages/ui/src/v1/components/common-button.ts similarity index 100% rename from packages/ui/src/components/common-button.ts rename to packages/ui/src/v1/components/common-button.ts diff --git a/packages/ui/src/components/common-charm.ts b/packages/ui/src/v1/components/common-charm.ts similarity index 96% rename from packages/ui/src/components/common-charm.ts rename to packages/ui/src/v1/components/common-charm.ts index 2923b8a9e..75c984d54 100644 --- a/packages/ui/src/components/common-charm.ts +++ b/packages/ui/src/v1/components/common-charm.ts @@ -42,7 +42,9 @@ export class CommonCharmElement extends LitElement { } override render() { - return html``; + return html` + + `; } } diff --git a/packages/ui/src/components/common-datatable.ts b/packages/ui/src/v1/components/common-datatable.ts similarity index 88% rename from packages/ui/src/components/common-datatable.ts rename to packages/ui/src/v1/components/common-datatable.ts index eba9b253c..5264f1f5e 100644 --- a/packages/ui/src/components/common-datatable.ts +++ b/packages/ui/src/v1/components/common-datatable.ts @@ -45,11 +45,15 @@ export class CommonDatatableElement extends LitElement { override render() { const rows = repeat(this.rows, (row) => { const cells = repeat(this.cols, (col) => { - return html`${row[col]}`; + return html` + ${row[col]} + `; }); - return html` - ${cells} - `; + return html` + + ${cells} + + `; }); return html` diff --git a/packages/ui/src/components/common-dict.ts b/packages/ui/src/v1/components/common-dict.ts similarity index 93% rename from packages/ui/src/components/common-dict.ts rename to packages/ui/src/v1/components/common-dict.ts index 309053701..c92fd8673 100644 --- a/packages/ui/src/components/common-dict.ts +++ b/packages/ui/src/v1/components/common-dict.ts @@ -36,7 +36,9 @@ export class CommonDictElement extends LitElement { `; }); - return html``; + return html` + + `; } } globalThis.customElements.define("common-dict", CommonDictElement); diff --git a/packages/ui/src/components/common-form.ts b/packages/ui/src/v1/components/common-form.ts similarity index 77% rename from packages/ui/src/components/common-form.ts rename to packages/ui/src/v1/components/common-form.ts index f4f8be873..7574206b8 100644 --- a/packages/ui/src/components/common-form.ts +++ b/packages/ui/src/v1/components/common-form.ts @@ -70,21 +70,23 @@ export class ReferenceFieldElement extends LitElement { return html` { - const value = (e.target as HTMLInputElement).value; - this.dispatch(value); - }} - @blur=${async (e: Event) => { - const error = await this.validateReference( - (e.target as HTMLInputElement).value, - ); - this.dispatch(this.value, error); - }} + .value="${this.value}" + @input="${(e: Event) => { + const value = (e.target as HTMLInputElement).value; + this.dispatch(value); + }}" + @blur="${async (e: Event) => { + const error = await this.validateReference( + (e.target as HTMLInputElement).value, + ); + this.dispatch(this.value, error); + }}" /> - ${ - this.error ? html` ` : null - } + ${this.error + ? html` + + ` + : null} `; } } @@ -567,33 +569,33 @@ export class CommonFormElement extends LitElement { return html` @@ -604,13 +606,15 @@ export class CommonFormElement extends LitElement { return html` `; @@ -637,57 +641,51 @@ export class CommonFormElement extends LitElement { input = html` @@ -695,10 +693,10 @@ export class CommonFormElement extends LitElement { } else if (schema._def.typeName === "ZodObject") { input = html` this.handleInput(key, e)} + .schema="${schema}" + .value="${value}" + field-path="${this.fieldPath ? `${this.fieldPath}.${key}` : key}" + @value-changed="${(e: CustomEvent) => this.handleInput(key, e)}" > `; } else if (schema._def.typeName === "ZodBoolean") { @@ -706,8 +704,8 @@ export class CommonFormElement extends LitElement { this.handleInput(key, e)} + .checked="${value}" + @change="${(e: Event) => this.handleInput(key, e)}" /> ${key.replace(/([A-Z])/g, " $1").trim()} @@ -717,37 +715,35 @@ export class CommonFormElement extends LitElement { if (values.length <= 3) { input = html` `; } else { input = html` this.handleInput(key, e)} + @change="${(e: Event) => this.handleInput(key, e)}" > - ${ - values.map( + ${values.map( (v: string) => - html` ${v} `, - ) - } + html` + ${v} + `, + )} `; } @@ -755,74 +751,73 @@ export class CommonFormElement extends LitElement { input = html` this.handleInput(key, e)} + .value="${value}" + @input="${(e: Event) => this.handleInput(key, e)}" > `; } else { input = html` this.handleInput(key, e)} + .value="${value}" + type="${schema._def.typeName === "ZodNumber" ? "number" : "text"}" + @input="${(e: Event) => this.handleInput(key, e)}" /> `; } return html` `; } override render() { if (!this.schema) { - return html``; + return html` + + `; } return html` -

- ${ - Object.entries(this.schema.shape).map(([key, fieldSchema]) => + + ${Object.entries(this.schema.shape).map(([key, fieldSchema]) => this.renderField(key, fieldSchema) - ) - } - ${ - this.fieldPath === "" + )} ${this.fieldPath === "" ? html` -

- Submit - - this.generateSampleData()}> - 🎲 - - - - (this.shadowRoot?.querySelector("#file-input") as HTMLInputElement) - ?.click()} - > - 📄 - -

- ` - : null - } +

+ Submit + + 🎲 + + + + 📄 + +

+ ` + : null}

`; } diff --git a/packages/ui/src/components/common-fragment.ts b/packages/ui/src/v1/components/common-fragment.ts similarity index 100% rename from packages/ui/src/components/common-fragment.ts rename to packages/ui/src/v1/components/common-fragment.ts diff --git a/packages/ui/src/components/common-google-oauth.ts b/packages/ui/src/v1/components/common-google-oauth.ts similarity index 87% rename from packages/ui/src/components/common-google-oauth.ts rename to packages/ui/src/v1/components/common-google-oauth.ts index a7f40fe05..4846d4129 100644 --- a/packages/ui/src/components/common-google-oauth.ts +++ b/packages/ui/src/v1/components/common-google-oauth.ts @@ -147,51 +147,45 @@ export class CommonGoogleOauthElement extends LitElement { return html` `; } diff --git a/packages/ui/src/components/common-grid.ts b/packages/ui/src/v1/components/common-grid.ts similarity index 100% rename from packages/ui/src/components/common-grid.ts rename to packages/ui/src/v1/components/common-grid.ts diff --git a/packages/ui/src/components/common-hero-layout.ts b/packages/ui/src/v1/components/common-hero-layout.ts similarity index 100% rename from packages/ui/src/components/common-hero-layout.ts rename to packages/ui/src/v1/components/common-hero-layout.ts diff --git a/packages/ui/src/components/common-hgroup.ts b/packages/ui/src/v1/components/common-hgroup.ts similarity index 88% rename from packages/ui/src/components/common-hgroup.ts rename to packages/ui/src/v1/components/common-hgroup.ts index d1b57b8a2..9113b778a 100644 --- a/packages/ui/src/components/common-hgroup.ts +++ b/packages/ui/src/v1/components/common-hgroup.ts @@ -34,7 +34,9 @@ export class CommonHgroupElement extends LitElement { return html`

-

+

+ +

`; } diff --git a/packages/ui/src/components/common-hscroll.ts b/packages/ui/src/v1/components/common-hscroll.ts similarity index 100% rename from packages/ui/src/components/common-hscroll.ts rename to packages/ui/src/v1/components/common-hscroll.ts diff --git a/packages/ui/src/components/common-hstack.ts b/packages/ui/src/v1/components/common-hstack.ts similarity index 94% rename from packages/ui/src/components/common-hstack.ts rename to packages/ui/src/v1/components/common-hstack.ts index 606aaca3e..134937929 100644 --- a/packages/ui/src/components/common-hstack.ts +++ b/packages/ui/src/v1/components/common-hstack.ts @@ -72,9 +72,11 @@ export class CommonHstackElement extends LitElement { ]; override render() { - return html` `; + return html` + + `; } } globalThis.customElements.define("common-hstack", CommonHstackElement); diff --git a/packages/ui/src/components/common-iframe.ts b/packages/ui/src/v1/components/common-iframe.ts similarity index 100% rename from packages/ui/src/components/common-iframe.ts rename to packages/ui/src/v1/components/common-iframe.ts diff --git a/packages/ui/src/components/common-img.ts b/packages/ui/src/v1/components/common-img.ts similarity index 89% rename from packages/ui/src/components/common-img.ts rename to packages/ui/src/v1/components/common-img.ts index 39dffd8f4..3bb4c28ac 100644 --- a/packages/ui/src/components/common-img.ts +++ b/packages/ui/src/v1/components/common-img.ts @@ -45,9 +45,9 @@ export class CommonImgElement extends LitElement { const onload = () => (this._isLoaded = true); return html` - + `; } } diff --git a/packages/ui/src/components/common-input-file.ts b/packages/ui/src/v1/components/common-input-file.ts similarity index 100% rename from packages/ui/src/components/common-input-file.ts rename to packages/ui/src/v1/components/common-input-file.ts diff --git a/packages/ui/src/components/common-input.ts b/packages/ui/src/v1/components/common-input.ts similarity index 100% rename from packages/ui/src/components/common-input.ts rename to packages/ui/src/v1/components/common-input.ts diff --git a/packages/ui/src/components/common-media.ts b/packages/ui/src/v1/components/common-media.ts similarity index 100% rename from packages/ui/src/components/common-media.ts rename to packages/ui/src/v1/components/common-media.ts diff --git a/packages/ui/src/components/common-navstack.ts b/packages/ui/src/v1/components/common-navstack.ts similarity index 100% rename from packages/ui/src/components/common-navstack.ts rename to packages/ui/src/v1/components/common-navstack.ts diff --git a/packages/ui/src/components/common-pill.ts b/packages/ui/src/v1/components/common-pill.ts similarity index 100% rename from packages/ui/src/components/common-pill.ts rename to packages/ui/src/v1/components/common-pill.ts diff --git a/packages/ui/src/components/common-record.ts b/packages/ui/src/v1/components/common-record.ts similarity index 100% rename from packages/ui/src/components/common-record.ts rename to packages/ui/src/v1/components/common-record.ts diff --git a/packages/ui/src/components/common-screen.ts b/packages/ui/src/v1/components/common-screen.ts similarity index 89% rename from packages/ui/src/components/common-screen.ts rename to packages/ui/src/v1/components/common-screen.ts index 0465b52d3..2ff8c369f 100644 --- a/packages/ui/src/components/common-screen.ts +++ b/packages/ui/src/v1/components/common-screen.ts @@ -12,7 +12,9 @@ export class CommonScreenElement extends LitElement { `; override render() { - return html``; + return html` + + `; } } globalThis.customElements.define("common-screen", CommonScreenElement); diff --git a/packages/ui/src/components/common-spacer.ts b/packages/ui/src/v1/components/common-spacer.ts similarity index 100% rename from packages/ui/src/components/common-spacer.ts rename to packages/ui/src/v1/components/common-spacer.ts diff --git a/packages/ui/src/components/common-suggestion.ts b/packages/ui/src/v1/components/common-suggestion.ts similarity index 93% rename from packages/ui/src/components/common-suggestion.ts rename to packages/ui/src/v1/components/common-suggestion.ts index 0fc68e145..8a9f07991 100644 --- a/packages/ui/src/components/common-suggestion.ts +++ b/packages/ui/src/v1/components/common-suggestion.ts @@ -55,4 +55,7 @@ export type Suggestion = Identifiable & { }; export const suggestionTemplate = (suggestion: Suggestion) => - html` ${suggestion.title} `; + html` + ${suggestion + .title} + `; diff --git a/packages/ui/src/components/common-suggestions.ts b/packages/ui/src/v1/components/common-suggestions.ts similarity index 100% rename from packages/ui/src/components/common-suggestions.ts rename to packages/ui/src/v1/components/common-suggestions.ts diff --git a/packages/ui/src/components/common-system-layout.ts b/packages/ui/src/v1/components/common-system-layout.ts similarity index 100% rename from packages/ui/src/components/common-system-layout.ts rename to packages/ui/src/v1/components/common-system-layout.ts diff --git a/packages/ui/src/components/common-table.ts b/packages/ui/src/v1/components/common-table.ts similarity index 71% rename from packages/ui/src/components/common-table.ts rename to packages/ui/src/v1/components/common-table.ts index 96c95627a..da3775abd 100644 --- a/packages/ui/src/components/common-table.ts +++ b/packages/ui/src/v1/components/common-table.ts @@ -61,7 +61,9 @@ export class CommonCardElement extends LitElement { override render() { if (!this.item) { - return html``; + return html` + + `; } if (this.schema) { @@ -70,39 +72,34 @@ export class CommonCardElement extends LitElement { const selfEntry = entries.find(([key]) => key === "self"); return html` - ${ - nonSelfEntries.map( + ${nonSelfEntries.map( ([key, schema]) => html` - - `, - ) - } - ${ - selfEntry - ? html` + ` + : ""} `; } @@ -111,31 +108,31 @@ export class CommonCardElement extends LitElement { const selfEntry = entries.find(([key]) => key === "self"); return html` - ${ - nonSelfEntries.map( + ${nonSelfEntries.map( ([key, value]) => html` - - `, - ) - } - ${ - selfEntry - ? html` - ` - : "" - } + `, + )} ${selfEntry + ? html` + + ` + : ""} `; } @@ -145,33 +142,43 @@ export class CommonCardElement extends LitElement { } if (key === "self") { - return html`${value.toString()}`; + return html` + ${value.toString()} + `; } if (schema) { switch (schema._def.typeName) { case "ZodArray": case "ZodObject": - return html`

${JSON.stringify(value, null, 2)}

`; + return html` +

${JSON.stringify(value, null, 2)}

+ `; case "ZodBoolean": return value ? "✓" : "✗"; case "ZodDate": return new Date(value).toLocaleString(); case "ZodString": - return html``; + return html` + + `; default: return String(value); } } if (typeof value === "object") { - return html`

${JSON.stringify(value, null, 2)}

`; + return html` +

${JSON.stringify(value, null, 2)}

+ `; } else if (typeof value === "boolean") { return value ? "✓" : "✗"; } else if (value instanceof Date) { return value.toLocaleString(); } - return html``; + return html` + + `; } } globalThis.customElements.define("common-card", CommonCardElement); @@ -329,10 +336,11 @@ export class CommonTableElement extends LitElement { case "ZodArray": case "ZodObject": return html` - - ${JSON.stringify(value).slice(0, 50)}${ - JSON.stringify(value).length > 50 ? "..." : "" - } + + ${JSON.stringify(value).slice( + 0, + 50, + )}${JSON.stringify(value).length > 50 ? "..." : ""} `; case "ZodBoolean": @@ -453,121 +461,110 @@ export class CommonTableElement extends LitElement { override render() { if (!this.schema) { - return html`

No schema provided

`; + return html` +

No schema provided

+ `; } if (!this.data || !this.data.length) { - return html`

No data available

`; + return html` +

No data available

+ `; } const shape = this.schema ? this.schema.shape : {}; return html` - + Download All Records - Import JSON + Import JSON

- ${ - Object.entries(this.schema.shape).map( - ([key]) => html` `, - ) - } + ${Object.entries(this.schema.shape).map( + ([key]) => + html` + + `, + )} - ${ - this.data.map( + ${this.data.map( (row) => html` - - ${ - Object.entries(shape).map( + + ${Object.entries(shape).map( ([key, schema]) => html` - - `, - ) - } - + `, + )} + - - `, - ) - } + + Copy Ref + + ` + : ""} + + + `, + )}

${key.replace(/([A-Z])/g, " $1").trim()}	${key.replace(/([A-Z])/g, " $1").trim()}	Actions
${ - this.formatValue(row[key], schema) - }	- ${ - this.preview +	${this.formatValue( + row[key], + schema, + )}	+ ${this.preview ? html` - - this.showPreview(row)}> - Preview - - ` - : "" - } - ${ - this.edit + + Preview + + ` + : ""} ${this.edit ? html` - - this.handleEdit(row)}> - Edit - - ` - : "" - } - ${ - this.delete + + Edit + + ` + : ""} ${this.delete ? html` - - this.handleDelete(row)}> - Delete - - ` - : "" - } - ${ - this.download + + Delete + + ` + : ""} ${this.download ? html` - - this.handleDownload(row)}> - Download - - ` - : "" - } - ${ - this.copy + + Download + + ` + : ""} ${this.copy ? html` - - this.handleCopySelf(row)}> - Copy Ref - - ` - : "" - } -

- ${ - this.selectedItem + ${this.selectedItem ? html` -

-

- e.stopPropagation()}> - × - -

+

+

+ × +

- ` - : "" - } +

+ ` + : ""} `; } } diff --git a/packages/ui/src/components/common-textarea.ts b/packages/ui/src/v1/components/common-textarea.ts similarity index 100% rename from packages/ui/src/components/common-textarea.ts rename to packages/ui/src/v1/components/common-textarea.ts diff --git a/packages/ui/src/components/common-todo.ts b/packages/ui/src/v1/components/common-todo.ts similarity index 100% rename from packages/ui/src/components/common-todo.ts rename to packages/ui/src/v1/components/common-todo.ts diff --git a/packages/ui/src/components/common-unibox.ts b/packages/ui/src/v1/components/common-unibox.ts similarity index 88% rename from packages/ui/src/components/common-unibox.ts rename to packages/ui/src/v1/components/common-unibox.ts index 68c4840b8..9e6d60b6e 100644 --- a/packages/ui/src/components/common-unibox.ts +++ b/packages/ui/src/v1/components/common-unibox.ts @@ -63,13 +63,12 @@ export class CommonUniboxElement extends LitElement { class="unibox-input" .placeholder="${this.placeholder}" .value="${this.value}" - @input=${this.handleChange} - @keydown=${this.handleEnter} + @input="${this.handleChange}" + @keydown="${this.handleEnter}" > - ${this.label} + ${this.label}

`; } diff --git a/packages/ui/src/components/common-updater.ts b/packages/ui/src/v1/components/common-updater.ts similarity index 96% rename from packages/ui/src/components/common-updater.ts rename to packages/ui/src/v1/components/common-updater.ts index cd24ca1c3..5cc37dffe 100644 --- a/packages/ui/src/components/common-updater.ts +++ b/packages/ui/src/v1/components/common-updater.ts @@ -109,10 +109,10 @@ export class CommonUpdaterElement extends LitElement { }[this.updateState]; return html` - ${buttonText} diff --git a/packages/ui/src/components/common-vstack.ts b/packages/ui/src/v1/components/common-vstack.ts similarity index 94% rename from packages/ui/src/components/common-vstack.ts rename to packages/ui/src/v1/components/common-vstack.ts index d8fe462b2..b98b35255 100644 --- a/packages/ui/src/components/common-vstack.ts +++ b/packages/ui/src/v1/components/common-vstack.ts @@ -68,9 +68,11 @@ export class CommonVstackElement extends LitElement { ]; override render() { - return html`

- -

`; + return html` +

+ +

+ `; } } globalThis.customElements.define("common-vstack", CommonVstackElement); diff --git a/packages/ui/src/components/identifiable.ts b/packages/ui/src/v1/components/identifiable.ts similarity index 100% rename from packages/ui/src/components/identifiable.ts rename to packages/ui/src/v1/components/identifiable.ts diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/v1/components/index.ts similarity index 100% rename from packages/ui/src/components/index.ts rename to packages/ui/src/v1/components/index.ts diff --git a/packages/ui/src/components/send-input.ts b/packages/ui/src/v1/components/send-input.ts similarity index 88% rename from packages/ui/src/components/send-input.ts rename to packages/ui/src/v1/components/send-input.ts index c0ab5d7df..75062e84c 100644 --- a/packages/ui/src/components/send-input.ts +++ b/packages/ui/src/v1/components/send-input.ts @@ -61,11 +61,12 @@ export class SendMessageElement extends LitElement { appearance="rounded" class="unibox-input" id="input" - .placeholder=${this.placeholder} - @keydown=${this.keyDown} + .placeholder="${this.placeholder}" + @keydown="${this.keyDown}" > - ${this.name} + ${this.name}