Base Element

Common API of each elements.

#Options

Name Type Description
id string The 'id' attribute of the field.
label string Label of the element.
description string Description of the element.
class str|arr|obj HTML class of the element. Can use Vue syntaxes.
classes object Override theme classes for this element.
rules str|arr Validation rules to be applied for the element.
messages object Override default validation rule messages.
conditions array Conditions to be applied for the element.
columns num|object Definition of column sizes.
error boolean Whether the element should display it's first error, if any.
submit boolean Whether the element's value should be submitted.
component object The Vue Component to be used for the element.
before string Text or HTML to be placed before the field. If before slot is provided this will not appear.
between string Text or HTML to be placed between the field and it's description (if any). If between slot is provided this will not appear.
after string Text or HTML to be placed after the field's error message (if any). If after slot is provided this will not appear.
slots object Slots for the element.
onChanged function Triggered when the element's value is changed by the user. It is not triggered if the value is changed programmatically.
beforeCreate function Triggered in the element's beforeCreate lifecycle hook.
created function Triggered in the element's created lifecycle hook.
beforeMount function Triggered in the element's beforeMount lifecycle hook.
mounted function Triggered in the element's mounted lifecycle hook.
beforeUpdate function Triggered in the element's beforeUpdate lifecycle hook.
updated function Triggered in the element's updated lifecycle hook.
beforeDestroy function Triggered in the element's beforeDestroy lifecycle hook.
destroyed function Triggered in the element's destroyed lifecycle hook.

#Properties

Name Type Default Description
name number|string - The name of the input field. required
schema object - The element schema containing it's options. required
events array [] Helper property used to store available events for the element.
id string null The 'id' attribute of the field.
class string null HTML class of the element. Can use Vue syntaxes.
label string '' Label of the element.
description string null Description of the element.
messages object null Overrides default validation rule messages.
conditions array [] Conditions to be applied for the element.
columns object {} Calulated column sizes and classes for the element.
displayError boolean true Whether the element should display it's first error, if any.
hidden boolean false Whether the element was hidden programmatically with .show() / .hide() methods.
active boolean true Whether the element is hidden internally by other components, like tabs or wizard steps.
submit boolean true Whether the element's value should be submitted.
before string - Text or HTML to be placed before the field. If before slot is provided this will not appear.
between string - Text or HTML to be placed between the field and it's description (if any). If between slot is provided this will not appear.
after string - Text or HTML to be placed after the field's error message (if any). If after slot is provided this will not appear.
beforeCreate function null Triggered in the element's beforeCreate lifecycle hook.
created function null Triggered in the element's created lifecycle hook.
beforeMount function null Triggered in the element's beforeMount lifecycle hook.
mounted function null Triggered in the element's mounted lifecycle hook.
beforeUpdate function null Triggered in the element's beforeUpdate lifecycle hook.
updated function null Triggered in the element's updated lifecycle hook.
beforeDestroy function null Triggered in the element's beforeDestroy lifecycle hook.
destroyed function null Triggered in the element's destroyed lifecycle hook.
state object {} Helper property used to store the dirty and validated state of the element.
Validators array [] An array containing all the validators of the element.
available mixed - Whether the element has any unmet conditions.
value any - The value of the element.
data object - An object containing the element name as a key and its value as value.
filtered object - An object containing the element name as a key and its value as value only if the element is available and submit is not set to false.
path string - The path of the element using dot . syntax.
visible boolean - Whether the element is visible. It's false if available or active is false or hidden is true.
empty boolean - Whether the element has no value filled in.
el$ object - The element's component.
dirty boolean - Whether the element's value has been modified by the user.
validated boolean - Whether the element's input has already been validated at least once.
invalid boolean - Whether the element has any failing rules.
pending boolean - Whether the element has any async rules in progress.
debouncing boolean - Whether the element has an ongoing debounce.
busy boolean - Whether the element is pending or debouncing.
errors array - List of errors of failing rules.
error string - The element's error.

#Methods

# .__(expr, data) @returns {string}

Parameters
  • expr string : expression to be translated using . dot syntax.
  • data object : data to be passed for the expression

Translates an expression to current locale.


# .on(event, callback)

Parameters
  • event string : event to listen for.
  • callback function : callback to run when the event is triggered. The this variable refers to the component the listener is set for.

Adds a listener for an event.


# .off(event)

Parameters
  • event string : event to remove the listeners for.

Removes all listeners for an event.


# .fire(event, args) @returns {any}

Parameters
  • event string : event to fire.
  • args object : arguments to pass for the event's listeners.

Fires an event.


# .load(data)

Parameters
  • data object : an object containing data for the element using its name as key

Loads data for element or clears the element if the element's key is not found in the data object.


# .update(value)

Parameters
  • value any : the value to be set for the element

Updates the element's value.


# .reset()

Resets the element to it's default state.


# .clear()

Clears the value of the element.


# .updateColumns(column)

Parameters
  • column number|object : size definition

Updates the columns property with new column sizes.


# .hide()

Sets the hidden property of the element to false.


# .show()

Sets the hidden property of the element to true.


# .validate()

Validates the element.


# .dirt()

Flag the element as dirty.


# .resetValidators()

Set the validated state to false.


#Slots

# label

Props
  • el$ object : The element component.

Contains the label of the element.


# before

Props
  • el$ object : The element component.

Vue component to be rendered before the field.


# between

Props
  • el$ object : The element component.

Vue component to be rendered between the field and it's description, if any.


# after

Props
  • el$ object : The element component.

Vue component to be rendered after the field's error message, if any.


# description

Props
  • el$ object : The element component.

Contains the description of the element.


# error

Props
  • el$ object : The element component.

Contains the error of the element.


#Events

# change

Triggered when the user changes the value of the element. Does not trigger if the value is programmatically changed. Can prevent further execution (element validation) if returns false.