@mamba/input - npm Package Compare versions

Comparing version 2.5.3 to 2.6.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [2.6.0](https://github.com/stone-payments/pos-mamba-sdk/compare/v2.5.3...v2.6.0) (2019-03-21)
+
+
+### Bug Fixes
+
+* 🐛 input using wrong isValid value ([4163205](https://github.com/stone-payments/pos-mamba-sdk/commit/4163205))
+* 🐛 money input validation events and extra beep ([ff54f7b](https://github.com/stone-payments/pos-mamba-sdk/commit/ff54f7b))
+* 🐛 remove input border transition ([715a6b9](https://github.com/stone-payments/pos-mamba-sdk/commit/715a6b9))
+
+
+### Features
+
+* 🎸 add validate() method ([6aaff5f](https://github.com/stone-payments/pos-mamba-sdk/commit/6aaff5f))
+* 🎸virtualkeyboard ([#350](https://github.com/stone-payments/pos-mamba-sdk/issues/350)) ([e9440c8](https://github.com/stone-payments/pos-mamba-sdk/commit/e9440c8)), closes [#375](https://github.com/stone-payments/pos-mamba-sdk/issues/375)
+
+
+
+
+
 ## [2.5.3](https://github.com/stone-payments/pos-mamba-sdk/compare/v2.5.2...v2.5.3) (2019-02-22)
@@ -8,0 +27,0 @@

Input.test.js

@@ -60,3 +60,3 @@ import { Registry } from '@mamba/pos/simulator/index.js';
 
-  it('should manually mask a input', () => {
+  it('should manually mask an input', () => {
     input = newInput();
@@ -76,3 +76,24 @@ input.set({ mask: '###', value: 'A111' });
 
-  it('should invalidate a input and add the error class', () => {
+  it('should validate an input', () => {
+    input = newInput({
+      value: '1',
+      validation: val => ({ isValid: val === '2' }),
+    });
+
+    input.validate();
+
+    expect(input.get()).toMatchObject({
+      isValid: false,
+      _errorMsg: undefined,
+    });
+
+    input.set({ value: '2' });
+    input.validate();
+
+    expect(input.get()).toMatchObject({
+      isValid: true,
+    });
+  });
+
+  it('should invalidate an input and add the error class', () => {
     input = newInput({ value: 'teste' });
@@ -79,0 +100,0 @@ input.invalidate('Error message');

Money.test.js

 import MoneyInput from './Money.html';
-import System from '../../pos/api/system.js';
 
@@ -38,4 +37,4 @@ const { newTestRoot, fireKey, typeOn } = global;
   it('should have raw value of 0 by default', () => {
-    const { rawValue } = moneyInput.get();
-    expect(rawValue).toBe('0');
+    const { cents } = moneyInput.get();
+    expect(cents).toBe(0);
   });
@@ -61,3 +60,3 @@ });
       type('1');
-      expect(moneyInput.get().rawValue).toBe('1');
+      expect(moneyInput.get().cents).toBe(1);
     });
@@ -67,3 +66,3 @@
       type('1');
-      expect(moneyInput.get().rawValue).toBe('11');
+      expect(moneyInput.get().cents).toBe(11);
     });
@@ -73,8 +72,8 @@
       fireKey(getInputEl(), 'back');
-      expect(moneyInput.get().rawValue).toBe('1');
+      expect(moneyInput.get().cents).toBe(1);
     });
 
-    it('should set rawValue to 0 if last character is removed', () => {
+    it('should set cents to 0 if last character is removed', () => {
       fireKey(getInputEl(), 'back');
-      expect(moneyInput.get().rawValue).toBe('0');
+      expect(moneyInput.get().cents).toBe(0);
     });
@@ -84,3 +83,3 @@
       type('a');
-      expect(moneyInput.get().rawValue).toBe('0');
+      expect(moneyInput.get().cents).toBe(0);
     });
@@ -91,3 +90,3 @@
       type('1');
-      expect(moneyInput.get().rawValue).toBe('0');
+      expect(moneyInput.get().cents).toBe(0);
     });
@@ -98,3 +97,3 @@
       type('9999999999999');
-      expect(moneyInput.get().rawValue).toBe('9999999999');
+      expect(moneyInput.get().cents).toBe(9999999999);
     });
@@ -118,16 +117,44 @@
 
-  describe('Submit', () => {
-    it('should fire submit if value is bigger than 0', () =>
-      new Promise(res => {
-        moneyInput.on('submit', res);
-        moneyInput.set({ rawValue: '1' });
-        fireKey(getInputEl(), 'enter');
-      }));
-    it('should beep if value is lower or equal to 0', () =>
-      new Promise(res => {
-        System.beep = res;
-        moneyInput.set({ rawValue: '0' });
-        fireKey(getInputEl(), 'enter');
-      }));
+  describe('validation', () => {
+    beforeAll(() => {
+      moneyInput = newMoneyInput({
+        validation: cents => cents > 100 && cents < 200,
+      });
+    });
+
+    it('should validate on submit (enter) with the cents value', () => {
+      type('11');
+
+      return Promise.all([
+        new Promise(
+          res => moneyInput.on('submit', res),
+          new Promise(res => {
+            setTimeout(() => {
+              moneyInput.on('submitInvalid', e => {
+                expect(e.cents).toBe(11);
+                expect(e.value).toBe(11);
+                expect(e.formatted).toBe('R$ 0,11');
+                expect(e.isValid).toBe(false);
+                res();
+              });
+              fireKey(getInputEl(), 'enter');
+            });
+          }),
+        ),
+      ]).then(() => {
+        moneyInput.set({ cents: 0 });
+        type('112');
+        return new Promise(res => {
+          moneyInput.on('submitValid', e => {
+            expect(e.cents).toBe(112);
+            expect(e.value).toBe(112);
+            expect(e.formatted).toBe('R$ 1,12');
+            expect(e.isValid).toBe(true);
+            res();
+          });
+          fireKey(getInputEl(), 'enter');
+        });
+      });
+    });
   });
 });

package.json

 {
   "name": "@mamba/input",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "svelte": "Input.html",
@@ -17,4 +17,4 @@ "author": "Stone Payments - Mamba Team",
   "devDependencies": {
-    "@mamba/pos": "^2.5.3",
-    "@mamba/styles": "^2.5.3"
+    "@mamba/pos": "^2.6.0",
+    "@mamba/styles": "^2.6.0"
   },
@@ -25,6 +25,6 @@ "peerDependencies": {
   "dependencies": {
-    "@mamba/icon": "^2.5.3",
-    "@mamba/utils": "^2.5.2"
+    "@mamba/icon": "^2.6.0",
+    "@mamba/utils": "^2.6.0"
   },
-  "gitHead": "e031a1bf20edf6b09333a82faf92aec529bf6d81"
+  "gitHead": "03973e91dab7e2afb6ef62cc8d9f51a07ed274eb"
 }

README.md

@@ -23,23 +23,23 @@ # Input
 
-| Parâmetro   | Descrição                                                  | Tipo            | Padrão     |
-|-------------|------------------------------------------------------------|-----------------|------------|
-| align       | Alinha a entrada de acordo com parâmetro (`left`, `right`) | `string`        | `'right'`  |
-| alphanumeric| Define o modo de entrada como alfanumérico                 | `boolean`       | `false`    |
-| autofocus   | Inicia o elemento com foco                                 | `boolean`       | `false`    |
-| forceFocus  | Força o foco no elemento de input                          | `boolean`       | `false`    |
-| isFocused   | Retorna se o input está focado ou não                      | `boolean`       | `false`    |
-| bgColor     | Cor de Fundo da Caixa de Entrada                           | `string` (hex)  | `'#fff'`   |
-| disabled    | Desabilita a entrada de texto                              | `boolean`       | `false`    |
-| errorMessage| Define uma mensagem de erro caso a validação falhe         | `boolean`       | `false`    |
-| errorColor  | Cor do Texto da Mensagem de Erro                           | `string` (hex)  | `#d5000`   |
-| label       | Título da Caixa de Entrada                                 | `string`        | `undefined`|
-| readable    | Possibilita esconder o texto de Entrada                    | `boolean`       | `false`    |
-| type        | Tipo de texto de entrada (`password`/`text`)               | `string`        | `'text'`   |
-| textColor   | Cor do Texto da Caixa de Entrada                           | `string` (hex)  | `'#4a4a4a'`|
-| value       | Valor de padrão de entrada                                 | `string`        | `false`    |
-| validation  | Adiciona um método de validação                            | `function`      | `undefined`|
-| validateOn  | Define em que momento a validação ocorre (`input`/`submit`)| `string`        | `'submit'` |
-| mask        | Define uma máscara para o texto                            | `string`        | `null`     |
+| Parâmetro    | Descrição                                                   | Tipo           | Padrão      |
+| ------------ | ----------------------------------------------------------- | -------------- | ----------- |
+| align        | Alinha a entrada de acordo com parâmetro (`left`, `right`)  | `string`       | `'right'`   |
+| alphanumeric | Define o modo de entrada como alfanumérico                  | `boolean`      | `false`     |
+| autofocus    | Inicia o elemento com foco                                  | `boolean`      | `false`     |
+| forceFocus   | Força o foco no elemento de input                           | `boolean`      | `false`     |
+| isFocused    | Retorna se o input está focado ou não                       | `boolean`      | `false`     |
+| bgColor      | Cor de Fundo da Caixa de Entrada                            | `string` (hex) | `'#fff'`    |
+| disabled     | Desabilita a entrada de texto                               | `boolean`      | `false`     |
+| errorMessage | Define uma mensagem de erro caso a validação falhe          | `boolean`      | `false`     |
+| errorColor   | Cor do Texto da Mensagem de Erro                            | `string` (hex) | `#d5000`    |
+| label        | Título da Caixa de Entrada                                  | `string`       | `undefined` |
+| readable     | Possibilita esconder o texto de Entrada                     | `boolean`      | `false`     |
+| type         | Tipo de texto de entrada (`password`/`text`)                | `string`       | `'text'`    |
+| textColor    | Cor do Texto da Caixa de Entrada                            | `string` (hex) | `'#4a4a4a'` |
+| labelColor   | Cor do título do Input                                      | `string` (hex) | `'#4a4a4a'` |
+| value        | Valor de padrão de entrada                                  | `string`       | `false`     |
+| validation   | Adiciona um método de validação                             | `function`     | `undefined` |
+| validateOn   | Define em que momento a validação ocorre (`input`/`submit`) | `string`       | `'submit'`  |
+| mask         | Define uma máscara para o texto                             | `string`       | `null`      |
 
-
 ## Eventos
@@ -49,7 +49,7 @@
 
-| 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)` |
+| 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)` |
 
@@ -59,7 +59,8 @@ <br/>
 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)
+  value: string; // Valor do campo (com máscara se houver)
   rawValue: string; // Valor sem máscara ou formatação
-  isValid: string; // Representa o valor da validação (se ouver)
+  isValid: boolean; // Representa o valor da validação (se houver)
 }
@@ -74,13 +75,9 @@ ```
 
-| 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`, `submitValid` e `submitInvalid` retornam as seguintes propriedades no objeto `event` para o `MoneyInput`:
 
-<br/>
-
-O evento `submit` retorna as seguintes propriedades no objeto `event`:
 ```ts
 event = {
-  value: string; // Valor em centavos
+  cents: number; // Valor em centavos
   formatted: string; // Valor formatado na moeda
+  isValid: boolean; // Representa o valor da validação (se houver)
 }
@@ -107,2 +104,6 @@ ```
 
+### validate()
+
+Força a validação do Input e retorna um _booleano_ representando o resultado da validação.
+
 ### invalidate(message)
@@ -112,16 +113,12 @@
 
-### mask()
-
-Força uma atualização do conteúdo do `Input` para se adequar às máscaras definidas. Use apenas se a *prop* `value` for definida manualmente através de um `inputComponent.set({ value: ... })`.
-
 ## Máscara
 
-Para definir uma máscara de *input*, basta passar um parâmetro `mask` com uma ou mais máscaras. Uma máscara é definida por *tokens* que, por padrão, são:
+O componente padrão `Input` suporta máscaras para formatar o seu valor. Para definir uma máscara de _input_, basta passar um parâmetro `mask` com uma ou mais máscaras. Uma máscara é definida por _tokens_ que, por padrão, são:
 
-* `#` - Dígito
-* `X` - Caractér alfanumérico
-* `S` - Letra
-* `A` - Letra maiúscula
-* `a` - Letra minúscula
-* `!` - Escapa o caractér do *token*
+- `#` - Dígito
+- `X` - Caractér alfanumérico
+- `S` - Letra
+- `A` - Letra maiúscula
+- `a` - Letra minúscula
+- `!` - Escapa o caractér do _token_
 
@@ -136,1 +133,5 @@ Exemplo de CPF/CNPJ:
 ```
+
+### mask()
+
+Força uma atualização do conteúdo do `Input` para se adequar às máscaras definidas. Use apenas se a _prop_ `value` for definida manualmente através de um `inputComponent.set({ value: ... })`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65071

increased by32.48%

Number of package files

16

increased by33.33%

Lines of code

632

increased by21.31%

Number of lines in readme file

131

increased by0.77%

Dependency changes

• Updated@mamba/icon@^2.6.0

• Updated@mamba/utils@^2.6.0