npm i @velkin/react
import { VuColorArea } from "@velkin/react/color-area";| Prop | Type | Default | Description |
|---|---|---|---|
| showErrors | boolean | false | Shows validation after activation. |
| validationActive | boolean | false | Drives invalid styling after activation. |
| invalid | boolean | false | True when the last validation run found errors. |
| Event | Detail | Description |
|---|---|---|
| vu-input | VuColorAreaChangeDetail | Continuous while dragging or adjusting with keys. |
| vu-change | VuColorAreaChangeDetail | Commit when the pointer releases or a discrete key moves. |
| vu-invalid | CustomEvent | When validation messages are recomputed while `validationActive`. |
| Slot | Description |
|---|---|
| error | Replaces default validation message list when assigned. |
| Part | Description |
|---|---|
| base | Clickable plane (CSS gradients or canvas). |
| thumb | Picked-color thumb. |
| dots | Optional `showdots` overlay. |
| live | Live region on commit. |
| field | Column that stacks the plane and optional error. |
| error-message | Region for `slot="error"` or stacked default validation lines. |
| error-line | One default validation string when `slot="error"` is empty. |
| Name | Definition |
|---|---|
| VuColorAreaChangeDetail | |