Fields

Olobase Admin field components allow specific and optimized display of specific resource properties. It is mainly designed for use in show and list views. It is used with the source and resource properties required to fetch and display data. Must be used with the VaShow component injector or an explicit item object via the item prop.

Field Wrapper

Unlike Olobase Admin entries, typed Olobase Admin fields do not contain any tagged wrapper, only a simple inline image formatter. You can use VaField for this. It takes the localized tag and initializes the appropriate field component via prop type, which prevents us from rewriting it to the default slot.

See more for more details.

Dot Representation Support

Olobase Admin fields accept dot notation for the source prop. This feature is useful for objects.

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

Olobase Admin Fields

In this section, the Olobase Admin field representation components in the packages/admin/src/components/ui/fields folder will be discussed.

Text

Displays the value as simple text, creating a simple span. HTML tags are destroyed with the strip function.

Mixins

• Field
• Source
• Resource

Properties

Example

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

Creates a simple span:

<span>Admin</span>

Email

Displays the value as a mailto link.

Mixins

• Field
• Source
• Resource

Properties

Example

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

Creates a simple mailto link:

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

Url

It displays the value as a simple http connection.

Mixins

• Field
• Source
• Resource

Properties

Example

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

Creates a simple url link:

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

Rich Text

Show the value in raw format that allows HTML tags. The source value must be trusted to prevent XSS attacks.

Mixins

• Field
• Source
• Resource

Properties

The source and item properties mentioned previously.

Example

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

Creates a raw HTML div:

<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Number

Displays the value as a formatted number. It can be any local currency, decimal or percentage value. Use the Vue i18n function $n under the hood.

Mixins

• Field
• Source
• Resource

Properties

Example

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

Creates a number formatted in span:

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

Format:

For the targeted i18n locale, you first need to save a valid number format:

src/i18n/rules/numbers.js

export default {
  en: {
    currencyFormat: {
      style: "currency",
      currency: "USD",
    },
  },
  tr: {
    currencyFormat: {
      style: "currency",
      currency: "TL",
    },
  },
};

Check out the documentation for Vue i18n.

Date

Displays the value as a formatted date. And long, short etc. Supports all localized formats. Basically use $d, VueI18n function.

Mixins

• Field
• Source
• Resource

Properties

Example

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

Creates a formatted date within the range:

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

src/i18n/rules/datetime.js

export default {
  en: {
    year: {
      year: "numeric",
    },
    month: {
      month: "short",
    },
    shortFormat: {
      dateStyle: "short",
    },
    longFormat: {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
      hour: "numeric",
      minute: "numeric",
      hour12: false,
    },
  }
}

Check out the documentation for Vue i18n.

Boolean

Displays the value as a definable true/false symbol.

Mixins

• Field
• Source
• Resource

Example

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

Rating

Show the value as rating stars. If half increments are enabled, the value must be a valid integer or decimal number. Icons can be edited from Vuetify icon settings.

Mixins

• Field
• Source
• Resource
• Rating

Properties

The source and item properties mentioned previously.

Example

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

The example above creates a read-only Vuetify rating component.

Chip

It displays the value inside a chip material.

Mixins

• Field
• Source
• Resource
• Chip

Properties

The source and item properties mentioned previously.

Slots

Example

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

Generates a Vuetify chip component.

Enums

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

Select

Its value represents text selected from predefined key-value options. If no options are available, by default Vue i18n retrieves localized enumerations from your resource locale that contain source as the value.

Mixins

• Field
• Source
• Resource
• Choices
• Chip

Properties

Slots

Example

<template>
   <va-select-field 
     source="userRoles" 
     chip 
     multiple
     :item="item"
   >
   </va-select-field>
</template>

<script>
export default {
  props: ["id", "item"],
}
</script>

Localized Enums

File

Shows a list of file links pointing to the original files.

<v-row no-gutters>
  <v-col sm="3" class="mr-3">
   <va-file-field 
     source="files" 
     :item="model" 
     action-type="download"
     table-name="employeeFiles"
   ></va-file-field>
  </v-col>
</v-row>

<v-row no-gutters>
  <v-col sm="3" class="mr-3">
   <va-file-input
     source="files"
     table-name="employeeFiles"
   ></va-file-input>
  </v-col>
</v-row>

Mixins

• Field
• Source
• Resource
• Files

Properties

Image

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

<va-image-field 
  source="files" 
  :item="model" 
  table-name="employeeFiles"
></va-image-field>

Mixins

• Field
• Source
• Resource
• Files

Array

Represent each value of the multiple array type value as a material chip group.

Mixins

• Chip
• Field
• Source
• Resource

Slots

<template>
  <va-array-field 
   source="userRoles" 
   :item="item" 
   ></va-array-field>
</template>

Nested object

Use the default slot for internal chip templating:

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

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