@sanity/color-input 3.0.1 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +38 -9
- package/lib/{src/index.d.ts → index.d.ts} +2 -0
- package/lib/index.esm.js +1714 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1730 -1
- package/lib/index.js.map +1 -1
- package/package.json +31 -26
- package/src/ColorInput.tsx +3 -1
- package/src/ColorList.tsx +67 -0
- package/src/ColorPicker.tsx +8 -5
- package/src/ColorPickerFields.tsx +2 -2
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -10,11 +10,12 @@ Color input plugin for [Sanity](https://sanity.io/) that stores selected colors
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
## Installation
|
|
13
|
+
|
|
13
14
|
```
|
|
14
15
|
npm install --save @sanity/color-input
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
or
|
|
18
|
+
or
|
|
18
19
|
|
|
19
20
|
```
|
|
20
21
|
yarn add @sanity/color-input
|
|
@@ -25,18 +26,14 @@ yarn add @sanity/color-input
|
|
|
25
26
|
Add it as a plugin in sanity.config.ts (or .js):
|
|
26
27
|
|
|
27
28
|
```js
|
|
28
|
-
import {
|
|
29
|
+
import {colorInput} from '@sanity/color-input'
|
|
29
30
|
|
|
30
31
|
export default defineConfig({
|
|
31
32
|
// ...
|
|
32
|
-
plugins: [
|
|
33
|
-
colorInput(),
|
|
34
|
-
]
|
|
33
|
+
plugins: [colorInput()],
|
|
35
34
|
})
|
|
36
35
|
```
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
|
|
40
37
|
Now you can use the `color` type in your schema types:
|
|
41
38
|
|
|
42
39
|
```js
|
|
@@ -47,14 +44,16 @@ Now you can use the `color` type in your schema types:
|
|
|
47
44
|
{
|
|
48
45
|
name: 'favoriteColor',
|
|
49
46
|
title: 'Favorite color',
|
|
50
|
-
type: 'color'
|
|
51
|
-
}
|
|
47
|
+
type: 'color',
|
|
48
|
+
},
|
|
52
49
|
]
|
|
53
50
|
}
|
|
54
51
|
```
|
|
55
52
|
|
|
56
53
|
## Options
|
|
57
54
|
|
|
55
|
+
### Disable alpha
|
|
56
|
+
|
|
58
57
|
To disable the alpha option, set `disableAlpha` to `true`:
|
|
59
58
|
|
|
60
59
|
```js
|
|
@@ -73,6 +72,36 @@ Which will render accordingly:
|
|
|
73
72
|
|
|
74
73
|
|
|
75
74
|
|
|
75
|
+
### Color list
|
|
76
|
+
|
|
77
|
+
To add list of predefined selectable color swatches for the user to choose from use `colorList`.
|
|
78
|
+
This uses the `react-color` under the hood https://casesandberg.github.io/react-color/#api-color
|
|
79
|
+
|
|
80
|
+
```js
|
|
81
|
+
// ...fields...
|
|
82
|
+
{
|
|
83
|
+
name: 'favoriteColor',
|
|
84
|
+
title: 'Color with list',
|
|
85
|
+
type: 'color',
|
|
86
|
+
options: {
|
|
87
|
+
colorList: [
|
|
88
|
+
'#FF6900',
|
|
89
|
+
{ hex: '#FCB900' },
|
|
90
|
+
{ r: 123, g: 220, b: 181 },
|
|
91
|
+
{ r: 0, g: 208, b: 132, a: 0.5 },
|
|
92
|
+
{ h: 203, s: 95, l: 77, a: 1 },
|
|
93
|
+
{ h: 202, s: 95, l: 46, a: 0.5 },
|
|
94
|
+
{ h: 345, s: 43, v: 97 },
|
|
95
|
+
{ h: 344, s: 91, v: 92, a: 0.5 },
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Which will render accordingly:
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
76
105
|
## Data model
|
|
77
106
|
|
|
78
107
|
```js
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
|
+
import {Color} from 'react-color'
|
|
3
4
|
import {HSLColor} from 'react-color'
|
|
4
5
|
import {HSVColor} from 'react-color'
|
|
5
6
|
import {ObjectDefinition} from 'sanity'
|
|
@@ -44,6 +45,7 @@ export declare type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaTy
|
|
|
44
45
|
|
|
45
46
|
export declare interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
|
|
46
47
|
disableAlpha?: boolean
|
|
48
|
+
colorList?: Array<Color>
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
export declare type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
|