Skip to content

Commit 1b64759

Browse files
gVguygVguy
committed
added change event
1 parent 41f73e7 commit 1b64759

File tree

4 files changed

+26
-17
lines changed

4 files changed

+26
-17
lines changed

‎.github/README.md‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -494,21 +494,22 @@ Notice that event data is always passed in __hsv__ format.
494494

495495
## Event names
496496

497-
| event | description | payload |
498-
|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------|
499-
| __pickEnd__ | color picking process is finished, popup will close now | |
500-
| __mounted__ | lifecycle hook, emitted from root component's mounted() | |
501-
| __beforeUnmount__ | lifecycle hook, emitted from root component's beforeUnmount() | |
502-
| __pickStart__ | color picking process is initiated, popup is opening | |
503-
| __saturationInputStart__ | saturation-brightness adjustment has begun.<br />This is only emitted when pointerdown inside saturation-brightness area is registered.<br />This will _not_ emit when text inputs are edited | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
504-
| __saturationInputEnd__ | saturation-brightness adjustment has ended.<br />This is only emitted when pointerdown inside saturation-brightness area is registered.<br />This will _not_ emit when text inputs are edited | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
505-
| __saturationInput__ | saturation-brightness is being adjusted.<br />This will emit every time saturation-brightness is changed, including text inputs | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
506-
| __hueInputStart__ | hue adjustment has begun.<br />This is only emitted when pointerdown over the hue slider is registered.<br />This will _not_ emit when hue is changed from text inputs | current state of hue<br />`{ h: 180 }` |
507-
| __hueInputEnd__ | hue adjustment has ended.<br />This is only emitted when pointerdown over the hue slider is registered.<br />This will _not_ emit when hue is changed from text inputs | current state of hue<br />`{ h: 180 }` |
508-
| __hueInput__ | hue is being adjusted.<br />This will emit every time hue is changed, including text inputs | current state of hue<br />`{ h: 180 }` |
509-
| __alphaInputStart__ | alpha adjustment has begun.<br />This is only emitted when pointerdown over the alpha slider is registered.<br />This will _not_ emit when alpha is changed from text inputs | current state of alpha<br />`{ a: 0.5 }` |
510-
| __alphaInputEnd__ | alpha adjustment has ended.<br />This is only emitted when pointerdown over the alpha slider is registered.<br />This will _not_ emit when alpha is changed from text inputs | current state of alpha<br />`{ a: 0.5 }` |
511-
| __alphaInput__ | alpha is being adjusted.<br />This will emit every time alpha is changed, including text inputs | current state of alpha<br />`{ a: 0.5 }` |
497+
| event | description | payload |
498+
|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
499+
| __pickEnd__ | color picking process is finished, popup will close now | |
500+
| __mounted__ | lifecycle hook, emitted from root component's mounted() | |
501+
| __beforeUnmount__ | lifecycle hook, emitted from root component's beforeUnmount() | |
502+
| __pickStart__ | color picking process is initiated, popup is opening | |
503+
| __saturationInputStart__ | saturation-brightness adjustment has begun.<br />This is only emitted when pointerdown inside saturation-brightness area is registered.<br />This will _not_ emit when text inputs are edited | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
504+
| __saturationInputEnd__ | saturation-brightness adjustment has ended.<br />This is only emitted when pointerup of the saturation-brightness area is registered.<br />This will _not_ emit when text inputs are edited | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
505+
| __saturationInput__ | saturation-brightness is being adjusted.<br />This will emit every time saturation-brightness is changed, including text inputs | current state of saturation & value (hsv)<br />`{ s: 0.5, v: 0.5 }` |
506+
| __hueInputStart__ | hue adjustment has begun.<br />This is only emitted when pointerdown over the hue slider is registered.<br />This will _not_ emit when hue is changed from text inputs | current state of hue<br />`{ h: 180 }` |
507+
| __hueInputEnd__ | hue adjustment has ended.<br />This is only emitted when pointerup of the hue slider is registered.<br />This will _not_ emit when hue is changed from text inputs | current state of hue<br />`{ h: 180 }` |
508+
| __hueInput__ | hue is being adjusted.<br />This will emit every time hue is changed, including text inputs | current state of hue<br />`{ h: 180 }` |
509+
| __alphaInputStart__ | alpha adjustment has begun.<br />This is only emitted when pointerdown over the alpha slider is registered.<br />This will _not_ emit when alpha is changed from text inputs | current state of alpha<br />`{ a: 0.5 }` |
510+
| __alphaInputEnd__ | alpha adjustment has ended.<br />This is only emitted when pointerup of the alpha slider is registered.<br />This will _not_ emit when alpha is changed from text inputs | current state of alpha<br />`{ a: 0.5 }` |
511+
| __alphaInput__ | alpha is being adjusted.<br />This will emit every time alpha is changed, including text inputs | current state of alpha<br />`{ a: 0.5 }` |
512+
| __change__ | the adjustment of some parameter has ended. <br />This will emit every time _any_ parameter is changed. <br />This _will_ emit when color is changed from text inputs as well, on blur | current state of all color components<br />`{ h: 180, s: 0.5, v: 0.5, a: 0.5 }` |
512513

513514
## Example
514515

‎dev/serve.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
@saturationInputStart="logEvent('saturationInputStart', $event)"
6262
@saturationInputEnd="logEvent('saturationInputEnd', $event)"
6363
@saturationInput="logEvent('saturationInput', $event)"
64+
@change="logEvent('change', $event)"
6465
ref="colorInput" />
6566
<div class="detailsSection">
6667
<div class="detailsBlock">

‎src/color-input.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
@saturationInputStart="$emit('saturationInputStart', $event)"
3030
@saturationInputEnd="$emit('saturationInputEnd', $event)"
3131
@saturationInput="$emit('saturationInput', $event)"
32+
@change="$emit('change', $event)"
3233
ref="picker" />
3334
</transition>
3435
</div>
@@ -90,7 +91,8 @@
9091
'alphaInput',
9192
'saturationInputStart',
9293
'saturationInputEnd',
93-
'saturationInput'
94+
'saturationInput',
95+
'change'
9496
],
9597
components: { ColorPicker },
9698
provide: { tinycolor },

‎src/components/color-picker.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export default {
7272
'saturationInputStart',
7373
'saturationInputEnd',
7474
'saturationInput',
75-
'ready'
75+
'ready',
76+
'change'
7677
],
7778
inject: [ 'tinycolor' ],
7879
data() {
@@ -235,6 +236,7 @@ export default {
235236
document.removeEventListener('pointerup', this.saturationPickEnd);
236237
document.removeEventListener('pointermove', this.saturationPickMove);
237238
this.emitHook('saturationInputEnd', { s: this.s, v: this.v });
239+
this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
238240
},
239241
saturationPickMove(e) {
240242
if (e.clientX >= this.saturationCanvasRect.x && e.clientX <= this.saturationCanvasRect.right) {
@@ -257,6 +259,7 @@ export default {
257259
document.removeEventListener('pointerup', this.huePickEnd);
258260
document.removeEventListener('pointermove', this.huePickMove);
259261
this.emitHook('hueInputEnd', { h: this.h });
262+
this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
260263
},
261264
huePickMove(e) {
262265
if (e.clientX >= this.hueCanvasRect.x && e.clientX <= this.hueCanvasRect.right) {
@@ -275,6 +278,7 @@ export default {
275278
document.removeEventListener('pointerup', this.alphaPickEnd);
276279
document.removeEventListener('pointermove', this.alphaPickMove);
277280
this.emitHook('alphaInputEnd', { a: this.a });
281+
this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
278282
},
279283
alphaPickMove(e) {
280284
if (e.clientX >= this.alphaCanvasRect.x && e.clientX <= this.alphaCanvasRect.right) {
@@ -384,6 +388,7 @@ export default {
384388
// actually blurred, not just focused another
385389
this.textInputsFreeze = {};
386390
this.textInputActive = null;
391+
this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
387392
}
388393
}, 0);
389394
},

0 commit comments

Comments
 (0)