c-input

A general-purpose input component for most Values. c-input delegates to other components based on the type of value it is bound to. This includes both other Coalesce Vuetify Components as well as direct usages of some Vuetify components.

All attributes are passed through to the delegated-to component, allowing for full customization of the underlying Vuetify component.

A summary of the components delegated to, by type:

• string:
  • v-textarea if flag attribute textarea is provided to c-input or if [DataType(DataType.MultilineText)] is present in C#.
  • Otherwise, v-text-field. Additionally, [DataTypeAttribute] values of DataType.EmailAddress, DataType.PhoneNumber, DataType.Password, or "Color" on the field will apply appropriate adjustments to the field.
• number: v-text-field.
• boolean: v-switch, or v-checkbox if flag attribute checkbox is provided to c-input.
• enum: v-select
• file: v-file-input
• date: c-datetime-picker
• model: c-select
• [ManyToMany] collection: c-select-many-to-many
• Model collection (not many-to-many): c-select
• Non-object collection: c-select-values

Any other unsupported type will simply be displayed with c-display, unless a default slot is provided - in that case, the default slot will be rendered instead.

When bound to a ViewModel, the validation rules for the bound property will be obtained from the ViewModel and passed to Vuetify's rules prop.

Examples

Typical usage, providing an object and a property on that object:

<c-input :model="person" for="firstName" />

Customizing the Vuetify component used:

<c-input :model="comment" for="content" textarea solo />

Binding to API Caller args objects:

<c-input 
    :model="person.setFirstName" 
    for="newName" />

Or, using a more verbose syntax:

<c-input 
    :model="person.setFirstName.args" 
    for="Person.methods.setFirstName.newName" />

Binding to Data Source Parameters:

<c-input :model="personList.$dataSource" for="startsWith" />

Usage with v-model (this scenario is atypical - the model/for pair of props are used in almost all scenarios):

<c-input v-model="person.firstName" for="Person.firstName" />

Props

for?: string | Property | Value

A metadata specifier for the value being bound. One of:

• A string with the name of the value belonging to model.
• A direct reference to a metadata object.
• A string in dot-notation that starts with a type name.

model?: Model | DataSource

An object owning the value that was specified by the for prop. If provided, the input will be bound to the corresponding property on the model object.

value?: any // Vue 2
modelValue?: any // Vue 3

If binding the component with v-model, accepts the value part of v-model.

Slots

default - Used to display fallback content if c-input does not support the type of the value being bound. Generally this does not need to be used, as you should avoid creating c-input components for unsupported types in the first place.