fix(modal): fix modal events

fixes: #70
CheeseGrinder · Dec 14, 2024 · 95fe769 · 95fe769
1 parent 5c4cebb
commit 95fe769
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 17 deletions.
diff --git a/packages/core/api.txt b/packages/core/api.txt
@@ -260,8 +260,8 @@ pop-modal,prop,showBackdrop,boolean,undefined,false,true
 pop-modal,prop,trigger,string,undefined,false,false
 pop-modal,method,dismiss,dismiss(data: any) => Promise<boolean>
 pop-modal,method,present,present() => Promise<boolean>
-pop-modal,event,didDismiss,void,true
-pop-modal,event,didPresent,void,true
+pop-modal,event,dismiss,void,true
+pop-modal,event,present,void,true
 pop-modal,part,actions
 pop-modal,part,backdrop
 pop-modal,part,content

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1742,8 +1742,8 @@ declare global {
         new (): HTMLPopMaskElement;
     };
     interface HTMLPopModalElementEventMap {
-        "didPresent": void;
-        "didDismiss": void;
+        "present": void;
+        "dismiss": void;
     }
     /**
      * Modal is used to show a dialog or a box when you click on the trigger element.
@@ -2744,11 +2744,11 @@ declare namespace LocalJSX {
         /**
           * Emitted after the modal has dismissed.
          */
-        "onDidDismiss"?: (event: PopModalCustomEvent<void>) => void;
+        "onDismiss"?: (event: PopModalCustomEvent<void>) => void;
         /**
           * Emitted after the modal has presented.
          */
-        "onDidPresent"?: (event: PopModalCustomEvent<void>) => void;
+        "onPresent"?: (event: PopModalCustomEvent<void>) => void;
         /**
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `open` will automatically be set back to `false` when the modal dismisses.
           * @config 

diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss
@@ -13,6 +13,7 @@
   --color: #{theme.use_color("neutral.content")};
 
   display: grid;
+  place-content: center;
 
   position: relative;
   aspect-ratio: 1;

diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
@@ -102,19 +102,19 @@ export class Modal implements ComponentInterface, OverlayInterface {
     if (isOpen) {
       this.present();
     } else {
-      this.dismiss(null);
+      this.dismiss('close');
     }
   }
 
   /**
    * Emitted after the modal has presented.
    */
-  @Event() didPresent: EventEmitter<void>;
+  @Event({ eventName: 'present' }) didPresent: EventEmitter<void>;
 
   /**
    * Emitted after the modal has dismissed.
    */
-  @Event() didDismiss: EventEmitter<void>;
+  @Event({ eventName: 'dismiss' }) didDismiss: EventEmitter<void>;
 
   connectedCallback(): void {
     const { trigger } = this;
@@ -162,6 +162,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
 
     this.dialog.showModal();
+    this.didPresent.emit();
     return true;
   }
 
@@ -177,6 +178,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     if (!open) return false;
 
     this.dialog.close(data);
+    this.didDismiss.emit();
     return true;
   }
 

diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md
@@ -22,10 +22,10 @@ Modal is used to show a dialog or a box when you click on the trigger element.
 
 ## Events
 
-| Event        | Description                            | Type                |
-| ------------ | -------------------------------------- | ------------------- |
-| `didDismiss` | Emitted after the modal has dismissed. | `CustomEvent<void>` |
-| `didPresent` | Emitted after the modal has presented. | `CustomEvent<void>` |
+| Event     | Description                            | Type                |
+| --------- | -------------------------------------- | ------------------- |
+| `dismiss` | Emitted after the modal has dismissed. | `CustomEvent<void>` |
+| `present` | Emitted after the modal has presented. | `CustomEvent<void>` |
 
 
 ## Methods

diff --git a/packages/core/src/components/modal/tests/basic/index.html b/packages/core/src/components/modal/tests/basic/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dropdown | Poppy-ui</title>
+  <link rel="stylesheet" href="/dist/poppy/poppy.css">
+  <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+  <script nomodule src="/dist/poppy/poppy.js"></script>
+  <style>
+    main {
+      width: 100vw;
+      height: 100dvh;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding: 1rem;
+
+      background-color: var(--base-300);
+    }
+
+    section {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: .35rem;
+    }
+
+    div {
+      display: flex;
+      justify-content: center;
+      gap: .5rem;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+    <section>
+      <h2>Dropdown - basic</h2>
+      <div>
+        <pop-button id="default-btn">default</pop-button>
+        <pop-modal id="default" trigger="default-btn">
+          basic
+          <pop-button slot="actions" class="close">close</pop-button>
+        </pop-modal>
+      </div>
+    </section>
+    <section>
+      <h2>Dropdown - Show backdrop</h2>
+      <div>
+        <pop-button id="show-backdrop-btn">show-backdrop</pop-button>
+        <pop-modal id="show-backdrop" trigger="show-backdrop-btn" show-backdrop>
+          show backdrop
+          <pop-button slot="actions" class="close">close</pop-button>
+        </pop-modal>
+      </div>
+    </section>
+    <section>
+      <h2>Dropdown - Backdrop</h2>
+      <div>
+        <pop-button id="backdrop-dismiss-btn">backdrop-dismiss</pop-button>
+        <pop-modal id="backdrop-dismiss" trigger="backdrop-dismiss-btn" backdrop-dismiss>
+          backdrop dismiss
+          <pop-button slot="actions" class="close">close</pop-button>
+        </pop-modal>
+      </div>
+    </section>
+    <section>
+      <h2>Dropdown - Open</h2>
+      <div>
+        <pop-button id="open-btn">open</pop-button>
+        <pop-modal id="open" trigger="open-btn" open>
+          Open by default
+          <pop-button slot="actions" class="close">close</pop-button>
+        </pop-modal>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    document.querySelectorAll('.close').forEach(btn => {
+      btn.addEventListener('click', () => {
+        btn.parentElement.dismiss();
+      });
+    });
+
+    document.querySelectorAll('pop-modal').forEach(modal => {
+      modal.addEventListener('present', () => {
+        console.log('present', modal.id)
+      });
+      modal.addEventListener('dismiss', () => {
+        console.log('dismiss', modal.id)
+      });
+    });
+  </script>
+</body>
+
+</html>
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -494,8 +494,8 @@ export const PopModal = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.Po
   'showBackdrop',
   'backdropDismiss',
   'open',
-  'didPresent',
-  'didDismiss'
+  'present',
+  'dismiss'
 ]) : defineStencilSSRComponent({
   tagName: 'pop-modal',
   hydrateModule: import('@poppy-ui/core/hydrate'),
@@ -505,8 +505,8 @@ export const PopModal = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.Po
     'showBackdrop': [Boolean, "show-backdrop"],
     'backdropDismiss': [Boolean, "backdrop-dismiss"],
     'open': [Boolean, "open"],
-    'onDidPresent': [Function],
-    'onDidDismiss': [Function]
+    'onPresent': [Function],
+    'onDismiss': [Function]
   }
 });