@mamba/app
v12.2.1
Published
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**.
Downloads
295
Keywords
Readme
App
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.
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.
<App>
<!--
Tudo relacionado ao aplicativo deve
estar dentro do componente <App></App>
-->
</App>
<script>
export default {
components: {
App: '@mamba/app',
},
};
</script>
Controle de atalhos do teclado
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
.
Fluxo de fechamento do app
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
.
<App askPasswordOnClose>
<!--
Tudo relacionado ao aplicativo deve
estar dentro do componente <App></App>
-->
</App>
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.
Meta informações
O componente <App/>
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 deback
:Habilita/desabilita a navegação do app. Passa-se um objeto composto por
back
ehome
com um valor booleano ou um valor booleano único que será usado para ambos os casos.this.root.meta.setNavigable({ home: boolean, back: boolean } | boolean);
Esconde/mostra o
AppBar
. Passa-se um valor booleano: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 porroute
eparams
, a propriedaderoute
é obrigatória e precisa receber uma string, a propriedadeparams
é opcional e o valor precisa ser um object.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.
this.root.meta.setShortcuts(boolean);
Bloqueio de scroll. Habilita/desabilita o scroll do app.
this.root.meta.setScrollable(boolean);
Sub componentes
Keystroke
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 <Keystroke/>
estiver associado a uma tecla e ativo
, nenhum atalho de teclado automático (shortcut="nomeDaTecla"
) desta tecla estará ativo.
Uso
<Keystroke key="back" on:keystroke="this.root.router.go('/')" />
<script>
export default {
components: {
Keystroke: '@mamba/app/Keystroke.html',
},
};
</script>
<Keystroke ...props/>
| Propriedades | Descrição | Tipo | Padrão |
| ------------ | -------------------------------------------- | --------- | ------ |
| key | Define a tecla associada ao handler | string
| null
|
| active | Define ser o handler deve estar ativo ou não | boolean
| true
|
Eventos
<Keystroke ... on:event="..."/>
| 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.
<Keystroke key="back" on:keystroke="myMethod(event)" />