The Component: FormInputsBlocks

The <form-inputs-blocks> component is the atomic layer of the framework. Its main responsibility is to receive the configuration for a single field and render the corresponding component while injecting state properties, validation errors, and design attributes.

Responsibilities

1. Component Resolution:
   Determines which UI component should be rendered (based on the registry component property).

2. Two-Way Data Binding:
   Manages the v-model connection between the global formData object and the specific input.

3. Error Handling:
   Connects validation messages from the global provider directly to the field visual feedback.

4. Layout Encapsulation:
   Renders the field inside an FbInputBlock
   (which contains the Label, Helper Text, and error messages).

Internal Architecture

Providers and Injection

This component does not receive formData through props. Instead, it uses Vue's inject to access the global state provided by the root FormBlocks component. This guarantees that no matter how deeply nested the input is inside the component tree (for example, within a repeater), it will always have access to the form state.

The createInputNode Function

The component uses an internal render helper function that:

• Verifies whether the component exists in the Registry
• Forwards all iProps (input properties) defined through DSL or object syntax
• Configures update:modelValue events to synchronize with the global state

Example Data Flow

When you define: 'Email::email:md6', and FormInputsBlocks will:

1. Receive the processed object.

2. Identify that the component is a standard input with type: email.

3. Look up the corresponding key inside formData (model name converted to camelCase from backVars). ie: backVars: { my_var } -> form.model = myVar.

4. Render the UI component with responsive grid columns applied

Slot Customization

Although FormInputsBlocks has a default renderer, it allows interception through slots defined in the parent component.

<form-blocks v-model="formData" :groups="groups">

  <!-- Customizing only the input core,
       while preserving Label and Grid -->

  <template #input(minha_chave)="{ form }">
    <my-custom-date-picker v-model="formData[form.model]" />
  </template>
</form-blocks>

Component Registry

FormInputsBlocks relies on a global registry to determine what should be rendered. By default, it already supports:

• Standard Inputs: Text, passwords, numbers

• Select: Powered by vue-select.

• Flatpickr: Used for all date and time input types.

• Checkboxes e Radios.

Performance Tip

The component uses toRef to preserve formData reactivity efficiently. This prevents the entire form from re-rendering whenever a single character is typed, limiting updates only to the component currently being edited.

Backdoor

Props

Prop	Type	Default	Description
input	Object	(required)	Field configuration object generated by the core.
inputKey	Number/String	0	Position or unique input key inside the group.