@wishbone-media/spark 0.12.1 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.12.1",
+  "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

@@ -3,8 +3,8 @@
     <div class="flex grow m-2.5 p-[10px] rounded-lg">
       <nav class="flex flex-1 flex-col">
         <ul class="flex flex-1 flex-col gap-y-7" role="list">
-          <li>
-            <ul role="list">
+          <li class="flex flex-1 flex-col">
+            <ul role="list" class="flex flex-1 flex-col">
               <li class="flex items-center pb-8">
                 <a
                   class="grid w-[40px] h-[40px] place-items-center rounded-md bg-primary-600 text-white text-[13px] cursor-pointer"
@@ -24,6 +24,7 @@
                 <li
                   :class="{
                     'mt-[10px]': item.children,
+                    'mt-auto': item.footerSection,
                   }"
                 >
                   <a
@@ -153,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 />
@@ -192,6 +193,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['overlayClose'])
+
 const slots = useSlots()
 
 const sparkBrandFilterStore = useSparkBrandFilterStore()
@@ -227,7 +230,6 @@ const toggleBrandSelector = () => {
     {
       select: (brand) => {
         sparkBrandFilterStore.toggleBrand(brand)
-        sparkOverlayService.closeLeft()
       },
     },
   )