diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.ts b/packages/vuetify/src/components/VColorPicker/VColorPicker.ts index 8908733fb69..f958ee9c330 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPicker.ts +++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.ts @@ -9,7 +9,7 @@ import VColorPickerEdit, { Mode, modes } from './VColorPickerEdit' import VColorPickerSwatches from './VColorPickerSwatches' // Helpers -import { VColorPickerColor, parseColor, fromRGBA, extractColor } from './util' +import { VColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util' import mixins from '../../util/mixins' import Themeable from '../../mixins/themeable' @@ -58,6 +58,12 @@ export default mixins(Themeable).extend({ internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }), }), + computed: { + hideAlpha (): boolean { + return this.value && !hasAlpha(this.value) + }, + }, + watch: { value: { handler (color: any) { @@ -104,6 +110,7 @@ export default mixins(Themeable).extend({ props: { color: this.internalValue, disabled: this.disabled, + hideAlpha: this.hideAlpha, hideModeSwitch: this.hideModeSwitch, mode: this.mode, }, @@ -118,6 +125,7 @@ export default mixins(Themeable).extend({ props: { color: this.internalValue, disabled: this.disabled, + hideAlpha: this.hideAlpha, }, on: { 'update:color': this.updateColor, diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.ts b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.ts index 408edf56bcf..36805a1e29f 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.ts +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.ts @@ -50,6 +50,7 @@ export default Vue.extend({ props: { color: Object as PropValidator, disabled: Boolean, + hideAlpha: Boolean, hideModeSwitch: Boolean, mode: { type: String, @@ -118,11 +119,11 @@ export default Vue.extend({ switch (this.internalMode) { case 'hexa': { const hex = this.color.hexa - const value = hex.endsWith('FF') ? hex.substr(0, 7) : hex + const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex return this.genInput( 'hex', { - maxlength: 9, + maxlength: this.hideAlpha ? 7 : 9, disabled: this.disabled, }, value, @@ -135,7 +136,8 @@ export default Vue.extend({ ) } default: { - return this.currentMode.inputs!.map(([target, max, type]) => { + const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs! + return inputs.map(([target, max, type]) => { const value = this.color[this.internalMode as keyof VColorPickerColor] as any return this.genInput( target, diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass index aa035049c99..c57d00f0656 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass @@ -32,8 +32,6 @@ height: 100% .v-color-picker__hue - margin-bottom: 24px - &:not(.v-input--is-disabled) background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) @@ -54,3 +52,7 @@ .v-slider__track-container opacity: 0 + + &:not(.v-color-picker__preview--hide-alpha) + .v-color-picker__hue + margin-bottom: 24px diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.ts b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.ts index f65ec5b1d50..c56907fd1c6 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.ts +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.ts @@ -18,6 +18,7 @@ export default Vue.extend({ props: { color: Object as PropValidator, disabled: Boolean, + hideAlpha: Boolean, }, methods: { @@ -47,7 +48,7 @@ export default Vue.extend({ staticClass: 'v-color-picker__sliders', }, [ this.genHue(), - this.genAlpha(), + !this.hideAlpha && this.genAlpha(), ]) }, genDot (): VNode { @@ -92,6 +93,9 @@ export default Vue.extend({ render (h): VNode { return h('div', { staticClass: 'v-color-picker__preview', + class: { + 'v-color-picker__preview--hide-alpha': this.hideAlpha, + }, }, [ this.genDot(), this.genSliders(), diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts index 3af2a89c9ee..f29d0ec3ae7 100644 --- a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts +++ b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts @@ -127,4 +127,14 @@ describe('VColorPicker.ts', () => { expect(fn).toHaveBeenLastCalledWith({ r: 255, g: 0, b: 255, a: 1 }) }) + + it('should not show alpha controls if given hex value without alpha', async () => { + const wrapper = mountFunction({ + propsData: { + value: '#00FF00', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) }) diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap b/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap index 602db5bd875..40d06646657 100644 --- a/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap +++ b/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap @@ -397,6 +397,114 @@ exports[`VColorPicker.ts should hide inputs 1`] = ` `; +exports[`VColorPicker.ts should not show alpha controls if given hex value without alpha 1`] = ` +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + R + +
+
+ + + G + +
+
+ + + B + +
+ +
+
+
+`; + exports[`VColorPicker.ts should render color picker 1`] = `
7 + } + + if (typeof color === 'object') { + return has(color, ['a']) + } + + return false +} diff --git a/packages/vuetify/src/util/colorUtils.ts b/packages/vuetify/src/util/colorUtils.ts index 02137d37ec0..34d9f282bc6 100644 --- a/packages/vuetify/src/util/colorUtils.ts +++ b/packages/vuetify/src/util/colorUtils.ts @@ -5,9 +5,12 @@ import { toXYZ } from './color/transformSRGB' export type ColorInt = number export type XYZ = [number, number, number] export type LAB = [number, number, number] -export type HSVA = { h: number, s: number, v: number, a: number } -export type RGBA = { r: number, g: number, b: number, a: number } -export type HSLA = { h: number, s: number, l: number, a: number } +export type HSV = { h: number, s: number, v: number } +export type HSVA = HSV & { a: number } +export type RGB = { r: number, g: number, b: number } +export type RGBA = RGB & { a: number } +export type HSL = { h: number, s: number, l: number } +export type HSLA = HSL & { a: number } export type Hex = string export type Hexa = string export type Color = string | number | {}