Fixed #1453 - [OverlayPanel] add @show and @hide events

api-generator/components/overlaypanel.js

@@ -43,10 +43,22 @@ const OverlayPanelProps = [
     }
 ];
 
+const OverlayPanelEvents = [
+    {
+        name: "show",
+        description: "Callback to invoke before the overlay is shown."
+    },
+    {
+        name: "hide",
+        description: "Callback to invoke before the overlay is hidden."
+    },
+];
+
 module.exports = {
     overlaypanel: {
         name: "OverlayPanel",
         description: "OverlayPanel is a container component positioned as connected to its target.",
-        props: OverlayPanelProps
+        props: OverlayPanelProps,
+        events: OverlayPanelEvents
     }
 };

src/components/overlaypanel/OverlayPanel.d.ts

@@ -15,6 +15,8 @@ declare class OverlayPanel {
     toggle(event: Event): void;
     show(event: Event, target?: any): void;
     hide(): void;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
     $slots: {
         '': VNode[];
     }

src/components/overlaypanel/OverlayPanel.vue

@@ -133,6 +133,7 @@ export default {
             };
 
             OverlayEventBus.on('overlay-click', this.overlayEventListener);
+            this.$emit('show');
         },
         onLeave() {
             this.unbindOutsideClickListener();
@@ -140,6 +141,7 @@ export default {
             this.unbindResizeListener();
             OverlayEventBus.off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
+            this.$emit('hide');
         },
         onAfterLeave(el) {
             if (this.autoZIndex) {

src/views/overlaypanel/OverlayPanelDoc.vue

@@ -135,6 +135,22 @@ toggle(event) {
 			</table>
 		</div>
 
+        <h5>Events</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+                <tr>
+                    <td>show</td>
+                    <td>-</td>
+                    <td>Callback to invoke when the overlay is shown.</td>
+                </tr>
+                <tr>
+                    <td>hide</td>
+                    <td>-</td>
+                    <td>Callback to invoke when the overlay is hidden.</td>
+                </tr>
+            </table>
+        </div>
+
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 		<div class="doc-tablewrapper">