Simple Color Picker

The basic version of the Color Picker allows users to select a color from a predefined palette.

Usage

<script setup lang="ts">
import { VSimpleColorPicker, VButton, VIcon } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const swatches = [
{
label: 'Black',
value: '#000000',
},
{
label: 'Red',
value: '#E61D1D',
},
{
label: 'Yellow',
value: '#FA9F00',
},
{
label: 'Green',
value: '#1C8731',
},
{
label: 'Blue',
value: '#0276D5',
},
{
label: 'Purple',
value: '#9941FF',
},
{
label: 'Pink',
value: '#D6219C',
},
];

const selectedColor = ref('#000000');
const buttonLabel = ref('Pick color');

const handleColorChange = (event: CustomEvent) => {
selectedColor.value = event.target.value;
buttonLabel.value = event.target.value ? `Pick color, ${event.target.value} selected.` : 'Pick color';
};

</script>

<template>
  <VSimpleColorPicker :swatches="swatches" @change="handleColorChange">
    <template #anchor>
      <VButton :aria-label="buttonLabel" size="super-condensed" shape="pill" appearance="outlined">
        <template #icon><VIcon name="textcolor-solid" :style="{ color: selectedColor }" /></template>
      </VButton>
    </template>
  </VSimpleColorPicker>
</template>

import '@vonage/vivid-api/simple-color-picker';

or, if you need to use a unique prefix:

import { registerSimpleColorPicker } from '@vonage/vivid-api';

registerSimpleColorPicker('your-prefix');

<script type="module">
  import { registerSimpleColorPicker, registerButton, registerIcon } from '@vonage/vivid-api';
  registerSimpleColorPicker('your-prefix');
  registerButton('your-prefix');
  registerIcon('your-prefix');
</script>

<your-prefix-simple-color-picker id="picker">
  <your-prefix-button id="button" aria-label="Pick color" slot="anchor" size="super-condensed" shape="pill" appearance="outlined">
    <your-prefix-icon id="icon" slot="icon" name="textcolor-solid"></your-prefix-icon>
  </your-prefix-button>
</your-prefix-simple-color-picker>

<script>
  const swatches = [
    {
      label: 'Black',
      value: '#000000',
    },
    {
      label: 'Red',
      value: '#E61D1D',
    },
    {
      label: 'Yellow',
      value: '#FA9F00',
    },
    {
      label: 'Green',
      value: '#1C8731',
    },
    {
      label: 'Blue',
      value: '#0276D5',
    },
    {
      label: 'Purple',
      value: '#9941FF',
    },
    {
      label: 'Pink',
      value: '#D6219C',
    },
  ];
  const picker = document.getElementById('picker');
  const button = document.getElementById('button');
  const buttonIcon = document.getElementById('icon');
  picker.swatches = swatches;

  picker.addEventListener('change', (e) => {
    const selectedColor = e.target.value;
    buttonIcon.setAttribute('style', `color: ${selectedColor}; `);
    selectedColor ? button.setAttribute('aria-label', `Pick color, ${selectedColor} selected.`) : button.setAttribute('aria-label', 'Pick color');
  });
</script>

Open

Use the open attribute to indicate whether the Simple Color Picker’s popup should be open.

Type: boolean
Default: false

<script setup lang="ts">
import { VSimpleColorPicker, VButton, VIcon } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const swatches = [
  {
    label: 'Black',
    value: '#000000',
  },
  {
    label: 'Red',
    value: '#E61D1D',
  },
  {
    label: 'Yellow',
    value: '#FA9F00',
  },
  {
    label: 'Green',
    value: '#1C8731',
  },
  {
    label: 'Blue',
    value: '#0276D5',
  },
  {
    label: 'Purple',
    value: '#9941FF',
  },
  {
    label: 'Pink',
    value: '#D6219C',
  },
];

const selectedColor = ref('#000000');
const buttonLabel = ref('Pick color');

const handleColorChange = (event: CustomEvent) => {
  selectedColor.value = event.target.value;
  buttonLabel.value = event.target.value ? `Pick color, ${event.target.value} selected.` : 'Pick color';
};
</script>

<template>
  <VSimpleColorPicker open :swatches="swatches" @change="handleColorChange">
    <template #anchor>
      <VButton :aria-label="buttonLabel" size="super-condensed" shape="pill" appearance="outlined">
        <template #icon><VIcon name="textcolor-solid" :style="{ color: selectedColor }" /></template>
      </VButton>
    </template>
  </VSimpleColorPicker>
</template>

<vwc-simple-color-picker open id="picker">
  <vwc-button id="button" aria-label="Pick color" slot="anchor" size="super-condensed" shape="pill" appearance="outlined">
    <vwc-icon id="icon" slot="icon" name="textcolor-solid"></vwc-icon>
  </vwc-button>
</vwc-simple-color-picker>

<script>
  const swatches = [
    {
      label: 'Black',
      value: '#000000',
    },
    {
      label: 'Red',
      value: '#E61D1D',
    },
    {
      label: 'Yellow',
      value: '#FA9F00',
    },
    {
      label: 'Green',
      value: '#1C8731',
    },
    {
      label: 'Blue',
      value: '#0276D5',
    },
    {
      label: 'Purple',
      value: '#9941FF',
    },
    {
      label: 'Pink',
      value: '#D6219C',
    },
  ];
  const picker = document.getElementById('picker');
  const button = document.getElementById('button');
  const buttonIcon = document.getElementById('icon');
  picker.swatches = swatches;

  picker.addEventListener('change', (e) => {
    const selectedColor = e.target.value;
    buttonIcon.setAttribute('style', `color: ${selectedColor}; `);
    selectedColor ? button.setAttribute('aria-label', `Pick color, ${selectedColor} selected.`) : button.setAttribute('aria-label', 'Pick color');
  });
</script>

Anchor

It is recommended use the anchor slot to set the anchor.

The anchor attribute should be set to the id value of the anchor element or pass the anchor element itself.

Pay attention to the source order the components to ensure they can be operated logically using only a keyboard.

<script setup lang="ts">
import { VSimpleColorPicker, VButton, VIcon } from '@vonage/vivid-api-vue';
import { useTemplateRef, onMounted } from 'vue';

const swatches = [
  {
    label: 'Red',
    value: '#E61D1D',
  },
  {
    label: 'Yellow',
    value: '#FA9F00',
  },
  {
    label: 'Green',
    value: '#1C8731',
  },
  {
    label: 'Blue',
    value: '#0276D5',
  },
  {
    label: 'Black',
    value: '#000000',
  },
  {
    label: 'Light Grey',
    value: '#CCCCCC',
  },
];
const button = useTemplateRef<InstanceType<typeof VButton>>('button');
const picker = useTemplateRef<InstanceType<typeof VSimpleColorPicker>>('picker');

onMounted(() => {
  if (!button.value || !picker.value) return;
  picker.value.element.anchor = button.value.element;
});
</script>
<template>
  <VSimpleColorPicker ref="picker" :swatches="swatches" :swatches-per-row="6" />
  <VButton ref="button" label="Toggle Color Picker" size="normal" shape="rounded" appearance="filled">
    <template #icon><VIcon name="palette-solid" /></template>
  </VButton>
</template>

<vwc-simple-color-picker anchor="button" swatches-per-row="6" id="picker"></vwc-simple-color-picker>

<vwc-button id="button" label="Toggle Color Picker" size="normal" shape="rounded" appearance="filled">
  <vwc-icon slot="icon" name="palette-solid"></vwc-icon>
</vwc-button>

<script>
  const swatches = [
    {
      label: 'Red',
      value: '#E61D1D',
    },
    {
      label: 'Yellow',
      value: '#FA9F00',
    },
    {
      label: 'Green',
      value: '#1C8731',
    },
    {
      label: 'Blue',
      value: '#0276D5',
    },
    {
      label: 'Black',
      value: '#000000',
    },
    {
      label: 'Light Grey',
      value: '#CCCCCC',
    },
  ];
  const picker = document.getElementById('picker');
  picker.swatches = swatches;
</script>

Slots

Anchor Slot

Simple Color Picker needs to be anchored to an element. Place the anchor element inside the anchor slot of the Simple Color Picker. It is recommended to use the Button component as the anchor element.

<script setup lang="ts">
import { VSimpleColorPicker, VButton, VIcon } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const swatches = [
  {
    label: 'Red',
    value: '#E61D1D',
  },
  {
    label: 'Yellow',
    value: '#FA9F00',
  },
  {
    label: 'Green',
    value: '#1C8731',
  },
  {
    label: 'Blue',
    value: '#0276D5',
  },
  {
    label: 'Black',
    value: '#000000',
  },
  {
    label: 'Light Grey',
    value: '#CCCCCC',
  },
];
</script>

<template>
  <VSimpleColorPicker :swatches="swatches" :swatches-per-row="6">
    <template #anchor>
      <VButton label="Toggle Color Picker" size="normal" shape="rounded" appearance="filled">
        <template #icon><VIcon name="palette-solid" /></template>
      </VButton>
    </template>
  </VSimpleColorPicker>
</template>

<vwc-simple-color-picker id="picker" swatches-per-row="6">
  <vwc-button slot="anchor" label="Toggle Color Picker" size="normal" shape="rounded" appearance="filled">
    <vwc-icon slot="icon" name="palette-solid"></vwc-icon>
  </vwc-button>
</vwc-simple-color-picker>

<script>
  const swatches = [
    {
      label: 'Red',
      value: '#E61D1D',
    },
    {
      label: 'Yellow',
      value: '#FA9F00',
    },
    {
      label: 'Green',
      value: '#1C8731',
    },
    {
      label: 'Blue',
      value: '#0276D5',
    },
    {
      label: 'Black',
      value: '#000000',
    },
    {
      label: 'Light Grey',
      value: '#CCCCCC',
    },
  ];
  const picker = document.getElementById('picker');
  picker.swatches = swatches;
</script>

API Reference

Properties

Property	Type	Description
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
initialValue	`string`	The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label	`string`	The label for the form element.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
open	`boolean`	Indicates whether the popup is open
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Preferred placement of the Color Picker's popup in relation to the anchor element
required	`boolean`	Require the field to be completed prior to form submission.
swatches	`{label?: string; value: string}[]`	List of color swatches, has to be an array of objects
swatchesPerRow	`number`	Number of swatches per row for grid layout
value (modelValue)	`string`	The current value of the element.

Property	Type	Description
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
value	`string`	The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label	`string`	The label for the form element.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
open	`boolean`	Indicates whether the popup is open
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Preferred placement of the Color Picker's popup in relation to the anchor element
required	`boolean`	Require the field to be completed prior to form submission.
swatches (property only)	`{label?: string; value: string}[]`	List of color swatches, has to be an array of objects
swatches-per-row	`number`	Number of swatches per row for grid layout
current-value	`string`	The current value of the element.

Slots

Name	Description
anchor	Slot for attaching the toggle button

Name	Description
anchor	Slot for attaching the toggle button

Events

Name	Type	Description
change	`CustomEvent<undefined>`	Fires when the value changes
input	`Event`	Fires when the value of the element changes.

Name	Type	Description
change	`CustomEvent<undefined>`	Fires when the value changes
input	`Event`	Fires when the value of the element changes.

Methods

Name	Params	Returns	Description
checkValidity		`boolean`	Return the current validity of the element.
reportValidity		`boolean`	Return the current validity of the element. If false, fires an invalid event at the element.