c-display

A general-purpose component for displaying any Value by rendering the value to a string with the display functions from the Models Layer. For plain string and number values, usage of this component is largely superfluous. For all other value types including dates, booleans, enums, objects, and collections, it is very handy.

Examples

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

<c-display :model="person" for="gender" />

Customizing date formatting (view format patterns):

<c-display :model="person" for="birthDate" format="M/d/yyyy" />

A contrived example of using c-display to render the result of an API Caller:

<c-display 
    :value="person.setFirstName.result" 
    :for="person.$metadata.methods.setFirstName.return" 
    element="div"
/>

Displaying a standalone date value without a model or other source of metadata:

<c-display :value="dateProp" format="M/d/yyyy" />

Props

for: string | Property | Value

A metadata specifier for the value being bound. Either a direct reference to the metadata object, or a string with the name of the value belonging to model, or 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.

format: DisplayOptions["format"]

Shorthand for :options="{ format: format }", allowing for specification of the format to be used when displaying dates.

See DisplayOptions for details on the options available for format.

options: DisplayOptions

Specify options for formatting some kinds of values, including dates. See DisplayOptions for details.

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

Can be provided the value to be displayed in conjunction with the for prop, as an alternative to the model prop.

This is an uncommon scenario - it is generally easier to use the for/model props together.

Slots

default - Used to display fallback content if the value being displayed is either null or "" (empty string).

[DataTypeAttribute]

For properties and other values annotated with [DataTypeAttribute], the following special handling occurs based on the data type:

• DataType.MultilineText: Renders with white-space: pre-wrap.
• DataType.Password: Renders with a show/hide toggle (hidden by default), showing a fixed number of dot characters when hidden.
• DataType.Url: Renders as a clickable link.
• DataType.EmailAddress: Renders as a clickable mailto link.
• DataType.PhoneNumber: Renders as a clickable tel link.
• DataType.ImageUrl: Renders as an img element.
• "Color": Renders a colored dot next to the value, interpreting the field value as a 7-character HTML hex color code.