In this section you will find the reference of all mixin libraries used in Olobase Admin.
Contains CRUD action sheet functions used for View, Create, and Edit.
Properties
| Property | Type | Description |
|---|---|---|
| title | string |
Sets the optional h1 title of the page. |
Used for all welding related components.
Properties
| Property | Type | Description |
|---|---|---|
| resource | string |
The name of the resource to use. Required for good tag localization and context action activators. The default behavior is to fetch it from the router context. |
It is used for components that need to use the specific feature of the resource.
Properties
| Property | Type | Description |
|---|---|---|
| source | string |
The property of the resource to fetch the value to display. Supports dot representation for slotted object. |
Master field mix for all fields used for data show. It can automatically fetch the property source value from the current source. Use this component to create your own field component.
Properties
| Property | Type | Description |
|---|---|---|
| source | string |
The property of the resource to fetch the value to display. Supports dot representation for slotted object. |
| item | null |
Overrides the default element injected by the VaShow component. |
The master input mix for all inputs used to edit or create the resource feature. Automatically updates the main form's model. Use this component to create your own login component.
Properties
| Property | Type | Description |
|---|---|---|
| source | string |
The property of the resource to fetch the value to display. Supports dot representation for slotted object. |
| model | string |
By default resource will be the last name sent to the API for creation/update. This support allows you to override this default behavior. |
Provides common properties for common key components.
Properties
| Property | Type | Description |
|---|---|---|
| item | string |
Item added to button. |
| icon | boolean |
If true, it shows the button only with the icon. |
| color | string |
Customizable background or text color based on the text property value. |
Provides common features for all types of action button.
Properties
| Property | Type | Description |
|---|---|---|
| icon | boolean |
If true, it shows the button only with the icon |
| label | boolean |
The label of the button shown as the next label icon or tooltip. |
| hideLabel | boolean |
Hide the label next to the icon. It will appear as a tooltip. |
| color | string |
Customizable background or text color based on the text property value. |
| text | boolean |
Show as text without background. |
For keys that support routing. Unless DisableRedirect support is enabled, the button will be automatically hidden if no rendering action is available.
Properties
| Property | Type | Description |
|---|---|---|
| item | string |
Item added to button. |
| icon | boolean |
If true, it shows the button only with the icon. |
| color | string |
Customizable background or text color based on the text property value. |
| disableRedirect | boolean |
Disable default redirect behavior for compatible buttons. |
Provides common properties for resource search components, such as VaList or AutocompleteInput. It uses the GetList data provider.
Properties
| Property | Type | Description |
|---|---|---|
| filter | object |
Built-in active filter. Inside the filter parameters the data is sent to your provider. |
| fields | array |
List of fields to select for the API side. Supports dot notation for nested fields. The data is sent to your provider within the field parameters. |
| sortBy | array |
The list of sorted fields can be more than one. Inside the sorting parameters the data is sent to your provider. |
| sortDesc | array |
The sort state list for each sorted field is sorted as DESC if the boolean value is true. Inside the sorting parameters the data is sent to your provider. |
| include | array, object |
Relevant resources to be included in the existing resource for the API side. Allows eager loading on demand, data is sent to your provider within include parameters. |
| itemsPerPage | number |
The maximum number of items to show in the list for each page. The data is sent to your provider within pagination.perPage parameters. |
| disableItemsPerPage | boolean |
It necessarily disables per-page items in the query on the server side. Note that itemsPerPage is still required for proper client-side pager calculation. |
It provides common features for all chip-based fields.
Properties
| Property | Type | Description |
|---|---|---|
| color | string |
The color of the chip can be a function for dynamic color according to a specific value. |
| small | boolean |
Small chip. |
| to | boolean |
Router connection associated with the chip, if necessary. |
Provides common properties for all input fields.
Properties
| Property | Type | Description |
|---|---|---|
| parentSource | string |
Special case of main source for array entry. |
| prependIcon | string |
Adds an external icon at the head of the component. Must be a valid MDI. |
| appendIcon | string |
Adds an external icon to the last part of the component. Must be a valid MDI. |
| prependInnerIcon | string |
Adds an internal icon to the head of the component. Must be a valid MDI. |
| appendInnerIcon | string |
Adds an internal icon to the last part of the component. Must be a valid MDI. |
| hint | string |
Hint text. |
| hideDetails | string, boolean |
Hides hint and validation errors. When set to automatic, messages are processed only if there is a message to be displayed (hint, error message, counter value, etc.). |
| density | boolean |
Reduces entry height. |
| required | boolean |
Adds the default required client-side rule. |
| label | string |
Overrides the default tag behavior. The default is to get the localized VueI18n tag from both the source and the property source. |
| labelKey | string |
Overrides the default source key as the translated label. |
| placeholder | string |
If the input field supports it, it assigns the value entered to the placeholder attribute. |
| clearable | boolean |
If the input field supports it, it assigns the deletable attribute to this field. |
| index | number |
If the input value is an array, it is the specific field index. Use this with the parentSource prop to update the value at a good time and place it in the form model. |
| errorMessages | array |
List of custom error verification messages to show as hints. |
Provides common properties for the rating field and input components.
Properties
| Property | Type | Description |
|---|---|---|
| color | string |
Solid color for active ratings. |
| backgroundColor | string |
Stroke color for empty graduations. |
| length | string, number |
Amount of ratings to show. |
| halfIncrements | boolean |
Allows selection of half increments. |
Provides common properties for all selection-based fields or entries.
Properties
| Property | Type | Description |
|---|---|---|
| itemText | string, array, func |
Ability to show text. |
| itemValue | string, array, func |
Specifies where the value is taken from. |
| choices | array |
List of options to choose from. By default VueI18n imports localized enums from your source locale. |
Provides common properties for all field components that support resource reference as VaReferenceField or VaReferenceArrayField.
Properties
| Property | Type | Description |
|---|---|---|
| reference | string |
Name of the resource to connect to. |
| action | string, array, func |
Default CRUD page to link to. |
| itemText | string |
Property used to string the internal targeted resource. For more customization, use a function. If nothing is set, use the global tag property resource by default. |
| itemValue | string |
Specify where the ID value is retrieved for link creation. |
Provides common properties for input components that allow multiple values as arrays.
Properties
| Property | Type | Description |
|---|---|---|
| v-model | string, array |
The value to be edited. If more than one, it is array by default. |
| multiple | boolean |
Allows input to accept multiple values as an array. |
| variant | string |
Variant support provides an easy way to customize the style of your text field. The following values are valid options: solo, filled (default), outlined, plain, underlined. |
| chips | boolean |
Enables chip usage for each item. Enabled by default if more than one. |
| smallChips | boolean |
Allows the use of small chips. |
Provides common properties for all file upload entries.
Properties
| Property | Type | Description |
|---|---|---|
| source | string |
It is the property of the resource to fetch the value to be displayed. Supports dot representation for slotted object. |
| item | null |
Overrides the default element injected by VaShow. |
| src | string |
Source property of the file object, link path of the original file source. |
| title | string |
Sets the title attribute of the file object used for title and alt attributes. |
| fileName | string |
The file name property of the file object; shown as link text for files. |
| target | string |
The target value for the connection is external by default. |
| clearable | boolean |
Mainly uses for VaFileInput, allows removal of files or images. |
| model | string |
Determines the name of the property sent to the API that contains the IDs of the file to be deleted. |
| itemValue | string |
Specifies where the ID value is retrieved (default: "id") to identify files to be deleted. |
Some helper functions in Olobase Admin are included in utils.js by default.
Methods
| Method | Description |
|---|---|
| this.generateUid() | Generates a random GUUID: xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx. If the form.disableGenerateUid option in your configuration file is true, it will generate random numbers of integer type. |
| this.generateInt() | Generates random numbers in integer format. |
| this.generateId(this) | generateUid() if the current page's route contains the word create, otherwise it returns this.id. |
| validateForm(this, formName) | If you are using more than one form on one page. This function checks the validation of the form name given on the current page. |
| dateAddMonth(date, numberOfMonth) | Adds the number of months entered to the given date. |
| dayDiff(firstDate, secondDate = null) | If only the first parameter is entered, it calculates the number of days between today's date and the entered date. If two dates are entered, the days between the two dates are calculated. |
| monthDiff(startDate, endDate) | Calculates how many months are between two dates. |
| generatePassword(length) | Generates a random strong password of the given width. |