feat(ui): dispatch validation events from TextField#609
feat(ui): dispatch validation events from TextField#609
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces a new a2ui-validation-input event dispatched from the TextField component to communicate validation state changes. The changes look good and achieve the goal. I've added a couple of minor suggestions to improve code style and robustness.
ditman
left a comment
There was a problem hiding this comment.
Comment about having a specific, shared type for the failed/passed validation event in web_core!
…t catalog formatting. This PR introduces a strictly typed A2UIValidationEvent in web_core using the BaseEventDetail pattern to ensure type safety across renderers and clients. The TextField and Component Gallery have been updated to utilize this new event structure, and formatting-only changes in standard_catalog_definition.json were reverted while preserving the new variant and filterable properties for MultipleChoice.
ditman
left a comment
There was a problem hiding this comment.
This LGTM, but I really think we shouldn't reexport from web_core. Instead, we should re-export from the lit renderer Events namespace.
(There's a similar problem to this with the styles. The Lit renderer only reexports the ones coming from web_core, instead of its internal version, so application users that want to use the basic styling for their own components, must use unsafeCSS, but that's a fix for another day :P)
renderers/lit/src/0.8/core.ts
Outdated
| import { Events as WebEvents } from "@a2ui/web_core"; | ||
| export { Types, Guards, Schemas, Styles, A2uiMessageProcessor, Primitives, WebEvents }; |
There was a problem hiding this comment.
Instead of importing and renaming here, how about exporting these events from web_core directly from ./events/events.js so they become part of the Events namespace offered by the lit renderer?
I think it's a little bit of an anti-pattern to re-export directly from web_core (unless you're coding an actual renderer?)
…through lit Events namespace to avoid anti-pattern of requiring end-users to import from web_core.
| import * as Guards from "@a2ui/web_core/data/guards"; | ||
| import { Schemas } from "@a2ui/web_core"; | ||
| import * as Styles from "@a2ui/web_core/styles/index"; | ||
| import * as Styles from "./styles/index.js"; |
There was a problem hiding this comment.
I think this won't work as is, because there's more stuff being exported from styles/index (like a merge function). Let's leave this part for another PR, so we land the validation events cleanly!
This PR introduces the a2ui-validation-input event to the
TextField
component to bubble validation state changes.
Changes
TextField (
text-field.ts
):
Added dispatch of a2ui-validation-input on every input event.
Payload: { componentId, value, valid: boolean }.
Reason: Native invalid events do not cross the Shadow DOM boundary. This custom event allows parent components (like the Shell) to observe real-time validation status.
Component Gallery (
component-gallery.ts
):
Added a listener for a2ui-validation-input at the document root.
Logs validation events to both the Console and the internal Debug Panel for visual verification.
Verification
Verified manually in the Component Gallery:
Typing in "TextField (Regex)" now triggers logs in the Debug Panel.
Valid/Invalid states strictly match the regex rules.
Pre-launch Checklist
If you need help, consider asking for advice on the discussion board.