hb-dialogform

Category: forms · Tags: forms, overlays

Bulma-style modal that composes hb-dialog with an embedded hb-form. You drive the fields with the same schema contract as hb-form (JSON array of field definitions). The inner form’s submit control is hidden; the dialog’s Confirm acts as submit when the form is valid.

What it does

• Opens and closes like a normal hb-dialog via the show attribute ("yes" / "no").
• Renders hb-form with hide_submit="yes" so only the dialog footer buttons apply.
• Forwards updateForm events from the inner form with the same detail shape as hb-form’s update event (live values and _valid).
• Confirm: if the last form update was valid, dispatches modalFormConfirm with a payload derived from that update (field values plus metadata; see Events).
• Cancel / invalid confirm: dispatches modalFormCancel with { id, error? } (see Events).
• Re-dispatches modalShow when the inner dialog reports open/close ({ id, show }).
• Confirm is disabled on the inner dialog until the form reports valid (disable_confirm).

Nested hb-dialog and hb-form are registered at runtime (addComponent) using the same package version as the host.

Custom element

hb-dialogform

Attributes and properties

Web component attributes are strings. Use yes / no for boolean-like flags where noted; the implementation also accepts "true" for backdrop and keyboard when they arrive as strings.

| Name | Required | Type / values | Description | | --- | --- | --- | --- | | schema | no | JSON string (array) | Same schema shape as hb-form: array of field objects (type, id, label, value, …). From HTML, pass a JSON string. If omitted or the array is empty, no hb-form block is rendered. | | show | no | "yes" | "no" | Controls modal visibility. Empty string is treated like yes. Default no. | | id | no | string | Host id; forwarded into the inner dialog id suffix (id + "_modalform" or a generated fallback). Included on modalFormCancel / merged into confirm payload as _id. | | title | no | string | Dialog title (inner hb-dialog). | | content | no | string | Supplemental content prop on inner hb-dialog. | | closelabel | no | string | Close button label. | | confirmlabel | no | string | Confirm button label. | | backdrop | no | boolean or string | Coerced in the host script for string attributes ("true" / yes → true). Not passed to hb-dialog in the current markup, so the inner dialog keeps its own defaults. | | keyboard | no | boolean or string | Same coercion as backdrop. Not passed to hb-dialog in the current markup. | | describedby | no | string | Not passed to hb-dialog in the current markup. | | labelledby | no | string | Not passed to hb-dialog in the current markup. | | dialogclasses | no | string | Present in typings; not applied to the dialog in the current template. | | style | no | string | Present in typings; not used by the current implementation (commented in source). |

For field definitions and validation, follow hb-form documentation and the form schema types under builder/src/wc/form/types/.

Slots

| Slot | Role | | --- | --- | | form-header | Optional content above hb-form inside the modal body. | | form-footer | Optional content below hb-form inside the modal body. | | header | If set, forwarded to hb-dialog header (replaces default modal head). | | modal-footer | If set, forwarded to hb-dialog modal-footer (replaces entire footer region). | | footer | If set, forwarded to hb-dialog footer (default footer slot / button row). | | close-button-label | Forwarded to hb-dialog for the close control label. | | confirm-button-label | Forwarded to hb-dialog for the confirm control label. |

CSS custom properties

Set these on hb-dialogform (or ensure they inherit) to tune layout; they are intended to align with nested hb-dialog / hb-form theming.

| Variable | Default (from metadata) | Description | | --- | --- | --- | | --hb-modal-max-width | 40rem | Max width of the inner dialog card. | | --bulma-modal-card-head-padding | 1rem 1.25rem | Modal header padding (inner dialog). | | --bulma-modal-card-body-padding | 1rem 1.25rem | Modal body padding around the form area. | | --bulma-column-gap | 0.75rem | Column gap used by nested hb-form field layout. |

Additional --bulma-* variables from Bulma / hb-dialog / hb-form may apply depending on your theme setup.

CSS parts

None exposed on this host (styleSetup.parts is empty).

Events

All events are CustomEvent instances dispatched from the hb-dialogform host.

| Event | detail shape | When | | --- | --- | --- | | updateForm | Same as hb-form update: { _valid: boolean; _id: string; …values } | On every inner form update (validity and field values). | | modalShow | { id: string; show: boolean } | When the inner modal opens or closes (re-dispatched from hb-dialog). | | modalFormConfirm | Object: last valid update-like map plus host _id | User confirms and the form was valid (_valid true on the stored payload). | | modalFormCancel | { id: string; error?: string } | User cancels confirm, or confirm while invalid / missing values (error may be "invalid form"). |

Confirm payload: The implementation stores the latest update detail, clears _id on the copy, then assigns _id to the host’s id before dispatching modalFormConfirm.

Usage notes

• schema from HTML must be a single JSON string representing an array (escape quotes as needed).
• Track updateForm to reflect validity in your own UI if the dialog is not the only feedback channel.
• Prefer yes / no for boolean attributes on custom elements for consistency with this codebase; inner dialogs may still default backdrop / keyboard until host props are wired through.
• This package does not define i18n language entries in metadata; labels come from attributes and slots.

HTML example

<hb-dialogform
  id="profile-editor"
  show="yes"
  title="Edit profile"
  schema='[{"type":"text","id":"name","label":"Name","required":true,"value":""}]'
  confirmlabel="Save"
  closelabel="Cancel"
></hb-dialogform>

<script>
  const el = document.querySelector("hb-dialogform");
  el.addEventListener("updateForm", (e) => {
    console.log("valid:", e.detail._valid, "values:", e.detail);
  });
  el.addEventListener("modalFormConfirm", (e) => {
    console.log("confirmed:", e.detail);
  });
  el.addEventListener("modalFormCancel", (e) => {
    console.log("cancelled:", e.detail);
  });
  el.addEventListener("modalShow", (e) => {
    console.log("modal:", e.detail.show);
  });
</script>

Related components

• hb-dialog — modal chrome, footer buttons, modalShow / modalConfirm.
• hb-form — schema, update, validation, and field types.

Package name in metadata: @htmlbricks/hb-dialogform.