enhancement: changes the way of passing color to colorable mixin

src/components/VAlert/VAlert.js

@@ -38,14 +38,14 @@ export default {
 
  computed: {
  classes () {
- const colorProp = (this.type && !this.color) ? 'type' : 'computedColor'
+ const color = (this.type && !this.color) ? this.type : this.computedColor
  const classes = {
  'alert--dismissible': this.dismissible,
  'alert--outline': this.outline
  }
 
- return this.outline ? this.addTextColorClassChecks(classes, colorProp)
- : this.addBackgroundColorClassChecks(classes, colorProp)
+ return this.outline ? this.addTextColorClassChecks(classes, color)
+ : this.addBackgroundColorClassChecks(classes, color)
  },
  computedIcon () {
  if (this.icon || !this.type) return this.icon

src/components/VAvatar/VAvatar.js

@@ -27,7 +27,7 @@ export default {
  const size = `${parseInt(props.size)}px`
  data.style.height = size
  data.style.width = size
- data.class = Colorable.methods.addBackgroundColorClassChecks.call(props, {}, 'color')
+ data.class = Colorable.methods.addBackgroundColorClassChecks.call(props, {}, props.color)
 
  return h('div', data, children)
  }

src/components/VChip/VChip.js

@@ -43,7 +43,7 @@ export default {
  })
 
  return (this.textColor || this.outline)
- ? this.addTextColorClassChecks(classes, this.textColor ? 'textColor' : 'color')
+ ? this.addTextColorClassChecks(classes, this.textColor || this.color)
  : classes
  }
  },

src/components/VIcon/VIcon.js

@@ -82,7 +82,7 @@ export default {
  'icon--right': props.right,
  'theme--dark': props.dark,
  'theme--light': props.light
- }, props.color ? Colorable.methods.addTextColorClassChecks.call(props, {}, 'color') : {})
+ }, props.color ? Colorable.methods.addTextColorClassChecks.call(props, {}, props.color) : {})
 
  // Order classes
  // * Component class

src/components/VPicker/VPicker.js

@@ -44,7 +44,7 @@ export default {
  staticClass: 'picker__title',
  'class': this.addBackgroundColorClassChecks({
  'picker__title--landscape': this.landscape
- }, 'computedTitleColor')
+ }, this.computedTitleColor)
  }, this.$slots.title)
  },
  genBodyTransition () {

src/components/VSlider/VSlider.js

@@ -241,7 +241,7 @@ export default {
  }, [
  h('div', {
  staticClass: 'slider__thumb--label',
- 'class': this.addBackgroundColorClassChecks({}, 'computedThumbColor')
+ 'class': this.addBackgroundColorClassChecks({}, this.computedThumbColor)
  }, [
  h('span', {}, this.inputValue)
  ])
@@ -263,7 +263,7 @@ export default {
  const children = []
  children.push(h('div', {
  staticClass: 'slider__thumb',
- 'class': this.addBackgroundColorClassChecks({}, 'computedThumbColor')
+ 'class': this.addBackgroundColorClassChecks({}, this.computedThumbColor)
  }))
 
  this.thumbLabel && children.push(this.genThumbLabel(h))
@@ -303,7 +303,7 @@ export default {
  const children = [
  h('div', {
  staticClass: 'slider__track',
- 'class': this.addBackgroundColorClassChecks({}, 'computedTrackColor'),
+ 'class': this.addBackgroundColorClassChecks({}, this.computedTrackColor),
  style: this.trackStyles
  }),
  h('div', {

src/components/VTimePicker/VTimePickerClock.js

@@ -110,7 +110,7 @@ export default {
  }
 
  children.push(this.$createElement('span', {
- 'class': this.addBackgroundColorClassChecks(classes, value === this.value ? 'computedColor' : null),
+ 'class': this.addBackgroundColorClassChecks(classes, value === this.value ? this.computedColor : null),
  style: this.getTransform(value),
  domProps: { innerHTML: `<span>${pad(value, this.pad)}</span>` }
  }))

src/mixins/colorable.js

@@ -18,26 +18,22 @@ export default {
  },
 
  methods: {
- addBackgroundColorClassChecks (obj = {}, prop = 'computedColor') {
+ addBackgroundColorClassChecks (obj = {}, color = this.computedColor) {
  const classes = Object.assign({}, obj)
 
- if (prop && this[prop]) {
- classes[this[prop]] = true
+ if (color) {
+ classes[color] = true
  }
 
  return classes
  },
- addTextColorClassChecks (obj = {}, prop = 'computedColor') {
+ addTextColorClassChecks (obj = {}, color = this.computedColor) {
  const classes = Object.assign({}, obj)
 
- if (prop && this[prop]) {
- const parts = this[prop].trim().split(' ')
-
- let color = parts[0] + '--text'
-
- if (parts.length > 1) color += ' text--' + parts[1]
-
- classes[color] = !!this[prop]
+ if (color) {
+ const [colorName, colorModifier] = color.trim().split(' ')
+ classes[colorName + '--text'] = true
+ colorModifier && (classes['text--' + colorModifier] = true)
  }
 
  return classes