-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.d.ts
83 lines (68 loc) · 3.11 KB
/
index.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { DefineComponent, ComponentOptionsMixin } from 'vue';
export type ColorPickerProps = {
/**
* A number between 0-359. Around 0º/360º are reds. 120º is where greens are and 240º are blues. Default: 0
*/
hue?: number;
/**
* A number between 0-100. The larger the percentage, the more "colorful" this color is. 0% is completely desaturated (grayscale). 100% is fully saturated (full color). Default: 100
*/
saturation?: number;
/**
* A number between 0-100. 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. Default: 50
*/
luminosity?: number;
/**
* A number between 0-1. Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent. Default: 1
*/
alpha?: number;
/**
* A boolean to disable UI interactions. When :disabled="true" is used the color picker is rendered with a dimmer color to indicate that the field is not available for use.
*/
disabled?: boolean;
/**
* Amount of degrees to rotate the picker with keyboard and/or wheel. Default: 1
*/
step?: number;
/**
* The mode of the picker. By default it will close/open when the color well is clicked. Use variant="persistent" to prevent collapsing/closing and to keep the widget always open. Default: 'collapsible'
*/
variant?: 'collapsible' | 'persistent';
/**
* Hides the palette initially. Using variant="persistent" and :initially-collapsed="true" at the same time is not supported. Default: false
*/
initiallyCollapsed?: boolean;
/**
* Use wheel (scroll) event to rotate. By default it's off to keep things simple. Add :mouse-scroll="true" to allow the user to change the color by scrolling with mouse/trackpad. Default: false
*/
mouseScroll?: boolean;
/**
* Defines a string value that labels the color well (middle selector). Default: color well
*/
ariaLabelColorWell?: string;
};
export type ColorPickerEmits = {
/**
* Called every time the color updates. This could be a touchstart/mousedown event, when rotating the knob, keyboard shortcuts like ↑, and scrolling if enabled. It's also the glue between the color picker component and the outside world. Use this to update the hue prop.
*/
input: (hue: number) => void;
/**
* Called every time the color changes, but unlike onInput this is not called while rotating the knob. onChange is a less noisy version of `@input` which is useful if you want to react to knob rotation stop for example or to use the <ColorPicker> as an uncontrolled component.
*/
change: (hue: number) => void;
/**
* Called when the user dismisses the color picker (i.e. interacting with the middle color well). Can be used as a secondary confirmation step from the user that this is the color value to be saved for example.
*/
select: (hue: number) => void;
};
declare const ColorPicker: DefineComponent<
ColorPickerProps,
{},
{},
{},
{},
ComponentOptionsMixin,
ComponentOptionsMixin,
ColorPickerEmits
>;
export default ColorPicker;