From fbce467721ff8ad63c1cdc03481c0fbc00328292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 12 Nov 2021 10:33:58 +0300
Subject: [PATCH] Fixed #1719 - ColorPicker: events

---
 api-generator/components/colorpicker.js     | 30 ++++++++++++++++++-
 src/components/colorpicker/ColorPicker.d.ts |  3 ++
 src/components/colorpicker/ColorPicker.vue  |  7 ++++-
 src/views/colorpicker/ColorPickerDoc.vue    | 32 +++++++++++++++++++++
 4 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/colorpicker.js b/api-generator/components/colorpicker.js
index d28d87a9b..31a4a5f40 100644
--- a/api-generator/components/colorpicker.js
+++ b/api-generator/components/colorpicker.js
@@ -67,10 +67,38 @@ const ColorPickerProps = [
     }
 ];
 
+const ColorPickerEvents = [
+    {
+        name: "change",
+        description: "Callback to invoke when a color is selected.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "event.value",
+                type: "any",
+                description: "Selected color"
+            }
+        ]
+    },
+    {
+        name: "show",
+        description: "Callback to invoke when popup is shown."
+    },
+    {
+        name: "hide",
+        description: "Callback to invoke when popup is hidden."
+    }
+];
+
 module.exports = {
     colorpicker: {
         name: "ColorPicker",
         description: "ColorPicker is an input component to select a color.",
-        props: ColorPickerProps
+        props: ColorPickerProps,
+        events: ColorPickerEvents
     }
 };
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
index 4d0017202..7845290bf 100755
--- a/src/components/colorpicker/ColorPicker.d.ts
+++ b/src/components/colorpicker/ColorPicker.d.ts
@@ -15,6 +15,9 @@ interface ColorPickerProps {
 declare class ColorPicker {
     $props: ColorPickerProps;
     $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
 }
 
 export default ColorPicker;
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 8516b47c6..9f0cea5df 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -29,7 +29,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 
 export default {
     name: 'ColorPicker',
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'change', 'show', 'hide'],
     props: {
         modelValue: {
             type: null,
@@ -141,6 +141,7 @@ export default {
             this.updateColorHandle();
             this.updateInput();
             this.updateModel();
+            this.$emit('change', {event: event, value: this.modelValue});
         },
         pickHue(event) {
             let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
@@ -155,6 +156,7 @@ export default {
             this.updateHue();
             this.updateModel();
             this.updateInput();
+            this.$emit('change', {event: event, value: this.modelValue});
         },
         updateModel() {
             switch(this.format) {
@@ -354,12 +356,15 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             }
+            
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
             this.clearRefs();
+            this.$emit('hide');
         },
         onOverlayAfterLeave(el) {
             if (this.autoZIndex) {
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index fe265ad57..24e6d5918 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -122,6 +122,38 @@ export default {
             </table>
         </div>
 
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event.originalEvent: Browser event <br >
+                            event.value: Selected color
+                        </td>
+                        <td>Callback to invoke when a color is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
         <h5>Styling</h5>
         <p>Following is the list style classed of the component.</p>
         <div class="doc-tablewrapper">