diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js index ca226b795..3314b6963 100644 --- a/addon/components/paper-button.js +++ b/addon/components/paper-button.js @@ -6,7 +6,6 @@ import { reads } from '@ember/object/computed'; import Component from '@ember/component'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -14,10 +13,9 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @class PaperButton * @extends Ember.Component * @uses FocusableMixin - * @uses ColorMixin * @uses ProxiableMixin */ -export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { +export default Component.extend(FocusableMixin, ProxiableMixin, { tagName: 'button', classNames: ['md-default-theme', 'md-button'], raised: false, @@ -38,6 +36,9 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { 'iconButton:md-icon-button', 'fab:md-fab', 'mini:md-mini', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', ], init() { diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js index 50af5c3ae..67ba0c87a 100644 --- a/addon/components/paper-checkbox.js +++ b/addon/components/paper-checkbox.js @@ -9,20 +9,24 @@ import { not, and } from '@ember/object/computed'; import Component from '@ember/component'; import { assert } from '@ember/debug'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** * @class PaperCheckbox * @extends Ember.Component * @uses FocusableMixin - * @uses ColorMixin * @uses ProxiableMixin */ -export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { +export default Component.extend(FocusableMixin, ProxiableMixin, { tagName: 'md-checkbox', classNames: ['md-checkbox', 'md-default-theme'], - classNameBindings: ['isChecked:md-checked', 'indeterminate:md-indeterminate'], + classNameBindings: [ + 'isChecked:md-checked', + 'indeterminate:md-indeterminate', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', + ], attributeBindings: [ 'role:role', diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js index b6e67c9e6..2069a711e 100644 --- a/addon/components/paper-icon.js +++ b/addon/components/paper-icon.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-get-with-default, ember/no-mixins, ember/require-tagless-components */ +/* eslint-disable ember/no-classic-components, ember/no-get-with-default, ember/require-tagless-components */ /** * @module ember-paper */ @@ -8,17 +8,19 @@ import { computed } from '@ember/object'; import { reads } from '@ember/object/computed'; import { htmlSafe } from '@ember/template'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; - /** * @class PaperIcon * @extends Ember.Component - * @uses ColorMixin */ -let PaperIconComponent = Component.extend(ColorMixin, { +let PaperIconComponent = Component.extend({ tagName: 'md-icon', classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'], - classNameBindings: ['spinClass'], + classNameBindings: [ + 'spinClass', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', + ], attributeBindings: [ 'aria-hidden', 'aria-label', diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js index 1d2f97dcd..46702fc6d 100644 --- a/addon/components/paper-input.js +++ b/addon/components/paper-input.js @@ -10,7 +10,6 @@ import { isEmpty } from '@ember/utils'; import { bind, next } from '@ember/runloop'; import { assert } from '@ember/debug'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import ChildMixin from 'ember-paper/mixins/child-mixin'; import ValidationMixin from 'ember-paper/mixins/validation-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -20,201 +19,195 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component * @uses FocusableMixin * @uses ChildMixin - * @uses ColorMixin * @uses ValidationMixin */ -export default Component.extend( - FocusableMixin, - ColorMixin, - ChildMixin, - ValidationMixin, - { - tagName: 'md-input-container', - classNames: ['md-default-theme'], - - classNameBindings: [ - 'hasValue:md-input-has-value', - 'isInvalidAndTouched:md-input-invalid', - 'hasLeftIcon:md-icon-left', - 'hasRightIcon:md-icon-right', - 'focused:md-input-focused', - 'block:md-block', - 'placeholder:md-input-has-placeholder', - ], - - type: 'text', - autofocus: false, - tabindex: null, - hideAllMessages: false, - isTouched: false, - iconComponent: 'paper-icon', - - // override validation mixin `isInvalid` to account for the native input validity - isInvalid: or('hasErrorMessages', 'isNativeInvalid'), - - hasValue: computed('value', 'isNativeInvalid', function () { - let value = this.value; - let isNativeInvalid = this.isNativeInvalid; - return !isEmpty(value) || isNativeInvalid; - }), - - shouldAddPlaceholder: computed('label', 'focused', function () { - // if has label, only add placeholder when focused - return isEmpty(this.label) || this.focused; - }), - - inputElementId: computed('elementId', { - get() { - return `input-${this.elementId}`; - }, - // elementId can be set from outside and it will override the computed value. - // Please check the deprecations for further details - // https://deprecations.emberjs.com/v3.x/#toc_computed-property-override - set(key, value) { - // To make sure the context updates properly, We are manually set value using @ember/object#set as recommended. - return set(this, 'elementId', value); - }, - }), - - currentLength: computed('value', function () { - return this.value ? this.value.length : 0; - }), - - hasLeftIcon: bool('icon'), - hasRightIcon: bool('iconRight'), - isInvalidAndTouched: and('isInvalid', 'isTouched'), - - // property that validations should be run on - validationProperty: 'value', - - // Lifecycle hooks - didReceiveAttrs() { - this._super(...arguments); - assert( - '{{paper-input}} requires an `onChange` action or null for no action.', - this.onChange !== undefined - ); - - let { value, errors } = this; - let { _prevValue, _prevErrors } = this; - if (value !== _prevValue || errors !== _prevErrors) { - this.notifyValidityChange(); - } - this._prevValue = value; - this._prevErrors = errors; - }, - - didInsertElement() { - this._super(...arguments); - if (this.textarea) { - this._growTextareaOnResize = bind(this, this.growTextarea); - window.addEventListener('resize', this._growTextareaOnResize); - } - }, - - didRender() { - this._super(...arguments); - // setValue below ensures that the input value is the same as this.value - this.setValue(this.value); - this.growTextarea(); +export default Component.extend(FocusableMixin, ChildMixin, ValidationMixin, { + tagName: 'md-input-container', + classNames: ['md-default-theme'], + + classNameBindings: [ + 'hasValue:md-input-has-value', + 'isInvalidAndTouched:md-input-invalid', + 'hasLeftIcon:md-icon-left', + 'hasRightIcon:md-icon-right', + 'focused:md-input-focused', + 'block:md-block', + 'placeholder:md-input-has-placeholder', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', + ], + + type: 'text', + autofocus: false, + tabindex: null, + hideAllMessages: false, + isTouched: false, + iconComponent: 'paper-icon', + + // override validation mixin `isInvalid` to account for the native input validity + isInvalid: or('hasErrorMessages', 'isNativeInvalid'), + + hasValue: computed('value', 'isNativeInvalid', function () { + let value = this.value; + let isNativeInvalid = this.isNativeInvalid; + return !isEmpty(value) || isNativeInvalid; + }), + + shouldAddPlaceholder: computed('label', 'focused', function () { + // if has label, only add placeholder when focused + return isEmpty(this.label) || this.focused; + }), + + inputElementId: computed('elementId', { + get() { + return `input-${this.elementId}`; }, - - willDestroyElement() { - this._super(...arguments); - if (this.textarea) { - window.removeEventListener('resize', this._growTextareaOnResize); - this._growTextareaOnResize = null; - } + // elementId can be set from outside and it will override the computed value. + // Please check the deprecations for further details + // https://deprecations.emberjs.com/v3.x/#toc_computed-property-override + set(key, value) { + // To make sure the context updates properly, We are manually set value using @ember/object#set as recommended. + return set(this, 'elementId', value); }, + }), + + currentLength: computed('value', function () { + return this.value ? this.value.length : 0; + }), + + hasLeftIcon: bool('icon'), + hasRightIcon: bool('iconRight'), + isInvalidAndTouched: and('isInvalid', 'isTouched'), + + // property that validations should be run on + validationProperty: 'value', + + // Lifecycle hooks + didReceiveAttrs() { + this._super(...arguments); + assert( + '{{paper-input}} requires an `onChange` action or null for no action.', + this.onChange !== undefined + ); + + let { value, errors } = this; + let { _prevValue, _prevErrors } = this; + if (value !== _prevValue || errors !== _prevErrors) { + this.notifyValidityChange(); + } + this._prevValue = value; + this._prevErrors = errors; + }, + + didInsertElement() { + this._super(...arguments); + if (this.textarea) { + this._growTextareaOnResize = bind(this, this.growTextarea); + window.addEventListener('resize', this._growTextareaOnResize); + } + }, + + didRender() { + this._super(...arguments); + // setValue below ensures that the input value is the same as this.value + this.setValue(this.value); + this.growTextarea(); + }, + + willDestroyElement() { + this._super(...arguments); + if (this.textarea) { + window.removeEventListener('resize', this._growTextareaOnResize); + this._growTextareaOnResize = null; + } + }, + + growTextarea() { + if (this.textarea) { + let inputElement = this.element.querySelector('input, textarea'); + inputElement.classList.add('md-no-flex'); + inputElement.setAttribute('rows', 1); + + let minRows = this.get('passThru.rows'); + let height = this.getHeight(inputElement); + if (minRows) { + if (!this.lineHeight) { + inputElement.style.minHeight = 0; + this.lineHeight = inputElement.clientHeight; + inputElement.style.minHeight = null; + } + if (this.lineHeight) { + height = Math.max(height, this.lineHeight * minRows); + } + let proposedHeight = Math.round(height / this.lineHeight); + let maxRows = this.get('passThru.maxRows') || Number.MAX_VALUE; + let rowsToSet = Math.min(proposedHeight, maxRows); - growTextarea() { - if (this.textarea) { - let inputElement = this.element.querySelector('input, textarea'); - inputElement.classList.add('md-no-flex'); - inputElement.setAttribute('rows', 1); + inputElement.style.height = `${this.lineHeight * rowsToSet}px`; + inputElement.setAttribute('rows', rowsToSet); - let minRows = this.get('passThru.rows'); - let height = this.getHeight(inputElement); - if (minRows) { - if (!this.lineHeight) { - inputElement.style.minHeight = 0; - this.lineHeight = inputElement.clientHeight; - inputElement.style.minHeight = null; - } - if (this.lineHeight) { - height = Math.max(height, this.lineHeight * minRows); - } - let proposedHeight = Math.round(height / this.lineHeight); - let maxRows = this.get('passThru.maxRows') || Number.MAX_VALUE; - let rowsToSet = Math.min(proposedHeight, maxRows); - - inputElement.style.height = `${this.lineHeight * rowsToSet}px`; - inputElement.setAttribute('rows', rowsToSet); - - if (proposedHeight >= maxRows) { - inputElement.classList.add('md-textarea-scrollable'); - } else { - inputElement.classList.remove('md-textarea-scrollable'); - } + if (proposedHeight >= maxRows) { + inputElement.classList.add('md-textarea-scrollable'); } else { - inputElement.style.height = 'auto'; - inputElement.scrollTop = 0; - let height = this.getHeight(inputElement); - if (height) { - inputElement.style.height = `${height}px`; - } + inputElement.classList.remove('md-textarea-scrollable'); + } + } else { + inputElement.style.height = 'auto'; + inputElement.scrollTop = 0; + let height = this.getHeight(inputElement); + if (height) { + inputElement.style.height = `${height}px`; } - - inputElement.classList.remove('md-no-flex'); } - }, - getHeight(inputElement) { - let { offsetHeight } = inputElement; - let line = inputElement.scrollHeight - offsetHeight; - return offsetHeight + (line > 0 ? line : 0); - }, + inputElement.classList.remove('md-no-flex'); + } + }, - setValue(value) { - // normalize falsy values to empty string - value = isEmpty(value) ? '' : value; + getHeight(inputElement) { + let { offsetHeight } = inputElement; + let line = inputElement.scrollHeight - offsetHeight; + return offsetHeight + (line > 0 ? line : 0); + }, - if (this.element.querySelector('input, textarea').value !== value) { - this.element.querySelector('input, textarea').value = value; + setValue(value) { + // normalize falsy values to empty string + value = isEmpty(value) ? '' : value; + + if (this.element.querySelector('input, textarea').value !== value) { + this.element.querySelector('input, textarea').value = value; + } + }, + + actions: { + handleInput(e) { + invokeAction(this, 'onChange', e.target.value); + // setValue below ensures that the input value is the same as this.value + next(() => { + if (this.isDestroyed) { + return; + } + this.setValue(this.value); + }); + this.growTextarea(); + let inputElement = this.element.querySelector('input'); + let isNativeInvalid = + inputElement && inputElement.validity && inputElement.validity.badInput; + if (this.type === 'date' && e.target.value === '') { + // Chrome doesn't fire the onInput event when clearing the second and third date components. + // This means that we won't see another event when badInput becomes false if the user is clearing + // the date field. The reported value is empty, though, so we can already mark it as valid. + isNativeInvalid = false; } + this.set('isNativeInvalid', isNativeInvalid); + this.notifyValidityChange(); }, - actions: { - handleInput(e) { - invokeAction(this, 'onChange', e.target.value); - // setValue below ensures that the input value is the same as this.value - next(() => { - if (this.isDestroyed) { - return; - } - this.setValue(this.value); - }); - this.growTextarea(); - let inputElement = this.element.querySelector('input'); - let isNativeInvalid = - inputElement && - inputElement.validity && - inputElement.validity.badInput; - if (this.type === 'date' && e.target.value === '') { - // Chrome doesn't fire the onInput event when clearing the second and third date components. - // This means that we won't see another event when badInput becomes false if the user is clearing - // the date field. The reported value is empty, though, so we can already mark it as valid. - isNativeInvalid = false; - } - this.set('isNativeInvalid', isNativeInvalid); - this.notifyValidityChange(); - }, - - handleBlur(e) { - invokeAction(this, 'onBlur', e); - this.set('isTouched', true); - this.notifyValidityChange(); - }, + handleBlur(e) { + invokeAction(this, 'onBlur', e); + this.set('isTouched', true); + this.notifyValidityChange(); }, - } -); + }, +}); diff --git a/addon/components/paper-progress-circular.js b/addon/components/paper-progress-circular.js index bc259ee80..664027fbe 100644 --- a/addon/components/paper-progress-circular.js +++ b/addon/components/paper-progress-circular.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-mixins, ember/require-tagless-components */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components */ /** * @module ember-paper */ @@ -9,7 +9,6 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { isPresent } from '@ember/utils'; import { htmlSafe } from '@ember/template'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import clamp from 'ember-paper/utils/clamp'; const MODE_DETERMINATE = 'determinate'; @@ -51,15 +50,17 @@ function materialEase(t, b, c, d) { /** * @class PaperProgressCircular * @extends Ember.Component - * @uses ColorMixin */ -export default Component.extend(ColorMixin, { +export default Component.extend({ tagName: 'md-progress-circular', classNames: ['md-default-theme'], attributeBindings: ['value', 'mode:md-mode', 'containerStyle:style'], classNameBindings: [ 'spinnerClass', 'disabled:_md-progress-circular-disabled', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', ], diameter: 50, strokeRatio: 0.1, diff --git a/addon/components/paper-progress-linear.hbs b/addon/components/paper-progress-linear.hbs index 29c14b4f4..3287570d7 100644 --- a/addon/components/paper-progress-linear.hbs +++ b/addon/components/paper-progress-linear.hbs @@ -1,5 +1,7 @@ -
-
-
-
-
+ +
+
+
+
+
+ \ No newline at end of file diff --git a/addon/components/paper-progress-linear.js b/addon/components/paper-progress-linear.js index 3c657e357..b0b7ff38a 100644 --- a/addon/components/paper-progress-linear.js +++ b/addon/components/paper-progress-linear.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-computed-property-dependencies, ember/require-tagless-components */ +/* eslint-disable ember/no-classic-components, ember/no-get, ember/require-computed-property-dependencies */ /** * @module ember-paper */ @@ -8,7 +8,6 @@ import { computed } from '@ember/object'; import Component from '@ember/component'; import { isPresent } from '@ember/utils'; import { htmlSafe } from '@ember/template'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; function makeTransform(value) { let scale = value / 100; @@ -24,12 +23,9 @@ const MODE_QUERY = 'query'; /** * @class PaperProgressLinear * @extends Ember.Component - * @uses ColorMixin */ -export default Component.extend(ColorMixin, { - tagName: 'md-progress-linear', - attributeBindings: ['mode:md-mode', 'bufferValue:md-buffer-value'], - classNames: ['md-default-theme'], +export default Component.extend({ + tagName: '', constants: service(), mode: computed('value', { diff --git a/addon/components/paper-radio-base.js b/addon/components/paper-radio-base.js index f27e928d4..d97906a4b 100644 --- a/addon/components/paper-radio-base.js +++ b/addon/components/paper-radio-base.js @@ -7,19 +7,22 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { assert } from '@ember/debug'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** * @class PaperRadio * @extends Ember.Component * @uses FocusableMixin - * @uses ColorMixin */ -export default Component.extend(FocusableMixin, ColorMixin, { +export default Component.extend(FocusableMixin, { tagName: 'md-radio-button', classNames: ['md-default-theme'], - classNameBindings: ['checked:md-checked'], + classNameBindings: [ + 'checked:md-checked', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', + ], attributeBindings: [ 'role', diff --git a/addon/components/paper-switch.js b/addon/components/paper-switch.js index 3eac2639b..4418177dc 100644 --- a/addon/components/paper-switch.js +++ b/addon/components/paper-switch.js @@ -10,7 +10,6 @@ import { get, computed } from '@ember/object'; import { bind } from '@ember/runloop'; import { htmlSafe } from '@ember/template'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -20,13 +19,18 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @class PaperSwitch * @extends Ember.Component * @uses FocusableMixin - * @uses ColorMixin * @uses ProxiableMixin */ -export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { +export default Component.extend(FocusableMixin, ProxiableMixin, { tagName: 'md-switch', classNames: ['paper-switch', 'md-default-theme'], - classNameBindings: ['value:md-checked', 'dragging:md-dragging'], + classNameBindings: [ + 'value:md-checked', + 'dragging:md-dragging', + 'warn:md-warn', + 'accent:md-accent', + 'primary:md-primary', + ], toggle: true, constants: service(), value: false, diff --git a/addon/components/paper-tabs.js b/addon/components/paper-tabs.js index 9a5ba28e3..5f46e1532 100644 --- a/addon/components/paper-tabs.js +++ b/addon/components/paper-tabs.js @@ -1,6 +1,7 @@ -/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, ember/no-mixins */ +/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get */ import { classNames, + classNameBindings, attributeBindings, tagName, } from '@ember-decorators/component'; @@ -11,16 +12,13 @@ import Component from '@ember/component'; import { htmlSafe } from '@ember/template'; import { scheduleOnce, join } from '@ember/runloop'; import { ParentMixin } from 'ember-composability-tools'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @tagName('md-tabs') @classNames('md-no-tab-content', 'md-default-theme') +@classNameBindings('warn:md-warn', 'accent:md-accent', 'primary:md-primary') @attributeBindings('borderBottom:md-border-bottom') -export default class PaperTabs extends Component.extend( - ParentMixin, - ColorMixin -) { +export default class PaperTabs extends Component.extend(ParentMixin) { @service constants; diff --git a/addon/components/paper-toolbar.hbs b/addon/components/paper-toolbar.hbs index 66a33aeaa..c12fad5a9 100644 --- a/addon/components/paper-toolbar.hbs +++ b/addon/components/paper-toolbar.hbs @@ -1,3 +1,5 @@ -{{yield (hash - tools=(component "paper-toolbar-tools") -)}} + + {{yield (hash + tools=(component "paper-toolbar-tools") + )}} + \ No newline at end of file diff --git a/addon/components/paper-toolbar.js b/addon/components/paper-toolbar.js index c59cb537f..ee9144e69 100644 --- a/addon/components/paper-toolbar.js +++ b/addon/components/paper-toolbar.js @@ -1,19 +1,14 @@ -/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components */ +/* eslint-disable ember/no-classic-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; - /** * @class PaperToolbar * @extends Ember.Component - * @uses ColorMixin */ -export default Component.extend(ColorMixin, { - tagName: 'md-toolbar', - classNames: ['md-default-theme'], +export default Component.extend({ + tagName: '', tall: false, - classNameBindings: ['tall:md-tall'], }); diff --git a/addon/mixins/color-mixin.js b/addon/mixins/color-mixin.js deleted file mode 100644 index 5698e30b6..000000000 --- a/addon/mixins/color-mixin.js +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-disable prettier/prettier */ -/** - * @module ember-paper - */ -import Mixin from '@ember/object/mixin'; - -/** - * @class ColorMixin - * @extends Ember.Mixin; - */ -export default Mixin.create({ - classNameBindings: ['warn:md-warn', 'accent:md-accent', 'primary:md-primary'] -});