a029e267c2
Report desktop update downloads through persistent determinate or indeterminate toasts while retaining native confirmation. Use a spinner during progress and cancel pending expiry when progress resumes. Standardize substantial Storybook fixtures as colocated example SFCs, preserve shared SDK documentation examples, and enforce semantic anatomy instead of shared-layer test IDs.
1.3 KiB
1.3 KiB
| title | description |
|---|---|
| FillSwatch | Binding-aware semantic preview for solid, gradient, and image fills. |
FillSwatch
FillSwatch exposes a semantic preview for a fill without imposing application styling. Its slot
provides the effective fill, preview background, category, and transparency state. The root also
publishes data-fill-type, data-fill-category, and data-transparent for styling and tests.
When nested in BindableValueRoot<Color>, a bound solid fill previews the provider's resolved color
and forwards the binding state attributes. Reading or focusing a swatch never detaches the binding.
Consumers can place a checkerboard below the slot's background value for transparent paints.
<script setup lang="ts">
import type { Fill } from '@open-pencil/scene-graph'
import { FillSwatch } from '@open-pencil/vue'
const fill: Fill = {
type: 'SOLID',
color: { r: 0.2, g: 0.5, b: 0.9, a: 0.5 },
opacity: 1,
visible: true
}
</script>
<template>
<FillSwatch :fill="fill" label="Brand fill" v-slot="swatch">
<span :style="{ background: swatch.background }" />
</FillSwatch>
</template>