Skip to content

Commit

Permalink
Merge 819d806 into a8d76d1
Browse files Browse the repository at this point in the history
  • Loading branch information
pekam committed Sep 26, 2019
2 parents a8d76d1 + 819d806 commit bc85836
Show file tree
Hide file tree
Showing 12 changed files with 385 additions and 22 deletions.
12 changes: 10 additions & 2 deletions README.md
Expand Up @@ -25,6 +25,7 @@
<link rel="import" href="vaadin-text-area.html">
<link rel="import" href="vaadin-email-field.html">
<link rel="import" href="vaadin-number-field.html">
<link rel="import" href="vaadin-integer-field.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
Expand All @@ -35,7 +36,8 @@
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-text-area label="Description"></vaadin-text-area>
<vaadin-email-field label="Email"></vaadin-email-field>
<vaadin-number-field label="Count" has-controls></vaadin-number-field>
<vaadin-number-field label="Price"></vaadin-number-field>
<vaadin-integer-field label="Count" has-controls></vaadin-integer-field>
```

[<img src="https://raw.githubusercontent.com/vaadin/vaadin-text-field/master/screenshot.png" width="710" alt="Screenshot of vaadin-text-field">](https://vaadin.com/components/vaadin-text-field)
Expand Down Expand Up @@ -65,6 +67,7 @@ Once installed, import the components you need in your application:
<link rel="import" href="bower_components/vaadin-text-field/vaadin-password-field.html">
<link rel="import" href="bower_components/vaadin-text-field/vaadin-email-field.html">
<link rel="import" href="bower_components/vaadin-text-field/vaadin-number-field.html">
<link rel="import" href="bower_components/vaadin-text-field/vaadin-integer-field.html">
```
### Polymer 3 and ES Modules Compatible Version

Expand All @@ -82,6 +85,7 @@ import '@vaadin/vaadin-text-field/vaadin-text-area.js';
import '@vaadin/vaadin-text-field/vaadin-password-field.js';
import '@vaadin/vaadin-text-field/vaadin-email-field.js';
import '@vaadin/vaadin-text-field/vaadin-number-field.js';
import '@vaadin/vaadin-text-field/vaadin-integer-field.js';
```

## Getting started
Expand All @@ -99,6 +103,7 @@ To use the Material theme, import the correspondent file from the `theme/materia
`theme/lumo/vaadin-password-field.html`
`theme/lumo/vaadin-email-field.html`
`theme/lumo/vaadin-number-field.html`
`theme/lumo/vaadin-integer-field.html`

- The components with the Material theme:

Expand All @@ -107,18 +112,21 @@ To use the Material theme, import the correspondent file from the `theme/materia
`theme/material/vaadin-password-field.html`
`theme/material/vaadin-email-field.html`
`theme/material/vaadin-number-field.html`
`theme/material/vaadin-integer-field.html`

- Aliases for `theme/lumo/vaadin-text-field.html`
`theme/lumo/vaadin-text-area.html`
`theme/lumo/vaadin-password-field.html`
`theme/lumo/vaadin-email-field.html`
`theme/lumo/vaadin-number-field.html`:
`theme/lumo/vaadin-number-field.html`
`theme/lumo/vaadin-integer-field.html`:

`vaadin-text-field.html`
`vaadin-text-area.html`
`vaadin-password-field.html`
`vaadin-email-field.html`
`vaadin-number-field`
`vaadin-integer-field`


## Running demos and tests in a browser
Expand Down
4 changes: 3 additions & 1 deletion bower.json
Expand Up @@ -11,13 +11,15 @@
"vaadin-number-field.html",
"vaadin-text-area.html",
"vaadin-email-field.html",
"vaadin-integer-field.html",
"theme/lumo/vaadin-placeholder-styles.html",
"theme/material/vaadin-placeholder-styles.html",
"theme/material/vaadin-password-field.html",
"theme/material/vaadin-number-field.html",
"theme/material/vaadin-text-area.html",
"theme/material/vaadin-text-field.html",
"theme/material/vaadin-email-field.html"
"theme/material/vaadin-email-field.html",
"theme/material/vaadin-integer-field.html"
],
"keywords": [
"Vaadin",
Expand Down
1 change: 1 addition & 0 deletions demo/index.html
Expand Up @@ -18,6 +18,7 @@
<link rel="import" href="../vaadin-email-field.html">
<link rel="import" href="../vaadin-text-area.html">
<link rel="import" href="../vaadin-number-field.html">
<link rel="import" href="../vaadin-integer-field.html">
<link rel="import" href="../../iron-form/iron-form.html">
<link rel="import" href="../../vaadin-lumo-styles/icons.html">

Expand Down
8 changes: 8 additions & 0 deletions demo/number-field-demos.html
Expand Up @@ -37,6 +37,14 @@ <h3>Number field with step</h3>
</template>
</vaadin-demo-snippet>

<h3>Integer field</h3>
<p>Integer field prevents the user from entering decimals.</p>
<vaadin-demo-snippet id="integer-field-demos">
<template preserve-content>
<vaadin-integer-field min="0" max="10" has-controls></vaadin-integer-field>
</template>
</vaadin-demo-snippet>

</template>
<script>
class NumberFieldDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
Expand Down
114 changes: 114 additions & 0 deletions src/vaadin-integer-field.html
@@ -0,0 +1,114 @@
<!--
@license
Copyright (c) 2019 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/elements/custom-style.html">
<link rel="import" href="vaadin-number-field.html">

<dom-module id="vaadin-integer-field-template">

<script>
(function() {

/**
* `<vaadin-integer-field>` is a Web Component for integer field control in forms.
*
* ```html
* <vaadin-integer-field label="Number">
* </vaadin-integer-field>
* ```
*
* @memberof Vaadin
* @extends Vaadin.NumberFieldElement
* @demo demo/index.html
*/
class IntegerFieldElement extends Vaadin.NumberFieldElement {
static get is() {
return 'vaadin-integer-field';
}

static get version() {
return '2.4.11';
}

ready() {
super.ready();
this.inputElement.addEventListener('drop', this.__onDrop.bind(this));
this.inputElement.addEventListener('paste', this.__onPaste.bind(this));
}

_valueChanged(newVal, oldVal) {
if (newVal !== '' && !this.__isInteger(newVal)) {
console.warn(`Trying to set non-integer value "${newVal}" to <vaadin-integer-field>.`
+ ` Clearing the value.`);
this.value = '';
return;
}
super._valueChanged(newVal, oldVal);
}

_onKeyDown(e) {
if (!this.__shouldAcceptKey(e)) {
e.preventDefault();
}
super._onKeyDown(e);
}

__shouldAcceptKey(event) {
return (event.metaKey || event.ctrlKey)
|| !event.key // allow typing anything if event.key is not supported
|| event.key.length !== 1 // allow "Backspace", "ArrowLeft" etc.
|| /^[-+\d]$/.test(event.key);
}

__onDrop(e) {
const draggedText = e.dataTransfer.getData('text');
if (!this.__isValidInput(draggedText)) {
e.preventDefault();
}
}

__onPaste(e) {
const pastedText = (e.clipboardData || window.clipboardData).getData('text');
if (!this.__isValidInput(pastedText)) {
e.preventDefault();
}
}

_stepChanged(newVal, oldVal) {
if (!this.__hasOnlyDigits(newVal)) {
console.warn(`Trying to set invalid step size "${newVal}",`
+ ` which is not a positive integer, to <vaadin-integer-field>.`
+ ` Resetting the default value 1.`);
this.step = 1;
return;
}
super._stepChanged(newVal, oldVal);
}

__isInteger(value) {
return /^(-\d)?\d*$/.test(String(value));
}

__isValidInput(value) {
return /^[\d+-]*$/.test(String(value));
}

__hasOnlyDigits(value) {
return /^\d*$/.test(String(value));
}
}

window.customElements.define(IntegerFieldElement.is, IntegerFieldElement);

/**
* @namespace Vaadin
*/
window.Vaadin = window.Vaadin || {};
Vaadin.IntegerFieldElement = IntegerFieldElement;
})();
</script>
</dom-module>
35 changes: 17 additions & 18 deletions src/vaadin-number-field.html
Expand Up @@ -66,7 +66,7 @@
let memoizedTemplate;

/**
* `<vaadin-number-field>` is a Polymer 2 element for number field control in forms.
* `<vaadin-number-field>` is a Web Component for number field control in forms.
*
* ```html
* <vaadin-number-field label="Number">
Expand Down Expand Up @@ -102,7 +102,8 @@
*/
min: {
type: Number,
reflectToAttribute: true
reflectToAttribute: true,
observer: '_minChanged'
},

/**
Expand All @@ -120,23 +121,17 @@
step: {
type: Number,
reflectToAttribute: true,
value: 1
value: 1,
observer: '_stepChanged'
}

};
}

static get observers() {
return [
'_stepOrMinChanged(step, min)'
];
}

ready() {
super.ready();
this.__previousValidInput = this.value || '';
this.inputElement.type = 'number';
this.inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
this.inputElement.addEventListener('change', this.__onInputChange.bind(this));
}

Expand Down Expand Up @@ -288,8 +283,16 @@
return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
}

_maxChanged() {
this.inputElement.max = this.max;
_stepChanged(step) {
this.inputElement.step = step;
}

_minChanged(min) {
this.inputElement.min = min;
}

_maxChanged(max) {
this.inputElement.max = max;
}

_valueChanged(newVal, oldVal) {
Expand All @@ -303,25 +306,21 @@
super._valueChanged(this.value, oldVal);
}

__onKeyDown(e) {
_onKeyDown(e) {
if (e.keyCode == 38) {
e.preventDefault();
this._increaseValue();
} else if (e.keyCode == 40) {
e.preventDefault();
this._decreaseValue();
}
super._onKeyDown(e);
}

__onInputChange() {
this.checkValidity();
}

_stepOrMinChanged(step, min) {
this.inputElement.step = step;
this.inputElement.min = this.min;
}

checkValidity() {
// text-field mixin does not check against `min` and `max`
if (this.min !== undefined || this.max !== undefined || this.step) {
Expand Down

0 comments on commit bc85836

Please sign in to comment.