The data-form component provides a form to submit new user data or edit existing user data.
It includes input fields for the user's name, telephone number, and email, as well as a submit button that changes its text based on whether the form is in "add" or "edit" mode.
When the form is submitted, it dispatches custom events to notify the parent component of the action taken.
--data-form-bg (CSS color): Background color for the <data-form> container. Default: #1e90ff.--data-form-fg (CSS color): Foreground (text) color used in the form. Default: #ffffff.Note: The component uses these variables via
var(--name, <fallback>), so they will work whether a global stylesheet is present or not.
user (Object | null): A User object representing the data entry to be edited.
If this attribute is set, the form will be pre-filled with the user's data and the button text will change to "Update".
If this attribute is null or not set, the form will be empty and the button text will be "Add".Example User object:
{
"id": 1,
"name": "Alice Example",
"email": "alice@example.com",
"phone": "+15551234567"
}
Note:
idmay be omitted when creating a new user.
none
data-added: Triggered by the data-form component when a new data entry is added.
The User object will be included as event detail.data-updated: Triggered by the data-form component when an existing data entry is updated.
The User object will be included as event detail.none
none