@inizioevoke/astro-core 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -17,7 +17,7 @@
     "index.ts"
   ],
   "peerDependencies": {
-    "astro": ">=6.0.0",
+    "astro": ">=5.0.0",
     "typescript": ">=5.0.0"
   },
   "devDependencies": {

package/src/components/Modal/Modal.ts

@@ -5,8 +5,11 @@ interface ModalEventCallbackItem {
   once?: boolean;
   callback: ModalEventCallback;
 }
+interface ModalEventCallbackArgs { 
+  once?: boolean 
+}
 
-type ModalEventType = 'show' | 'hide';
+type ModalEventType = 'show' | 'hide' | 'overlay';
 type ModalEventTypeCallbacks = Record<ModalEventType, Set<ModalEventCallbackItem>>;
 const callbacks = new Map<HTMLElement, ModalEventTypeCallbacks>();
 
@@ -50,7 +53,7 @@ function __showOverlay(animation: ModalAnimation) {
     overlay.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
   }
 }
-export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: { once?: boolean } = {}) {
+export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
   onEvent('show', selector, { once, callback });
 }
 
@@ -105,7 +108,7 @@ function __hide(modal: HTMLElement, animation: ModalAnimation) {
     }, animation !== 'none' ? animationDuration : 0);
   });
 }
-export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: { once?: boolean } = {}) {
+export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
   onEvent('hide', selector, { once, callback });
 }
 
@@ -120,6 +123,10 @@ export function appendOverlay(selector: string | HTMLElement) {
   }
 }
 
+export function onOverlayClick(callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
+  onEvent('overlay', overlay, { once, callback });
+}
+
 function onEvent(type: ModalEventType, selector: string | HTMLElement, callbackItem: ModalEventCallbackItem) {
   let modal = typeof selector == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(selector) ? selector : `#${selector}`) : selector;
   if (modal) {
@@ -132,15 +139,15 @@ function onEvent(type: ModalEventType, selector: string | HTMLElement, callbackI
   }
 }
 
-function triggerEventCallbacks(modal: HTMLElement, eventType: 'show' | 'hide') {
-  if (modal) {
-    const modalCallbacks = callbacks.get(modal);
-    if (modalCallbacks && modalCallbacks[eventType]) {
-      const items = [...modalCallbacks[eventType]];
+function triggerEventCallbacks(element: HTMLElement, eventType: ModalEventType) {
+  if (element) {
+    const eventCallbacks = callbacks.get(element);
+    if (eventCallbacks && eventCallbacks[eventType]) {
+      const items = [...eventCallbacks[eventType]];
       const keep: ModalEventCallbackItem[] = [];
       for (const item of items) {
         try {
-          item.callback(modal);
+          item.callback(element);
         } catch (err) {
           console.log(err);
         } finally {
@@ -149,7 +156,7 @@ function triggerEventCallbacks(modal: HTMLElement, eventType: 'show' | 'hide') {
           }
         }
       }
-      callbacks.set(modal, {...modalCallbacks, [eventType]: new Set(keep)});
+      callbacks.set(element, {...eventCallbacks, [eventType]: new Set(keep)});
     }
   }
 }
@@ -163,6 +170,7 @@ const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-ove
 })();
 overlay.addEventListener('click', () => {
   hide();
+  triggerEventCallbacks(overlay, 'overlay');
 });
 
 const animationDuration = (() => {

package/src/components/Modal/ModalOverlay.astro

@@ -1 +1,14 @@
-<div class="evo-modal-overlay"></div>
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string;
+}
+
+const {
+  class: cssClass,
+  ...rest
+} = Astro.props;
+
+---
+<div class:list={['evo-modal-overlay', cssClass]} {...rest}><slot /></div>