ns-field

Overview

The ns-field component is the generic field renderer used by NexoPOS forms. It receives a field definition and delegates rendering to the matching component according to field.type.

Use this component when a form is generated from a CRUD schema or when a module needs to render a field dynamically without choosing the concrete component manually.

Supported field types

• text, password, email, number, and tel render ns-input.
• hidden renders a hidden input.
• date renders ns-date.
• select renders ns-select.
• search-select renders ns-search-select.
• textarea renders ns-textarea.
• checkbox renders ns-checkbox.
• multiselect renders ns-multiselect.
• inline-multiselect renders ns-inline-multiselect.
• select-audio renders ns-select-audio.
• switch renders ns-switch.
• media renders ns-media-input.
• ckeditor renders ns-ckeditor.
• datetimepicker renders ns-date-time-picker.
• daterangepicker renders ns-daterange-picker.
• custom loads field.component from nsExtraComponents or nsComponents.

Props and events

• field: the field definition to render.
• siblings: optional related fields passed by the parent form.
• Emits blur, change, saved, keypress, and keyup.

<ns-field
    :field="field"
    :siblings="fields"
    @change="handleFieldChange"
    @saved="handleSaved"
/>

Custom fields

For field.type = "custom", set field.component to a registered component name. The component is loaded from nsExtraComponents first, then nsComponents. For module component registration, see Injecting Vue Component.