npm package: @mamba/collection
Description: O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, que juntos ajudam a organizar itens em listas. `Collection` é um conjunto de `Row` de um assunto comum, semelhante a uma tabela com apenas uma coluna e diversas linhas.
Author: Stone Payments - Mamba Team
Latest version: 12.1.0

# Collection

O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, que juntos ajudam a organizar itens em listas.
`Collection` é um conjunto de `Row` de um assunto comum, semelhante a uma tabela com apenas uma coluna e diversas linhas.

`<Collection ...props />`

| Propriedades | Descrição         | Tipo     | Padrão      |
| ------------ | ----------------- | -------- | ----------- |
| title        | Título da coleção | `string` | `undefined` |

`<Row ...props />`

| Propriedades   | Descrição                                                                  | Tipo               | Padrão      |
| -------------- | -------------------------------------------------------------------------- | ------------------ | ----------- |
| label          | Texto da linha                                                             | `string`           | `''`        |
| leftLabel      | Igual a prop `label`                                                       | `string`           | `''`        |
| rightLabel     | Texto que é exibido no canto direito da linha                              | `string`           | `undefined` |
| description    | Texto de descrição abaixo do título                                        | `string`           | `undefined` |
| href           | Link acionado quando a `<Row/>` é clicada                                  | `string`           | `undefined` |
| showExtra      | Mostra o conteúdo extra                                                    | `boolean`          | `false`     |
| shortcut       | Tecla de atalho para a ação da `<Row/>`: `0..9`,`enter`,`shortcuts`,`help` | `string` (keyname) | `undefined` |
| bgColor        | Cor de fundo da linha                                                      | `string`           | `undefined` |
| primaryColor   | Cor primária da linha                                                      | `string`           | `undefined` |
| secondaryColor | Cor secundária da linha                                                    | `string`           | `undefined` |

## Eventos

`<Row ... on:event="..."/>`

| Eventos   | Disparado quando ...         | Tipo         |
| --------- | ---------------------------- | ------------ |
| click     | Uma Row é clicada            | `function()` |
| showExtra | O conteúdo extra é exibido   | `function()` |
| hideExtra | O conteúdo extra é escondido | `function()` |

#### Exemplos:

Quando o componente `Row` for clicado o roteador retorna para a página `home`.

```html
<Row on:click="root.router.go('/')" />
```

Quando o conteúdo em `extra` for exbidio digita no console a mensagem.

```html
<Row on:showExtra="console.log('extra extra')" />
```

Quando o conteúdo em `extra` for escondido, executa o método `myMethod()`.

```html
<Row on:click="myMethod()" />
```

## Slots

`<Row ... />`

| Slot        | Descrição                                                 |
| ----------- | --------------------------------------------------------- |
| right-sign  | Adiciona html customizado ao lado esquerdo da _label_     |
| left-sign   | Adiciona html customizado ao lado direito da _rightLabel_ |
| description | Adiciona uma descrição à `Row`                            |
| extra       | Adiciona conteúdo adicional após o contéudo da `Row`      |