feat(drawer): add events

packages/core/api.txt

@@ -107,6 +107,8 @@ pop-drawer,prop,triggerAction,"click" | "context-menu" | "hover",undefined,false
 pop-drawer,method,dismiss,dismiss() => Promise<boolean>
 pop-drawer,method,present,present() => Promise<boolean>
 pop-drawer,method,toggle,toggle() => Promise<void>
+pop-drawer,event,popDidDismiss,void,true
+pop-drawer,event,popDidPresent,void,true
 pop-drawer,css-prop,--background
 pop-drawer,css-prop,--background-backdrop
 pop-drawer,css-prop,--color

packages/core/src/components.d.ts

@@ -1367,6 +1367,10 @@ export interface PopCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPopCheckboxElement;
 }
+export interface PopDrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPopDrawerElement;
+}
 export interface PopDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPopDropdownElement;
@@ -1555,10 +1559,22 @@ declare global {
         prototype: HTMLPopDividerElement;
         new (): HTMLPopDividerElement;
     };
+    interface HTMLPopDrawerElementEventMap {
+        "popDidPresent": void;
+        "popDidDismiss": void;
+    }
     /**
      * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
      */
     interface HTMLPopDrawerElement extends Components.PopDrawer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPopDrawerElementEventMap>(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent<HTMLPopDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPopDrawerElementEventMap>(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent<HTMLPopDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPopDrawerElement: {
         prototype: HTMLPopDrawerElement;
@@ -2246,6 +2262,14 @@ declare namespace LocalJSX {
      * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
      */
     interface PopDrawer {
+        /**
+          * Emitted when the drawer has been opened.
+         */
+        "onPopDidDismiss"?: (event: PopDrawerCustomEvent<void>) => void;
+        /**
+          * Emitted when the drawer has been opened.
+         */
+        "onPopDidPresent"?: (event: PopDrawerCustomEvent<void>) => void;
         /**
           * Forces the drawer to be open
           * @config 

packages/core/src/components/drawer/drawer.tsx

@@ -2,7 +2,18 @@
 import { isRTL } from '#utils/dir';
 import type { OverlayInterface } from '#utils/overlay';
 import { type TriggerAction, TriggerController } from '#utils/trigger';
-import { Component, type ComponentInterface, Element, Host, Method, Prop, Watch, h } from '@stencil/core';
+import {
+  Component,
+  type ComponentInterface,
+  Element,
+  Event,
+  type EventEmitter,
+  Host,
+  Method,
+  Prop,
+  Watch,
+  h,
+} from '@stencil/core';
 import type { DrawerSide } from './drawer.type';
 
 /**
@@ -73,6 +84,23 @@
    * @default false
    */
   @Prop({ reflect: true, mutable: true }) open?: boolean;
+  @Watch('open') onOpenChange(isOpen: boolean): void {
+    if (isOpen) {
+      this.popDidPresent.emit();
+      return;
+    }
+    this.popDidDismiss.emit();
+  }
+
+  /**
+   * Emitted when the drawer has been opened.
+   */
+  @Event() popDidPresent: EventEmitter<void>;
+
+  /**
+   * Emitted when the drawer has been opened.
+   */
+  @Event() popDidDismiss: EventEmitter<void>;
 
   connectedCallback(): void {
     const { trigger } = this;
@@ -130,11 +158,11 @@
         </div>
 
         <aside class="drawer-side">
           <div
             part="backdrop"
             class="drawer-backdrop"
             onClick={this.onClick}
           />
           <div
             part="side"
             class="drawer-side-inner"

packages/core/src/components/drawer/readme.md

@@ -18,6 +18,14 @@ Drawer is a grid layout that can show/hide a sidebar on the left or right side o
 | `triggerAction` | `trigger-action` | Describes what kind of interaction with the trigger that should<br> cause the sidebar to open. Does not apply when the `trigger` property is `undefined`.<br> - `"click"`: the sidebar will be presented when the trigger is left clicked.<br> - `"hover"`: the sidebar will be presented when a pointer hovers over the trigger.<br> - `"context-menu"`: the sidebar will be presented when the trigger is right<br> clicked on desktop and long pressed on mobile. This will also prevent your<br> device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `"click"`   |
 
 
+## Events
+
+| Event           | Description                              | Type                |
+| --------------- | ---------------------------------------- | ------------------- |
+| `popDidDismiss` | Emitted when the drawer has been opened. | `CustomEvent<void>` |
+| `popDidPresent` | Emitted when the drawer has been opened. | `CustomEvent<void>` |
+
+
 ## Methods
 
 ### `dismiss() => Promise<boolean>`

packages/vue/src/proxies.ts

@@ -132,7 +132,9 @@ export const PopDrawer = /*@__PURE__*/ defineContainer<JSX.PopDrawer>('pop-drawe
   'trigger',
   'triggerAction',
   'side',
-  'open'
+  'open',
+  'popDidPresent',
+  'popDidDismiss'
 ]);