@wishbone-media/spark 0.38.0 → 0.40.0

package/src/plugins/router.js

@@ -1,5 +1,9 @@
 import { useSparkAuthStore } from '../stores/auth.js'
-import { hasAnyDirtyForm, getDirtyFormMessage, clearAllDirtyForms } from '../composables/useFormDirtyGuard.js'
+import {
+  hasAnyDirtyForm,
+  getDirtyFormMessage,
+  clearAllDirtyForms,
+} from '../composables/useFormDirtyGuard.js'
 import { sparkModalService } from '../composables/sparkModalService.js'
 import {
   SparkLoginView,
@@ -8,7 +12,6 @@ import {
   SparkResetPasswordView,
   SparkError403View,
   SparkError404View,
-  SparkErrorGeneralView,
 } from '../views/index.js'
 
 export function createAuthRoutes(options = {}) {
@@ -108,7 +111,7 @@ function processNavigation(to, next, authStore, defaultAuthenticatedRoute) {
 
     next({
       path: authStore.state.routes.auth,
-      query: { redirect }
+      query: { redirect },
     })
     return
   }
@@ -143,11 +146,7 @@ function processNavigation(to, next, authStore, defaultAuthenticatedRoute) {
  * @returns {Object} Route configuration for 403 error page
  */
 export function create403Route(options = {}) {
-  const {
-    forbiddenPath = '/error/403',
-    logo = '',
-    homeRoute = '/dashboard',
-  } = options
+  const { forbiddenPath = '/error/403', logo = '', homeRoute = '/dashboard' } = options
 
   return {
     path: forbiddenPath,
@@ -167,10 +166,7 @@ export function create403Route(options = {}) {
  * @returns {Object} Route configuration for 404 catch-all
  */
 export function create404Route(options = {}) {
-  const {
-    logo = '',
-    homeRoute = '/dashboard',
-  } = options
+  const { logo = '', homeRoute = '/dashboard' } = options
 
   return {
     path: '/:pathMatch(.*)*',

package/src/stores/auth.js

@@ -145,7 +145,7 @@ export const useSparkAuthStore = defineStore('auth', () => {
       if (!state.overrideToken) {
         state.token = token
       }
-    } catch (error) {
+    } catch {
       // Only clear cookie if not using override token
       if (!state.overrideToken) {
         clearTokenCookie()

package/src/stores/brand-filter.js

@@ -8,55 +8,55 @@ export const useSparkBrandFilterStore = defineStore(
       brands: [],
     })
 
-  const initialize = (config = {}) => {
-    if (!config.brands || !Array.isArray(config.brands)) {
-      console.warn('useSparkBrandFilterStore: No brands provided to initialize()')
-      state.brands = []
-      return
-    }
-
-    // Validate brand structure
-    const validBrands = config.brands.filter((brand) => {
-      const isValid = brand.name && brand.logo
-      if (!isValid) {
-        console.warn('useSparkBrandFilterStore: Invalid brand object', brand)
+    const initialize = (config = {}) => {
+      if (!config.brands || !Array.isArray(config.brands)) {
+        console.warn('useSparkBrandFilterStore: No brands provided to initialize()')
+        state.brands = []
+        return
       }
-      return isValid
-    })
 
-    // Ensure exactly one brand is marked as current
-    const currentBrands = validBrands.filter((b) => b.current)
-    if (currentBrands.length === 0 && validBrands.length > 0) {
-      validBrands[0].current = true
-    } else if (currentBrands.length > 1) {
-      // Only the first current brand stays current
-      validBrands.forEach((brand) => {
-        brand.current = brand === currentBrands[0]
+      // Validate brand structure
+      const validBrands = config.brands.filter((brand) => {
+        const isValid = brand.name && brand.logo
+        if (!isValid) {
+          console.warn('useSparkBrandFilterStore: Invalid brand object', brand)
+        }
+        return isValid
       })
+
+      // Ensure exactly one brand is marked as current
+      const currentBrands = validBrands.filter((b) => b.current)
+      if (currentBrands.length === 0 && validBrands.length > 0) {
+        validBrands[0].current = true
+      } else if (currentBrands.length > 1) {
+        // Only the first current brand stays current
+        validBrands.forEach((brand) => {
+          brand.current = brand === currentBrands[0]
+        })
+      }
+
+      state.brands = validBrands.map((brand) => ({
+        id: brand.id,
+        name: brand.name,
+        logo: brand.logo,
+        current: brand.current || false,
+      }))
     }
 
-    state.brands = validBrands.map((brand) => ({
-      id: brand.id,
-      name: brand.name,
-      logo: brand.logo,
-      current: brand.current || false,
-    }))
-  }
+    const currentBrand = computed(() => state.brands.find((item) => item.current) || null)
+    const allBrands = computed(() => state.brands)
 
-  const currentBrand = computed(() => state.brands.find((item) => item.current) || null)
-  const allBrands = computed(() => state.brands)
+    const toggleBrand = (brand) => {
+      if (!brand || !state.brands.includes(brand)) {
+        console.warn('useSparkBrandFilterStore: Invalid brand provided to toggleBrand()')
+        return
+      }
 
-  const toggleBrand = (brand) => {
-    if (!brand || !state.brands.includes(brand)) {
-      console.warn('useSparkBrandFilterStore: Invalid brand provided to toggleBrand()')
-      return
+      state.brands.forEach((item) => {
+        item.current = item === brand
+      })
     }
 
-    state.brands.forEach((item) => {
-      item.current = item === brand
-    })
-  }
-
     return {
       state,
       initialize,

package/src/stores/index.js

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

package/src/stores/navigation.js

@@ -72,7 +72,7 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
     () => {
       syncWithRoute()
     },
-    { immediate: true }
+    { immediate: true },
   )
 
   return {

package/src/utils/formatTemporal.js

@@ -95,7 +95,7 @@ const getFormatter = (locale, options) => {
 const getFormattedPart = (date, locale, options, type) => {
   const formatter = getFormatter(locale, options)
   const parts = formatter.formatToParts(date)
-  const part = parts.find(p => p.type === type)
+  const part = parts.find((p) => p.type === type)
   return part ? part.value : ''
 }
 
@@ -117,7 +117,7 @@ const temporalToDate = (temporal) => {
     temporal.hour || 0,
     temporal.minute || 0,
     temporal.second || 0,
-    temporal.millisecond || 0
+    temporal.millisecond || 0,
   )
 }
 
@@ -223,8 +223,8 @@ const createTokens = (temporal, locale) => {
     ['SSS', () => pad(comp.millisecond, 3)],
 
     // AM/PM
-    ['A', () => comp.isPM ? 'PM' : 'AM'],
-    ['a', () => comp.isPM ? 'pm' : 'am'],
+    ['A', () => (comp.isPM ? 'PM' : 'AM')],
+    ['a', () => (comp.isPM ? 'pm' : 'am')],
 
     // Timezone offset
     ['ZZ', () => getTimezoneOffset(temporal, false)],

package/src/utils/sparkTable/renderers/badge.js

@@ -29,7 +29,7 @@ const colorClasses = {
   indigo: 'bg-indigo-100 text-indigo-800',
 }
 
-export const badgeRenderer = (sparkTable) => {
+export const badgeRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''

package/src/utils/sparkTable/renderers/boolean.js

@@ -54,7 +54,7 @@ const isTruthy = (value) => {
   return false
 }
 
-export const booleanRenderer = (sparkTable) => {
+export const booleanRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''
@@ -63,8 +63,8 @@ export const booleanRenderer = (sparkTable) => {
     const config = cellProperties.rendererConfig || {}
 
     const truthy = isTruthy(value)
-    const iconName = truthy ? (config.trueIcon || 'check') : (config.falseIcon || 'xmark')
-    const colorName = truthy ? (config.trueColor || 'green') : (config.falseColor || 'red')
+    const iconName = truthy ? config.trueIcon || 'check' : config.falseIcon || 'xmark'
+    const colorName = truthy ? config.trueColor || 'green' : config.falseColor || 'red'
     const size = config.size || 32
     const iconPrefix = config.iconPrefix || 'far'
 

package/src/utils/sparkTable/renderers/currency.js

@@ -43,7 +43,7 @@ const formatCurrency = (value, decimals = 2) => {
   return isNegative ? `-$${formatted}` : `$${formatted}`
 }
 
-export const currencyRenderer = (sparkTable) => {
+export const currencyRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     td.innerHTML = ''
     td.classList.add('spark-table-cell-currency')

package/src/utils/sparkTable/renderers/date.js

@@ -14,7 +14,7 @@
  * }
  */
 
-export const dateRenderer = (sparkTable) => {
+export const dateRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''
@@ -28,7 +28,7 @@ export const dateRenderer = (sparkTable) => {
     const format = config.format || 'short'
     const locale = config.locale || 'en-US'
 
-    let formattedDate = value
+    let formattedDate
 
     try {
       const date = new Date(value)
@@ -89,14 +89,22 @@ function getRelativeTime(date) {
   if (seconds < 60) {
     return isPast ? 'just now' : 'in a moment'
   } else if (minutes < 60) {
-    return isPast ? `${minutes} minute${minutes > 1 ? 's' : ''} ago` : `in ${minutes} minute${minutes > 1 ? 's' : ''}`
+    return isPast
+      ? `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+      : `in ${minutes} minute${minutes > 1 ? 's' : ''}`
   } else if (hours < 24) {
-    return isPast ? `${hours} hour${hours > 1 ? 's' : ''} ago` : `in ${hours} hour${hours > 1 ? 's' : ''}`
+    return isPast
+      ? `${hours} hour${hours > 1 ? 's' : ''} ago`
+      : `in ${hours} hour${hours > 1 ? 's' : ''}`
   } else if (days < 30) {
     return isPast ? `${days} day${days > 1 ? 's' : ''} ago` : `in ${days} day${days > 1 ? 's' : ''}`
   } else if (months < 12) {
-    return isPast ? `${months} month${months > 1 ? 's' : ''} ago` : `in ${months} month${months > 1 ? 's' : ''}`
+    return isPast
+      ? `${months} month${months > 1 ? 's' : ''} ago`
+      : `in ${months} month${months > 1 ? 's' : ''}`
   } else {
-    return isPast ? `${years} year${years > 1 ? 's' : ''} ago` : `in ${years} year${years > 1 ? 's' : ''}`
+    return isPast
+      ? `${years} year${years > 1 ? 's' : ''} ago`
+      : `in ${years} year${years > 1 ? 's' : ''}`
   }
 }

package/src/utils/sparkTable/renderers/datetime.js

@@ -61,7 +61,7 @@ import { formatTemporal, parseDatetime } from '@/utils/formatTemporal.js'
  * - 'DD/MM/YY [at] h:mma'    → "03/12/25 at 11:36am"
  */
 
-export const datetimeRenderer = (sparkTable) => {
+export const datetimeRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''

package/src/utils/sparkTable/renderers/image.js

@@ -23,7 +23,7 @@ const sizes = {
   lg: 'h-12 w-12',
 }
 
-export const imageRenderer = (sparkTable) => {
+export const imageRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''

package/src/utils/sparkTable/renderers/link.js

@@ -17,7 +17,7 @@
  * }
  */
 
-export const linkRenderer = (sparkTable) => {
+export const linkRenderer = (_sparkTable) => {
   return (instance, td, row, col, prop, value, cellProperties) => {
     // Clear cell
     td.innerHTML = ''

package/src/views/SparkError403View.vue

@@ -29,19 +29,15 @@
     <div class="max-w-lg grid gap-y-6 text-center -mt-8">
       <div>
         <div class="text-primary-600 text-7xl font-bold mb-4">403</div>
-        <h1 class="text-3xl text-gray-900 font-semibold tracking-tight mb-3">
-          Access Forbidden
-        </h1>
+        <h1 class="text-3xl text-gray-900 font-semibold tracking-tight mb-3">Access Forbidden</h1>
         <p class="text-gray-600">
-          You don't have permission to access this resource.<br>
+          You don't have permission to access this resource.<br />
           If you believe this is an error, please contact your administrator.
         </p>
       </div>
 
       <div class="flex gap-4 justify-center">
-        <spark-button @click="goHome" size="lg">
-          Go to Home
-        </spark-button>
+        <SparkButton size="lg" @click="goHome"> Go to Home </SparkButton>
       </div>
     </div>
   </div>

package/src/views/SparkError404View.vue

@@ -29,18 +29,12 @@
     <div class="max-w-lg grid gap-y-6 text-center -mt-8">
       <div>
         <div class="text-primary-600 text-7xl font-bold mb-4">404</div>
-        <h1 class="text-3xl text-gray-900 font-semibold tracking-tight mb-3">
-          Page Not Found
-        </h1>
-        <p class="text-gray-600">
-          The page you're looking for doesn't exist or has been moved.
-        </p>
+        <h1 class="text-3xl text-gray-900 font-semibold tracking-tight mb-3">Page Not Found</h1>
+        <p class="text-gray-600">The page you're looking for doesn't exist or has been moved.</p>
       </div>
 
       <div class="flex gap-4 justify-center">
-        <spark-button @click="goHome" size="lg">
-          Go to Home
-        </spark-button>
+        <SparkButton size="lg" @click="goHome"> Go to Home </SparkButton>
       </div>
     </div>
   </div>

package/src/views/SparkErrorGeneralView.vue

@@ -40,9 +40,7 @@
       </div>
 
       <div class="flex gap-4 justify-center">
-        <spark-button @click="goHome" size="lg">
-          Go to Home
-        </spark-button>
+        <SparkButton size="lg" @click="goHome"> Go to Home </SparkButton>
       </div>
     </div>
   </div>

package/src/views/SparkForgotPasswordView.vue

@@ -35,7 +35,7 @@
         </p>
       </div>
 
-      <FormKit type="form" @submit="handleSubmit" :actions="false">
+      <FormKit type="form" :actions="false" @submit="handleSubmit">
         <FormKit
           label="Email"
           name="email"
@@ -53,12 +53,15 @@
           {{ successMessage }}
         </div>
 
-        <spark-button type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
+        <SparkButton type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
           <span v-if="!isLoading">Send reset link</span>
           <span v-else>Sending...</span>
-        </spark-button>
+        </SparkButton>
 
-        <router-link :to="props.loginRoute" class="text-sm text-center text-primary-600 font-semibold block">
+        <router-link
+          :to="props.loginRoute"
+          class="text-sm text-center text-primary-600 font-semibold block"
+        >
           Back to login
         </router-link>
       </FormKit>

package/src/views/SparkLoginView.vue

@@ -31,12 +31,12 @@
         <h1 class="text-4xl text-gray-900 semibold tracking-tight mb-3">Log in</h1>
 
         <p class="text-gray-600">
-          Welcome back{{ appStore.state.app ? ` to ${appStore.state.app}` : '' }}! Please enter
-          your details.
+          Welcome back{{ appStore.state.app ? ` to ${appStore.state.app}` : '' }}! Please enter your
+          details.
         </p>
       </div>
 
-      <FormKit type="form" @submit="handleLogin" :actions="false">
+      <FormKit type="form" :actions="false" @submit="handleLogin">
         <FormKit
           label="Email"
           name="email"
@@ -58,7 +58,7 @@
         />
 
         <div class="grid grid-flow-col justify-between mt-1 mb-4">
-          <span></span>
+          <span />
 
           <router-link
             :to="props.forgotPasswordRoute"
@@ -72,10 +72,10 @@
           {{ errorMessage }}
         </div>
 
-        <spark-button type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
+        <SparkButton type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
           <span v-if="!isLoading">Sign in</span>
           <span v-else>Signing in...</span>
-        </spark-button>
+        </SparkButton>
       </FormKit>
     </div>
   </div>
@@ -130,7 +130,8 @@ const handleLogin = async (credentials) => {
       await router.push(props.defaultRedirect)
     }
   } catch (error) {
-    errorMessage.value = error.response?.data?.message || error.message || 'Login failed. Please try again.'
+    errorMessage.value =
+      error.response?.data?.message || error.message || 'Login failed. Please try again.'
   } finally {
     isLoading.value = false
   }

package/src/views/SparkLogoutView.vue

@@ -1,4 +1,5 @@
-<template></template>
+<!-- eslint-disable vue/valid-template-root -- Renderless component, runs logout logic only -->
+<template><span /></template>
 
 <script setup>
 import { onMounted } from 'vue'

package/src/views/SparkResetPasswordView.vue

@@ -30,12 +30,10 @@
       <div class="mb-7">
         <h1 class="text-4xl text-gray-900 semibold tracking-tight mb-3">Set new password</h1>
 
-        <p class="text-gray-600">
-          Enter your new password below.
-        </p>
+        <p class="text-gray-600">Enter your new password below.</p>
       </div>
 
-      <FormKit type="form" @submit="handleSubmit" :actions="false">
+      <FormKit type="form" :actions="false" @submit="handleSubmit">
         <FormKit
           label="New Password"
           name="password"
@@ -58,10 +56,10 @@
           {{ errorMessage }}
         </div>
 
-        <spark-button type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
+        <SparkButton type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
           <span v-if="!isLoading">Reset password</span>
           <span v-else>Resetting...</span>
-        </spark-button>
+        </SparkButton>
       </FormKit>
     </div>
   </div>