@wishbone-media/spark 0.1.4 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -12,12 +12,13 @@
     "@headlessui/vue": "^1.7.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/pro-regular-svg-icons": "^6.7.2",
-    "vue": "^3.5.0"
+    "pinia": "^3.0.3",
+    "vue": "^3.5.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
     "vite": "^6.3.5",
-    "vue": "^3.5.13"
+    "vue": "^3.5.16"
   },
   "packageManager": "pnpm@10.11.1",
   "scripts": {

package/src/components/SparkAppSelector.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white rounded-lg">
+    <div class="flex flex-1 flex-col">
+      <div class="divide-y divide-gray-200">
+        <div class="flex px-[22px] py-2.5 text-[12px] items-center">
+          <div>Mr Group Network</div>
+          <div class="ml-auto flex items-center">
+            <font-awesome-icon
+              :icon="Icons.farTimes"
+              class="h-[15px] w-[15px] shrink-0 text-gray-400 cursor-pointer"
+              @click="emit('close')"
+            />
+          </div>
+        </div>
+        <div
+          v-for="app in appsWithCurrent"
+          :key="app.name"
+          :class="app.current ? 'bg-gray-50' : 'hover:bg-gray-50'"
+          class="flex px-[22px] py-[15px] cursor-pointer"
+          @click="openNewTab(app)"
+        >
+          <div class="gap-y-1">
+            <div class="text-base text-gray-800 flex items-center">
+              <div class="font-medium">{{ app.name }}</div>
+              <span
+                v-if="app.current"
+                class="inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 ml-1"
+              >
+                Active
+              </span>
+            </div>
+            <div class="text-sm text-gray-500">{{ app.description }}</div>
+          </div>
+          <div class="ml-auto flex items-center">
+            <font-awesome-icon
+              :class="app.current ? 'text-gray-700' : 'text-gray-400'"
+              :icon="Icons[app.icon]"
+              class="h-5 w-5 shrink-0"
+            />
+          </div>
+        </div>
+        <div></div>
+      </div>
+      <div class="mt-auto">
+        <div class="p-6">Learn More</div>
+        <div class="bg-gray-50 p-6">Footer</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+
+const props = defineProps({
+  appItems: {
+    type: Array,
+    default() {
+      return [
+        {
+          name: '3CX',
+          description: 'VOIP Phone',
+          href: 'https://3cx.letsbolt.com.au',
+          icon: 'farLaptopMobile',
+        },
+        {
+          name: 'Buzz',
+          description: 'Communication on the go',
+          href: 'https://buzz.letsbolt.com.au',
+          icon: 'farSatelliteDish',
+        },
+        {
+          name: 'Dash',
+          description: 'Financial powerhouse',
+          href: 'https://dash.letsbolt.com.au',
+          icon: 'farScaleBalanced',
+        },
+        {
+          name: 'MAPit',
+          description: 'Geolocation everything',
+          href: 'https://mapit.letsbolt.com.au',
+          icon: 'farStreetView',
+        },
+        {
+          name: 'ProspectR',
+          description: 'Leads management',
+          href: 'https://prospectr.letsbolt.com.au',
+          icon: 'farFaceSmileRelaxed',
+        },
+        {
+          name: 'ReVuze',
+          description: 'Get Customer feedback',
+          href: 'https://revuze.letsbolt.com.au',
+          icon: 'farComments',
+        },
+      ]
+    },
+  },
+  currentApp: {
+    type: String,
+    default: 'Buzz',
+  },
+})
+
+const emit = defineEmits(['close', 'select'])
+
+const appsWithCurrent = computed(() => {
+  return props.appItems.map(app => ({
+    ...app,
+    current: app.name === props.currentApp
+  }))
+})
+
+const openNewTab = (app) => {
+  window.open(app.href, '_blank')
+
+  emit('select', app)
+}
+</script>

package/src/components/SparkBrandSelector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white rounded-lg">
+    <div class="flex flex-1 flex-col">
+      <div class="divide-y divide-gray-200">
+        <div class="flex px-[22px] py-2.5 text-[12px] items-center">
+          <div>Filter by Brand</div>
+          <div class="ml-auto flex items-center">
+            <font-awesome-icon
+              :icon="Icons.farTimes"
+              class="size-4 text-gray-400 cursor-pointer"
+              @click="emit('close')"
+            />
+          </div>
+        </div>
+        <div
+          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"
+          @click="selectBrand(brand)"
+        >
+          <div class="gap-y-1 flex">
+            <div class="flex items-center mr-4">
+              <img :src="brand.logo" :alt="`${brand.name} logo`" class="h-8 w-auto" />
+            </div>
+            <div class="ml-auto flex flex-col">
+              <div class="text-base text-gray-800 flex items-center">
+                <div class="font-medium">{{ brand.name }}</div>
+                <span
+                  v-if="brand.current"
+                  class="inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 ml-1"
+                >
+                  Current
+                </span>
+              </div>
+              <div class="text-sm text-gray-500">
+                {{ brand.current ? 'Current Brand' : 'Change to' }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div></div>
+      </div>
+      <div class="mt-auto"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useSparkBrandFilterStore } from '@/stores/brand-filter'
+import { Icons } from '@/plugins/fontawesome'
+
+const emit = defineEmits(['close', 'select'])
+
+const sparkBrandFilterStore = useSparkBrandFilterStore()
+
+const selectBrand = (brand) => {
+  emit('select', brand)
+}
+</script>

package/src/components/SparkOverlay.vue

@@ -1,40 +1,49 @@
 <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',
             ]"
           >
-            <component :is="overlayInstance.state.content" v-bind="$attrs" />
+            <!-- Bind props and event handlers dynamically -->
+            <component
+                :is="overlayInstance.state.content"
+                v-bind="{ ...$attrs, ...overlayInstance.state.props }"
+                v-on="overlayInstance.state.eventHandlers"
+            />
           </DialogPanel>
         </TransitionChild>
       </div>
@@ -54,6 +63,7 @@ defineProps({
     required: true,
     validator: (value) => ['left', 'right'].includes(value),
   },
+
   overlayInstance: {
     type: Object,
     required: true,

package/src/components/index.js

@@ -1,5 +1,7 @@
 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, SparkModal, SparkOverlay }
+export { SparkAlert, SparkAppSelector, SparkBrandSelector, SparkModal, SparkOverlay }

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

@@ -4,6 +4,8 @@ export function useSparkOverlay() {
   const state = reactive({
     isVisible: false,
     content: null,
+    props: {},
+    eventHandlers: {},
   })
 
   const toggle = () => {
@@ -12,18 +14,21 @@ export function useSparkOverlay() {
 
   const close = () => {
     state.isVisible = false
+    state.eventHandlers = {}
   }
 
   const open = () => {
     state.isVisible = true
   }
 
-  const setContent = (content) => {
+  const setContent = (content, props = {}, eventHandlers = {}) => {
     state.content = markRaw(content)
+    state.props = props
+    state.eventHandlers = eventHandlers
   }
 
-  const show = (content) => {
-    if (content) setContent(content)
+  const show = (content, props = {}, eventHandlers = {}) => {
+    if (content) setContent(content, props, eventHandlers)
     open()
   }
 
@@ -35,4 +40,4 @@ export function useSparkOverlay() {
     setContent,
     show,
   }
-}
+}

package/src/index.js

@@ -1,3 +1,4 @@
 export * from './components/index.js'
 export * from './composables/index.js'
-export * from './plugins/index.js'
+export * from './plugins/index.js'
+export * from './stores/index.js'

package/src/plugins/fontawesome.js

@@ -7,6 +7,13 @@ import {
   faCircleXmark,
   faXmark,
   faCheck,
+  faTimes,
+  faLaptopMobile,
+  faSatelliteDish,
+  faScaleBalanced,
+  faStreetView,
+  faFaceSmileRelaxed,
+  faComments,
 } from '@fortawesome/pro-regular-svg-icons'
 
 export const Icons = {
@@ -16,6 +23,13 @@ export const Icons = {
   farCircleXmark: faCircleXmark,
   farXmark: faXmark,
   farCheck: faCheck,
+  farTimes: faTimes,
+  farLaptopMobile: faLaptopMobile,
+  farSatelliteDish: faSatelliteDish,
+  farScaleBalanced: faScaleBalanced,
+  farStreetView: faStreetView,
+  farFaceSmileRelaxed: faFaceSmileRelaxed,
+  farComments: faComments,
 }
 
 export function addSparkIcons() {

package/src/stores/brand-filter.js

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { computed, reactive } from 'vue'
+
+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 useSparkBrandFilterStore = defineStore('brandFilter', () => {
+  const state = reactive({
+    brands: [
+      {
+        name: 'Mr Pest Controller',
+        logo: mrPestControllerLogo,
+        current: false,
+      },
+      {
+        name: 'Mr Gutter Cleaning',
+        logo: mrGutterCleaningLogo,
+        current: false,
+      },
+      { name: 'Mr Antenna', logo: mrAntennaLogo, current: true },
+    ],
+  })
+
+  const currentBrand = computed(() => state.brands.find((item) => item.current))
+  const allBrands = computed(() => state.brands)
+
+  const toggleBrand = (brand) => {
+    state.brands.forEach((item) => {
+      item.current = item === brand
+    })
+  }
+
+  return {
+    state,
+    currentBrand,
+    allBrands,
+    toggleBrand,
+  }
+})

package/src/stores/index.js

@@ -0,0 +1 @@
+export * from './brand-filter.js'