FormTab

Renders a form tab in FormTabs component.

Basic Usage

<FormTab> component can be used in <FormTabs> component:

<template>
  <Vueform>
    <template #empty>
      <FormTabs>
        <FormTab
          name="account"
          label="Account"
          :elements="['email', 'password']"
        />
        <FormTab
          name="personal"
          label="Personal"
          :elements="['name', 'bio']"
        />
        <FormTab
          name="social"
          label="Social"
          :elements="['facebook', 'twitter']"
        />
      </FormTabs>

      <FormElements>
        <TextElement
          name="email"
          label="Email"
        />
        <TextElement
          input-type="password"
          name="password"
          label="Password"
        />
        <TextElement
          name="name"
          label="Name"
        />
        <TextareaElement
          name="bio"
          label="bio"
        />
        <TextElement
          name="facebook"
          label="Facebook"
        />
        <TextElement
          name="twitter"
          label="Twitter"
        />
      </FormElements>
    </template>
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options

Find below the list of options that can use to configure FormTab component. Options can be passed to the component via props.

elements

Type: array
Default: []

<FormTab :elements="['name', 'email', 'password']" ... />

The names of highest level form elements the tab should contain.

name

Type: string|number
Required: true

<FormTab name="gallery" ... />

The name of the tab.

label

Type: string|object|function

<!-- Using string/HTML --->
<FormTab label="Gallery" ... />

<!-- Using component --->
<FormTab :label="{ template: '<span>Gallery</span>' }" ... />

<!-- Using function --->
<FormTab name="gallery" :label="step$ => _.upperFirst(step$.name)" />

The tab's label. Can be defined as a string, a Vue component object with a render function or as a function that receives tab$ as its first a param.

Can also be defined via #default slot.

conditions

Type: array
Default: []

view

Type: string

<FormTab view="alt" ... />

The name of the view to be used for the component. If undefined the default view will be used.

Learn more about views here.

addClass

Type: array|object|string

<FormTab :add-class="{
  classname: 'class-value',
  classname: ['class-value'],
  classname: [{'class-value': true}],
}" ... />

Adds classes to any of FormTab component's class names. Classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Learn more about adding classes here.

removeClass

Type: array|object

<FormTab :remove-class="{
  classname: ['class-value-1', 'class-value-2']
}" ... />

Removes classes from any of FormTab component's class names. The classes to be removed must be listed in an array.

Learn more about removing classes here.

replaceClass

Type: object

<FormTabElement :replace-class="{
  classname: {
    'from-class': 'to-class',
    'from-class': ['to-class'],
    'from-class': [{'to-class': true}],
  }
}" ... />

Replaces the classes of any class names of FormTab component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Learn more about replacing classes here.

overrideClass

Type: array|object|string

<FormTab :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any of FormTab component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Learn more about overriding classes here.

Properties

All the data, computed and inject properties of the component.

tab$

Type: component
Group: computed

The tab's component.

tabLabel

Type: string|component
Default: null
Group: data

The label of the tab.

index

Type: number
Group: computed

Index of this tab among the other tabs which are not hidden by unmet conditions.

isFirst

Type: boolean
Group: computed

Whether the tab is the first.

isLast

Type: boolean
Group: computed

Whether the tab is the first.

active

Type: boolean
Default: false
Group: data

Whether the tab is active.

elements$

Type: object
Group: computed

The components of highest level form elements.

tabs$

Type: component
Group: computed

The parent FormTabs component.

children$

Type: object
Group: computed

The components of form elements within the tab.

invalid

Type: boolean
Group: computed

Whether the tab has any invalid elements.

available

Type: boolean
Group: computed

Whether no conditions are defined or they are all fulfilled.

visible

Type: boolean
Group: computed

Whether the tab should be visible.

Size

Type: component
Group: inject

The size of the component.

View

Type: string
Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template

Type: object
Group: computed

The component's template.

classes

Type: object
Group: computed

The component's classes.

theme

Type: object
Group: inject

The global theme object, which contains all the default templates and classes.

form$

Type: component
Group: inject

The root form's component.

Methods

The methods of the component.

.select()

Returns: void

Deactivate all other tabs and set the current one as active.

.on(event, callback)

Arguments:
- {string} event - name of the event to listen for
- {function} callback - callback to run when the event is triggered
Returns: void

Adds a listener for an event.

.off(event)

Arguments:
- {string} event - name of the event to remove
Returns: void

Removes all listeners for an event.

.fire(args)

Arguments:
- {any} args - list of arguments to pass over to the event callback
Returns: void

Fires and emits an event.

.activate()

Returns: void

Activate the tab.

.deactivate()

Returns: void

Deactivate the tab.

Events

Events emitted by the component. You can subscribe to them using regular @{eventName} listener in inline components or by using on(event, callback) method.

@activate

Triggered when the tab becomes active.

@inactivate

Triggered when the tab becomes inactive.

Slots

The slots of the component.

#default

Renders the label for the tab.