c-input

A general-purpose input component for Properties, Method Parameters, and Data Source Parameters. 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.

A summary of the components delegated to, by type:

Property/Parameter Type	Target Component
String	Single: v-textarea if attribute textarea is provided to c-input or if [DataType(DataType.MultilineText)] is present in C#. v-text-field otherwise. Additionally, [DataTypeAttribute] values of DataType.EmailAddress, DataType.PhoneNumber, DataType.Password, or "Color" on the field will apply appropriate adjustments to the field. Multiple: c-select-values
Number	Single: v-text-field Multiple: c-select-values
Boolean	v-switch, or v-checkbox if flag attribute checkbox is provided to c-input
Enum(s)	v-select
File(s)	v-file-input
Date and/or Time	c-datetime-picker
CRUD Model(s)	Single: c-select Multiple: c-select [ManyToMany]: c-select-many-to-many

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

Model properties

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 variant="solo" />

Method Parameters

Binding to Method Parameters on an API Caller args object:

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

Or, without using an API Caller args object:

<c-input v-model="newName" for="Person.methods.setFirstName.newName" />

const newName = ref<string>();

Data Source Parameters

<c-input :model="nameStartsWithSource" for="startsWith" />

const nameStartsWithSource = new PersonListViewModel.DataSources.NameStartsWith();

Other usages

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

In addition to the props below, all other attributes are passed through to the delegated-to component, allowing for full customization of the underlying Vuetify component.

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.