O componente `<App>` é responsável por encapsular toda a aplicação. Sem ele a aplicação perderá algumas funcionalidades básicas, o que o torna **obrigatório**.
npm install @mamba/appO componente é responsável por encapsular toda a aplicação. Sem ele a aplicação perderá algumas funcionalidades básicas, o que o torna obrigatório.
Vale ressaltar também, que este componente não deve ser utilizado em nenhum outro lugar da aplicação além do ponto de entrada.
``html
`
O POS possúi uma porção de teclas que podem ser utilizadas como atalhos de clique. Para designer uma tecla a certo evento de click, basta atribuir shortcut="nomeDaTecla" a algum elemento.
As teclas existentes no POS são: close, back, enter, help, shortcuts, 0, 1, ..., 8, 9.
Sempre que executado o método this.root.close() do componente raiz, o fluxo de fechamento do aplicativo é iniciado.
Por padrão, quando o usuário clicar no botão close/x o fluxo se inicia automaticamente. Caso, deseje que para fechar a aplicação a senha de administrador do POS seja informada, basta adicionar askPasswordOnClose no seu componente App.
`html`
Entretanto, também é possível sobrescrever este comportamento através de um método onClose no componente raiz de seu aplicativo. Deste modo, é possível customizar o fluxo de fechamento da sua maneira, adicionando uma tela, um diálogo, algum tipo de lógica, etc.
---
O componente se registra como a propriedade meta no componente raiz. Possibilitando o acesso meta informações de estado e fluxos do aplicativo:
- Navegação da AppBar e da tecla de back:
Habilita/desabilita a navegação do app. Passa-se um objeto composto por back e home com um valor _booleano_ ou um valor _booleano_ único que será usado para ambos os casos.
`js`
this.root.meta.setNavigable({ home: boolean, back: boolean } | boolean);
- Esconde/mostra o AppBar. Passa-se um valor _booleano_:
`js`
this.root.meta.hideAppBar(boolean);
- Navegação da AppBar no botão de voltar com rota customizada e passagem de parâmetros:
Customiza a rota quando for clicado no botão de voltar no AppBar. Passa-se um objeto composto por route e params, a propriedade route é obrigatória e precisa receber uma _string_, a propriedade params é opcional e o valor precisa ser um _object_.
`js`
this.root.meta.setNavigableRoute('/', { name: 'Mamba' });
- Atalhos de tecla automáticos shortcut="nomeDaTecla"
Habilita/desabilita os atalhos automáticos de teclado. Passa-se um parâmetro _booleano_.
`js`
this.root.meta.setShortcuts(boolean);
- Bloqueio de _scroll_. Habilita/desabilita o _scroll_ do app.
`js`
this.root.meta.setScrollable(boolean);
O componente Keystroke associa um evento de tecla á uma tecla específica e o desassocia automaticamente quando é destruído. Quando a tecla é apertada, o componente dispara um evento de keystroke.
É importante ressaltar que, enquanto algum estiver associado a uma tecla e ativo, nenhum atalho de teclado automático (shortcut="nomeDaTecla") desta tecla estará ativo.
#### Uso
`html
`
| Propriedades | Descrição | Tipo | Padrão |
| ------------ | -------------------------------------------- | --------- | ------ |
| key | Define a tecla associada ao handler | string | null |boolean
| active | Define ser o handler deve estar ativo ou não | | true |
| Eventos | Disparado quando ... | Tipo |
| --------- | ----------------------------------- | ------------------------------------------------------------------------------ |
| keystroke | Uma das teclas do POS é pressionada | function(keyup) |
#### Exemplos:
Chama myMethod(keyup) passando como parâmetro o evento de keyup quando a tecla especificada em key é pressionada.
`html``