Mount multiple FormField components within the same Vue app to properly
test that useId() generates unique IDs for each instance. This validates
that labels correctly link to their respective inputs.
Verify that FormField forwards $attrs event listeners (onKeyup, onFocusout)
to its inner input element. This ensures migrated templates using
@keyup.enter and @focusout continue to work correctly.
Introduces a reusable FormField component that abstracts Bulma's
field/control/input pattern into a single component. This provides
a consistent API for form fields and prepares the codebase for
future CSS framework migrations.
Features:
- v-model binding for form values
- label prop with automatic for attribute linking
- error prop for validation messages
- Default slot for custom inputs (selects, editors)
- addon slot for button addons
- Attribute passthrough via v-bind="$attrs"
- Exposed value getter for browser autofill workarounds
Includes 14 unit tests covering all functionality.
kolaente