diff --git a/README.md b/README.md index b6be8da..9de7122 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ See [component page](http://zecat.github.io/paper-stepper) ## installation -`bower install -S Zecat/paper-stepper` +`bower install -S Zecat/paper-stepper#v2.0-beta.5` ## Basic use diff --git a/bower.json b/bower.json index 91ffc70..cc0ad36 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paper-stepper", - "version": "2.0-beta.4", + "version": "2.0-beta.5", "authors": [ "Zecat " ], @@ -18,31 +18,66 @@ "/test/" ], "dependencies": { - "polymer": "Polymer/polymer#^1.2.0", - "paper-button": "PolymerElements/paper-button#^1.0.11", - "iron-icons": "PolymerElements/iron-icons#^1.1.3", - "paper-styles": "PolymerElements/paper-styles#^1.1.4", - "paper-ripple": "PolymerElements/paper-ripple#^1.0.5", - "iron-selector": "PolymerElements/iron-selector#^1.3.0", - "iron-icon": "PolymerElements/iron-icon#^1.0.8", - "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1", - "neon-animation": "PolymerElements/neon-animation#^1.1.1", - "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5", - "iron-collapse": "PolymerElements/iron-collapse#^1.2.0" + "polymer": "Polymer/polymer#1.9 - 2", + "paper-button": "PolymerElements/paper-button#1 - 2", + "iron-icons": "PolymerElements/iron-icons#1 - 2", + "paper-styles": "PolymerElements/paper-styles#1 - 2", + "paper-ripple": "PolymerElements/paper-ripple#1 - 2", + "iron-selector": "PolymerElements/iron-selector#1 - 2", + "iron-icon": "PolymerElements/iron-icon#1 - 2", + "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2", + "neon-animation": "PolymerElements/neon-animation#1 - 2", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#1 - 2", + "iron-collapse": "PolymerElements/iron-collapse#1 - 2", + "web-animations-js": "web-animations/web-animations-js", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0.0" }, "devDependencies": { - "paper-input": "PolymerElements/paper-input#^1.1.10", - "paper-material": "PolymerElements/paper-material#^1.0.6", - "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "web-component-tester": "*", - "iron-form": "PolymerElements/iron-form#^1.0.16", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2", - "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0", - "app-layout": "PolymerElements/app-layout#^0.10.2", - "paper-menu": "PolymerElements/paper-menu#^1.2.2", + "paper-input": "PolymerElements/paper-input#1 - 2", + "paper-material": "PolymerElements/paper-material#1 - 2", + "iron-component-page": "PolymerElements/iron-component-page#1 - 2", + "web-component-tester": "^6.0.0", + "iron-form": "PolymerElements/iron-form#1 - 2", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2", + "paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2", + "app-layout": "PolymerElements/app-layout#1 - 2", + "paper-menu": "PolymerElements/paper-menu#1 - 2", "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0", - "paper-item": "PolymerElements/paper-item#^1.2.1", - "paper-toast": "PolymerElements/paper-toast#^1.3.0", - "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0" + "paper-item": "PolymerElements/paper-item#1 - 2", + "paper-toast": "PolymerElements/paper-toast#1 - 2", + "paper-checkbox": "PolymerElements/paper-checkbox#1 - 2" + }, + "variants": { + "1.x": { + "dependencies": { + "polymer": "Polymer/polymer#^1.9.0", + "paper-button": "PolymerElements/paper-button#^1.0.11", + "iron-icons": "PolymerElements/iron-icons#^1.1.3", + "paper-styles": "PolymerElements/paper-styles#^1.1.4", + "paper-ripple": "PolymerElements/paper-ripple#^1.0.5", + "iron-selector": "PolymerElements/iron-selector#^1.3.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.8", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1", + "neon-animation": "PolymerElements/neon-animation#^1.1.1", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5", + "iron-collapse": "PolymerElements/iron-collapse#^1.2.0", + "web-animations-js": "web-animations/web-animations-js" + }, + "devDependencies": { + "paper-input": "PolymerElements/paper-input#^1.1.10", + "paper-material": "PolymerElements/paper-material#^1.0.6", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "web-component-tester": "*", + "iron-form": "PolymerElements/iron-form#^1.0.16", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2", + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0", + "app-layout": "PolymerElements/app-layout#^0.10.2", + "paper-menu": "PolymerElements/paper-menu#^1.2.2", + "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0", + "paper-item": "PolymerElements/paper-item#^1.2.1", + "paper-toast": "PolymerElements/paper-toast#^1.3.0", + "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0" + } + } } } diff --git a/demo/index.html b/demo/index.html index 547a107..70ce329 100644 --- a/demo/index.html +++ b/demo/index.html @@ -158,7 +158,7 @@

Description

Paper-stepper is an element made with Polymer with respect to the material specifications.

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. They may also be used for navigation.

Spec recommendation: Avoid using steppers to break up sections in a short form, or multiple times on one page and don’t embed steppers within steppers.

-

Start using now bower install -S Zecat/paper-stepper

+

Start using now bower install -S Zecat/paper-stepper#v2.0-beta.5

Note, it is still a beta release, attributes and methods might change suddenly.

diff --git a/paper-step.html b/paper-step.html index c78cf4d..88981e8 100644 --- a/paper-step.html +++ b/paper-step.html @@ -23,8 +23,8 @@ } :host(:not([vertical])) { overflow: hidden; - @apply(--layout); - @apply(--layout-flex); + @apply --layout; + @apply --layout-flex; } :host(:not([vertical]):hover){ overflow: visible; @@ -41,12 +41,12 @@ } #contentWrapper { padding: 24px 24px 0 24px; - @apply(--layout-scroll); - @apply(--layout-fit); + @apply --layout-scroll; + @apply --layout-fit; pointer-events: auto; } :host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge { - background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500); + background: var(--paper-step-selectable-hovered-badge-background, var(--paper-grey-500)); } @@ -87,7 +87,7 @@ Polymer.PaperItemBehavior, Polymer.PaperRippleBehavior ], - + /** * Fired when the step has been saved. * @@ -357,7 +357,9 @@ _updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) { if (!vertical) { this.async(function() { - this.$$('#slideshowViewport').style.top = this.clientHeight+'px'; + var el = this.$$('#slideshowViewport'); + if (!el) return; + el.style.top = this.clientHeight+'px'; this.fire('step-horizontal-label-resize'); }) } @@ -396,8 +398,8 @@ _verticalChange: function(vertical) { this.async(function() { - // move or create the content tag - Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content')); + // move or create the slot tag + Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('slot') || this.create('slot')); // reset the ripple this._ripple = false; this._rippleContainer = vertical ? this.$$('#verticalStepLabel').$.label : this.$$('#horizontalStepLabel').$.label; diff --git a/paper-stepper.html b/paper-stepper.html index 5504009..7947ab6 100644 --- a/paper-stepper.html +++ b/paper-stepper.html @@ -13,6 +13,7 @@ +
- +
- +
@@ -453,7 +454,7 @@ } event.detail.keyboardEvent.preventDefault(); }, - + _onRightKey: function(event) { if (this._isRTL) { this._focusPrevious(); @@ -497,8 +498,12 @@ _updateStepperClosedMaxHeight: function() { this.debounce('updateStepperClosedMaxHeight', function() { - this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px'; - this.updateStyles('--label-wrapper-height'); + if (Polymer.Element) { + this.updateStyles({ '--label-wrapper-height': this.$$('#content-wrapper').clientHeight + 'px' }); + } else { + this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px'; + this.updateStyles('--label-wrapper-height'); + } }); }, @@ -614,10 +619,12 @@ }, _forwardCanSkip: function(_canSkip, selectedItem) { + if (!selectedItem) return; selectedItem._set_canSkip(_canSkip); }, _forwardHasBackStep: function(_hasBackStep, selectedItem) { + if (!selectedItem) return; selectedItem._set_hasBackStep(_hasBackStep); }, @@ -670,7 +677,7 @@ savedStepNumber++; } }.bind(this)); - + this._setSavedStepNumber(savedStepNumber); // method from IronSelectableBehavior this._updateSelected(); diff --git a/step-horizontal-label.html b/step-horizontal-label.html index 16eee7c..28cfa67 100644 --- a/step-horizontal-label.html +++ b/step-horizontal-label.html @@ -15,10 +15,10 @@ overflow: hidden; } :host([alternative-label]) { - @apply(--layout); + @apply --layout; } #textWrapper { - @apply(--layout-vertical); + @apply --layout-vertical; padding-right: 8px; overflow: hidden; } @@ -36,8 +36,8 @@ z-index: 1; } :host(:not([alternative-label])) #label { - @apply(--layout-horizontal); - @apply(--layout-center); + @apply --layout-horizontal; + @apply --layout-center; height: 72px; } :host(.firstStep:not([alternative-label])) #badge { @@ -46,14 +46,14 @@ :host(.lastStep:not([alternative-label])) #textWrapper { padding-right: 24px; } - :host(:not([alternative-label]):not(.first-step)) #label::before, + :host(:not([alternative-label]):not(.first-step)) #label::before, :host(:not([alternative-label]):not(.last-step)) #label::after, :host([alternative-label]) #badgeWrapper::before, :host([alternative-label]) #badgeWrapper::after { height: 1px; min-width: 16px; - background: var(--paper-step-connector-line-color, --divider-color); - @apply(--layout-flex); + background: var(--paper-step-connector-line-color, var(--divider-color)); + @apply --layout-flex; content: ''; } :host([alternative-label].first-step) #badgeWrapper::before, @@ -62,22 +62,22 @@ } :host([alternative-label]) #textWrapper{ padding: 0 16px; - @apply(--layout-vertical); - @apply(--layout-center); + @apply --layout-vertical; + @apply --layout-center; } :host([alternative-label]) #textLabel, :host([alternative-label]) #optional{ text-align: center; - @apply(--layout-self-stretch); + @apply --layout-self-stretch; } :host([alternative-label]) #label{ - @apply(--layout-vertical); - @apply(--layout-self-stretch); + @apply --layout-vertical; + @apply --layout-self-stretch; padding: 24px 0; width: 100%; } :host([alternative-label]) #badgeWrapper { - @apply(--layout-horizontal); - @apply(--layout-center); + @apply --layout-horizontal; + @apply --layout-center; padding-bottom: 16px; } :host(.first-step:not([alternative-label])) #label { diff --git a/step-label-shared-styles.html b/step-label-shared-styles.html index c73239a..ff919db 100644 --- a/step-label-shared-styles.html +++ b/step-label-shared-styles.html @@ -10,11 +10,11 @@ :host { display: block; box-sizing: border-box; - @apply(--paper-font-common-base); - @apply(--layout-flex); + @apply --paper-font-common-base; + @apply --layout-flex; } #textWrapper { - color: var(--paper-step-disabled-label-text-color, --paper-grey-400); + color: var(--paper-step-disabled-label-text-color, var(--paper-grey-400)); } #textLabel { font-size: var(--paper-step-label-text-font-size, 14px); @@ -23,10 +23,10 @@ font-size: var(--paper-step-label-optional-text-font-size, 12px); } :host([selectable]) #textWrapper { - color: var(--paper-step-selectable-label-text-color, --paper-grey-600); + color: var(--paper-step-selectable-label-text-color, var(--paper-grey-600)); } :host([opened]) #textLabel { - color: var(--paper-step-opened-label-text-color, --light-theme-text-color); + color: var(--paper-step-opened-label-text-color, var(--light-theme-text-color)); font-weight: 500; } #label { @@ -46,28 +46,28 @@ #badge { width: 24px; height: 24px; - background: var(--paper-step-badge-background, --paper-grey-300); + background: var(--paper-step-badge-background, var(--paper-grey-300)); border-radius: 50%; - color: var(--paper-step-badge-color, --dark-theme-text-color); + color: var(--paper-step-badge-color, var(--dark-theme-text-color)); font-size: 12px; - @apply(--layout); - @apply(--layout-center-center); + @apply --layout; + @apply --layout-center-center; } #badge iron-icon { --iron-icon-height: var(--paper-step-badge-icon-width, 16px); - --iron-icon-width: var(--paper-step-badge-icon-height, 16px); + --iron-icon-width: var(--paper-step-badge-icon-height, 16px); } :host([opened]) #badge { - background: var(--paper-step-opened-badge-background, --primary-color); + background: var(--paper-step-opened-badge-background, var(--primary-color)); } :host([saved]) #badge { - background: var(--paper-step-saved-badge-background, --primary-color); + background: var(--paper-step-saved-badge-background, var(--primary-color)); } :host([selectable]:not([opened]):not([saved])) #label:hover #badge { - background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500); + background: var(--paper-step-selectable-hovered-badge-background, var(--paper-grey-500)); } paper-ripple { - color: var(--paper-step-ink-color, --paper-grey-400); + color: var(--paper-step-ink-color, var(--paper-grey-400)); } diff --git a/step-vertical.html b/step-vertical.html index 2e937ca..059cc0f 100644 --- a/step-vertical.html +++ b/step-vertical.html @@ -15,7 +15,7 @@