Inputs

Olobase Admin input components allow editing of specific properties of the current API resource object. Mainly for creating and editing views It is used in form. It can also be used as a filter entry for VaList. For resource support, it must be used within the VaForm component, which handles adding elements and providing the model with error messages.

Source and Model

Va entries support both source and model sup

port. The source is the original feature object from which the value will be fetched and the model will be the final feature name with the new value to be sent to your data provider.

Dot Representation Support

Olobase Admin inputs accept dot notation for source support. Very useful for nested object:

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

As seen in the example above, the value of the street property of the address object is directly taken. The final form model data to be sent to your data provider also complies with this nested structure.

Olobase Admin Inputs

In this section, Olobase Admin input components in the packages/admin/src/components/ui/inputs folder will be discussed.

Text

Edits text for text value type via basic text input. Supports textarea mode for long texts via multi-line support. Can be used for any date, datetime or time arrangement; Use date, datetime-local, or time-based type. Processing will depend on browser support.

Mixins

  • Input
  • InputWrapper
  • Source
  • Resource
  • Editable

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot representation for slot used object.
model string By default source will be the last name sent to the API service for create/update. This support allows you to override this default behavior.
type string Text input type. All HTML types are allowed.
multiline boolean Convert text input to textarea.
variant string Applies different styles to the component. (outlined, plain, underlined, solo, filled, solo-filled, solo-inverted).

Example

Form

<template>
 <v-row>
     <v-col lg="3" md="4" sm="6">
         <va-text-input :label="$t('demo.text')" source="founder"></va-text-input>
     </v-col>
     <v-col lg="3" md="4" sm="6">
         <va-text-input :label="$t('demo.text')" source="headquarter"></va-text-input>
     </v-col>
 </v-row>
 <v-row>
     <v-col lg="3" md="4" sm="6">
         <va-text-input :label="$t('demo.text')" source="description" multiline></va-text-input>
     </v-col>
 </v-row>
</template>

Password

Şifre alanları için kullanılır. Geçerli giriş için gösterme/gizleme davranışı vardır.

Mixins

  • Input
  • InputWrapper
  • Source
  • Resource

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
model string By default source will be the last name sent to the API service for create/update. This support allows you to override this default behavior.
variant string Applies different styles to the component. (outlined, plain, underlined, solo, filled, solo-filled, solo-inverted).

Example

Form

<template>
 <v-row>
     <v-col lg="3" md="4" sm="6">
         <va-password-input label="Password" source="password"></va-password-input>
     </v-col>
 </v-row>
</template>

Number

Optimized for number editing. Supports min, max and step features.

Mixins

  • Input
  • InputWrapper
  • Source
  • Resource
  • Editable

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
model string By default source will be the last name sent to the API service for create/update. This support allows you to override this default behavior.
v-model string Text to be edited.
variant string Applies different styles to the component. (outlined, plain, underlined, solo, filled, solo-filled, solo-inverted).
step number Interval step.
min number Minimum accepted value.
max number Maximum accepted value.

Example

Form

<template>
 <v-row>
     <v-col lg="3" md="4" sm="6">
            <va-number-input source="level" label="Level" :step="1" :min="0" :max="99"></va-number-input>
     </v-col>
 </v-row>
</template>

Date

It is used to edit the date type value. Vuetify consists of a read-only text field associated with the date picker. It does not support time value, in this case use classic VaTextInput.

Mixins

  • Input
  • InputWrapper
  • Source
  • Resource
  • Editable

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
model string By default source will be the last name sent to the API service for create/update. This support allows you to override this default behavior.
header string Allows you to write text in the section shown under the title. The default value is empty.
format string The date format to use. For example: (dd-mm-YYYY).
allowedDates function, array Restricts which dates can be selected.
color string Applies the specified color to the component - supports auxiliary colors (e.g. success or purple) or css color (e.g. success or purple) or css color (like #033 or rgba(255, 0, 0, 0.5)). Default value: primary.
elevation string, number Specifies a height applied to the component, from 0 to 24. More information can be found on elevation.
hideHeader boolean Completely hides the header section of the component. (Default: false).
height string, number Sets the height of the component.
width string, number Sets the width of the component.
max string, number, date Maximum date/month allowed. (ISO 8601 format).
maxHeight string, number Sets the maximum height of the component.
maxWidth string, number Sets the maximum width of the component.
min string, number, date Minimum date/month allowed (ISO 8601 format).
minHeight string, number Sets the minimum height of the component.
minWidth string, number Sets the minimum width of the component.
multiple boolean Allow multiple date selections.
position boolean Sets the position of the component (static, relative, fixed, absolute, sticky).
rounded string, number, boolean Specifies the edge radius applied to the component.
showAdjacentMonths boolean Toggles the visibility of previous and next months' days.
showWeek boolean Toggles the visibility of week numbers in the body of the calendar.
hideActions boolean Hides select actions.
hideWeekdays boolean Hides weekdays.
inputPlaceholder string Sets the placeholder value for the entry.
variant string Applies different styles to the component. (outlined, plain, underlined, solo, filled, solo-filled, solo-inverted).
viewMode string Switches between month or year view (month, year).
disabled boolean Removes the ability to click on the component.

Example

Form

<template>
 <v-row>
     <v-col lg="3" md="4" sm="6">
            <va-date-input source="publishDate" label="Publish Date" format="shortFormat"></va-date-input>
     </v-col>
 </v-row>
</template>

Boolean

When a value is sent to a boolean input type as boolean or 0/1, the input is displayed as a toggle button.

Mixins

  • Input
  • InputWrapper
  • Source
  • Resource
  • Editable

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
model string By default source will be the last name sent to the API service for create/update. This support allows you to override this default behavior.

Example

Form

<template>
 <v-row>
     <v-col lg="3" md="4" sm="6">
            <va-boolean-input source="active" label="Active"></va-boolean-input>
     </v-col>
 </v-row>
</template>
This documents is available for subscribers only

Get Full Accesss