pretty-color-picker 0.1.1 → 0.1.3
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/README.md +7 -3
- package/dist/index.d.ts +5 -0
- package/dist/pretty-color-picker.js +860 -843
- package/dist/pretty-color-picker.umd.cjs +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,11 +10,11 @@ The design and interactions are inspired by [DialKit](https://joshpuckett.me/dia
|
|
|
10
10
|
|
|
11
11
|
## Features
|
|
12
12
|
|
|
13
|
-
Saturation × value color plane with hue and alpha sliders, format tabs (Hex / RGB / HSL / OKLCH), Last Used history, label scrubbing, **popover** mode (anchored to a trigger), draggable panel header, light / dark / system themes, Shadow DOM.
|
|
13
|
+
Saturation × value color plane with hue and alpha sliders, format tabs (Hex / RGB / HSL / OKLCH), Last Used history, field label scrubbing, **popover** mode (anchored to a trigger), draggable panel header, customizable panel title, light / dark / system themes, Shadow DOM.
|
|
14
14
|
|
|
15
15
|
## Install
|
|
16
16
|
|
|
17
|
-
Published on npm as [`pretty-color-picker`](https://www.npmjs.com/package/pretty-color-picker) (v0.1.
|
|
17
|
+
Published on npm as [`pretty-color-picker`](https://www.npmjs.com/package/pretty-color-picker) (v0.1.3).
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
20
|
npm install pretty-color-picker
|
|
@@ -29,6 +29,9 @@ import 'pretty-color-picker'
|
|
|
29
29
|
```html
|
|
30
30
|
<pretty-color-picker value="#6366f1" theme="system" header-action="close"></pretty-color-picker>
|
|
31
31
|
|
|
32
|
+
<!-- Custom panel title -->
|
|
33
|
+
<pretty-color-picker value="#6366f1" label="Brand color"></pretty-color-picker>
|
|
34
|
+
|
|
32
35
|
<!-- Popover anchored to a trigger (click outside or Escape to close) -->
|
|
33
36
|
<button type="button" id="color-btn">Pick color</button>
|
|
34
37
|
<pretty-color-picker
|
|
@@ -49,6 +52,7 @@ import 'pretty-color-picker'
|
|
|
49
52
|
| Attribute | Values | Description |
|
|
50
53
|
| --------------- | --------------------------- | ------------------------------------------------ |
|
|
51
54
|
| `value` | CSS color | Initial color |
|
|
55
|
+
| `label` | string | Panel header title (default: `Pretty Color Picker`; `label=""` hides it) |
|
|
52
56
|
| `theme` | `light` \| `dark` \| `system` | Chrome theme |
|
|
53
57
|
| `header-action` | `close` \| `theme` \| `none` | Close button, theme toggle, or no header button |
|
|
54
58
|
| `mode` | `inline` \| `popover` | `popover` = floating panel anchored to `anchor` |
|
|
@@ -60,7 +64,7 @@ import 'pretty-color-picker'
|
|
|
60
64
|
|
|
61
65
|
**Events:** `change` (`detail.color`, `detail.css`, `detail.hex`) fires while dragging sliders or scrubbing labels; field inputs commit on Enter/blur. Not fired on mount. `close` when the panel closes (`header-action="close"` or popover dismiss). `themechange` when the user clicks the built-in theme toggle (`header-action="theme"`).
|
|
62
66
|
|
|
63
|
-
**API:** `picker.value`, `picker.color` (OKLCH), `picker.theme`, `picker.headerAction`, `picker.mode`, `picker.anchor`, `picker.open`, `picker.show()`, `picker.hide()`, `picker.toggle()`, `picker.movable`, `picker.history`.
|
|
67
|
+
**API:** `picker.value`, `picker.color` (OKLCH), `picker.label`, `picker.theme`, `picker.headerAction`, `picker.mode`, `picker.anchor`, `picker.open`, `picker.show()`, `picker.hide()`, `picker.toggle()`, `picker.movable`, `picker.history`.
|
|
64
68
|
|
|
65
69
|
TypeScript types exported from `pretty-color-picker`.
|
|
66
70
|
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ export declare type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
|
|
|
8
8
|
|
|
9
9
|
export declare const DEFAULT_COLOR: OklchColor;
|
|
10
10
|
|
|
11
|
+
export declare const DEFAULT_PICKER_LABEL = "Pretty Color Picker";
|
|
12
|
+
|
|
11
13
|
export declare interface FormatField {
|
|
12
14
|
key: string;
|
|
13
15
|
label: string;
|
|
@@ -61,6 +63,9 @@ export declare class PrettyColorPicker extends HTMLElement {
|
|
|
61
63
|
set theme(value: PickerTheme);
|
|
62
64
|
get headerAction(): PickerHeaderAction;
|
|
63
65
|
set headerAction(value: PickerHeaderAction);
|
|
66
|
+
/** Panel header title. Default `Pretty Color Picker`. Set `label=""` to hide. */
|
|
67
|
+
get label(): string;
|
|
68
|
+
set label(value: string);
|
|
64
69
|
get movable(): boolean;
|
|
65
70
|
set movable(value: boolean);
|
|
66
71
|
/** `inline` (default) or `popover` for a floating panel anchored to `anchor`. */
|