Vuetify: [Feature Request] Color Picker should allow hiding alpha controls through a property

[jarkkolaine]

Problem to solve

In my use case, I need to use the color picker to set HEX colors without an alpha value.

This works well if an existing hex string without an alpha component is passed as the value. However, in most cases, the UI starts with an empty default value — in which case the component automatically decides to show the alpha controls as well.

Proposed solution

Add a property, e.g. "hideAlphaControls", that would force the editor in a non-alpha mode

This should then affect the computed property in VColorPicker.ts:

hideAlpha (): boolean {
     return this.hideAlphaControls || (this.value && !hasAlpha(this.value))
},

[ligne13]

Yes please !

[ligne13]

In the meantime:

watch: {
    color(value) {
      // temporary fix while there is no way to disable the alpha channel in the colorpicker component: https://github.com/vuetifyjs/vuetify/issues/9590
      if (value.toString().match(/#[a-zA-Z0-9]{8}/)) {
        this.color = value.substr(0, 7);
      }
    }
}

color is the v-model of the <v-color-picker-component>.

[LuckyNoS7evin]

Side note, I found this as I wanted to do the same.

Here is a little SCSS which is very specific to hiding the alpha controls when in hexa mode. Use the code supplied by @ligne13 for the change

<v-color-picker class="no-alpha" flat hide-mode-switch></v-color-picker>

.no-alpha {
  .v-color-picker__controls {
    .v-color-picker__preview {
      .v-color-picker__sliders {
        .v-color-picker__alpha {
          display: none;
        }
      }
    }
    .v-color-picker__edit {
      .v-color-picker__input:last-child {
        display: none;
      }
    }
  }
}

[JessePerry]

Or add hex to one of the available property settings of mode.
Right now mode is only able to be Available modes are 'rgba', 'hsla', and 'hexa'. but I don't see a technical need for this restriction.
If we set the mode to hex then the alpha slider should hide.

[mino181295]

Any news? I also require this.

[ligne13]

Yes please.

[mino181295]

Attually I resolved passing to the v-model the color without the alpha part and it seems to hide the control @ligne13

[MGCataldo]

Attually I resolved passing to the v-model the color without the alpha part and it seems to hide the control @ligne13

This is the perfect solution... columbus egg

[simeon9696]

Attually I resolved passing to the v-model the color without the alpha part and it seems to hide the control @ligne13

Can you elaborate more on this?

[MGCataldo]

for me the following code works well

   <v-color-picker 
                class="ma-2" 
                light 
                flat 
                v-model="member.color"  
                hide-canvas hide-mode-switch hide_inputs :show-swatches="false">
   </v-color-picker>

the member object is actually a prop passed to the component, the value is

member.color:'#FF0000'

the visual result is:

[Arephan]

In the meantime:

watch: {
    color(value) {
      // temporary fix while there is no way to disable the alpha channel in the colorpicker component: https://github.com/vuetifyjs/vuetify/issues/9590
      if (value.toString().match(/#[a-zA-Z0-9]{8}/)) {
        this.color = value.substr(0, 7);
      }
    }
}

color is the v-model of the <v-color-picker-component>.

This works

[saint777]

Just set you data to hex value (eg color: '#FF0000'), and alpha will be hidden