@wishbone-media/spark 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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/SparkModalContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
+    <Dialog class="relative z-50" @close="sparkModalService.hide">
+      <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <!-- Render dynamic component -->
+              <component
+                  :is="sparkModalService.state.content"
+                  v-bind="sparkModalService.state.props"
+                  v-on="sparkModalService.state.eventHandlers"
+              />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { sparkModalService } from '@/composables/sparkModalService'
+</script>

package/src/components/SparkModalDialog.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="px-4 pt-5 pb-4 sm:p-6">
+    <!-- Icon -->
+    <div v-if="iconToUse" class="mx-auto flex size-12 items-center justify-center rounded-full" :class="iconBgClass">
+      <font-awesome-icon :icon="Icons[iconToUse]" class="h-5 w-5" :class="iconTextClass" />
+    </div>
+
+    <!-- Content -->
+    <div class="text-center" :class="{ 'mt-3 sm:mt-5': iconToUse }">
+      <!-- Title -->
+      <h3 v-if="title" class="text-lg font-medium text-gray-900">
+        {{ title }}
+      </h3>
+
+      <!-- Message -->
+      <div v-if="message" :class="{ 'mt-2': title }" class="text-sm text-gray-500">
+        {{ message }}
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="mt-5 sm:mt-6" :class="buttonContainerClass">
+      <button
+          v-for="(button, index) in buttonsToShow"
+          :key="index"
+          type="button"
+          :class="getButtonClass(button, index)"
+          class="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2"
+          @click="$emit(button.event, button)"
+      >
+        {{ button.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'info',
+    validator: (value) => ['info', 'success', 'warning', 'danger'].includes(value),
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  buttons: {
+    type: Array,
+    default: () => [
+      { text: 'OK', variant: 'primary', event: 'ok' }
+    ],
+  },
+})
+
+defineEmits([
+  'ok', 'confirm', 'cancel', 'close', 'save', 'discard', 'delete',
+  'approve', 'reject', 'submit', 'reset', 'continue', 'retry',
+  'edit', 'view', 'download', 'upload', 'share', 'copy', 'input'
+])
+
+const buttonsToShow = computed(() => {
+  // Default to single OK button if no buttons provided
+  if (!props.buttons || props.buttons.length === 0) {
+    return [{ text: 'OK', variant: 'primary', event: 'ok' }]
+  }
+  return props.buttons
+})
+
+const buttonContainerClass = computed(() => {
+  const buttonCount = buttonsToShow.value.length
+  if (buttonCount === 2) {
+    return 'sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3'
+  } else if (buttonCount > 2) {
+    return 'flex flex-col gap-3'
+  }
+  return ''
+})
+
+const getButtonClass = (button, index) => {
+  const isPrimary = button.variant === 'primary'
+  const buttonCount = buttonsToShow.value.length
+
+  let baseClass = ''
+
+  // Position classes for 2-button layout
+  if (buttonCount === 2) {
+    if (isPrimary) {
+      baseClass = 'sm:col-start-2'
+    } else {
+      baseClass = 'mt-3 sm:col-start-1 sm:mt-0'
+    }
+  } else if (buttonCount > 2 && index > 0) {
+    baseClass = 'mt-3'
+  }
+
+  // Style classes
+  if (isPrimary) {
+    return `bg-primary-600 text-white hover:bg-primary-500 focus-visible:outline-primary-600 ${baseClass}`
+  } else {
+    // Secondary button style
+    return `bg-white text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 ${baseClass}`
+  }
+}
+
+const defaultIcons = {
+  info: 'farInfoCircle',
+  success: 'farCheckCircle',
+  warning: 'farExclamationTriangle',
+  danger: 'farCircleXmark',
+}
+
+const iconToUse = computed(() => props.icon || defaultIcons[props.type])
+
+const iconBgClass = computed(() => {
+  const colors = {
+    info: 'bg-blue-100',
+    success: 'bg-green-100',
+    warning: 'bg-yellow-100',
+    danger: 'bg-red-100',
+  }
+  return colors[props.type]
+})
+
+const iconTextClass = computed(() => {
+  const colors = {
+    info: 'text-blue-400',
+    success: 'text-green-400',
+    warning: 'text-yellow-400',
+    danger: 'text-red-400',
+  }
+  return colors[props.type]
+})
+</script>

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/components/index.js

@@ -1,7 +1,6 @@
-import SparkAlert from './SparkAlert.vue'
-import SparkAppSelector from './SparkAppSelector.vue'
-import SparkBrandSelector from './SparkBrandSelector.vue'
-import SparkModal from './SparkModal.vue'
-import SparkOverlay from './SparkOverlay.vue'
-
-export { SparkAlert, SparkAppSelector, SparkBrandSelector, SparkModal, SparkOverlay }
+export { default as SparkAlert } from './SparkAlert.vue'
+export { default as SparkAppSelector } from './SparkAppSelector.vue'
+export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
+export { default as SparkModalContainer } from './SparkModalContainer.vue'
+export { default as SparkModalDialog } from './SparkModalDialog.vue'
+export { default as SparkOverlay } from './SparkOverlay.vue'

package/src/composables/index.js

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

package/src/composables/sparkModalService.js

@@ -0,0 +1,26 @@
+import { reactive, markRaw } from 'vue'
+
+class SparkModalService {
+    constructor() {
+        this.state = reactive({
+            isVisible: false,
+            content: null,
+            props: {},
+            eventHandlers: {},
+        })
+    }
+
+    show = (component, props = {}, eventHandlers = {}) => {
+        this.state.content = markRaw(component)
+        this.state.props = props
+        this.state.eventHandlers = eventHandlers
+        this.state.isVisible = true
+    }
+
+    hide = () => {
+        this.state.isVisible = false
+        this.state.eventHandlers = {}
+    }
+}
+
+export const sparkModalService = new SparkModalService()

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: [
       {

package/src/components/SparkModal.vue

@@ -1,109 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="open">
-    <Dialog class="relative z-50" @close="$emit('close')">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div
-          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              :class="[
-                'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6',
-                sizeClasses,
-              ]"
-            >
-              <div>
-                <!-- Icon -->
-                <div v-if="$slots.icon">
-                  <slot name="icon" />
-                </div>
-
-                <div class="text-center sm:mt-5">
-                  <!-- Header with title -->
-                  <template v-if="$slots.title">
-                    <DialogTitle as="div" class="text-base font-semibold text-gray-900">
-                      <slot name="title" />
-                    </DialogTitle>
-                  </template>
-
-                  <!-- Main content -->
-                  <div :class="{ 'mt-2': $slots.title }">
-                    <slot />
-                  </div>
-                </div>
-              </div>
-
-              <!-- Actions/Buttons -->
-              <div
-                v-if="$slots.actions"
-                class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
-              >
-                <slot name="actions" />
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-
-const props = defineProps({
-  open: {
-    type: Boolean,
-    required: true,
-  },
-
-  size: {
-    type: String,
-    default: 'md',
-    validator: (value) => ['sm', 'md', 'lg', 'xl', '2xl'].includes(value),
-  },
-
-  icon: {
-    type: String,
-  },
-
-  iconColor: {
-    type: String,
-  },
-})
-
-defineEmits(['close'])
-
-const sizeClasses = computed(() => {
-  const sizes = {
-    sm: 'sm:max-w-sm',
-    md: 'sm:max-w-lg',
-    lg: 'sm:max-w-2xl',
-    xl: 'sm:max-w-4xl',
-    '2xl': 'sm:max-w-6xl',
-  }
-
-  return sizes[props.size]
-})
-</script>