@wishbone-media/spark 0.13.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkOverlay.vue

@@ -3,7 +3,7 @@
     <Dialog
         :initialFocus="panelRef"
         class="relative z-200"
-        @close="overlayInstance.close"
+        @close="handleClose"
     >
       <TransitionChild
           as="template"
@@ -57,7 +57,7 @@ import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessu
 
 const panelRef = ref(null)
 
-defineProps({
+const props = defineProps({
   position: {
     type: String,
     required: true,
@@ -69,4 +69,11 @@ defineProps({
     required: true,
   },
 })
+
+const emit = defineEmits(['close'])
+
+const handleClose = () => {
+  props.overlayInstance.close()
+  emit('close')
+}
 </script>

package/src/composables/sparkOverlayService.js

@@ -7,11 +7,29 @@ class SparkOverlayService {
     }
 
     showLeft = (component, props = {}, eventHandlers = {}) => {
-        this.left.show(component, props, eventHandlers)
+        const handlers = {
+            close: () => {
+                // Call user's close handler if provided
+                eventHandlers.close?.()
+                // Then close the overlay
+                this.closeLeft()
+            },
+            ...eventHandlers,
+        }
+        this.left.show(component, props, handlers)
     }
 
     showRight = (component, props = {}, eventHandlers = {}) => {
-        this.right.show(component, props, eventHandlers)
+        const handlers = {
+            close: () => {
+                // Call user's close handler if provided
+                eventHandlers.close?.()
+                // Then close the overlay
+                this.closeRight()
+            },
+            ...eventHandlers,
+        }
+        this.right.show(component, props, handlers)
     }
 
     closeLeft = () => {

package/src/containers/SparkDefaultContainer.vue

@@ -154,12 +154,12 @@
   <spark-overlay
     position="left"
     :overlay-instance="sparkOverlayService.left"
-    @close="sparkOverlayService.closeLeft"
+    @close="emit('overlayClose', 'left')"
   />
   <spark-overlay
     position="right"
     :overlay-instance="sparkOverlayService.right"
-    @close="sparkOverlayService.closeRight"
+    @close="emit('overlayClose', 'right')"
   />
 
   <spark-modal-container />
@@ -193,6 +193,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['overlayClose'])
+
 const slots = useSlots()
 
 const sparkBrandFilterStore = useSparkBrandFilterStore()
@@ -228,7 +230,6 @@ const toggleBrandSelector = () => {
     {
       select: (brand) => {
         sparkBrandFilterStore.toggleBrand(brand)
-        sparkOverlayService.closeLeft()
       },
     },
   )