element$ - <*Element>

Common API of each elements.

Options
Properties
Methods
Slots
Events

#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`	`{}`	Calculated 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.
isMultilingual	`boolean`	-	Determines whether the element is multilingual.
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 its 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.