From 0d8596e408ea297aaa10ad456ad752499ed4264c Mon Sep 17 00:00:00 2001 From: Sukaato Date: Wed, 28 Aug 2024 13:19:34 +0200 Subject: [PATCH] feat(drawer): add events Add popDidPresent and popDidDismiss event fixes: #18 --- packages/core/api.txt | 2 ++ packages/core/src/components.d.ts | 24 +++++++++++++++ .../core/src/components/drawer/drawer.tsx | 30 ++++++++++++++++++- packages/core/src/components/drawer/readme.md | 8 +++++ packages/vue/src/proxies.ts | 4 ++- 5 files changed, 66 insertions(+), 2 deletions(-) diff --git a/packages/core/api.txt b/packages/core/api.txt index b7409bf..e5568d5 100644 --- a/packages/core/api.txt +++ b/packages/core/api.txt @@ -107,6 +107,8 @@ pop-drawer,prop,triggerAction,"click" | "context-menu" | "hover",undefined,false pop-drawer,method,dismiss,dismiss() => Promise pop-drawer,method,present,present() => Promise pop-drawer,method,toggle,toggle() => Promise +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 diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 0af46cc..abc6c0e 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1367,6 +1367,10 @@ export interface PopCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLPopCheckboxElement; } +export interface PopDrawerCustomEvent extends CustomEvent { + detail: T; + target: HTMLPopDrawerElement; +} export interface PopDropdownCustomEvent extends CustomEvent { 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(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(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; + /** + * Emitted when the drawer has been opened. + */ + "onPopDidPresent"?: (event: PopDrawerCustomEvent) => void; /** * Forces the drawer to be open * @config diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index 8f17238..09fe03c 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -2,7 +2,18 @@ import { componentConfig } from '#config'; 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 @@ export class Drawer implements ComponentInterface, OverlayInterface { * @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; + + /** + * Emitted when the drawer has been opened. + */ + @Event() popDidDismiss: EventEmitter; connectedCallback(): void { const { trigger } = this; diff --git a/packages/core/src/components/drawer/readme.md b/packages/core/src/components/drawer/readme.md index 300daf2..347dbb2 100644 --- a/packages/core/src/components/drawer/readme.md +++ b/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
cause the sidebar to open. Does not apply when the `trigger` property is `undefined`.
- `"click"`: the sidebar will be presented when the trigger is left clicked.
- `"hover"`: the sidebar will be presented when a pointer hovers over the trigger.
- `"context-menu"`: the sidebar will be presented when the trigger is right
clicked on desktop and long pressed on mobile. This will also prevent your
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` | +| `popDidPresent` | Emitted when the drawer has been opened. | `CustomEvent` | + + ## Methods ### `dismiss() => Promise` diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index c66813d..b038e50 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -132,7 +132,9 @@ export const PopDrawer = /*@__PURE__*/ defineContainer('pop-drawe 'trigger', 'triggerAction', 'side', - 'open' + 'open', + 'popDidPresent', + 'popDidDismiss' ]);