422f83331f
- Add accessible OkHCL channel sliders and use Reka ColorSlider for standard color channels - Split fill state and binding-aware swatches from application popover composition - Add keyboard-operable gradient stops, shared demos, generated docs, and focused coverage
52 lines
1.3 KiB
Markdown
52 lines
1.3 KiB
Markdown
---
|
|
title: FillRoot
|
|
description: Headless fill category state and conversion actions.
|
|
---
|
|
|
|
<script setup lang="ts">
|
|
import ColorFillDemo from '#vue/primitives/Fill/demo/ColorFillDemo.vue'
|
|
import { data } from './fill-root.data'
|
|
</script>
|
|
|
|
# FillRoot
|
|
|
|
`FillRoot` owns solid, gradient, and image category state without owning a popover or visual swatch.
|
|
Compose it around the picker surface appropriate for your application.
|
|
|
|
<ColorFillDemo />
|
|
|
|
Its default slot exposes the current fill, category, transparency, swatch background, and grouped
|
|
conversion actions. Category changes emit immutable `Fill` values and are no-ops when the requested
|
|
category is already active.
|
|
|
|
```vue twoslash
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import type { Fill } from '@open-pencil/scene-graph'
|
|
import { FillRoot } from '@open-pencil/vue'
|
|
|
|
const fill = ref<Fill>({
|
|
type: 'SOLID',
|
|
color: { r: 0.2, g: 0.5, b: 0.9, a: 1 },
|
|
opacity: 1,
|
|
visible: true
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<FillRoot :fill="fill" @update="fill = $event" v-slot="model">
|
|
<button @click="model.actions.toGradient">Gradient</button>
|
|
</FillRoot>
|
|
</template>
|
|
```
|
|
|
|
## Generated API reference
|
|
|
|
<SdkComponentAPI :components="data.components" />
|
|
|
|
## Related APIs
|
|
|
|
- [FillSwatch](./fill-swatch)
|
|
- [ChannelSlider](./channel-slider)
|
|
- [useColorModel](../composables/use-color-model)
|