hb-dialogform — dialogform

Category: forms | Tags: forms, overlays

What it does

Modal that embeds hb-form with the same schema contract: live form updates mirror validity and values via updateForm, and the confirm button dispatches modalFormConfirm with the last valid payload or modalFormCancel when dismissed or invalid. Composes hb-dialog (Bulma modal, backdrop/keyboard, show) and re-dispatches modalShow.

Custom element

hb-dialogform

Attributes / props (snake_case)

| Property | Type | Notes | | --- | --- | --- | | id | string (optional) | Element identifier. | | style | string (optional) | Inline style string. | | show | union (optional) | "yes" | "no". | | dialogclasses | string (optional) | Reserved on the type; not yet applied in the template. | | title | string (optional) | Modal title. | | backdrop | boolean (optional) | Backdrop toggle. | | keyboard | boolean (optional) | Escape closes when true. | | describedby | string (optional) | ARIA describedby. | | labelledby | string (optional) | ARIA labelledby. | | content | string (optional) | Supplemental content string. | | closelabel | string (optional) | Close button label. | | confirmlabel | string (optional) | Confirm button label. | | schema | array (required) | JSON form schema (same shape as hb-form schema). |

Bulma / theme: CSS variables follow hb-dialog and hb-form (see those components). Slots: form-header, form-footer, header, modal-footer, footer, close-button-label, confirm-button-label.

Events (CustomEvent names)

• modalFormConfirm — { [key: string]: any } — Submitted field map / payload (types use open object).
• modalShow — { id: string; show: boolean }
• modalFormCancel — { id: string; error?: string }
• updateForm — same detail shape as hb-form update (see form event types).

Usage notes

• Built on Bulma modal + form patterns shared with hb-dialog and hb-form.
• schema is typically a JSON string in HTML; validate against hb-form field types.
• Shadow DOM composes nested components; slots map to form and modal regions.
• No i18n array in docs.ts for this component.

Minimal HTML example

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