base UI components v4.0.0

# BaseFormFieldCreator

A component for form field creation via openAPI (opens new window) standard

# Props

Prop name Description Type Values Default
fieldKey a key to uniquely identify the field number|string -
field field information as provided in openAPI (opens new window) standard object -
fieldValue the field value object|string|array|date|number|boolean -
fieldProps add properties any input field can take and set values - find the possible variables at the
respective input components:
BaseInput
BaseAutocompleteInput
BaseMultilineTextInput
BaseChipsInput
BaseChipsBelow
BaseDateInput
BaseToggle

Caveat: this means several input field properties are settable via separate props as well
as via fieldProps (e.g. language, required, sortText) the logic here is the following:
separate props will have priority over fieldProps values unless the separate
prop has a default value other than ones evaluating to false (boolean false,
empty string).
Field props that are set via x-attrs (e.g. allowUnknownEntries) in the OpenAPI definition
have priority over fieldProps set values.
Fields for which a unified appearance makes sense (e.g. clearable, showErrorIcon) or that
are modified internally (e.g. input, selectedList) might not be settable
via fieldProps.		 object - {}
label a label for the field string - ''
showLabel define if field label should be shown boolean - true
placeholder a placeholder for the field
per default the placeholder attribute in OpenAPI x-attrs field will be used
(no need to specify that)		 string|object - ''
dropDownList provide an options list for autocomplete, chips or chips-below fields
for field type group provide a nested object with field names
as properties and an array for each field to ensure the correct options are assigned
even if field names within different groups are identical		 array|object - () => []
secondaryDropdown provide a second options list (needed e.g. for texts field (text type) or
contributors field (roles)		 array - []
hoverBoxData provide data for elements that have a hover box (chips) object - {}
autocompleteLoading possibility to steer field loading (chips, autocomplete) from outside boolean - false
language set the current language string - 'en'
availableLocales provide available locales array - []
sortText set a sorting text string - 'Sort A - Z'
fieldGroupParams pass down all necessary options for potential subform.
see BaseForm props		 object - {}
required mark as required field

Caveat: currently the required prop is only used to trigger BaseChipsBelow validation -
for all other form fields it is only used for the aria-required attributes
Note: if required is also set via OpenAPI definition x-attrs (provided by prop field) this will overwrite the prop!		 boolean - false
invalid mark the form field as invalid and ideally also provide an error message
to display below the form field.
for an example see BaseInput		 boolean - false
errorMessage add an error message to be displayed below form field if field is invalid.
for an example see BaseInput		 string - ''
validationTexts define validation texts to be displayed below form field if input is invalid.
for an example see BaseInput		 object - {
text: {
min: 'Value must be greater than or equal to {value}.',
max: 'Value must be less than or equal to {value}.',
minLength: 'Text must be at least {value} character(s) long.',
maxLength: 'Text cannot be longer than {value} characters.',
},

chips: {
required: 'Select an option.',
}
}
showErrorIcon define if error icon should be shown.
for an example see BaseInput		 boolean - true
clearable if true a remove icon will be shown allowing to remove
all input at once.
for an example see BaseInput		 boolean - true
identifierPropertyName specify the object property that should be used as identifier string - 'source'
labelPropertyName specify the object property that should be used as value to be displayed string - 'label'
assistiveText this prop gives the option to add assistive text for screen readers
properties:

Options for inputs type autocomplete, chips, chips-below:
loaderActive: text that is announced when options are being fetched (prop
isLoading is set true)

Options for inputs type chips:
optionToRemoveSelected: text read when option is marked active for removal (by using
backspace in empty input field). string {label} could be added to be replaced
by the actual chip label (value in [labelPropertyName])

Options for inputs type chips, chips-below:
resultsRetrieved: text that is announced when results were retrieved (drop down
list changed)
optionAdded: text read when option was added to the selected list. string {label}
could be added to be replaced by the actual chip label (value in [labelPropertyName])
optionRemoved: text read when option was removed from the selected list. string {label}
could be added to be replaced by the actual chip label (value in [labelPropertyName])		 object - {
loaderActive: 'loading.',
resultsRetrieved: '{number} options in drop down.',
optionAdded: 'option {label} added to selected list.',
optionToRemoveSelected: 'option {label} from selected list marked for removal. Press delete or backspace to remove.',
optionRemoved: 'option {label} removed.'
}

# Events

Event name Properties Description
fetch-autocomplete value string - the string to autocomplete
name string - the name of the field
source string - the url to request the data from
equivalent ?string - string specified for related fields e.g. for contributor roles equivalent is 'contributor'
parentFields ?string[] - in case the autocomplete event originates from a subform the subform id's (field property names) are specififed in this array (most nested property last)		 Event emitted for text input on autocomplete fields (field types autocomplete,
chips, chips-below)
input-complete undefined string, number, Object, Array - the updated value event emitted once an input was completed (e.g. an option selected in chips input or
an enter key triggered in BaseInput or after a date was validated)
field-value-changed undefined Object, Array, String, Number - the changed field value Event emitted when field value changed internally
fetch-info-data event triggered when hover box data should be fetched

# Slots

Name Description Bindings
label-addition Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs)) field-name string - the name of the current field for identification purposes
pre-input-field slot to add elements within the form field but in a row before the actual input field. for an example see BaseInput field-name string - the name of the current field for identification purposes
input-field-addition-before Slot to allow for additional elements in the input field <div> (before <input>) field-name string - the name of the current field for identification purposes
input-field-inline-before to add elements directly inline before the input (contrary to input-field-addition-before this does not wrap). for an example see BaseInput field-name string - the name of the current field for identification purposes
input-field-addition-after for adding elements after input field-name string - the name of the current field for identification purposes
post-input-field for adding elements at the end covering the whole height field-name string - the name of the current field for identification purposes
error-icon use a custom icon instead of standard error/warning icon
remove-icon use a custom icon instead of standard remove icon
below-input below-input slot added to e.g. add drop down field-name string - the name of the current field for identification purposes
drop-down-entry customize the form field drop down options field-name string - the name of the current field for identification purposes

option object - the option object
default use a custom icon instead of standard remove icon

With the FormFieldCreator component you can create any of the following form input fields with a openAPI (opens new window) specification:

For description of the x-attrs the field creation relies on, please see BaseForm

Please note that this component should be rendered client side (important for SSR projects). So for example if you have a Nuxt project you will have to wrap the component in a <client-only> tag.

# Demo

Example for a MultilineTextInput:

Example for a chips input:

Example for a field group:

Last Updated: 3/27/2023, 4:42:24 PM

← BaseFormGroups →