Buttons (API)

In this section you will find reference to all key components used in Olobase Vuetify Admin.

Action

Component that you can use for any custom action key. In the data display table rows; Can be used in the header of create, display, or edit pages.

Mixins

  • ActionButton

Properties

Property Type Description
block boolean Expands the button to 100% of the available space.
type string Sets the type property of the button. (Default: button).
variant string Applies different styles to the component. ('text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain').
to string, object Vue route to redirect on click.
href string Converts the button to href to establish a link.
target boolean The pinning target if href is used.
loading string Activates the loading indication on the button.

Events

Event Description
click Triggered on click, send the relevant item if available.

List

Button for all list source actions. Redirect to list page by default. It is shown in the top header on the internal CRUD page.

Mixins

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.

Show

Button for all citing actions. By default it redirects to show the page.

Mixins

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.
disableRedirect boolean Disables the default forwarding behavior for compatible buttons.

RowShow

Vuetify performs the action of showing details on the data table using the v-menu component.

Mixins

  • Resource
  • RedirectButton

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.

Create

Button for all resource creation actions. By default it redirects to page creation.

Mixins

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
iconSize string x-small, small, default, large, x-large
color string, object Customizable background or text color depending on the text prop value.
disableRedirect boolean Disables the default forwarding behavior for compatible buttons.

CreateDialog

It allows adding resources to the VaList component from within a modal window.

Mixins

  • Resource
  • RedirectButton
Property Type Description
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.

Events

Event Description
last-dialog It is an event bus event. Allows you to close the window opened with eventBus.emit("last-dialog", false) after an axios http transaction.

RowCreate

It performs the action of adding a new source by opening a blank row in the data table.

Mixins

  • Resource
  • RedirectButton
Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.

Edit

Button for all resource editing actions. By default it redirects to the edit page.

Mixins

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
iconSize string x-small, small, default, large, x-large
color string, object Customizable background or text color depending on the text prop value.
disableRedirect boolean Disables the default forwarding behavior for compatible buttons.

RowSaveDialog

When clicked on the data table, it opens a new modal window and performs source editing/add operations.

Mixins

  • Resource
  • RedirectButton

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, it shows the key with the icon only.
color string, object Customizable background or text color depending on the text prop value.
disableRedirect boolean Disables the default forwarding behavior for compatible buttons.

Clone

Button for all resource cloning actions. It redirects to create a page by default with the target ID of the original source to be copied.

Mixins

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, shows the key with the icon only.
iconSize string x-small, small, default, large, x-large
color string, object Customizable background or text color based on text prop value.
disableRedirect boolean Disables the default forwarding behavior for compatible buttons.

Delete

Button for all resource deletion actions. It comes with a confirmation dialog.

Mixinler

  • Resource

Properties

Property Type Description
item string The element added to the button.
icon boolean If true, shows the key with the icon only.
iconSize string x-small, small, default, large, x-large
query object Query string params
color string, object Customizable background or text color based on text prop value.
redirect boolean Redirect to source list after successful deletion. If the current page source is deleted, the default redirect is active.

Events

Event Description
click Triggered on click, send the relevant item if available.
delete Custom delete action if item does not exist. It is used for the bulk delete button, which has its own special logic.
deleted Triggered after successful deletion of the source element.

Bulk Action

Global customizable button to perform bulk actions in the VaList component. Shown after item selections. Under the hood it uses the copyMany or deleteMany data provider method.

Mixins

  • ActionButton

Properties

Property Type Description
value array Selected resource items.
action object The data object to be sent in the data provider method, such as copyMany, deleteMany. Contains the resource properties to be copied or deleted.

Events

Event Description
click Triggered on click, send the relevant item if available.
input Clear selected items.

Bulk Delete

Button to delete batch actions for VaList. Shown after item selections. It preserves all VaDeleteButton properties and uses the deleteMany data provider method.

Properties

Property Type Description
value array Selected resource items.

Events

Event Description
input Clear selected items.

Bulk Copy

Button to delete batch actions for VaList. Shown after item selections. It preserves all VaCopyButton properties and uses the deleteCopy data provider method.

Properties

Property Type Description
value array Selected resource items.

Events

Event Description
input Clear selected items.

Excel Export

In the VaList component, it allows the function to be directed to the excel export operation in your API service.

Mixins

  • Resource
  • Button

Events

Event Description
click Triggered on click, send the relevant item if available.

Save

It is the default save key that can be used for the VaForm component. It is just a send function, the VaForm component does the real work. It triggers the following function.

this.formState.submit(this.redirect)

Mixins

  • Resource
  • Button
Property Type Description
block boolean Expands the button to 100% of the available space.
item string The element added to the button.
icon boolean If true, shows the key with the icon only.
color string, object Customizable background or text color based on text prop value.
text boolean Removes the background button.
label string Overrides the default tag.
redirect boolean After successful save, it redirects to the resource list.