Vuetify Components

The Vue stack for Coalesce provides a set of components based on Vuetify, packaged up in an NPM package coalesce-vue-vuetify2 or coalesce-vue-vuetify3. These components are driven primarily by the Metadata Layer, and include both low level input and display components like c-input and c-display that are highly reusable in the custom pages you'll build in your application, as well as high-level components like c-admin-table-page and c-admin-editor-page that constitute entire pages.

Setup

All Coalesce projects should be started from the template described in Getting Started with Vue, and will therefore have all the setup completed for you.

If for whatever reason you find yourself adding Coalesce to an existing project, use the template as a reference for what configuration needs to be added to your project.

Display Components

Component	Description
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.
c-loader-status	A component for displaying progress and error information for one or more API Callers. TIP It is highly recommended that all API Callers utilized by your application that don't have any other kind of error handling should be represented by a c-loader-status so that users can be aware of any errors that occur.
c-list-range-display	Displays pagination information about the current $items of a ListViewModel in the format <start index> - <end index> of <total count>.
c-table	A table component for displaying the contents of a ListViewModel. Also supports modifying the list's sort parameters by clicking on column headers. Pairs well with a c-list-pagination.

Input Components

Component	Description
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.
c-select	A dropdown component that allows for selecting values fetched from the generated /list API endpoints. Used for selecting values for foreign key and navigation properties, or for selecting arbitrary objects or primary keys without a parent or owning object.
c-datetime-picker	A general, all-purpose date/time input component that can be used either with models and metadata or as a standalone component using only v-model.
c-select-many-to-many	A multi-select dropdown component that allows for selecting values fetched from the generated /list API endpoints for collection navigation properties that were annotated with [ManyToMany].
c-select-string-value	A dropdown component that will present a list of suggested string values from a custom API endpoint. Allows users to input values that aren't provided by the endpoint. Effectively, this is a server-driven autocomplete list.
c-select-values	A multi-select input component for collections of non-object values (primarily strings and numbers).
c-list-filters	A component that provides an interface for modifying the filters prop of a ListViewModel's parameters.
c-list-pagination	A component that provides an interface for modifying the pagination parameters of a ListViewModel. This is a composite of c-list-page-size, c-list-range-display, and c-list-page, arranged horizontally. It is designed to be used above or below a table (e.g. c-table).
c-list-page-size	A component that provides an dropdown for modifying the pageSize parameter prop of a ListViewModel.
c-list-page	A component that provides previous/next buttons and a text field for modifying the page parameter prop of a ListViewModel.

Admin Components

Component	Description
c-admin-method	Provides an interface for invoking a method and rendering its result, designed to be use in an admin page.
c-admin-methods	Renders in a Vuetify v-expansion-panels a c-admin-method for each method on a ViewModel or ListViewModel.
c-admin-display	Behaves the same as c-display, except any collection navigation properties will be rendered as links to an admin list page, and any models will be rendered as a link to an admin item page.
c-admin-editor	An editor for a single ViewModel instance. Provides a c-input for each property of the model.
c-admin-editor-page	A page for a creating/editing single ViewModel instance. Provides a c-admin-editor and a c-admin-methods for the instance. Designed to be routed to directly with vue-router.
c-admin-table	An full-featured table for a ListViewModel, including a c-admin-table-toolbar, c-table, and c-list-pagination.
c-admin-table-toolbar	A full-featured toolbar for a ListViewModel designed to be used on an admin page, including "Create" and "Reload" buttons, a c-list-range-display, a c-list-page, a search field, c-list-filters, and a c-list-page-size.
c-admin-table-page	A full-featured page for interacting with a ListViewModel. Provides a c-admin-table and a c-admin-methods for the list. Designed to be routed to directly with vue-router.
c-admin-audit-log-page	A full-featured page for interacting with Coalesce's Audit Logging. Presents a view similar to c-admin-table-page with content optimized for viewing audit log records. Designed to be routed to directly with vue-router.