# Fields

VA field components allow custom and optimized display of specific resource property. It's mainly means to be used on show and list views. Use required source prop as resource property to fetch and display. Must be used with VaShow component injector or with an explicit item object via item prop.

CELL TEMPLATING

You may use this VA fields as cells template for VaDataTable, see this section.

FIELD WRAPPER

Contrary to VA inputs, the typed VA fields doesn't include any wrapper with label, only simple inline display formatter. You may use VaField for that. It gets the localized label and will instantiate the proper field component via type prop, which is avoid us to rewrite it on default slot.

All additional attributes will be merged into child field component. See more for further detail.

DOT NOTATION SUPPORT

VA fields accept dot notation for source prop. Useful for nested object :

<template>
  <va-field source="address.street"></va-field>
  <va-field source="address.postcode"></va-field>
  <va-field source="address.city"></va-field>
</template>

1
2
3
4
5

It will directly get the value of street property of address object and take the localized label from nested structure.

# VA fields

# Text

VaTextField

Show value as simple text, render a simple span. HTML tags will be stripped.

MIXINS

Resource

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`.
truncate	`number`	Truncate text

SAMPLE

<template>
  <va-text-field source="name"></va-text-field>
</template>

1
2
3

Will render a simple span :

<span>Admin</span>

# Email

VaEmailField

Show value as mailto link.

MIXINS

Resource

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

SAMPLE

<template>
  <va-email-field source="email"></va-email-field>
</template>

1
2
3

Will render a mailto anchor :

<a href="mailto:[email protected]">[email protected]</a>

# Url

VaUrlField

Show value as simple anchor.

MIXINS

Resource

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`.
target	`string`	Target value for anchor, default to external.

SAMPLE

<template>
  <va-url-field source="url" target="_self"></va-url-field>
</template>

1
2
3

Will render an anchor :

<a href="https://www.example.org">https://www.example.org</a>

# Rich text

VaRichTextField

Show value on raw format that allows HTML tags. Source value must be trusted for prevent XSS attacks.

MIXINS

Resource

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

SAMPLE

<template>
  <va-rich-text-field source="body"></va-rich-text-field>
</template>

1
2
3

Will render an raw HTML div :

<div>
<p>Repudiandae minus consequatur error maiores repellat. Placeat harum fugiat illo est esse laudantium velit necessitatibus. Sed quaerat et impedit voluptatibus eveniet doloribus molestiae. Fuga hic nulla nobis eius qui et ex. Accusantium et molestiae earum eos vel impedit. Enim dolore ea esse repudiandae eveniet qui debitis ut. Suscipit aspernatur distinctio molestias est aut eius. Magnam nihil quia ea doloribus autem. Fugiat architecto quisquam sed eveniet qui. Velit autem et blanditiis libero voluptas. Cumque aspernatur voluptatem culpa fugiat. Quia nostrum non vel omnis accusamus architecto. Dolorem odio tempora culpa consequatur voluptatem.</p>
<p>Animi molestias aut et voluptates qui autem odit. At voluptatum qui nihil amet dignissimos. Sed illum ut aperiam quod odio. Dolor qui corporis cupiditate occaecati veritatis cupiditate molestias ut. Eius dolor rerum minima sunt necessitatibus accusamus. Laborum omnis culpa error eos maxime qui ipsa laudantium. Aut sunt quisquam est vero. Rerum autem in veniam sunt voluptate nemo. Non blanditiis id dolor maiores velit. Facilis nihil ut quas omnis ullam ut in. Reprehenderit officia quibusdam qui dolorem sed rerum inventore.</p>
</div>

1
2
3
4

# Number

VaNumberField

Show value as formatted number. Can be any localized currency, decimal number, or percent value. Use $n VueI18n function under the hood.

MIXINS

Resource

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`.
format	`string`	Name of number format to use. Must be predefined on your VueI18n plugin.

SAMPLE

<template>
  <va-number-field source="price" format="currency"></va-number-field>
</template>

1
2
3

Will render an formatted number inside span :

<span>49,92&nbsp;€</span>

FORMAT

You must register a valid number format first for targeted i18n locale as next :

i18n.setNumberFormat("en", {
  currency: {
    style: "currency",
    currency: "USD",
  },
});
i18n.setNumberFormat("fr", {
  currency: {
    style: "currency",
    currency: "EUR",
  },
});

1
2
3
4
5
6
7
8
9
10
11
12

See VueI18n documentation (opens new window)

# Date

VaDateField

Show value as formatted date. Support any localized format, long, short, etc. Use $d VueI18n function under the hood.

MIXINS

Resource

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`.
format	`string`	Name of date format to use. Must be predefined on your VueI18n plugin.

SAMPLE

<template>
  <va-date-field source="publication_date" format="short"></va-date-field>
</template>

1
2
3

Will render an formatted date inside span :

<span>Sunday, November 18, 1984</span>

FORMAT

You must register a valid date format first for targeted i18n locale as next :

i18n.setDateTimeFormat("en", {
  short: {
    year: "numeric",
    month: "short",
    day: "numeric",
  },
  long: {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

See VueI18n documentation (opens new window).

# Boolean

VaBooleanField

Show value as identifiable true/false icon.

MIXINS

Resource

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`.
labelTrue	`string`	True text for tooltip.
labelFalse	`string`	False text for tooltip.
iconTrue	`string`	Icon for true value. Must be a valid MDI.
iconFalse	`string`	Icon for false value. Must be a valid MDI.

SAMPLE

<template>
  <va-boolean-field source="active" icon-false="mdi-cancel"></va-boolean-field>
</template>

1
2
3

Will render an MDI (opens new window).

# Rating

VaRatingField

Show value as rating stars. Value should be a valid integer or decimal if half increments enabled. Icons can be edited via $ratingFull, $ratingEmpty and $ratingHalf on Vuetify settings.

MIXINS

Resource

Rating

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

SAMPLE

<template>
  <va-rating-field source="rating" length="10" half-increments></va-rating-field>
</template>

1
2
3

Will render a vuetify readonly rating component (opens new window)

# Chip

VaChipField

Show value inside a material chip.

MIXINS

Resource

Chip

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

SLOTS

Name	Description
default	Chip content placeholder for further customization, show the value by default.

SAMPLE

<template>
  <va-chip-field source="type" color="secondary" small></va-chip-field>
</template>

1
2
3

Will render a chip (opens new window)

ENUMS

If you need format value in terms of choices or enums, use VaSelectField with chip prop.

# Select

VaSelectField

Show value as text selected from a predefined key-value choices. If no choices, by default, takes localized enums with source as value from your VueI18n resources locales.

MIXINS

Resource

Choices

Chip

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`.
chip	`boolean`	Show text inside material chip.

SLOTS

Name	Description
default	Content placeholder for further customization, take the text of selected choice by default.

SAMPLE

<template>
  <va-select-field source="category" chip :choices="choices"></va-select-field>
</template>

<script>
export default {
  data() {
    return {
      choices: [
        { value: 'comics', text: 'Comics' },
        { value: 'novels', text: 'Novels' }
      ]
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

LOCALIZED ENUMS

You may centralized all choices for reuse directly inside you locales as explain here. If no choices setted, VaSelectField will lookup for this valid translated key format : resources.{resource}.enums.{source}.{value}.

# File

VaFileField

Show a list of file links that point to original files.

MIXINS

Resource

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.

SAMPLE

<template>
  <va-file-field source="files"></va-file-field>
</template>

1
2
3

# Image

VaImageField

Show list of images as gallery with preview support for thumbnails.

MIXINS

Resource

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.
contain	`boolean`	Constraint image to full width instead of cover. Ideal for logos.
height	`string`	Max height of image.
lg	`string\|number`	Max column width for image gallery.

SAMPLE

<template>
  <va-image-field source="photos" src="thumbnails.medium"></va-image-field>
</template>

1
2
3

You can play with lg and height for sort of gallery when multiple files :

images

# Array

VaArrayField

Show each single value of multiple array type value as material chip group.

MIXINS

Resource

Chip

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`.
itemText	`string\|array\|func`	Property used for stringify inner item if object. Use a function for further stringify customization.
select	`boolean`	Use enum select field instead of simple text as value formatter.
column	`boolean`	Show list of chips as column.

SLOTS

Name	Description
default	Default chip content slot, use simple text or select field by default.

SAMPLE

<template>
  <va-array-field source="formats" select></va-array-field>
</template>

1
2
3

ENUMS

You can combine this field with VaSelectField for enums or choices support by activating select prop.

NESTED OBJECT

Use default slot for inner chip templating :

<template>
  <va-array-field source="formats" v-slot="{ value }">
    {{ value.date }} : {{ value.url }}
  </va-array-field>
</template>

1
2
3
4
5

For more complex case, use a simple v-for custom template.

# Reference

VaReferenceField

Display a reference link to another existing resource. Can auto fetch the the target resource from source ID if asked.

MIXINS

Resource

Chip

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`.
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.
chip	`boolean`	Show link as a chip.
fetch	`boolean`	Allow resource auto fetching from source.

SLOTS

Name	Description
default	Content placeholder for further customization, guess the resource text by default.

SAMPLE

<template>
  <va-reference-field
    source="publisher"
    reference="publishers"
    chip
    color="orange"
    action="edit"
  ></va-reference-field>
</template>

1
2
3
4
5
6
7
8
9

DEFAULT SLOT

Use default slot for custom resource labelization. It takes by default the value of property configured on label of main resource object property. If you want just ID instead :

<template>
  <va-reference-field
    source="publisher"
    reference="publishers"
    chip
    color="orange"
    action="edit"
    v-slot="{ value }"
  >
    {{ value.id }}
  </va-reference-field>
</template>

1
2
3
4
5
6
7
8
9
10
11
12

NO AGGREGATION AUTOFETCH SUPPORT

You can auto fetch the reference via fetch props in case you have only the ID. It's OK for a show view but evil for listing, as it will made N XHR requests for each record.

Contrary to React Admin reference field equivalent, this field doesn't support resource autofetch aggregation via getMany. If possible your backend should eager-load all related resources at once. For list via VaList you can lean on include prop for on asking eager loading.

# Reference array

VaReferenceArrayField

Display multiple reference links to another existing resource as material chip group.

MIXINS

Resource

Chip

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`.
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.
column	`boolean`	Show list of chips as column.

SLOTS

Name	Description
default	Content placeholder for each resource label localization inside chip, guess the resource text by default.

SAMPLE

<template>
  <va-reference-array-field
    source="reviews"
    reference="reviews"
    color="green"
    column
    action="edit"
  ></va-reference-array-field>
</template>

1
2
3
4
5
6
7
8
9

Will render :

references

DEFAULT SLOT

Use default slot for custom resource labelization.

# Custom component

You can prefectly create your own VA field component by using field mixin component. Very useful for displaying complex property object or custom advanced display for primitives.

src/components/fields/MyCustomField.vue

<template>
  <span class="my-custom-field">
    My custom field component : {{ value }}
  </span>
</template>

<script>
import Field from "vuetify-admin/src/mixins/field";

export default {
  mixins: [Field],
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

Then register it globally :

src/main.js

import MyCustomField from "./components/fields/MyCustomField";

Vue.component("VaMyCustomField", MyCustomField);

1
2
3

NAMESPACE

Note as we add Va as prefix component name. That allows us to have a functional type prop for VaDataTable and VaField components. So next code will perfectly working :

<template>
  <va-field source="custom_property" type="my-custom"></va-field>
</template>

1
2
3

← Form Inputs →