@wishbone-media/spark 0.11.0 → 0.12.0

package/package.json

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

package/src/components/SparkAppSelector.vue

@@ -12,12 +12,14 @@
             />
           </div>
         </div>
-        <div
+        <a
           v-for="app in appsWithCurrent"
           :key="app.name"
+          :href="app.href"
+          target="_blank"
           :class="app.current ? 'bg-gray-50' : 'hover:bg-gray-50'"
           class="flex px-[22px] py-[15px] cursor-pointer"
-          @click="openNewTab(app)"
+          @click="app.current ? $event.preventDefault() : handleAppClick(app, $event)"
         >
           <div class="gap-y-1">
             <div class="text-base text-gray-800 flex items-center">
@@ -38,12 +40,21 @@
               class="h-5 w-5 shrink-0"
             />
           </div>
-        </div>
+        </a>
         <div></div>
       </div>
       <div class="mt-auto">
-        <div class="p-6">Learn More</div>
-        <div class="bg-gray-50 p-6">Footer</div>
+        <div v-if="$slots.bottom || bottomSlot" class="p-6">
+          <slot name="bottom">
+            <component v-if="bottomSlot" :is="bottomSlot" />
+          </slot>
+        </div>
+
+        <div v-if="$slots.footer || footerSlot" class="bg-gray-50 p-6">
+          <slot name="footer">
+            <component v-if="footerSlot" :is="footerSlot" />
+          </slot>
+        </div>
       </div>
     </div>
   </div>
@@ -52,69 +63,34 @@
 <script setup>
 import { computed } from 'vue'
 import { Icons } from '@/plugins/fontawesome'
+import { useSparkAppSelectorStore } from '@/stores/app-selector'
+import { useSparkAppStore } from '@/stores/app'
 
 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',
-        },
-      ]
-    },
+  bottomSlot: {
+    type: [Object, Function],
+    default: null,
   },
-  currentApp: {
-    type: String,
-    default: 'Buzz',
+  footerSlot: {
+    type: [Object, Function],
+    default: null,
   },
 })
 
 const emit = defineEmits(['close', 'select'])
 
+const appSelectorStore = useSparkAppSelectorStore()
+const appStore = useSparkAppStore()
+
 const appsWithCurrent = computed(() => {
-  return props.appItems.map(app => ({
+  const currentAppName = appStore.state.app
+  return appSelectorStore.state.apps.map(app => ({
     ...app,
-    current: app.name === props.currentApp
+    current: currentAppName && app.name.toLowerCase() === currentAppName.toLowerCase()
   }))
 })
 
-const openNewTab = (app) => {
-  window.open(app.href, '_blank')
-
+const handleAppClick = (app, event) => {
   emit('select', app)
 }
 </script>

package/src/containers/SparkDefaultContainer.vue

@@ -10,7 +10,7 @@
                   class="grid w-[40px] h-[40px] place-items-center rounded-md bg-primary-600 text-white text-[13px] cursor-pointer"
                   @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
                 >
-                  <font-awesome-icon :icon="Icons[appStore.state.icon]" class="size-5" />
+                  <font-awesome-icon :icon="Icons[appIcon]" class="size-5" />
                 </a>
                 <a
                   @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
@@ -165,11 +165,12 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, h, useSlots } from 'vue'
 import {
   SparkOverlay,
   SparkBrandSelector,
   useSparkBrandFilterStore,
+  useSparkAppSelectorStore,
   SparkAppSelector,
   sparkOverlayService,
   SparkModalContainer,
@@ -185,14 +186,38 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  appSelectorSlots: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 
+const slots = useSlots()
+
 const sparkBrandFilterStore = useSparkBrandFilterStore()
+const sparkAppSelectorStore = useSparkAppSelectorStore()
+
+const appIcon = computed(() => {
+  return sparkAppSelectorStore.getAppIcon(props.appStore.state.app)
+})
 
 const toggleAppSelector = () => {
-  sparkOverlayService.showRight(SparkAppSelector, {
-    currentApp: props.appStore.state.app,
-  })
+  // Create component wrappers for slots if they exist
+  const slotProps = {}
+
+  if (slots['app-selector-bottom']) {
+    slotProps.bottomSlot = () => h('div', {}, slots['app-selector-bottom']())
+  } else if (props.appSelectorSlots.bottomSlot) {
+    slotProps.bottomSlot = props.appSelectorSlots.bottomSlot
+  }
+
+  if (slots['app-selector-footer']) {
+    slotProps.footerSlot = () => h('div', {}, slots['app-selector-footer']())
+  } else if (props.appSelectorSlots.footerSlot) {
+    slotProps.footerSlot = props.appSelectorSlots.footerSlot
+  }
+
+  sparkOverlayService.showRight(SparkAppSelector, slotProps)
 }
 
 const toggleBrandSelector = () => {

package/src/plugins/router.js

@@ -14,7 +14,7 @@ export function createAuthRoutes(options = {}) {
     loginPath = '/login',
     logoutPath = '/logout',
     forgotPasswordPath = '/forgot-password',
-    resetPasswordPath = '/reset-password',
+    resetPasswordPath = '/password/reset',
     logo = '',
     defaultRedirect = '/dashboard',
   } = options
@@ -43,7 +43,7 @@ export function createAuthRoutes(options = {}) {
     },
     {
       path: resetPasswordPath,
-      name: 'reset-password',
+      name: 'password-reset',
       component: SparkResetPasswordView,
       props: { logo, loginRoute: loginPath },
       meta: { auth: false },

package/src/stores/app-selector.js

@@ -0,0 +1,140 @@
+import { defineStore } from 'pinia'
+import { computed, reactive } from 'vue'
+
+const DEFAULT_APPS = [
+  {
+    name: '3CX',
+    description: 'VOIP Phone',
+    href: 'https://tmrg.3cx.com.au:5001/webclient',
+    icon: 'farLaptopMobile',
+  },
+  {
+    name: 'Buzz',
+    description: 'Communication on the go',
+    href: 'https://buzz-next.letsbolt.io',
+    icon: 'farSatelliteDish',
+  },
+  {
+    name: 'Dash',
+    description: 'Financial powerhouse',
+    href: 'https://dash-next.letsbolt.io',
+    icon: 'farScaleBalanced',
+  },
+  {
+    name: 'MAPit',
+    description: 'Geolocation everything',
+    href: 'https://mapit-next.letsbolt.io',
+    icon: 'farStreetView',
+  },
+  {
+    name: 'ProspectR',
+    description: 'Leads management',
+    href: 'https://prospectr-next.letsbolt.io',
+    icon: 'farFaceSmileRelaxed',
+  },
+  {
+    name: 'ReVuze',
+    description: 'Get Customer feedback',
+    href: 'https://revuze-next.letsbolt.io',
+    icon: 'farComments',
+  },
+  {
+    name: 'Tabula',
+    description: 'Admin interface',
+    href: 'https://tabula.letsbolt.io',
+    icon: 'farCompass',
+  },
+]
+
+export const useSparkAppSelectorStore = defineStore('sparkAppSelector', () => {
+  const state = reactive({
+    apps: [...DEFAULT_APPS],
+  })
+
+  /**
+   * Initialize app selector store with either partial href config or full app override
+   * @param {Object} config - Configuration object
+   * @param {Object} config.appHrefs - Object mapping app names to hrefs (case-insensitive)
+   *                                    Example: { 'Buzz': 'https://buzz.staging.example.com' }
+   * @param {Array} config.apps - Complete array of app objects to override defaults
+   *                               Example: [{ name: 'Buzz', description: '...', icon: '...', href: '...' }]
+   */
+  const initialize = (config = {}) => {
+    // Full override: if apps array is provided, use it entirely
+    if (config.apps && Array.isArray(config.apps)) {
+      const validApps = config.apps.filter((app) => {
+        const isValid = app.name && app.description && app.icon && app.href
+        if (!isValid) {
+          console.warn('useSparkAppSelectorStore: Invalid app object', app)
+        }
+        return isValid
+      })
+
+      state.apps = validApps.map((app) => ({
+        name: app.name,
+        description: app.description,
+        icon: app.icon,
+        href: app.href,
+      }))
+
+      return
+    }
+
+    // Partial config: merge appHrefs into defaults
+    if (config.appHrefs && typeof config.appHrefs === 'object') {
+      // Create a case-insensitive lookup map
+      const hrefMap = new Map()
+      Object.keys(config.appHrefs).forEach((appName) => {
+        hrefMap.set(appName.toLowerCase(), config.appHrefs[appName])
+      })
+
+      // Update default apps with provided hrefs
+      state.apps = DEFAULT_APPS.map((app) => {
+        const customHref = hrefMap.get(app.name.toLowerCase())
+        return {
+          ...app,
+          href: customHref || app.href,
+        }
+      })
+
+      return
+    }
+
+    // No config provided: use defaults
+    state.apps = [...DEFAULT_APPS]
+  }
+
+  /**
+   * Get all available apps
+   */
+  const allApps = computed(() => state.apps)
+
+  /**
+   * Get app by name (case-insensitive)
+   * @param {string} appName - Name of the app to find
+   * @returns {Object|null} App object or null if not found
+   */
+  const getAppByName = (appName) => {
+    if (!appName) return null
+    const normalizedName = appName.toLowerCase()
+    return state.apps.find((app) => app.name.toLowerCase() === normalizedName) || null
+  }
+
+  /**
+   * Get icon for a specific app (case-insensitive)
+   * @param {string} appName - Name of the app
+   * @returns {string} Icon name or empty string if not found
+   */
+  const getAppIcon = (appName) => {
+    const app = getAppByName(appName)
+    return app ? app.icon : ''
+  }
+
+  return {
+    state,
+    initialize,
+    allApps,
+    getAppByName,
+    getAppIcon,
+  }
+})

package/src/stores/app.js

@@ -4,7 +4,6 @@ import { reactive } from 'vue'
 export const useSparkAppStore = defineStore('sparkApp', () => {
   const state = reactive({
     app: '',
-    icon: '',
     homeRoute: 'dashboard',
     showBrandSelector: true,
     showAppSelector: true,
@@ -12,7 +11,6 @@ export const useSparkAppStore = defineStore('sparkApp', () => {
 
   const initialize = (config = {}) => {
     state.app = config.app || ''
-    state.icon = config.icon || ''
     state.homeRoute = config.homeRoute ?? 'dashboard'
     state.showBrandSelector = config.showBrandSelector ?? true
     state.showAppSelector = config.showAppSelector ?? true

package/src/stores/index.js

@@ -1,4 +1,5 @@
 export * from './app.js'
+export * from './app-selector.js'
 export * from './auth.js'
 export * from './brand-filter.js'
 export * from './navigation.js'

package/src/views/SparkResetPasswordView.vue

@@ -50,7 +50,7 @@
           name="password_confirmation"
           placeholder="••••••••"
           type="password"
-          validation="required|confirm"
+          validation="required|confirm:password"
           outer-class="max-w-full"
         />