ColorPickerRoot

ColorPickerRoot composes a color swatch trigger with a popover surface while leaving the editor UI to its slots. The trigger slot receives the current swatch style; the default slot receives the current scene-graph color.

openChange reports the complete picker interaction boundary. cancel fires before an Escape close, allowing BindableValue consumers to roll back a variable detach and paint update together. Opening or focusing the picker does not emit a color update.

<script setup lang="ts">
import { ref } from 'vue'
import type { Color } from '@open-pencil/scene-graph'
import { ColorPickerRoot } from '@open-pencil/vue'

const color = ref<Color>({ r: 0.2, g: 0.5, b: 0.9, a: 1 })
</script>

<template>
  <ColorPickerRoot
    :color="color"
    @update="color = $event"
    @open-change="open => console.log(open)"
    @cancel="console.log('cancel')"
  >
    <template #trigger="{ style }">
      <button :style="style" aria-label="Edit color" />
    </template>
    <template #default="{ color: currentColor }">
      <output>{{ currentColor.r }}, {{ currentColor.g }}, {{ currentColor.b }}</output>
    </template>
  </ColorPickerRoot>
</template>

Generated API reference

ColorPickerRoot

Generated from packages/vue/src/primitives/ColorPicker/ColorPickerRoot.vue

Props

Prop	Default	Type
color*	—	Color
label	"Edit color"	string | undefined
ui	—	ColorPickerUI | undefined

Events

Event	Payload	Description
update	[color: Color]
openChange	[open: boolean]
cancel	[]

Slots

Slot	Props	Description
trigger	{ style: { background: string; }; }
default	{ color: Color; }

Related APIs

• ColorInputRoot
• useColorModel
• BindableValue