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
1.3 KiB
1.3 KiB
| title | description |
|---|---|
| FillRoot | Headless fill category state and conversion actions. |
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.
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.
<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>