Mixins

You will find here all mixins reference used inside VuetifyAdmin.

Page

Page

CRUD action page layout used for Show, Create end Edit.

PROPS

Props	Type	Description
title	string	Optional H1 title of the page shown on the left of top header

Resource

Resource

For any resource related components.

PROPS

Props	Type	Description
resource	string	Name of the resource to use. Required for good label localization and context action activators. Default behavior is to fetch it from router context.

Source

Source

For components that must use specific property of the resource.

PROPS

Props	Type	Description
source	string	Property of resource for fetching the value to show. Support dot notation for nested object.

Field

Field

Main field mixin for all fields used for data show. Can auto fetch property source value from the current resource. Use it to create your own field component.

PROPS

Props	Type	Description
source	string	Property of resource for fetching the value to show. Support dot notation for nested object.
item	null	Override default item injected by VaShow.

Input

Input

Main input mixin for all inputs used for resource property edition or creation. Auto update the model of the parent form. Use it to create your own input component.

PROPS

Props	Type	Description
source	string	Property of resource for fetching the value to show. Support dot notation for nested object.
model	string	By default, the source will be the final name that will be sent to the API for create/update. This prop allows you to override this default behavior.

EVENTS

Name	Description
change	Triggered on any user input interaction.
input	Triggered if value updated.

Button

Button

Common props for generic button.

PROPS

Props	Type	Description
item	null	Item attached to the button.
icon	boolean	If true, show button with icon only, label will be shown as tooltip.
color	string	Customizable background or text color, dependably of text prop value.

EVENTS

Name	Description
click	Triggered on click, send related item if available.

Action button

ActionButton

Common props for all type of action button.

PROPS

Props	Type	Description
icon	string	Icon button, must be a valid MDI.
label	string	Label of button, shown as label next icon or as tooltip.
hideLabel	boolean	Hide label next of icon. Will appear as tooltip.
color	string	Color of button.
text	boolean	Show as text without background.

EVENTS

Name	Description
click	Triggered on click, send related item if available.

Redirect button

RedirectButton

For buttons that support redirect. Button will auto hide if no create action available unless disableRedirect prop is active.

PROPS

Props	Type	Description
item	null	Item attached to the button.
icon	boolean	If true, show button with icon only, label will be shown as tooltip.
color	string	Customizable background or text color, dependably of text prop value.
disableRedirect	boolean	Disable default redirect behavior for compatible buttons Force button to be shown, prevent hiding it according to default behavior if no action exist.

EVENTS

Name	Description
click	Triggered on click, send related item if available.

List

Search

Search

Common props for resource search components, as VaList or VaAutocompleteInput. Use the getList data provider under the hood.

PROPS

Props	Type	Description
filter	object	Internal active filter. Sent to your data provider inside filter params.
fields	array	List of fields to select for API side. Support dot notation for nested fields. Sent to your data provider inside fields params.
sortBy	array	List of sorted fields, can be multiple. Sent to your data provider inside sort params.
sortDesc	array	List of sort state for each sorted fields, only boolean, true if sorted as DESC. Sent to your data provider inside sort params.
include	array|object	Related resources to include within current resource for API side. Allow eager-loading on demand. Sent to your data provider inside include params.
itemsPerPage	number	Maximum number of items to show in the list for each page. Sent to your data provider inside pagination.perPage params.
disableItemsPerPage	boolean	Disable items per page on query, forced on server side. Note at itemsPerPage is still necessary for proper client-side pager calculation.

Chip

Chip

Common props for all based chip fields.

PROPS

Props	Type	Description
color	string|func	Color of chip, can be a function for dynamic color according to a certain value.
small	boolean	Small chip.
to	string|object	Router link associated to chip if needed.

Input wrapper

InputWrapper

Common props for all inputs.

PROPS

Props	Type	Description
parentSource	string	Specific case of parent resource for array input.
appendIcon	string	Appends an icon to the component. Must be a valid MDI.
hint	string	Hint text.
hideDetails	boolean|string	Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display.
dense	boolean	Reduces the input height.
required	boolean	Add default required client side rule.
rules	array	Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message.
label	string	Override default label behavior. Default is to get the localized VueI18n label from both resource and property source.
labelKey	string	Override default source key as translated label.
placeholder	string	Placeholder if input support it.
clearable	boolean	Mark this input as clearable.
index	number	Specific index of field in case of inside array of inputs, aka VaArrayInput. Use it with parentSource prop in order to update the value at a good place in the form model.
errorMessages	array	List of custom error validation messages to show as hint

Rating

Rating

Common props for rating field and input components.

PROPS

Props	Type	Description
color	string	Plain color for active ratings
backgroundColor	string	Stroke color for empty ratings.
length	number|string	Amount of ratings to show.
halfIncrements	boolean	Allows the selection of half increments.

Choices

Choices

Common props for all choices based fields or inputs.

PROPS

Props	Type	Description
itemText	string|array|func	Attribute for showing text.
itemValue	string|array|func	Attribute where taking the value from.
choices	array	List of choices for select. Takes localized enums from your VueI18n resources locales by default.

Reference

Reference

For all field components that support resource reference, as VaReferenceField or VaReferenceArrayField.

PROPS

Props	Type	Description
reference	string	Name of resource to link into.
action	string	Default CRUD page to link.
itemText	string|array|func	Property used for stringify inner targeted resource. Use a function for further stringify customization. If nothing set, use the global label property resource by default.
itemValue	string	Attribute where taking the id value for link building.

Multiple

Multiple

For input components that allow multiple value as array.

PROPS

Props	Type	Description
v-model	string|array	Value to be edited. Array by default if multiple.
multiple	boolean	Allow input to accept multiple value as array.
filled	boolean	Use full filled background color style.
chips	boolean	Use chips for each item. Enabled if multiple by default.
smallChips	boolean	Use small chips.

Files

Files

Common props for all file upload inputs.

PROPS

Props	Type	Description
source	string	Property of resource for fetching the value to show. Support dot notation for nested object.
item	null	Override default item injected by VaShow.
src	string	Source property of file object, link through original file.
title	string	Title attribute of file object, used for title and alt attributes.
fileName	string	Filename property of file object, shown as anchor text for files.
target	string	Target value for anchor, default to external.
clearable	boolean	Mainly use for VaFileInput, allow files or image to be removed.
model	string	Name of property sent to API which contains ids of file to delete.
itemValue	string	Attribute where taking the id value for identify files to delete.

Editable

Editable

Allow any input to have editable behavior.

PROPS

Props	Type	Description
item	null	Full item resource to be editable.
editable	boolean	Mark this field as live-editable. If enabled, the input will send directly a call to the API for live edit on change. Ideal for editable input inside VaDataTable, with combination of editable prop for each column.

EVENTS

Name	Description
change	Triggered on any user input interaction.