Fixed #3733 - OverlayPanel: Backport events to v2.x

src/components/overlaypanel/OverlayPanel.d.ts

@@ -1,7 +1,7 @@
 import Vue, { VNode } from 'vue';
 
 declare class OverlayPanel extends Vue {
-    ismissable?: boolean;
+    dismissable?: boolean;
     showCloseIcon?: boolean;
     appendTo?: string;
     baseZIndex?: number;
@@ -10,6 +10,8 @@ declare class OverlayPanel extends Vue {
     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

@@ -95,11 +95,13 @@ export default {
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
+            this.$emit('show');
         },
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
+            this.$emit('hide');
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.$refs.container, this.target);

src/views/overlaypanel/OverlayPanelDoc.vue

@@ -84,6 +84,31 @@ toggle(event) {
 					</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>show</td>
+                                <td>-</td>
+                                <td>Callback to invoke when overlay panel is shown.</td>
+                            </tr>
+                            <tr>
+                                <td>hide</td>
+                                <td>-</td>
+                                <td>Callback to invoke when overlay panel is hidden.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
 				<h5>Methods</h5>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">