From c2eb6c5857a51ec53fb5393f0f6dc64ab7aed797 Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 15:55:34 -0200 Subject: [PATCH 01/63] WEBSDK-479/Switch (#275) ### WEBSDK-479 ## Description [WEBSDK-479](https://stonepayments.atlassian.net/browse/WEBSDK-479) --- packages/components/Switch/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/Switch/README.md b/packages/components/Switch/README.md index 875be748..b11f840b 100644 --- a/packages/components/Switch/README.md +++ b/packages/components/Switch/README.md @@ -11,3 +11,10 @@ O módulo `Switch` é usado para ativar opções predefinida. | change | lança um evento quando o componente é modificado | `function` | `undefined`| | checked | deixa o switch ativado | `undefined` | `true` | | disabled | desabilita o switch | `undefined` | `true` | + + +## Métodos + +### Switch.toggle(value) + +Alterna o valor de `checked` do switch, caso `value` seja passado como parâmtro define `checked` para este valor. \ No newline at end of file From 720f2be1a5a86b81308f9bd947a1aa737132d18d Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 15:57:39 -0200 Subject: [PATCH 02/63] Change goBack and goHome to private methods (#277) --- packages/components/AppBar/AppBar.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/AppBar/AppBar.html b/packages/components/AppBar/AppBar.html index 548a7123..20eeeb2e 100644 --- a/packages/components/AppBar/AppBar.html +++ b/packages/components/AppBar/AppBar.html @@ -1,6 +1,6 @@
{#if _showBack} -
+
{/if} @@ -10,7 +10,7 @@ {/if} {#if _showHome} -
+
{/if} @@ -85,7 +85,7 @@ } }, methods: { - goHome() { + _goHome() { const { _isAtHome } = this.get(); if (_isAtHome) { return this.root.close(); @@ -96,7 +96,7 @@ this.root.router.go('/'); } }, - goBack() { + _goBack() { /* istanbul ignore else */ if (this.root.router) { this.root.router.back(); From 81ef867089603019a0969164902ae3c3238fda69 Mon Sep 17 00:00:00 2001 From: Christian Kaisermann Date: Wed, 12 Dec 2018 16:42:27 -0200 Subject: [PATCH 03/63] Environment entrypoints (#278) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description [WEBSDK-485](https://stonepayments.atlassian.net/browse/WEBSDK-485) [WEBSDK-486](https://stonepayments.atlassian.net/browse/WEBSDK-486) Com esse PR a gente tem: - separação do `entrypoint`, arquivo de entrada, de um app entre `index.pos.js` e `index.browser.js`; - `import` de arquivos `.bmp` São mudanças úteis para o simulador geral do mamba e para a consistência e qualidade dos apps. --- .../pos/simulator/plugins/view/Launcher.html | 2 +- packages/webpack/config.app.js | 32 +++++++++---------- packages/webpack/helpers/getEntrypoints.js | 2 +- packages/webpack/helpers/getVirtualFiles.js | 23 ++++++++----- .../webpack/virtual-files/index.browser.js | 10 ++++++ packages/webpack/virtual-files/index.js | 25 --------------- packages/webpack/virtual-files/index.pos.js | 5 +++ 7 files changed, 47 insertions(+), 52 deletions(-) create mode 100644 packages/webpack/virtual-files/index.browser.js delete mode 100644 packages/webpack/virtual-files/index.js create mode 100644 packages/webpack/virtual-files/index.pos.js diff --git a/packages/pos/simulator/plugins/view/Launcher.html b/packages/pos/simulator/plugins/view/Launcher.html index acd137b0..8a9bd96e 100644 --- a/packages/pos/simulator/plugins/view/Launcher.html +++ b/packages/pos/simulator/plugins/view/Launcher.html @@ -22,7 +22,7 @@
- {app.manifest.name} + {app.manifest.name}
{app.manifest.appName} diff --git a/packages/webpack/config.app.js b/packages/webpack/config.app.js index 58671107..dc7c45f8 100644 --- a/packages/webpack/config.app.js +++ b/packages/webpack/config.app.js @@ -2,7 +2,6 @@ * Webpack configuration for analyzing a production bundle */ -const { readFileSync, existsSync } = require('fs'); const merge = require('webpack-merge'); const VirtualModulesPlugin = require('webpack-virtual-modules'); const webpack = require('webpack'); @@ -11,7 +10,7 @@ const { getPkg, fromCwd } = require('quickenv'); const getEntrypoints = require('./helpers/getEntrypoints.js'); const getVirtualFiles = require('./helpers/getVirtualFiles.js'); const MambaFixesPlugin = require('./plugins/MambaFixesPlugin.js'); -const { BUNDLE_NAME } = require('./helpers/consts.js'); +const { BUNDLE_NAME, IS_BROWSER } = require('./helpers/consts.js'); const loaders = require('./helpers/loaders.js'); const PKG = getPkg(); @@ -23,18 +22,26 @@ module.exports = merge(require('./config.base.js'), { }, resolve: { modules: [fromCwd('src'), 'node_modules'], - alias: { - page: fromCwd('node_modules', 'page'), - 'core-js': fromCwd('node_modules', 'core-js'), - '@mamba/pos': fromCwd('node_modules', '@mamba', 'pos'), - }, + alias: (() => { + const aliases = { + page: fromCwd('node_modules', 'page'), + 'core-js': fromCwd('node_modules', 'core-js'), + '@mamba/pos': fromCwd('node_modules', '@mamba', 'pos'), + }; + + if (IS_BROWSER) { + aliases['%mamba_app_icon_path%$'] = fromCwd('src', PKG.mamba.iconPath); + } + + return aliases; + })(), }, module: { rules: [ /** Handle font imports */ { test: /\.(eot|woff2?|otf|ttf)$/, use: [loaders.fonts] }, /** Handle image imports */ - { test: /\.(gif|jpe?g|png|ico|svg)$/, use: [loaders.images] }, + { test: /\.(gif|jpe?g|png|ico|svg|bmp)$/, use: [loaders.images] }, ], }, plugins: [ @@ -52,15 +59,6 @@ module.exports = merge(require('./config.base.js'), { ...PKG.mamba, }; - if (PKG.mamba) { - const iconPath = fromCwd('src', PKG.mamba.iconPath); - if (existsSync(iconPath)) { - __MANIFEST__.iconBase64 = readFileSync(iconPath, { - encoding: 'base64', - }); - } - } - return { __MANIFEST__: JSON.stringify(__MANIFEST__) }; })(), ), diff --git a/packages/webpack/helpers/getEntrypoints.js b/packages/webpack/helpers/getEntrypoints.js index 3a09611e..388e0487 100644 --- a/packages/webpack/helpers/getEntrypoints.js +++ b/packages/webpack/helpers/getEntrypoints.js @@ -14,6 +14,6 @@ module.exports = () => ({ /** Mamba simulator entry point */ ADD_MAMBA_SIMULATOR && './simulator.js', /** Virtual app entry point */ - './index.js', + `./index.${IS_BROWSER ? 'browser' : 'pos'}.js`, ].filter(Boolean), }); diff --git a/packages/webpack/helpers/getVirtualFiles.js b/packages/webpack/helpers/getVirtualFiles.js index 5608d67e..f6502eef 100644 --- a/packages/webpack/helpers/getVirtualFiles.js +++ b/packages/webpack/helpers/getVirtualFiles.js @@ -1,13 +1,20 @@ const { readFileSync, existsSync } = require('fs'); const { resolve } = require('path'); const { fromCwd } = require('quickenv'); +const { IS_BROWSER } = require('./consts.js'); -const VIRTUAL_FILES = ['./index.js','./simulator.js']; +const VIRTUAL_FILES = [ + `./index.${IS_BROWSER ? 'browser' : 'pos'}.js`, + './simulator.js', +]; -module.exports = () => VIRTUAL_FILES.reduce((acc, filepath) => { - /** If real file doesn't exist, load the virtual one */ - if(!existsSync(fromCwd('src', filepath))) { - acc[filepath] = readFileSync(resolve(__dirname, '..', 'virtual-files', filepath)); - } - return acc; -}, {}); +module.exports = () => + VIRTUAL_FILES.reduce((acc, filepath) => { + /** If real file doesn't exist, load the virtual one */ + if (!existsSync(fromCwd('src', filepath))) { + acc[filepath] = readFileSync( + resolve(__dirname, '..', 'virtual-files', filepath), + ); + } + return acc; + }, {}); diff --git a/packages/webpack/virtual-files/index.browser.js b/packages/webpack/virtual-files/index.browser.js new file mode 100644 index 00000000..291746a0 --- /dev/null +++ b/packages/webpack/virtual-files/index.browser.js @@ -0,0 +1,10 @@ +import { AppManager } from '@mamba/pos/simulator/index.js'; +import icon from '%mamba_app_icon_path%'; // eslint-disable-line +import App from './index.html'; + +/** __MANIFEST__ is replaced with the current app's manifest */ +const manifest = __MANIFEST__; +manifest.icon = icon; + +AppManager.installApp(App, manifest); +AppManager.open(manifest.slug); diff --git a/packages/webpack/virtual-files/index.js b/packages/webpack/virtual-files/index.js deleted file mode 100644 index e206ad94..00000000 --- a/packages/webpack/virtual-files/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Mamba App entrypoint. - * Since this file is barely modified, we include it - * automatically as a virtual module. - */ -import App from './index.html'; - -/** - * This file contain utility methods used by the apps in general. - * This runs on the simulation AND the POS. - */ - -/** - * If we're inside the simulator context, - * let it know that an app is opening - * */ -if (__BROWSER__) { - const { AppManager } = window.MambaWeb; - /** __MANIFEST__ is replaced with the current app's manifest */ - AppManager.installApp(App, __MANIFEST__); - AppManager.open(__MANIFEST__.slug); -} else { - const target = document.getElementById('app-root'); - new App({ target }); -} diff --git a/packages/webpack/virtual-files/index.pos.js b/packages/webpack/virtual-files/index.pos.js new file mode 100644 index 00000000..2bdd44cf --- /dev/null +++ b/packages/webpack/virtual-files/index.pos.js @@ -0,0 +1,5 @@ +import App from './index.html'; + +const target = document.getElementById('app-root'); + +new App({ target }); From bf67f3ca4c7d3682a6da01c11dcd309b3e513440 Mon Sep 17 00:00:00 2001 From: Jaime C Marques Date: Wed, 12 Dec 2018 17:37:22 -0200 Subject: [PATCH 04/63] Update input events documentation (#279) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aprovado com aquela ideia de reescrever as descrições dos eventos --- packages/components/Input/README.md | 38 +++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/components/Input/README.md b/packages/components/Input/README.md index e6ec8d9b..f0bda6e3 100644 --- a/packages/components/Input/README.md +++ b/packages/components/Input/README.md @@ -43,20 +43,44 @@ import MoneyInput from '@mamba/input/Money.html'; ## Eventos -`` +`` -| Nome | Descrição | Tipo | +| Evento | Descrição | Tipo | |---------------|--------------------------------------------------------------------------------------------------------------------------------------------------|-------------------| -| submit | Especifique uma função para receber o evento com mais duas propriedades value(_valor do campo_) e isValid(*Boleano da propriedade `validation`*) | `function(event)` | +| submit | Define uma função que será chamada se a validação( se ouver ) do campo for bem-sucedida, quando o campo for submetido. | `function(event)` | | submitValid | Especifique uma função que irá ser chamada somente quando o campo for __inválido__ no momento do `submit` | `function(event)` | | submitInvalid | Especifique uma função que irá ser chamada somente quando o campo for __válido__ no momento do `submit` | `function(event)` | +
-`` +Os eventos `submit`, `submitValid` e `submitInvalid`, retornam as seguintes propriedades no objeto `event`: +```ts +event = { + value: string; // Valor do campo (com máscara se ouver) + rawValue: string; // Valor sem máscara ou formatação + isValid: string; // Representa o valor da validação (se ouver) +} +``` + +> Além desses eventos, o `Input` recebe os eventos `focus`, `blur`, `keydown`, `keyup` e `input` por padrão. + +--- + +`` -| Nome | Descrição | Tipo | -|----------|-------------------------------------------------------------------------------------------|-------------------| -| submit | Retorna duas propriedades value(Valor em centavos) e formatted(Valor formatado na moeda) | `function(event)` | +| Evento | Descrição | Tipo | +|----------|---------------------------------------------------------------------------------------------------------------------------|-------------------| +| submit | Define uma função que será chamada se a validação( valor ≠ 0 ) do campo for bem-sucedida, quando o campo for submetido. | `function(event)` | + +
+ +O evento `submit` retorna as seguintes propriedades no objeto `event`: +```ts +event = { + value: string; // Valor em centavos + formatted: string; // Valor formatado na moeda +} +``` ## Métodos From bc546544e0f9df780582590b8303616d86a02a0d Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 17:39:37 -0200 Subject: [PATCH 05/63] WEBSDK-466/App (#276) * Add keystroke event documentation * Format event to standard and add example * Fix example * Fix example * Fix function MD sintax * Update README.md Fix event parameter --- packages/components/App/README.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/components/App/README.md b/packages/components/App/README.md index 252c5603..bdecea25 100644 --- a/packages/components/App/README.md +++ b/packages/components/App/README.md @@ -71,9 +71,24 @@ O componente `Keystroke` associa um evento de tecla á uma tecla específica e o #### Parâmetros -`` +`` | Parâmetro | 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 + +`` + +| Eventos | Descrição | Tipo | +|-------------|--------------------------------------------------------------------------------------|-------------------------------------------------------------------------------| +| keystroke | Especifique uma função que será chamada quando uma tecla é pressionada |`function`([keyup](https://developer.mozilla.org/pt-BR/docs/Web/Events/keyup)) | + +#### Exemplo: + +Chama `myMethod(keyup)` passando como parâmetro o evento de keyup quando a tecla especificada em `key` é pressionada. +```html + +``` From 9ea325a00c23900b7920191c4e2a59440a176ed3 Mon Sep 17 00:00:00 2001 From: Jaime C Marques Date: Wed, 12 Dec 2018 17:40:43 -0200 Subject: [PATCH 06/63] Update/dialog docs (#271) * Update Dialog events documentation * Add Slot documentation * Conserta ortografia do slot * Troca o argumento error por event no exemplo de evento --- packages/components/Dialog/README.md | 97 ++++++++++++++++++++++++---- 1 file changed, 84 insertions(+), 13 deletions(-) diff --git a/packages/components/Dialog/README.md b/packages/components/Dialog/README.md index 6d2deac2..d6ec975c 100644 --- a/packages/components/Dialog/README.md +++ b/packages/components/Dialog/README.md @@ -38,28 +38,78 @@ O `PromisedDialog` é exibido durante a execução de uma `Promise` e após sua ## Eventos -`` +`` -| Nome | Descrição | Tipo | +| Evento | Descrição | Tipo | |----------|----------------------------------------------------------------------|-------------------| -| open | Especifique uma função que será chamada quando o dialogo for exibido | `function` | -| close | Especifique uma função que será chamada quando o dialogo fechar | `function` | +| open | Especifique uma função que será chamada quando o diálogo for exibido | `function()` | +| close | Especifique uma função que será chamada quando o diálogo fechar | `function()` | +#### Exemplos: -`` +Chama `myMethod()` quando o diálogo for exibido. +```html + +``` -| Nome | Descrição | Tipo | -|----------|----------------------------------------------------------------------------------------------------------------------|-------------------| -| success | Especifique uma função que será chamada quando a Promise do dialogo for de sucesso(`.then`) | `function()` | -| failure | Especifique uma função que será chamada quando a Promise do dialogo for de falha(`.catch`). Recebe o erro da promise | `function(error)` | +Chama o `console.log` quando o diálogo fechar. +```html + +``` -`` +--- + +`` + +| Evento | Descrição | Tipo | +|----------|----------------------------------------------------------------------------------------------------------------------------------|-------------------| +| success | Especifique uma função que será chamada quando a Promise do diálogo for de sucesso(`.then`). Recebe o valor da `Promise.resolve` | `function(event)` | +| failure | Especifique uma função que será chamada quando a Promise do diálogo for de falha(`.catch`). Recebe o valor da `Promise.reject` | `function(event)` | + +#### Exemplos: + +Chama `console.log` quando a Promise for de sucesso. +```html + +``` -| Nome | Descrição | Tipo | +Chama o método `promiseFailed` quando o Promise falhar. +```html + + +... + methods: { + promiseFailed(event) { + console.log(event) + }, + } +... + + +``` +--- + +`` + +| Evento | Descrição | Tipo | |----------|------------------------------------------------------------------------------------------------------------------|------------- | -| nagative | Especifique uma função que será chamada quando o dialogo receber a ação negativa ou do botão vermelho do teclado | `function()` | -| positive | Especifique uma função que será chamada quando o dialogo receber a ação positiva ou do botão verde do teclado | `function()` | +| nagative | Especifique uma função que será chamada quando o diálogo receber a ação negativa ou do botão vermelho do teclado | `function()` | +| positive | Especifique uma função que será chamada quando o diálogo receber a ação positiva ou do botão verde do teclado | `function()` | + +#### Exemplos: + +Chama `myMethod()` quando o diálogo receber ação positiva. +```html + +``` + + +Chama o `console.log` quando o diálogo receber ação negativa. +```html + +``` + ## Métodos @@ -79,3 +129,24 @@ Abre o `ConfirmationDialog`. ### ConfirmationDialog.close() Fecha o `ConfirmationDialog`. + +## Slots + +`` + +| Slot | Descrição | +|--------|---------------------------------------------------------------------------------------------| +| extra | O slot `extra` pode ser usado para adicionar conteúdo adicional após a mensagem do diálogo. | + +
+ +Exemplo: + +```html + + Minha mensagem + Conteúdo extra + +``` + + From 31c10641e87f22a5c463ba9fcb063ba734028d25 Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 17:41:23 -0200 Subject: [PATCH 07/63] Add events examples (#272) --- packages/components/Range/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/components/Range/README.md b/packages/components/Range/README.md index 1c00f13e..406efc4f 100644 --- a/packages/components/Range/README.md +++ b/packages/components/Range/README.md @@ -18,6 +18,15 @@ O módulo `Range` pode ser usado para representar um valor dentro de um interval | icon | ícone que será apresentado ao lado do texto | `string` | `undefined` | | unit | unidade de valor | `string` (%,x...) | `undefined` | +## Eventos + +`` + +| Eventos | Descrição | Tipo | +|-------------|-------------------------------------------------------------------------|-----------------| +| decrement | Especifique uma função que será chamada quando o valor é decrescido | `function(int)` | +| increment | Especifique uma que será chamada função quando o valor é aumentado | `function(int)` | + ## Métodos ### increment() From 221eb0b47d68c38ecf77ce86a71644c4d1883329 Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 17:41:44 -0200 Subject: [PATCH 08/63] WEBSDK-470/Collection (#273) * Add Row events * Fix component name * Format events example to standard, add example * Add new slots * Update README.md Fix typo --- packages/components/Collection/README.md | 39 ++++++++++++++++++------ 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/components/Collection/README.md b/packages/components/Collection/README.md index a9ceeb23..c57e8cda 100644 --- a/packages/components/Collection/README.md +++ b/packages/components/Collection/README.md @@ -23,18 +23,39 @@ O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, q | shortcut | Tecla de atalho para a ação da ``: `0..9`,`enter`,`shortcuts`,`help` | `string` (keyname) | `undefined` | | description | Texto de descrição abaixo do título | `string` | `undefined` | -## Slots +## Eventos + +`` -### Row +| Eventos | Descrição | Tipo | +|-------------|---------------------------------------------------------------------------------------------|-------------| +| click | Especifique uma função que será chamada quando uma Row é clicada |`function()` | +| showExtra | Especifique uma função que será chamada quando o conteúdo extra é exibido |`function()` | +| hideExtra | Especifique uma função que será chamada quando quando o conteúdo extra é escondido |`function()` | -O component `Row` possui alguns slots para facilitar a customização de uma linha. +#### Exemplos: -#### `description` +Quando o componente `Row` for clicado o roteador retorna para a página `home`. +```html + +``` -O slot `description` pode ser usado ao invés da propriedade `description`, oferecendo maior flexibilidade no layout da descrição da linha. +Quando o conteúdo em `extra` for exbidio digita no console a mensagem. +```html + +``` +Quando o conteúdo em `extra` for escondido, executa o método `myMethod()`. ```html - -

Texto de descrição da lina

- -``` \ No newline at end of file + +``` + +## Slots + +`` + +| Slot | Descrição | +|-------------|--------------------------------------------------------------------------------------------| +| controller | Utilize o slot `controller` para adicionar um controlador customizado para sua `Row` | +| extra | Utilize o slot `extra` para adicionar conteúdo adicional após o contéudo da `Row` | +| description | Utilize o slot `description` para adicionar uma descrição à `Row` | From 1b6f236240361724edfd6e25a8e947742a6e744f Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Wed, 12 Dec 2018 17:42:02 -0200 Subject: [PATCH 09/63] WEBSDK-474 (#274) * Format printable events, add error event * Format events example to standard, add examples * Fix descriptions and methods calls * Fix example description --- packages/components/Printable/README.md | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/components/Printable/README.md b/packages/components/Printable/README.md index b3319191..85a8aa5e 100644 --- a/packages/components/Printable/README.md +++ b/packages/components/Printable/README.md @@ -9,10 +9,26 @@ O componente `Printable` encapsula o fluxo de impressão do POS, permitindo a im | [dithering](https://pt.wikipedia.org/wiki/Dither) | Define se deve ser aplicado um algoritmo de dithering na impressão. Use esta função somente para imprimir imagens, pois o dithering diminui a qualidade da impressão de texto | `boolean` | `false` | ## Eventos - -| Nome | Descrição | Tipo | -|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------| -| finish | Especifique uma função que será chamada quando o componente finalizar ação de impressão ou não. Recebe `true` se o processo de impressão foi todo concluído ou `false` se a ação foi cancelada | `function(Boolean)` | + +`` + +| Nome | Descrição | Tipo | +|----------|--------------------------------------------------------------------------------------------------------------------------------------------|---------------------| +| finish | Especifique uma função que no final de uma impressão é executado recebendo `true` se a impressão foi concluída e `false` caso interrompida | `function(boolean)` | +| error | Especifique uma função que é executada quando um erro de impressão ocorre. | `function()` | + +#### Exemplos: + +Chama `myMethod()` quando a impressão termina, passando como parâmetro `event` que indica caso a impressão foi concluída ou interrompida. +```html + +``` + +Chama exibe no console a mensagem quando a impressão falha: +```html + +``` + ## Métodos From a063ab537638ac2db6351cce02aa85d63e51190d Mon Sep 17 00:00:00 2001 From: Jaime C Marques Date: Thu, 13 Dec 2018 10:39:04 -0200 Subject: [PATCH 10/63] Fix disabled param word (#281) --- packages/components/Button/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/Button/README.md b/packages/components/Button/README.md index f5a18aae..553446fa 100644 --- a/packages/components/Button/README.md +++ b/packages/components/Button/README.md @@ -8,14 +8,14 @@ Além disso, os botões também podem ser acionados por um shortcut e executar m ## Parâmetros -| Parâmetro | Descrição | Tipo | Padrão | -| :------------- | :-------------------------------------- | :-------------- | :-------- | -| bgColor | Cor do botão | `string` (hex) | `#4ebf1a` | +| Parâmetro | Descrição | Tipo | Padrão | +| :------------- | :------------------------------------- | :---------------- | :---------- | +| bgColor | Cor do botão | `string` (hex) | `#4ebf1a` | | bottom | Fixa o botão na parte inferior da tela | `boolean` | `false` | | borderColor | Cor da borda do botão | `string` (hex) | `null` | -| disable | Desabilita o botão | `boolean` | `false` | +| disabled | Desabilita o botão | `boolean` | `false` | | size | Tamanho do botão (opções: `small`, `regular`, `large`, `full`) | `string` | `regular`| -| textColor | Cor do texto no botão | `string` (hex) | `#fff` | +| textColor | Cor do texto no botão | `string` (hex) | `#fff` | ## Métodos From 11d47ac188e4d49ad05c04ffb120c9dd9e83e843 Mon Sep 17 00:00:00 2001 From: Pedro Gabriel Date: Thu, 13 Dec 2018 13:30:44 -0200 Subject: [PATCH 11/63] task/WEBSDK-487-Renomear-Tabela-Eventos (#282) ## Description Renomeia header da tabela de eventos. [WEBSDK-487](https://stonepayments.atlassian.net/browse/WEBSDK-487) --- packages/components/App/README.md | 6 +++--- packages/components/Collection/README.md | 10 +++++----- packages/components/Dialog/README.md | 8 ++++---- packages/components/Input/README.md | 16 ++++++++-------- packages/components/Printable/README.md | 8 ++++---- packages/components/Range/README.md | 8 ++++---- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/components/App/README.md b/packages/components/App/README.md index bdecea25..6e019757 100644 --- a/packages/components/App/README.md +++ b/packages/components/App/README.md @@ -82,9 +82,9 @@ O componente `Keystroke` associa um evento de tecla á uma tecla específica e o `` -| Eventos | Descrição | Tipo | -|-------------|--------------------------------------------------------------------------------------|-------------------------------------------------------------------------------| -| keystroke | Especifique uma função que será chamada quando uma tecla é pressionada |`function`([keyup](https://developer.mozilla.org/pt-BR/docs/Web/Events/keyup)) | +| Eventos | Disparado quando ... | Tipo | +|-------------|--------------------------------------|-------------------------------------------------------------------------------| +| keystroke | Uma das teclas do POS é pressionada |`function`([keyup](https://developer.mozilla.org/pt-BR/docs/Web/Events/keyup)) | #### Exemplo: diff --git a/packages/components/Collection/README.md b/packages/components/Collection/README.md index c57e8cda..29d12482 100644 --- a/packages/components/Collection/README.md +++ b/packages/components/Collection/README.md @@ -27,11 +27,11 @@ O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, q `` -| Eventos | Descrição | Tipo | -|-------------|---------------------------------------------------------------------------------------------|-------------| -| click | Especifique uma função que será chamada quando uma Row é clicada |`function()` | -| showExtra | Especifique uma função que será chamada quando o conteúdo extra é exibido |`function()` | -| hideExtra | Especifique uma função que será chamada quando quando o conteúdo extra é escondido |`function()` | +| Eventos | Disparado quando ... | Tipo | +|-------------|--------------------------------|-------------| +| click | Uma Row é clicada |`function()` | +| showExtra | O conteúdo extra é exibido |`function()` | +| hideExtra | O conteúdo extra é escondido |`function()` | #### Exemplos: diff --git a/packages/components/Dialog/README.md b/packages/components/Dialog/README.md index d6ec975c..9dc28058 100644 --- a/packages/components/Dialog/README.md +++ b/packages/components/Dialog/README.md @@ -40,10 +40,10 @@ O `PromisedDialog` é exibido durante a execução de uma `Promise` e após sua `` -| Evento | Descrição | Tipo | -|----------|----------------------------------------------------------------------|-------------------| -| open | Especifique uma função que será chamada quando o diálogo for exibido | `function()` | -| close | Especifique uma função que será chamada quando o diálogo fechar | `function()` | +| Evento | Disparado quando ... | Tipo | +|----------|-----------------------|-------------------| +| open | O diálogo for exibido | `function()` | +| close | O diálogo fechar | `function()` | #### Exemplos: diff --git a/packages/components/Input/README.md b/packages/components/Input/README.md index f0bda6e3..1ef4b01a 100644 --- a/packages/components/Input/README.md +++ b/packages/components/Input/README.md @@ -45,15 +45,15 @@ import MoneyInput from '@mamba/input/Money.html'; `` -| Evento | Descrição | Tipo | -|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------|-------------------| -| submit | Define uma função que será chamada se a validação( se ouver ) do campo for bem-sucedida, quando o campo for submetido. | `function(event)` | -| submitValid | Especifique uma função que irá ser chamada somente quando o campo for __inválido__ no momento do `submit` | `function(event)` | -| submitInvalid | Especifique uma função que irá ser chamada somente quando o campo for __válido__ no momento do `submit` | `function(event)` | +| Evento | Disparado quando ... | Tipo | +|---------------|----------------------------------------------------------------------------------------|-------------------| +| submit | A validação( se houver ) do campo for bem-sucedida, quando o campo for submetido. | `function(event)` | +| submitValid | O campo for __inválido__ no momento do `submit` | `function(event)` | +| submitInvalid | O campo for __válido__ no momento do `submit` | `function(event)` | -
+
-Os eventos `submit`, `submitValid` e `submitInvalid`, retornam as seguintes propriedades no objeto `event`: +Os eventos `submit`, `submitValid` e `submitInvalid`, retornam as seguintes propriedades no objeto `event`: ```ts event = { value: string; // Valor do campo (com máscara se ouver) @@ -74,7 +74,7 @@ event = {
-O evento `submit` retorna as seguintes propriedades no objeto `event`: +O evento `submit` retorna as seguintes propriedades no objeto `event`: ```ts event = { value: string; // Valor em centavos diff --git a/packages/components/Printable/README.md b/packages/components/Printable/README.md index 85a8aa5e..26fee46f 100644 --- a/packages/components/Printable/README.md +++ b/packages/components/Printable/README.md @@ -12,10 +12,10 @@ O componente `Printable` encapsula o fluxo de impressão do POS, permitindo a im `` -| Nome | Descrição | Tipo | -|----------|--------------------------------------------------------------------------------------------------------------------------------------------|---------------------| -| finish | Especifique uma função que no final de uma impressão é executado recebendo `true` se a impressão foi concluída e `false` caso interrompida | `function(boolean)` | -| error | Especifique uma função que é executada quando um erro de impressão ocorre. | `function()` | +| Nome | Disparado quando .... | Tipo | +|----------|-------------------------------------------------------------------------------------------------------|---------------------| +| finish | Ao finalizar uma impressão, recebendo `true` se a impressão foi concluída e `false` caso interrompida | `function(boolean)` | +| error | Um erro de impressão ocorre | `function()` | #### Exemplos: diff --git a/packages/components/Range/README.md b/packages/components/Range/README.md index 406efc4f..c3078b70 100644 --- a/packages/components/Range/README.md +++ b/packages/components/Range/README.md @@ -22,10 +22,10 @@ O módulo `Range` pode ser usado para representar um valor dentro de um interval `` -| Eventos | Descrição | Tipo | -|-------------|-------------------------------------------------------------------------|-----------------| -| decrement | Especifique uma função que será chamada quando o valor é decrescido | `function(int)` | -| increment | Especifique uma que será chamada função quando o valor é aumentado | `function(int)` | +| Eventos | Disparado quando ... | Tipo | +|-------------|--------------------------|-----------------| +| decrement | O valor é decrescido | `function(int)` | +| increment | O valor é aumentado | `function(int)` | ## Métodos From 407a03e5012a3f57d89101d9ce30a3b4c675e146 Mon Sep 17 00:00:00 2001 From: Christian Kaisermann Date: Fri, 14 Dec 2018 12:19:25 -0200 Subject: [PATCH 12/63] Fix event path (#283) [WEBSDK-491](https://stonepayments.atlassian.net/browse/WEBSDK-491) --- packages/components/App/App.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/App/App.html b/packages/components/App/App.html index dc0f3317..77187a24 100644 --- a/packages/components/App/App.html +++ b/packages/components/App/App.html @@ -133,7 +133,7 @@ if ( !__TEST__ && __BROWSER__ && - !e.path.find(node => node.id === 'app-root') + !e.composedPath().find(node => node.id === 'app-root') ) { return; } @@ -161,7 +161,7 @@ if ( !__TEST__ && __BROWSER__ && - !e.path.find(node => node.id === 'app-root') && + !e.composedPath().find(node => node.id === 'app-root') && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') && !Keyboard.isActionKey(keyCode) ) { From d4fabbf80fe291839eea95d55fd2a6102c8c53e2 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Mon, 17 Dec 2018 12:55:28 -0200 Subject: [PATCH 13/63] =?UTF-8?q?Update=20rollup=20to=20the=20latest=20ver?= =?UTF-8?q?sion=20=F0=9F=9A=80=20(#285)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## The devDependency [rollup](https://github.com/rollup/rollup) was updated from `0.67.4` to `0.68.0`. This version is **not covered** by your **current version range**. If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update. --- [Find out more about this release](https://github.com/rollup/rollup).
FAQ and help There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html). If those don’t help, you can always [ask the humans behind Greenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).
--- Your [Greenkeeper](https://greenkeeper.io) bot :palm_tree: --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1bf0beb4..79b5ec23 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "postcss": "^7.0.6", "prettier": "^1.15.3", "quickenv": "^0.0.6", - "rollup": "^0.67.4", + "rollup": "^0.68.0", "rollup-plugin-alias": "^1.5.1", "rollup-plugin-babel": "^4.0.3", "rollup-plugin-commonjs": "^9.2.0", From 4b16371542941b53030326a752d8b4dfd434c71a Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Mon, 17 Dec 2018 12:55:44 -0200 Subject: [PATCH 14/63] chore(package): update rollup-plugin-svelte to version 5.0.0 (#284) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 79b5ec23..9c4f9ed9 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "rollup-plugin-node-resolve": "^4.0.0", "rollup-plugin-replace": "^2.1.0", "rollup-plugin-serve": "^0.6.0", - "rollup-plugin-svelte": "^4.4.0", + "rollup-plugin-svelte": "^5.0.0", "rollup-plugin-virtual": "^1.0.1", "stylelint": "^9.9.0", "svelte": "^2.15.3", From 2dea6c4c63d4a49fc6b57698ce6ab948623e51cb Mon Sep 17 00:00:00 2001 From: Christian Kaisermann Date: Mon, 17 Dec 2018 13:10:49 -0200 Subject: [PATCH 15/63] Prevent unlimited intervals. Small refactor (#286) --- packages/components/Sprite/Sprite.html | 30 ++++++++++++----------- packages/components/Sprite/Sprite.test.js | 6 ++--- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/components/Sprite/Sprite.html b/packages/components/Sprite/Sprite.html index 36aefd5c..4d0bd1fa 100644 --- a/packages/components/Sprite/Sprite.html +++ b/packages/components/Sprite/Sprite.html @@ -10,9 +10,7 @@ export default { data() { return { - _spriteWidth: null, _position: 0, - _interval: null, src: null, width: 0, height: 0, @@ -28,39 +26,43 @@ sprite.style.height = height || width; image.onload = () => { - this.set({ _spriteWidth: image.width }); + this.spriteWidth = image.width; this.start(); }; image.src = src; }, ondestroy() { /* istanbul ignore next */ - const { _interval } = this.get(); - /* istanbul ignore next */ - clearInterval(_interval); + clearInterval(this.interval); }, methods: { start() { - const { _spriteWidth, _position } = this.get(); + /** Don't allow to run more than one interval */ + if (this.interval != null) { + return; + } + + const { spriteWidth } = this; + const { _position } = this.get(); + /* istanbul ignore next */ - const STEP = _spriteWidth ? _spriteWidth / FPS : 0; + const STEP = spriteWidth ? spriteWidth / FPS : 0; let positionAux = _position; /* istanbul ignore next */ - const _interval = setInterval(() => { + const interval = setInterval(() => { positionAux -= STEP; - if (positionAux < -_spriteWidth) { + if (positionAux < -spriteWidth) { positionAux = 0; } this.set({ _position: positionAux }); }, 1000 / FPS); - this.set({ _interval }); + this.interval = interval; }, stop() { - const { _interval } = this.get(); - clearInterval(_interval); - this.set({ _interval: null }); + clearInterval(this.interval); + this.interval = null; }, }, }; diff --git a/packages/components/Sprite/Sprite.test.js b/packages/components/Sprite/Sprite.test.js index 5d8b65d8..e927e27e 100644 --- a/packages/components/Sprite/Sprite.test.js +++ b/packages/components/Sprite/Sprite.test.js @@ -19,7 +19,7 @@ beforeEach(() => { }); it('should automatically start after image loading', () => { - expect(typeof sprite.get()._interval).toBe('number'); + expect(typeof sprite.interval).toBe('number'); }); it('should stop the sprite animation interval', () => { @@ -27,7 +27,7 @@ it('should stop the sprite animation interval', () => { sprite.stop(); - expect(sprite.get()._interval).toBe(null); + expect(sprite.interval).toBe(null); }); it('should start the sprite animation interval', () => { @@ -35,5 +35,5 @@ it('should start the sprite animation interval', () => { sprite.start(); - expect(typeof sprite.get()._interval).toBe('number'); + expect(typeof sprite.interval).toBe('number'); }); From 8be742b8fd5740a79f314af04e600ac8cbfa3c90 Mon Sep 17 00:00:00 2001 From: Christian Kaisermann Date: Tue, 18 Dec 2018 10:45:07 -0200 Subject: [PATCH 16/63] Generalize the simulator usage (#280) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A gente tava usando um conceito de `drivers` externos que um app poderia ter e os resetando conforme o app fosse fechado no simulador. Entretanto, o "reset" do estado de um driver deveria ser responsabilidade do próprio driver e não do simulador. --- packages/configs/eslint/index.js | 2 +- packages/pos/drivers/app/simulation.js | 4 +- packages/pos/package.json | 3 +- packages/pos/simulator/plugins/app/manager.js | 40 +++++------- .../pos/simulator/plugins/driver/manager.js | 39 ++---------- .../plugins/registry/includes/data.js | 14 +++++ .../pos/simulator/plugins/view/Launcher.html | 61 ++++++++++++++++--- .../pos/simulator/plugins/view/style.pcss | 7 +++ packages/webpack/config.app.js | 24 +++----- .../webpack/virtual-files/index.browser.js | 6 +- 10 files changed, 114 insertions(+), 86 deletions(-) diff --git a/packages/configs/eslint/index.js b/packages/configs/eslint/index.js index 35d3e0ed..957e0113 100644 --- a/packages/configs/eslint/index.js +++ b/packages/configs/eslint/index.js @@ -32,7 +32,7 @@ module.exports = { __DEV__: true, __DEBUG_LVL__: true, __SIMULATOR__: true, - __MANIFEST__: true, + __APP_MANIFEST__: true, }, rules: { // ! Code diff --git a/packages/pos/drivers/app/simulation.js b/packages/pos/drivers/app/simulation.js index d47bc459..657c2d41 100644 --- a/packages/pos/drivers/app/simulation.js +++ b/packages/pos/drivers/app/simulation.js @@ -5,7 +5,9 @@ export const NAMESPACE = '$App'; export const SIGNALS = ['opened', 'closed']; export function setup(App) { - App.doClose = () => Core.AppManager.close(); + App.doClose = __TEST__ + ? () => App.fire('closed') + : () => Core.AppManager.close(); App.getAppKey = () => '123456'; diff --git a/packages/pos/package.json b/packages/pos/package.json index 43d0b4af..6f0d7f3f 100644 --- a/packages/pos/package.json +++ b/packages/pos/package.json @@ -16,7 +16,8 @@ "@mamba/button": "^2.0.0", "@mamba/icon": "^2.0.0", "@mamba/styles": "^2.0.0", - "@mamba/switch": "^2.0.0" + "@mamba/switch": "^2.0.0", + "immer": "^1.8.2" }, "gitHead": "7118f44e933d2f656166a80822c0b3c1001e6a33" } diff --git a/packages/pos/simulator/plugins/app/manager.js b/packages/pos/simulator/plugins/app/manager.js index 771abd5c..c2b84738 100644 --- a/packages/pos/simulator/plugins/app/manager.js +++ b/packages/pos/simulator/plugins/app/manager.js @@ -1,4 +1,3 @@ -import DriverManager from '../driver/manager.js'; import Signal from '../../libs/signal.js'; import App from '../../../api/app.js'; import extendDriver from '../../../drivers/extend.js'; @@ -8,13 +7,14 @@ import initEventCollector from './includes/eventCollector.js'; const AppManager = extendDriver({}, initEventCollector); const Apps = {}; + let currentApp = null; Signal.register(AppManager, [ 'appInstalled', - 'willOpen', + 'opening', 'opened', - 'willClose', + 'closing', 'closed', ]); @@ -28,12 +28,6 @@ AppManager.installApp = (AppConstructor, manifest) => { manifest, }; - const looseDrivers = DriverManager.getLooseDrivers(); - if (looseDrivers) { - appMetaObj.drivers = looseDrivers; - DriverManager.clearLooseDrivers(); - } - Apps[manifest.slug] = appMetaObj; AppManager.fire('appInstalled', appMetaObj); @@ -44,16 +38,16 @@ AppManager.installApp = (AppConstructor, manifest) => { } }; -AppManager.open = (appSlug, target) => { - AppManager.fire('willOpen'); - - target = target || document.getElementById('app-root'); - +AppManager.open = (appSlug, options = {}) => { /** First time opening an app */ const appMetaObj = Apps[appSlug]; + AppManager.fire('opening', appMetaObj, options); + if (__DEV__) log(`Opening App: ${appMetaObj.manifest.appName}`); + const target = document.getElementById('app-root'); + if (!target) { if (__DEV__) { console.warn('App target root element not found.'); @@ -69,18 +63,18 @@ AppManager.open = (appSlug, target) => { currentApp = appMetaObj; currentApp.runtime.instance = new appMetaObj.constructor({ target }); - AppManager.fire('opened'); + AppManager.fire('opened', appMetaObj, options); App.fire('opened'); }; AppManager.close = () => { - AppManager.fire('willClose'); - if (__DEV__) log('Closing App'); - App.fire('closed'); - if (currentApp) { + AppManager.fire('closing', currentApp); + + App.fire('closed'); + if (currentApp.runtime.instance) { const { runtime } = currentApp; runtime.instance.destroy(); @@ -107,19 +101,13 @@ AppManager.close = () => { ); }); - if (currentApp.drivers) { - currentApp.drivers.forEach(driverModule => { - DriverManager.resetDriverState(driverModule); - }); - } + AppManager.fire('closed', currentApp); currentApp = null; } else if (__DEV__) { warn('App already closed'); } } - - AppManager.fire('closed'); }; export default AppManager; diff --git a/packages/pos/simulator/plugins/driver/manager.js b/packages/pos/simulator/plugins/driver/manager.js index 30879ca3..d78bf5c7 100644 --- a/packages/pos/simulator/plugins/driver/manager.js +++ b/packages/pos/simulator/plugins/driver/manager.js @@ -3,33 +3,8 @@ import Signal from '../../libs/signal.js'; import { LOG_PREFIX } from '../../libs/utils.js'; import extendDriver from '../../../drivers/extend.js'; -let externalDrivers = []; -let looseDrivers = null; - const DriverManager = extendDriver({}); -Signal.register(DriverManager, [ - 'externalDriversAttached', // (driverModules) -]); - -DriverManager.getExternalDrivers = () => externalDrivers; -DriverManager.getLooseDrivers = () => looseDrivers; -DriverManager.clearLooseDrivers = () => { - looseDrivers = null; -}; - -/** - * Resets a driver state. We use JSON.parse/stringify to deep clone the state object - */ -DriverManager.resetDriverState = driverModule => { - if (driverModule.SETTINGS) { - Registry.set( - driverModule.NAMESPACE, - JSON.parse(JSON.stringify(driverModule.SETTINGS)), - ); - } -}; - DriverManager.attachDrivers = driverModules => { if (__DEBUG_LVL__ >= 1 && __BROWSER__) console.groupCollapsed(`${LOG_PREFIX} Attaching drivers`); @@ -45,7 +20,11 @@ DriverManager.attachDrivers = driverModules => { if (__DEBUG_LVL__ >= 1 && __BROWSER__) { console.log('Default settings:', driverModule.SETTINGS); } - DriverManager.resetDriverState(driverModule); + + Registry.set( + driverModule.NAMESPACE, + JSON.parse(JSON.stringify(driverModule.SETTINGS)), + ); } /** Register the driver signals */ @@ -74,8 +53,6 @@ DriverManager.attachDrivers = driverModules => { ); } - /** Export it to the window */ - /** * Merge the existing native module (if any) for the case of the * simulator running on the actual POS. @@ -95,16 +72,12 @@ DriverManager.attachDrivers = driverModules => { }); } + /** Export it to the window */ window[driverRef] = driver; if (__DEBUG_LVL__ >= 1 && __BROWSER__) console.groupEnd(); }); - if (Registry._booted) { - externalDrivers = [...externalDrivers, ...driverModules]; - looseDrivers = driverModules; - } - if (__DEBUG_LVL__ >= 1 && __BROWSER__) console.groupEnd(); }; diff --git a/packages/pos/simulator/plugins/registry/includes/data.js b/packages/pos/simulator/plugins/registry/includes/data.js index 46ee07be..c465d9ca 100644 --- a/packages/pos/simulator/plugins/registry/includes/data.js +++ b/packages/pos/simulator/plugins/registry/includes/data.js @@ -1,5 +1,9 @@ +import produce, { setAutoFreeze } from 'immer'; + import { log } from '../../../libs/utils.js'; +setAutoFreeze(false); + export default Registry => { /** Data */ Registry.get = keyPath => { @@ -12,6 +16,11 @@ export default Registry => { for (let i = 1; i < keys.length; i++) { value = value[keys[i]]; } + + if (typeof value === 'object') { + return JSON.parse(JSON.stringify(value)); + } + return value; }; @@ -20,6 +29,11 @@ export default Registry => { return; } + if (typeof keyPath === 'function') { + Registry._data = produce(Registry._data, keyPath); + return; + } + const keys = keyPath.replace(/\[(\d+)\]/g, '.$1').split('.'); if (__DEBUG_LVL__ >= 2 && __BROWSER__) { diff --git a/packages/pos/simulator/plugins/view/Launcher.html b/packages/pos/simulator/plugins/view/Launcher.html index 8a9bd96e..9fc48d01 100644 --- a/packages/pos/simulator/plugins/view/Launcher.html +++ b/packages/pos/simulator/plugins/view/Launcher.html @@ -1,7 +1,9 @@ {#if STATE === STATES.APP}
{:else} -
+ + +
{#if STATE === STATES.LOCKSCREEN}
@@ -38,10 +40,11 @@ {/if} diff --git a/packages/pos/simulator/view/assets/POS.png b/packages/pos/simulator/view/pos/assets/POS.png similarity index 100% rename from packages/pos/simulator/view/assets/POS.png rename to packages/pos/simulator/view/pos/assets/POS.png diff --git a/packages/pos/simulator/view/assets/creditcard.png b/packages/pos/simulator/view/pos/assets/creditcard.png similarity index 100% rename from packages/pos/simulator/view/assets/creditcard.png rename to packages/pos/simulator/view/pos/assets/creditcard.png diff --git a/packages/pos/simulator/view/assets/wood.jpg b/packages/pos/simulator/view/pos/assets/wood.jpg similarity index 100% rename from packages/pos/simulator/view/assets/wood.jpg rename to packages/pos/simulator/view/pos/assets/wood.jpg diff --git a/packages/pos/simulator/view/hardware/CreditCard.html b/packages/pos/simulator/view/pos/hardware/CreditCard.html similarity index 94% rename from packages/pos/simulator/view/hardware/CreditCard.html rename to packages/pos/simulator/view/pos/hardware/CreditCard.html index f486193b..66f98000 100644 --- a/packages/pos/simulator/view/hardware/CreditCard.html +++ b/packages/pos/simulator/view/pos/hardware/CreditCard.html @@ -7,8 +7,8 @@ >
diff --git a/packages/pos/simulator/view/pos/Wrapper.html b/packages/pos/simulator/view/pos/Wrapper.html new file mode 100644 index 00000000..bd4cc4f4 --- /dev/null +++ b/packages/pos/simulator/view/pos/Wrapper.html @@ -0,0 +1,117 @@ +{#if ENGINE === 'webkit'} +
+
+ + + + +
+
+{:else} +
+ Para um rápido desenvolvimento mais fiel ao ambiente do POS, é recomendado o uso do Chrome como navegador. +
+
+{/if} + + + + + + diff --git a/packages/pos/simulator/view/pos/Launcher.html b/packages/pos/simulator/view/pos/apps/Launcher.html similarity index 96% rename from packages/pos/simulator/view/pos/Launcher.html rename to packages/pos/simulator/view/pos/apps/Launcher.html index 84b0d272..c0bbec3e 100644 --- a/packages/pos/simulator/view/pos/Launcher.html +++ b/packages/pos/simulator/view/pos/apps/Launcher.html @@ -44,10 +44,10 @@ {/if} diff --git a/packages/components/Button/Button.test.js b/packages/components/Button/Button.test.js index d09a43ca..63ce83f2 100644 --- a/packages/components/Button/Button.test.js +++ b/packages/components/Button/Button.test.js @@ -42,23 +42,52 @@ describe('behavior', () => { }); describe('style', () => { - it("should have 'is-fixed' class when 'bottom' is set", () => { + it("should have 'at-bottom' class when 'bottom' is set", () => { button = newButton({ bottom: true }); - expect(button.refs.button.classList.contains('is-fixed')).toBe(true); + expect(button.refs.button.classList.contains('at-bottom')).toBe(true); }); - it('should accept custom inline styles', () => { + it('should accept custom width', () => { + button = newButton({ width: '85%' }); + + expect(button.refs.button.style.width).toBe('85%'); + }); + + it('should accept custom primary color', () => { + button = newButton({ primaryColor: 'red' }); + + expect(button.refs.button.style.borderColor).toBe('red'); + expect(button.refs.button.style.backgroundColor).toBe('red'); + }); + + it('should accept custom text color', () => { + button = newButton({ textColor: 'red' }); + + expect(button.refs.button.style.color).toBe('red'); + }); + + it('should accept custom primary color when "secondary" is true', () => { + button = newButton({ secondary: true, primaryColor: 'red' }); + + expect(button.refs.button.style.color).toBe('red'); + expect(button.refs.button.style.borderColor).toBe('red'); + expect(button.refs.button.style.backgroundColor).toBe(''); + }); + + it('should accept custom text color when "secondary" is true', () => { + button = newButton({ secondary: true, textColor: 'red' }); + + expect(button.refs.button.style.color).toBe('red'); + }); + + it('should accept custom text color when "secondary" is true and "primaryColor" is set', () => { button = newButton({ - borderColor: 'red', - textColor: 'green', - bgColor: 'black', - width: '85%', + secondary: true, + primaryColor: 'red', + textColor: 'blue', }); - expect(button.refs.button.style.borderColor).toBe('red'); - expect(button.refs.button.style.width).toBe('85%'); - expect(button.refs.button.style.color).toBe('green'); - expect(button.refs.button.style.backgroundColor).toBe('black'); + expect(button.refs.button.style.color).toBe('blue'); }); }); diff --git a/packages/components/Button/README.md b/packages/components/Button/README.md index 553446fa..6a99dab5 100644 --- a/packages/components/Button/README.md +++ b/packages/components/Button/README.md @@ -10,12 +10,12 @@ Além disso, os botões também podem ser acionados por um shortcut e executar m | Parâmetro | Descrição | Tipo | Padrão | | :------------- | :------------------------------------- | :---------------- | :---------- | -| bgColor | Cor do botão | `string` (hex) | `#4ebf1a` | | bottom | Fixa o botão na parte inferior da tela | `boolean` | `false` | -| borderColor | Cor da borda do botão | `string` (hex) | `null` | | disabled | Desabilita o botão | `boolean` | `false` | -| size | Tamanho do botão (opções: `small`, `regular`, `large`, `full`) | `string` | `regular`| -| textColor | Cor do texto no botão | `string` (hex) | `#fff` | +| secondary | Habilita o estilo de botão secundário | `boolean` | `false` | +| size | Tamanho do botão (opções: `small`, `normal`, `full`) | `string` | `normal`| +| primaryColor | Cor primária do botão | `string` (hex) | `''` | +| textColor | Cor do texto no botão | `string` (hex) | `''` | ## Métodos diff --git a/packages/components/Button/example/Example.html b/packages/components/Button/example/Example.html index a09eeb7b..27dd5551 100644 --- a/packages/components/Button/example/Example.html +++ b/packages/components/Button/example/Example.html @@ -1,33 +1,51 @@

Padrão

- +

Desativado

- +
-

Tamanhos

+

Secundário

-
- - - -
+
-

Custom width button

+

Pequeno

- + + +
+ +

Tela cheia

+
+ +
+ +

Largura personalizada

+
+

Personalizado

- - +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/packages/components/Collection/README.md b/packages/components/Collection/README.md index 5150ee61..cf6befb6 100644 --- a/packages/components/Collection/README.md +++ b/packages/components/Collection/README.md @@ -18,11 +18,15 @@ O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, q | Parâmetro | 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 `` é clicada | `string` | `undefined` | | showExtra | Mostra o conteúdo extra | `boolean` | `false` | | shortcut | Tecla de atalho para a ação da ``: `0..9`,`enter`,`shortcuts`,`help` | `string` (keyname) | `undefined` | -| description | Texto de descrição abaixo do título | `string` | `undefined` | -| rightLabel | Texto que é exibido no canto direito da linha | `string` | `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 @@ -37,16 +41,19 @@ O módulo `Collection` é composto por dois componentes: `Collection` e `Row`, q #### Exemplos: Quando o componente `Row` for clicado o roteador retorna para a página `home`. + ```html ``` Quando o conteúdo em `extra` for exbidio digita no console a mensagem. + ```html ``` Quando o conteúdo em `extra` for escondido, executa o método `myMethod()`. + ```html ``` @@ -57,6 +64,7 @@ Quando o conteúdo em `extra` for escondido, executa o método `myMethod()`. | Slot | Descrição | |-------------|--------------------------------------------------------------------------------------------| -| controller | Utilize o slot `controller` para adicionar um controlador customizado para sua `Row` | -| extra | Utilize o slot `extra` para adicionar conteúdo adicional após o contéudo da `Row` | -| description | Utilize o slot `description` para adicionar uma descrição à `Row` | +| 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` | diff --git a/packages/components/Collection/Row.html b/packages/components/Collection/Row.html index 289f8add..1ae8da2c 100644 --- a/packages/components/Collection/Row.html +++ b/packages/components/Collection/Row.html @@ -1,38 +1,54 @@ -
-
-
+
+
+
-
{label}
+ {#if _slots.leftSign} +
+ +
+ {/if} +
{label || leftLabel}
{#if rightLabel} -
+
{rightLabel}
{/if} - {#if _hasController} -
+ {#if _hasRightSign} +
{#if href} - {:elseif _hasCustomController} + {:elseif _slots.rightSign} + + {:elseif _slots.controller} {/if}
{/if}
- {#if _hasDescription} + {#if description || _slots.description}
- {#if description} - {description} - {:elseif _hasDescriptionContent} + {#if _slots.description} + {:elseif description} + {description} {/if}
{/if}
- {#if showExtra && _hasExtraContent} + {#if showExtra && _slots.extra}
@@ -41,10 +57,10 @@ diff --git a/packages/components/Dialog/Confirmation.html b/packages/components/Dialog/Confirmation.html index 89d4654e..99d4673d 100644 --- a/packages/components/Dialog/Confirmation.html +++ b/packages/components/Dialog/Confirmation.html @@ -7,11 +7,16 @@ >
- +
- {#if hasLabel} - {:else} @@ -22,10 +27,10 @@ - {#if hasLabel} + {#if _hasLabel}