Fixed #1719 - ColorPicker: events

primefaces · Nov 12, 2021 · fbce467 · fbce467
1 parent 6c55662
commit fbce467
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">