PxFormRow

A schema-driven row of sub-fields. Renders a mix of static text, number inputs, and searchable selects side by side from a field.components definition — e.g. a "between X and Y" range field. Used internally by PxSchemaForm.

Usage

Demo

Between

and

<script setup>
import { ref } from 'vue'
import { PxFormRow } from 'praxis-vue-ui'

const field = ref({
  required: false,
  components: [
    { type: 'static_text', label: 'Between' },
    { key: 'min_age', type: 'integer', value: 18 },
    { type: 'static_text', label: 'and' },
    { key: 'max_age', type: 'integer', value: 65 },
  ],
})
</script>

<template>
  <PxFormRow :field="field" />
</template>

Props

Prop	Type	Default	Description
fieldrequired	object	—	Field definition. `field.components` is a list of sub-components (static_text, integer, select) rendered side by side.
getFieldRules	(comp) => string	() => ''	Returns a vee-validate rules string for a given sub-component.
getMinNumberValue	(comp) => number | null	() => null	Returns the min value for an integer sub-component.
getMaxNumberValue	(comp) => number | null	() => null	Returns the max value for an integer sub-component.
validateMinRange	(comp) => void	() => {}	Called to validate the lower bound of an integer sub-component.
validateMaxRange	(comp) => void	() => {}	Called to validate the upper bound of an integer sub-component.

FieldComponent Interface

interface FieldComponent {
  key?: string
  type: 'static_text' | 'integer' | 'select'
  label?: string
  value?: unknown
  rules?: Record<string, unknown>
  option_source?: { options: { label: string; value: unknown }[] }
}

Emits

Event	Payload	Description
search	{ field, searchTerm }	Emitted while typing in a select-type sub-component.
change	{ option, field }	Emitted when a select-type sub-component value changes.