hb-form-composer

Category: forms · Tags: forms, builder

Summary

Visual builder for hb-form schemas: internal hb-table lists fields, hb-dialogform edits a row via nested hb-form, optional debug preview. done emits the accumulated output_schema.

What it does

1. Parse: output_schema JSON string → array; debug string yes / true / "" → boolean.
2. Table: Rows mirror output_schema; delete disabled when row has value.
3. Add: hb-dialogform confirms into output_schema (replaces same label).
4. Done: Primary outlined button dispatches done with { schema, id }.

Custom element

hb-form-composer

Attributes

| Attribute | Type (logical) | HTML / notes | | --- | --- | --- | | id | string (optional) | Echoed on done as detail.id. | | style | string (optional) | In typings; not read in script. | | debug | boolean | string | yes / true / empty string → true. | | output_schema | string | FormSchema | Initial rows; JSON string from HTML. |

Field types in the dialog selector include text, textarea, email, number, select, radio, checkbox, file, date, datetime, color, range (see component.wc.svelte).

Custom events

| Event name | detail shape | | --- | --- | | done | { schema: FormSchema; id: string } — current output_schema; fires only on explicit done click. |

Styling

No host-only vars or parts in extra/docs.ts; theming comes from nested hb-form, hb-table, hb-dialogform.

Slots

None on the host.

Dependencies

See extra/docs.ts — hb-form, hb-table, hb-dialogform and transitive inputs, table, dialogs, etc.

TypeScript

types/webcomponent.type.d.ts — Component, Events (FormSchema from ../../form/types/webcomponent.type relative to this folder; same module as hb-form).

Minimal HTML example

<hb-form-composer id="my-composer" debug="no"></hb-form-composer>

document.querySelector("hb-form-composer")?.addEventListener("done", (e) => {
  console.log(e.detail.id, e.detail.schema);
});