$ show janiskelemen/formvuelar
Formvuelar is a Vue 3 form component library designed for backend-driven form workflows, with first-class support for Laravel-style validation responses. The source defines 19+ Fvl* components (input, textarea, select, search select, tag select, checkboxes, radio, switches, sliders, color/date pickers, file uploads, dropzone) and a root FvlForm component that coordinates submission, error display, dirty-state tracking, and upload progress. The core architecture uses provide/inject plus mixins: FvlForm creates a form context object and child controls inject it via formControl.js to read backend errors, clear errors on input, and expose loading and upload state. Submission is handled by Axios with per-form instances and interceptors; the library expects Laravel's 422 { message, errors } payload by default but can be adapted through global $formvuelar configuration.
The LLM identified 4 files worth highlighting for reuse:
Defines the FVL_FORM_CONTEXT injection symbol and a factory for the shared form state object used by FvlForm and all child controls. It is small, self-contained, and demonstrates a clean provide/inject design that can be lifted into any Vue form library.
Standardizes how every field component consumes the form context: dirty state, error lookup, error clearing, loading, and upload percentage. Coupled only to the form-context contract, it illustrates a reusable cross-component wiring pattern for form libraries.
A pure parser that splits and validates email address lists, used by tag-select email workflows. It has no Vue or library imports, so it can be extracted into any JavaScript project; unit tests confirm deterministic behavior.
A self-contained Vue 3 utility that detects clicks outside an element to close dropdowns and popovers. It is isolated from form-specific state and can be reused in any Vue application.