diff --git a/.gitignore b/.gitignore index 7ce0078..444b9e0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .git /bower_components* -node_modules \ No newline at end of file +node_modules +.vscode/* \ No newline at end of file diff --git a/README.md b/README.md index 29fbe23..332e59f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/caribou-timer) +[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/caribouflex/caribou-stepper) ## <caribou-stepper> @@ -11,11 +11,13 @@ All the elements can be customized refer to the styling section. ### NEW -- Horizontal stepper is coming +- Horizontal stepper - Step validation - IE11 support +- Step native Required input validation. ### Incoming (TODO) +- GITHUB demo pages. - Bug Fixes - Mobile stepper @@ -77,8 +79,6 @@ For the styling check the ``, `` and ` this._badgeNumber) this.$.stepContent.style.float = ""; else if (activeStep === undefined) this.$.stepContent.style.float = ""; - else if(toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber < fromStep._badgeNumber) + else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber < + fromStep._badgeNumber) this.$.stepContent.style.float = ""; - else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber > fromStep._badgeNumber) + else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber > + fromStep._badgeNumber) this.$.stepContent.style.float = "right"; else if (toStep._badgeNumber === this._badgeNumber && activeStep === null) this.$.stepContent.style.float = "right"; @@ -338,8 +344,8 @@ this.$.stepContent.style.float = "right"; else if (toStep._badgeNumber === this._badgeNumber && activeStep._badgeNumber > this._badgeNumber) this.$.stepContent.style.float = ""; - else if (toStep._badgeNumber === this._badgeNumber && !active) - this.$.stepContent.style.float = ""; + // else if (toStep._badgeNumber === this._badgeNumber && !active) + // this.$.stepContent.style.float = ""; } } @@ -368,10 +374,11 @@ */ toggleStep(isLast) { - this._setFloatForTransition(!this.active); + this._setFloatForTransition(); - if (isLast !== undefined && isLast) + if (isLast !== undefined && isLast) { this.$.stepButtons.setFinish(true); + } this.$.stepContent.toggle(); } diff --git a/caribou-stepper-step-property-mixin.html b/caribou-stepper-step-property-mixin.html index c23e8f8..a11fe21 100644 --- a/caribou-stepper-step-property-mixin.html +++ b/caribou-stepper-step-property-mixin.html @@ -111,6 +111,16 @@ backButton: { type: Boolean, value: false + }, + + /** + * If true this will skip the validation of the input. + * If false all the checkbox will have a native validation check on the input. + * + */ + noInputNativeValidity: { + type: Boolean, + value: false } } } @@ -138,7 +148,37 @@ this.parentElement._registerStep(this); } - validate(){ + /** + * This function is used to check the validity of the required input. + * This will check the native validation for classic input and call the validate() function for the polymer element. + * @private + */ + _nestedValidate() { + //We check if the validity is required. + if (this.noInputNativeValidity) + return true; + + var result = true; + this.querySelectorAll("[required]").forEach(function (el) { + let r; + try { + //Use classic input validation + r = el.checkValidity(); + } catch (err) { + //used to try on input that may be polymer input with a validate() function. + try { + r = el.validate(); + } catch (err) { + console.log("caribou-step", "Can't validate required input"); + } + } + if (!r) + result = false; + }); + return result; + } + + validate() { return true; } diff --git a/caribou-stepper-stepper-property-mixin.html b/caribou-stepper-stepper-property-mixin.html index 0c8e458..c641637 100644 --- a/caribou-stepper-stepper-property-mixin.html +++ b/caribou-stepper-stepper-property-mixin.html @@ -79,6 +79,14 @@ readOnly: true }, + /** + * Quantity total of step inside the stepper. + */ + numberOfStep: { + type: Number, + value: 0 + }, + /** * Used for the transition in horizontal mode. * This is the step where we are going. (step targeting) diff --git a/caribou-stepper.html b/caribou-stepper.html index c11e7e4..4a86990 100644 --- a/caribou-stepper.html +++ b/caribou-stepper.html @@ -136,7 +136,7 @@ * @private */ __finishStep(e) { - if (this.activeStep.validate()) { + if (this.activeStep._nestedValidate() && this.activeStep.validate()) { this.openNextStep(); this._setFinish(true); this.dispatchEvent(new CustomEvent('stepper-finished', { @@ -156,7 +156,7 @@ * Then it will open the next step if there is one. */ openNextStep() { - if (this.activeStep.validate()) { + if (this.activeStep._nestedValidate() && this.activeStep.validate()) { this.activeStep.saveStep(); //set the value to and from the the transition effect. diff --git a/demo/index.html b/demo/index.html index d3e7970..94b6790 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,11 +33,12 @@

Horizontal stepper

+
- Soccer - Backetball + Soccer + Backetball Tennis Fishing