@wishbone-media/spark 0.2.0 → 0.2.1

package/package.json

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

package/src/components/SparkBrandSelector.vue

@@ -13,7 +13,7 @@
           </div>
         </div>
         <div
-          v-for="brand in brandFilterStore.allBrands"
+          v-for="brand in sparkBrandFilterStore.allBrands"
           :key="brand.name"
           :class="brand.current ? 'bg-gray-50' : 'hover:bg-gray-50'"
           class="flex px-[22px] py-[15px] cursor-pointer"
@@ -47,12 +47,12 @@
 </template>
 
 <script setup>
-import { useBrandFilterStore } from '@/stores/brand-filter'
+import { useSparkBrandFilterStore } from '@/stores/brand-filter'
 import { Icons } from '@/plugins/fontawesome'
 
 const emit = defineEmits(['close', 'select'])
 
-const brandFilterStore = useBrandFilterStore()
+const sparkBrandFilterStore = useSparkBrandFilterStore()
 
 const selectBrand = (brand) => {
   emit('select', brand)

package/src/components/SparkOverlay.vue

@@ -1,42 +1,48 @@
 <template>
   <TransitionRoot :show="overlayInstance.state.isVisible" as="template">
-    <Dialog :initialFocus="panelRef" class="relative z-200" @close="overlayInstance.close">
+    <Dialog
+        :initialFocus="panelRef"
+        class="relative z-200"
+        @close="overlayInstance.close"
+    >
       <TransitionChild
-        as="template"
-        enter="transition-opacity ease-linear duration-150"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="transition-opacity ease-linear duration-150"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
+          as="template"
+          enter="transition-opacity ease-linear duration-150"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-150"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
       >
         <div class="fixed inset-0 bg-gray-600/30" />
       </TransitionChild>
 
       <div class="fixed inset-0 flex">
         <TransitionChild
-          as="template"
-          enter="transition ease-in-out duration-150 transform"
-          :enter-from="
+            as="template"
+            enter="transition ease-in-out duration-150 transform"
+            :enter-from="
             position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
           "
-          enter-to="translate-x-0 opacity-100"
-          leave="transition ease-in-out duration-150 transform"
-          leave-from="translate-x-0 opacity-100"
-          :leave-to="
+            enter-to="translate-x-0 opacity-100"
+            leave="transition ease-in-out duration-150 transform"
+            leave-from="translate-x-0 opacity-100"
+            :leave-to="
             position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
           "
         >
           <DialogPanel
-            ref="panelRef"
-            :class="[
+              ref="panelRef"
+              :class="[
               'flex w-[400px] py-2.5',
               position === 'left' ? 'relative left-[10px]' : 'absolute right-[10px] h-full',
             ]"
           >
+            <!-- Bind props and event handlers dynamically -->
             <component
                 :is="overlayInstance.state.content"
                 v-bind="{ ...$attrs, ...overlayInstance.state.props }"
+                v-on="overlayInstance.state.eventHandlers"
             />
           </DialogPanel>
         </TransitionChild>
@@ -57,6 +63,7 @@ defineProps({
     required: true,
     validator: (value) => ['left', 'right'].includes(value),
   },
+
   overlayInstance: {
     type: Object,
     required: true,

package/src/composables/index.js

@@ -1 +1,2 @@
 export { useSparkOverlay } from './useSparkOverlay.js'
+export { sparkOverlayService } from './sparkOverlayService.js'

package/src/composables/sparkOverlayService.js

@@ -0,0 +1,31 @@
+import { useSparkOverlay } from '@/composables/useSparkOverlay'
+
+class SparkOverlayService {
+    constructor() {
+        this.left = useSparkOverlay()
+        this.right = useSparkOverlay()
+    }
+
+    showLeft = (component, props = {}, eventHandlers = {}) => {
+        this.left.show(component, props, eventHandlers)
+    }
+
+    showRight = (component, props = {}, eventHandlers = {}) => {
+        this.right.show(component, props, eventHandlers)
+    }
+
+    closeLeft = () => {
+        this.left.close()
+    }
+
+    closeRight = () => {
+        this.right.close()
+    }
+
+    closeAll = () => {
+        this.left.close()
+        this.right.close()
+    }
+}
+
+export const sparkOverlayService = new SparkOverlayService()

package/src/composables/useSparkOverlay.js

@@ -5,6 +5,7 @@ export function useSparkOverlay() {
     isVisible: false,
     content: null,
     props: {},
+    eventHandlers: {},
   })
 
   const toggle = () => {
@@ -13,19 +14,21 @@ export function useSparkOverlay() {
 
   const close = () => {
     state.isVisible = false
+    state.eventHandlers = {}
   }
 
   const open = () => {
     state.isVisible = true
   }
 
-  const setContent = (content, props = {}) => {
+  const setContent = (content, props = {}, eventHandlers = {}) => {
     state.content = markRaw(content)
     state.props = props
+    state.eventHandlers = eventHandlers
   }
 
-  const show = (content, props = {}) => {
-    if (content) setContent(content, props)
+  const show = (content, props = {}, eventHandlers = {}) => {
+    if (content) setContent(content, props, eventHandlers)
     open()
   }
 
@@ -37,4 +40,4 @@ export function useSparkOverlay() {
     setContent,
     show,
   }
-}
+}

package/src/stores/brand-filter.js

@@ -5,7 +5,7 @@ import mrPestControllerLogo from '@/assets/images/mr-pest-controller.png'
 import mrGutterCleaningLogo from '@/assets/images/mr-gutter-cleaning.png'
 import mrAntennaLogo from '@/assets/images/mr-antenna.png'
 
-export const useBrandFilterStore = defineStore('brandFilter', () => {
+export const useSparkBrandFilterStore = defineStore('brandFilter', () => {
   const state = reactive({
     brands: [
       {