# Namespace: components

## vcs.ui.components

These components can be used in any plugin html template, by adding them to them DOM using the class name (without the namespace of vcs.ui.Components) as a tag. See the docs for events fired by these components and properties that can be passed to them

### Methods

#### vcs.ui.components.AccordionBox(title, tooltip, startOpen, slot, slot:title-slot)

  A box with at title, which expands nicely and then shows the slot content

  Name | Type | Description
  --- | --- | ---
  `title` | string |
  `tooltip` | string |
  `startOpen` | boolean |
  `slot` | * | content
  `slot:title-slot` | * | additional title information (icons, buttons badges etc.)

#### vcs.ui.components.CloseButton()

  A special button with an x, will always close a content window and go to the 'home' route

#### vcs.ui.components.ContentTile(slot)

  The title in a content window, with a @link{vcs.ui.components.CloseButton}

  Name | Type | Description
  --- | --- | ---
  `slot` | * | The title, rendered in an h2 tag

#### vcs.ui.components.LeadButton(clickOnEnter, slot)

  Vcs lead button, a simple button. It also fires click on keyup.enter.

  Name | Type | Default | Description
  --- | --- | --- | ---
  `clickOnEnter` | boolean | false | if true pressing Enter will fire click event on keyUp
  `slot` | * |  |

  ##### Fires:

  - `click`

#### vcs.ui.components.Loader(size, message)

  A simple spinner for showing loading in progess.

  Name | Type | Default | Description
  --- | --- | --- | ---
  `size` | number | 3 | the fontawesome size of the spinner
  `message` | string |  | A message to be displayed underneath the spinner

#### vcs.ui.components.MapContextButton(slot)

  A button to set the lastSelectedLocation in the store. Once activated, a click into the map will set the location.

  Name | Type | Description
  --- | --- | ---
  `slot` | * | if no slot is provided, a simple marker is drawn

#### vcs.ui.components.NavButton(deactivate, slot)

  A button which can be deactivated, with a background color on hovering

  Name | Type | Description
  --- | --- | ---
  `deactivate` | boolean | used to set the cursor to default when hovering
  `slot` | * |

#### vcs.ui.components.NavHeaderButton(deactivate, slot)

  A button mainly used for navigation

  Name | Type | Description
  --- | --- | ---
  `deactivate` | boolean | used to set the cursor to default when hovering
  `slot` | * |

#### vcs.ui.components.Pagination(list, name, per, slot)

  A Pagination list component for re-rendering items

  Name | Type | Default | Description
  --- | --- | --- | ---
  `list` | Array.<Object> |  | the list to be rendered
  `name` | string |  | the name of the list, must be unique for other paginations
  `per` | number | 10 | number of items per page
  `slot` | * |  | the element to render of each item. it is passed :item as a prop

#### vcs.ui.components.Query()

  The Query Widget Component, needs a Query Widget in the Framework

#### vcs.ui.components.SubButton(deactivate, slot)

  A standard sub-button.

  Name | Type | Description
  --- | --- | ---
  `deactivate` | boolean | Set the cursor to default on hover
  `slot` | * |

  ##### Fires:

  - `click`
  - `mouseenter`
  - `mouseleave`