Vuetify Components

https://img.shields.io/npm/v/coalesce-vue-vuetify/dev?color=42b883&label=coalesce-vue-vuetify@dev

The Vue stack for Coalesce provides a set of components based on Vuetify, packaged up in an NPM package coalesce-vue-vuetify. 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

Tip

The template described in Getting Started with Vue already includes all the necessary setup. You can skip this section if you started from the template.

First, ensure that NPM package coalesce-vue-vuetify is installed in your project.

Then, in your Vue application's main.ts file, you need to add the coalesce-vue-vuetify plugin to your application, like so:

import $metadata from '@/metadata.g';
// viewmodels.g has side-effects - it populates the global lookup on ViewModel and ListViewModel.
// It must be imported for c-admin-editor-page and c-admin-table-page to work correctly.
import '@/viewmodels.g';

import CoalesceVuetify from 'coalesce-vue-vuetify';
Vue.use(CoalesceVuetify, { metadata: $metadata, });

Also ensure that you have setup Vuetify correctly in your application as described in Vuetify's documentation.

Note

An important note if you're using Vuetify's A-la-carte builds:

coalesce-vue-vuetify expects that the Vuetify components that c-input can delegate directly to have been registered globally. Currently, vuetify-loader is not capable of picking up these particular references.

To make things work correctly, do the following when you Vue.use(Vuetify):

import Vuetify, { VTextField, VTextarea, VCheckbox, VSwitch, VSelect, VFileInput } from 'vuetify/lib';

Vue.use(Vuetify, {
    components: { VTextField, VTextarea, VCheckbox, VSwitch, VSelect, VFileInput },
});

You're now ready to start using the components that coalesce-vue-vuetify provides! See the list below for a summary of each component and links to dive deeper into each component.

Display Components

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 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.

Full Documentation: c-display.

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.

Full Documentation: c-loader-status.

c-list-range-display

Displays pagination information about the current $items of a ListViewModel in the format <start index> - <end index> of <total count>.

Full Documentation: c-list-range-display.

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.

Full Documentation: c-table.

Input Components

c-input

A general-purpose input component for most Values. c-input does not have much functionality of its own - instead, it delegates to the right kind of component based on the type of value to which it is bound. This includes both other Coalesce Vuetify Components as well as direct usages of some Vuetify components.

Full Documentation: c-input.

c-select

A dropdown component that allows for selecting values fetched from the generated /list API endpoints.

Used both for selecting values for foreign key and navigation properties, and for selecting arbitrary objects or primary keys independent of a parent or owning object.

Full Documentation: c-select.

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.

Full Documentation: c-datetime-picker.

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].

Full Documentation: c-select-many-to-many.

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.

Full Documentation: c-select-string-value.

c-select-values

A multi-select input component for collections of non-object values (primarily strings and numbers).

Full Documentation: c-select-values.

c-list-filters

A component that provides an interface for modifying the filters prop of a ListViewModel's parameters.

Full Documentation: c-list-filters.

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).

Full Documentation: c-list-pagination.

c-list-page-size

A component that provides an dropdown for modifying the pageSize parameter prop of a ListViewModel.

Full Documentation: c-list-page-size.

c-list-page

A component that provides previous/next buttons and a text field for modifying the page parameter prop of a ListViewModel.

Full Documentation: c-list-page.

Admin Components

c-admin-method

Provides an interface for invoking a method and rendering its result, designed to be use in an admin page.

Full Documentation: c-admin-method.

c-admin-methods

Renders in a Vuetify v-expansion-panels a c-admin-method for each method on a ViewModel or ListViewModel.

Full Documentation: c-admin-methods.

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.

Full Documentation: c-admin-display.

c-admin-editor

An editor for a single ViewModel instance. Provides a c-input for each property of the model.

Full Documentation: c-admin-editor.

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.

Full Documentation: c-admin-editor-page.

c-admin-table

An full-featured table for a ListViewModel, including a c-admin-table-toolbar, c-table, and c-list-pagination.

Full Documentation: c-admin-table.

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.

Full Documentation: c-admin-table-toolbar.

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.

Full Documentation: c-admin-table-page.