Skip to content

Commit 8d850f0

Browse files
committed
feat: add color-copy event
Add a new event `copy-color` that is fired once a copy operation succeeded. Its event data is the same as that of the `color-change` event.
1 parent e11232a commit 8d850f0

File tree

5 files changed

+71
-13
lines changed

5 files changed

+71
-13
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ Links:
4040
- [Events](#events)
4141
- [`change`](#change)
4242
- [`color-change`](#color-change)
43+
- [`color-copy`](#color-copy)
4344
- [`input`](#input)
4445
- [Theming](#theming)
4546
- [Versioning](#versioning)
@@ -462,6 +463,32 @@ In the following sections, the web component's [IDL and content attibutes](https
462463
colorPicker.addEventListener('color-change', function (event) {
463464
console.log(event.detail)
464465
})
466+
467+
colorPicker.value = 'rebeccapurple'
468+
```
469+
470+
#### `color-copy`
471+
472+
- **Description**: The `color-copy` event is fired once a copy operation succeeded.
473+
- **Type**: `CustomEvent<ColorChangeDetail>`
474+
- **Data**: Emits the same event data as [the `color-change` event](#color-change).
475+
- **Usage**:
476+
477+
HTML:
478+
```html
479+
<color-picker color="hsl(270 100% 50% / 0.8)"></color-picker>
480+
```
481+
482+
JavaScript:
483+
```js
484+
import 'yet-another-color-picker'
485+
486+
const colorPicker = document.querySelector('color-picker')
487+
colorPicker.addEventListener('color-copy', function (event) {
488+
console.log(event.detail)
489+
})
490+
491+
colorPicker.copyColor()
465492
```
466493

467494
#### `input`

dist/ColorPicker.d.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ declare class CustomFormInput extends HTMLElement {
1616
declare global {
1717
interface HTMLElementEventMap {
1818
'color-change': CustomEvent<ColorChangeDetail>;
19+
'color-copy': CustomEvent<ColorChangeDetail>;
1920
}
2021
interface HTMLElementTagNameMap {
2122
'color-picker': ColorPicker;
@@ -152,8 +153,6 @@ declare class ColorPicker extends CustomFormInput {
152153
* For example, if the active color format is HSL, the copied text will be a valid CSS color in HSL format.
153154
*
154155
* Only works in secure browsing contexts (i.e. HTTPS).
155-
*
156-
* @returns the promise returned by calling `window.navigator.clipboard.writeText`.
157156
*/
158157
copyColor(): Promise<void>;
159158
/**

0 commit comments

Comments
 (0)