Color picker

import {
  WuiColorPicker,
  // Child components
  WuiColorPickerCompact,
  WuiColorPickerFull,
} from "@wui/wui-vue/lib/color-picker";

Description

The <wui-color-picker> provides a simple, user-friendly interface to select any color. The user can either choose from the WUI color palette or his own color via an extended color interface.

If you want to use the WUI Color Picker in forms, then you should rather use the <wui-fg-form-input-color> component. It already contains the <wui-color-picker> including the logic for showing and hiding.

Example Usage:

<template>
  <wui-color-picker v-model="color" />
</template>

<script>
  export default {
    data() {
      return {
        color: "#ff0000",
      };
    },
  };
</script>

Input values

The value should be bound via v-model in your app. The value can either be a string or an object.

Here are some examples of string input:

Hex, 8-digit (RGBA) Hex

"#000",
"000",
"#369C",
"369C",
"#f0f0f6",
"f0f0f6",
"#f0f0f688",
"f0f0f688",

Object Input

Here are some examples of the different types of accepted object inputs:

{ r: 255, g: 0, b: 0 }
{ r: 255, g: 0, b: 0, a: .5 }
{ h: 0, s: 100, l: 50 }
{ h: 0, s: 100, v: 100 }

Further information on the supported input formats can be found in the documentation of TinyColor, a color library used by the <wui-color-picker>.

The v-model return value

The returned v-model value is always an object with the following format:

{
  a: 1,
  hex: "#FF0000",
  hex8: "#FF0000FF",
  hsl: { h: 0, s: 1, l: 0.5, a: 1 },
  hsv: { h: 0, s: 1, v: 1, a: 1 },
  oldHue: 0,
  rgba: { r: 255, g: 0, b: 0, a: 1 },
  source: "hex",
}

Custom translations

You can pass custom translations for the "Use color" button and the "Set custom color" link to the component via the translations property. Please use the same ${token} names as in the default translation. They get replaced by dynamic data during the runtime.

<template>
  <wui-color-picker v-model="color" :translations="translations" />
</template>

<script>
  export default {
    data() {
      return {
        color: "#ff0000",
        translations: {
          button: {
            use: "Verwenden",
          },
          link: {
            setCustom: "Benutzerdefinierte Farbe",
          },
          currentColor: {
            ariaLabel: "Ausgewählte Farbe ist ${color}",
          },
        },
      };
    },
  };
</script>

Color picker translation object

export const colorPicker = {
  button: {
    use: "Use color",
  },
  link: {
    setCustom: "Set custom color",
  },
  compact: {
    aria: {
      label: "Compact color picker",
    },
    color: {
      ariaLabel: "Color: ${color}",
    },
  },
  full: {
    aria: {
      label: "Chrome color picker",
    },
    currentColor: {
      ariaLabel: "Current color is ${color}",
    },
    button: {
      colorDefinition: {
        ariaLabel: "Change another color definition",
      },
    },
  },
};

Color picker child components

WuiVue provides additional child components:

• <wui-color-picker-compact>
• <wui-color-picker-full>

These components represent the layers used in the wui-color-picker. You can use them if you want to build your own color input UI's, which should have a different structure than the one in the wui-color-picker.

<template>
  <wui-row>
    <wui-col cols="3">
      <h3>Color Picker Full</h3>
      <wui-color-picker-full v-model="colorFull" />
    </wui-col>
    <wui-col cols="3">
      <h3>Color Picker Compact</h3>
      <wui-color-picker-compact v-model="colorsCompact" />
    </wui-col>
  </wui-row>
</template>

<script>
  export default {
    data() {
      return {
        colorFull: "#fff",
        colorsCompact: [],
      };
    },
  };
</script>

<wui-color-picker-compact>

Use <wui-color-picker-compact> to create a panel with clickable color selection boxes. By default, color selection boxes for the WUI colors are displayed. You can also transfer your own color palette as an array using the palette prop. These will then be displayed instead of the WUI colors.

Example using a custom color palette:

<template>
  <wui-color-picker-compact v-model="colorsCompact" :palette="palette" />
</template>

<script>
  export default {
    data() {
      return {
        colorsCompact: {},
        palette: ["#ff0000", "#00ff00", "#0000ff"],
      };
    },
  };
</script>

Via the v-model support you can set a pre-selected color or you will receive the color selected by the user (read about the return value above).

<wui-color-picker-full>

The user can theoretically select any color using the <wui-color-picker-full>. A large clickable color gradient area, a hue controller and an input field are available for this purpose. The input field can be hidden using the prop disableFields. If you set disableAlpha totrue, an alpha channel control can be shown.

The component has the same v-model support as all others mentioned above.

Example:

<template>
  <wui-color-picker-full v-model="color" />
</template>

<script>
  export default {
    data() {
      return {
        color: {},
      };
    },
  };
</script>

Component reference

<wui-color-picker>

Properties

Events

<wui-color-picker-compact>

Properties

Events

<wui-color-picker-full>

Properties

Events

Importing individual components

You can import individual components into your project via the following named exports:

Example

import { WuiColorPicker } from "@wui/wui-vue/lib/color-picker";
Vue.component("wui-color-picker", WuiColorPicker);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Example

import { ColorPickerPlugin } from "@wui/wui-vue/lib/color-picker";
Vue.use(ColorPickerPlugin);

Inspired by https://github.com/xiaokaike/vue-color