@wishbone-media/spark 0.38.0 → 0.40.0

package/src/composables/sparkModalService.js

@@ -2,74 +2,74 @@ import { reactive, markRaw } from 'vue'
 import SparkModalDialog from '@/components/SparkModalDialog.vue'
 
 class SparkModalService {
-    constructor() {
-        this.state = reactive({
-            isVisible: false,
-            content: null,
-            props: {},
-            eventHandlers: {},
-        })
-    }
+  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
-    }
+  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 = {}
-    }
+  hide = () => {
+    this.state.isVisible = false
+    this.state.eventHandlers = {}
+  }
 
-    /**
-     * Show a confirmation dialog and return a Promise
-     *
-     * @param {Object} options - Confirmation options
-     * @param {string} [options.title='Confirm'] - Dialog title
-     * @param {string} [options.message='Are you sure?'] - Dialog message
-     * @param {string} [options.type='warning'] - Dialog type (info, success, warning, danger)
-     * @param {string} [options.confirmText='Confirm'] - Confirm button text
-     * @param {string} [options.cancelText='Cancel'] - Cancel button text
-     * @param {string} [options.confirmVariant='primary'] - Confirm button variant
-     * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
-     */
-    confirm = (options = {}) => {
-        return new Promise((resolve) => {
-            const {
-                title = 'Confirm',
-                message = 'Are you sure?',
-                type = 'warning',
-                confirmText = 'Confirm',
-                cancelText = 'Cancel',
-                confirmVariant = 'primary',
-            } = options
+  /**
+   * Show a confirmation dialog and return a Promise
+   *
+   * @param {Object} options - Confirmation options
+   * @param {string} [options.title='Confirm'] - Dialog title
+   * @param {string} [options.message='Are you sure?'] - Dialog message
+   * @param {string} [options.type='warning'] - Dialog type (info, success, warning, danger)
+   * @param {string} [options.confirmText='Confirm'] - Confirm button text
+   * @param {string} [options.cancelText='Cancel'] - Cancel button text
+   * @param {string} [options.confirmVariant='primary'] - Confirm button variant
+   * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
+   */
+  confirm = (options = {}) => {
+    return new Promise((resolve) => {
+      const {
+        title = 'Confirm',
+        message = 'Are you sure?',
+        type = 'warning',
+        confirmText = 'Confirm',
+        cancelText = 'Cancel',
+        confirmVariant = 'primary',
+      } = options
 
-            this.show(
-                SparkModalDialog,
-                {
-                    title,
-                    message,
-                    type,
-                    buttons: [
-                        { text: confirmText, variant: confirmVariant, event: 'confirm' },
-                        { text: cancelText, variant: 'secondary', event: 'cancel' },
-                    ],
-                },
-                {
-                    confirm: () => {
-                        this.hide()
-                        resolve(true)
-                    },
-                    cancel: () => {
-                        this.hide()
-                        resolve(false)
-                    },
-                },
-            )
-        })
-    }
+      this.show(
+        SparkModalDialog,
+        {
+          title,
+          message,
+          type,
+          buttons: [
+            { text: confirmText, variant: confirmVariant, event: 'confirm' },
+            { text: cancelText, variant: 'secondary', event: 'cancel' },
+          ],
+        },
+        {
+          confirm: () => {
+            this.hide()
+            resolve(true)
+          },
+          cancel: () => {
+            this.hide()
+            resolve(false)
+          },
+        },
+      )
+    })
+  }
 }
 
 export const sparkModalService = new SparkModalService()

package/src/composables/sparkNotificationService.js

@@ -286,7 +286,10 @@ class SparkNotificationService {
     if (options.maxToasts !== undefined) {
       this.toastState.maxToasts = options.maxToasts
     }
-    if (options.defaultPosition !== undefined && TOAST_POSITIONS.includes(options.defaultPosition)) {
+    if (
+      options.defaultPosition !== undefined &&
+      TOAST_POSITIONS.includes(options.defaultPosition)
+    ) {
       this.toastState.defaultPosition = options.defaultPosition
     }
     if (options.newestOnTop !== undefined) {
@@ -321,9 +324,8 @@ class SparkNotificationService {
     const id = ++this._toastIdCounter
 
     // Determine effective values
-    const effectivePosition = (position && TOAST_POSITIONS.includes(position))
-      ? position
-      : this.toastState.defaultPosition
+    const effectivePosition =
+      position && TOAST_POSITIONS.includes(position) ? position : this.toastState.defaultPosition
     const effectiveDuration = duration !== null ? duration : DEFAULT_DURATIONS[type]
 
     // Create toast object
@@ -340,7 +342,7 @@ class SparkNotificationService {
     }
 
     // Remove oldest toasts if at capacity (per position)
-    const positionToasts = this.toastState.toasts.filter(t => t.position === effectivePosition)
+    const positionToasts = this.toastState.toasts.filter((t) => t.position === effectivePosition)
     if (positionToasts.length >= this.toastState.maxToasts) {
       // Remove oldest: when newestOnTop, oldest is at end; otherwise at beginning
       const oldest = this.toastState.newestOnTop
@@ -352,7 +354,7 @@ class SparkNotificationService {
     // Add toast to array
     if (this.toastState.newestOnTop) {
       // Find insertion point: after all toasts of same position
-      const insertIndex = this.toastState.toasts.findIndex(t => t.position === effectivePosition)
+      const insertIndex = this.toastState.toasts.findIndex((t) => t.position === effectivePosition)
       if (insertIndex === -1) {
         this.toastState.toasts.push(toast)
       } else {
@@ -379,7 +381,7 @@ class SparkNotificationService {
     this._clearToastTimer(toastId)
 
     // Remove from array
-    const index = this.toastState.toasts.findIndex(t => t.id === toastId)
+    const index = this.toastState.toasts.findIndex((t) => t.id === toastId)
     if (index !== -1) {
       this.toastState.toasts.splice(index, 1)
     }
@@ -436,7 +438,7 @@ class SparkNotificationService {
    * @returns {Array} Toasts at that position
    */
   getToastsByPosition(position) {
-    return this.toastState.toasts.filter(t => t.position === position)
+    return this.toastState.toasts.filter((t) => t.position === position)
   }
 
   // ============================================

package/src/composables/sparkOverlayService.js

@@ -1,49 +1,49 @@
 import { useSparkOverlay } from '@/composables/useSparkOverlay'
 
 class SparkOverlayService {
-    constructor() {
-        this.left = useSparkOverlay()
-        this.right = useSparkOverlay()
-    }
+  constructor() {
+    this.left = useSparkOverlay()
+    this.right = useSparkOverlay()
+  }
 
-    showLeft = (component, props = {}, eventHandlers = {}, options = {}) => {
-        const handlers = {
-            close: () => {
-                // Call user's close handler if provided
-                eventHandlers.close?.()
-                // Then close the overlay
-                this.closeLeft()
-            },
-            ...eventHandlers,
-        }
-        this.left.show(component, props, handlers, options)
+  showLeft = (component, props = {}, eventHandlers = {}, options = {}) => {
+    const handlers = {
+      close: () => {
+        // Call user's close handler if provided
+        eventHandlers.close?.()
+        // Then close the overlay
+        this.closeLeft()
+      },
+      ...eventHandlers,
     }
+    this.left.show(component, props, handlers, options)
+  }
 
-    showRight = (component, props = {}, eventHandlers = {}, options = {}) => {
-        const handlers = {
-            close: () => {
-                // Call user's close handler if provided
-                eventHandlers.close?.()
-                // Then close the overlay
-                this.closeRight()
-            },
-            ...eventHandlers,
-        }
-        this.right.show(component, props, handlers, options)
+  showRight = (component, props = {}, eventHandlers = {}, options = {}) => {
+    const handlers = {
+      close: () => {
+        // Call user's close handler if provided
+        eventHandlers.close?.()
+        // Then close the overlay
+        this.closeRight()
+      },
+      ...eventHandlers,
     }
+    this.right.show(component, props, handlers, options)
+  }
 
-    closeLeft = () => {
-        this.left.close()
-    }
+  closeLeft = () => {
+    this.left.close()
+  }
 
-    closeRight = () => {
-        this.right.close()
-    }
+  closeRight = () => {
+    this.right.close()
+  }
 
-    closeAll = () => {
-        this.left.close()
-        this.right.close()
-    }
+  closeAll = () => {
+    this.left.close()
+    this.right.close()
+  }
 }
 
 export const sparkOverlayService = new SparkOverlayService()

package/src/composables/useCrudResource.js

@@ -72,13 +72,7 @@ export function useCrudResource(endpoint, options = {}) {
  * @returns {{ handleDelete }}
  */
 export function useTableDelete(tableRef, options = {}) {
-  const {
-    endpoint,
-    successMessage,
-    errorMessage,
-    onSuccess,
-    onError,
-  } = options
+  const { endpoint, successMessage, errorMessage, onSuccess, onError } = options
 
   async function handleDelete(row) {
     try {

package/src/composables/useFormSubmission.js

@@ -71,9 +71,7 @@ export function useFormSubmission(options = {}) {
 
       // Redirect after create (if specified and not in edit mode)
       if (!isEditMode && redirectTo) {
-        const location = typeof redirectTo === 'function'
-          ? redirectTo(data)
-          : redirectTo
+        const location = typeof redirectTo === 'function' ? redirectTo(data) : redirectTo
         await router.push(location)
       }
 

package/src/composables/useSparkOverlay.js

@@ -45,4 +45,4 @@ export function useSparkOverlay() {
     setContent,
     show,
   }
-}
+}

package/src/composables/useSparkTableRouteSync.js

@@ -73,14 +73,14 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
    * Unflatten query params back to nested structure
    * e.g., { 'filter[role]': 'admin' } => { filter: { role: 'admin' } }
    */
-  const unflattenParams = (flatParams) => {
+  const _unflattenParams = (flatParams) => {
     const unflattened = {}
 
     Object.keys(flatParams).forEach((key) => {
       const value = flatParams[key]
 
       // Parse bracket notation: "filter[role]" => ["filter", "role"]
-      const matches = key.match(/([^\[]+)(?:\[([^\]]+)\])?/)
+      const matches = key.match(/([^[]+)(?:\[([^\]]+)\])?/)
       if (!matches) return
 
       const [, rootKey, nestedKey] = matches
@@ -265,7 +265,7 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
 
       // First, try to restore from URL
       if (syncToRoute) {
-        let hasRelevantParams = false
+        let hasRelevantParams
 
         if (useFlatUrls) {
           // Flat mode: check if any query param looks like a table param
@@ -273,9 +273,7 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
         } else {
           // Namespaced mode: check for namespace prefix
           const prefix = `${namespace}[`
-          hasRelevantParams = Object.keys(route.query).some((key) =>
-            key.startsWith(prefix)
-          )
+          hasRelevantParams = Object.keys(route.query).some((key) => key.startsWith(prefix))
         }
 
         if (hasRelevantParams) {

package/src/composables/useSubNavigation.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, markRaw } from 'vue'
+import { ref, computed, markRaw } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { sparkModalService } from './sparkModalService.js'
 import { sparkOverlayService } from './sparkOverlayService.js'
@@ -79,14 +79,14 @@ export function useSubNavigation(options = {}) {
    * Get visible items (not hidden)
    */
   const visibleItems = computed(() => {
-    return items.value.filter(item => !evaluate(item.hidden))
+    return items.value.filter((item) => !evaluate(item.hidden))
   })
 
   /**
    * Check if an item is disabled
    */
   function isDisabled(item) {
-    const itemObj = typeof item === 'string' ? items.value.find(i => i.id === item) : item
+    const itemObj = typeof item === 'string' ? items.value.find((i) => i.id === item) : item
     return itemObj ? evaluate(itemObj.disabled) : false
   }
 
@@ -94,13 +94,11 @@ export function useSubNavigation(options = {}) {
    * Check if an item is the currently active one (for route-based items)
    */
   function isActive(item) {
-    const itemObj = typeof item === 'string' ? items.value.find(i => i.id === item) : item
+    const itemObj = typeof item === 'string' ? items.value.find((i) => i.id === item) : item
     if (!itemObj || !itemObj.route) return false
 
     // Handle route as string (route name) or object
-    const itemRoute = typeof itemObj.route === 'string'
-      ? { name: itemObj.route }
-      : itemObj.route
+    const itemRoute = typeof itemObj.route === 'string' ? { name: itemObj.route } : itemObj.route
 
     // Match by route name
     if (itemRoute.name && route.name === itemRoute.name) {
@@ -121,12 +119,12 @@ export function useSubNavigation(options = {}) {
    */
   const activeItem = computed(() => {
     // Find item matching current route
-    const matchedItem = visibleItems.value.find(item => isActive(item))
+    const matchedItem = visibleItems.value.find((item) => isActive(item))
     if (matchedItem) return matchedItem
 
     // Fall back to default or first visible item
     if (defaultId) {
-      return visibleItems.value.find(item => item.id === defaultId) || visibleItems.value[0]
+      return visibleItems.value.find((item) => item.id === defaultId) || visibleItems.value[0]
     }
 
     return visibleItems.value[0] || null
@@ -143,7 +141,7 @@ export function useSubNavigation(options = {}) {
    * @returns {Promise<boolean>} - Whether navigation/action was executed
    */
   async function navigateTo(item) {
-    const itemObj = typeof item === 'string' ? items.value.find(i => i.id === item) : item
+    const itemObj = typeof item === 'string' ? items.value.find((i) => i.id === item) : item
 
     if (!itemObj) {
       console.warn(`[useSubNavigation] Item not found: ${item}`)
@@ -156,16 +154,21 @@ export function useSubNavigation(options = {}) {
 
     // Handle route navigation
     if (itemObj.route) {
-      const routeConfig = typeof itemObj.route === 'string'
-        ? { name: itemObj.route }
-        : itemObj.route
+      const routeConfig =
+        typeof itemObj.route === 'string' ? { name: itemObj.route } : itemObj.route
       await router.push(routeConfig)
       return true
     }
 
     // Handle overlay
     if (itemObj.overlay) {
-      const { component, props = {}, eventHandlers = {}, position = 'right', size } = itemObj.overlay
+      const {
+        component,
+        props = {},
+        eventHandlers = {},
+        position = 'right',
+        size,
+      } = itemObj.overlay
       const showMethod = position === 'left' ? 'showLeft' : 'showRight'
       sparkOverlayService[showMethod](markRaw(component), props, eventHandlers, { size })
       return true
@@ -205,7 +208,7 @@ export function useSubNavigation(options = {}) {
    * @param {Object} updates - Properties to update
    */
   function updateItem(id, updates) {
-    const index = items.value.findIndex(item => item.id === id)
+    const index = items.value.findIndex((item) => item.id === id)
     if (index !== -1) {
       items.value[index] = normalizeItem({ ...items.value[index], ...updates })
     }

package/src/containers/SparkDefaultContainer.vue

@@ -13,9 +13,9 @@
                   <font-awesome-icon :icon="Icons[appIcon]" class="size-5" />
                 </a>
                 <a
-                  @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
                   v-if="!mainNavStore.state.collapsed"
                   class="font-medium text-gray-800 ml-[10px] cursor-pointer"
+                  @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
                 >
                   {{ appStore.state.app }}
                 </a>
@@ -37,10 +37,10 @@
                     @click.prevent="mainNavStore.goto(item.href)"
                   >
                     <font-awesome-icon
+                      v-if="item.icon"
                       :icon="Icons[item.icon]"
                       :class="[isCurrentRoute(item) ? 'text-gray-400' : 'text-gray-400']"
                       class="size-4"
-                      v-if="item.icon"
                     />
                     <span
                       v-if="!mainNavStore.state.collapsed"
@@ -54,7 +54,7 @@
                       {{ item.name }}
                     </span>
                     <div v-else-if="item?.children" class="w-full flex justify-center">
-                      <div class="w-[10px] h-px bg-gray-400"></div>
+                      <div class="w-[10px] h-px bg-gray-400" />
                     </div>
                   </a>
                   <ul v-if="item.children" class="mt-[5px] flex flex-col gap-[5px]">
@@ -71,7 +71,7 @@
                           :class="[isCurrentRoute(child) ? 'text-gray-400' : 'text-gray-400']"
                           class="size-4"
                         />
-                        <span class="text-[13px]" v-if="!mainNavStore.state.collapsed">
+                        <span v-if="!mainNavStore.state.collapsed" class="text-[13px]">
                           {{ child.name }}
                         </span>
                       </a>
@@ -151,18 +151,18 @@
     </main>
   </div>
 
-  <spark-overlay
+  <SparkOverlay
     position="left"
     :overlay-instance="sparkOverlayService.left"
     @close="emit('overlayClose', 'left')"
   />
-  <spark-overlay
+  <SparkOverlay
     position="right"
     :overlay-instance="sparkOverlayService.right"
     @close="emit('overlayClose', 'right')"
   />
 
-  <spark-modal-container />
+  <SparkModalContainer />
 </template>
 
 <script setup>
@@ -245,7 +245,7 @@ const toggleAppSelector = () => {
   }
 
   sparkOverlayService.showRight(SparkAppSelector, slotProps, {
-    select: (brand) => {
+    select: () => {
       sparkOverlayService.closeRight()
     },
   })

package/src/containers/SparkPublicContainer.vue

@@ -4,5 +4,4 @@
   </main>
 </template>
 
-<script setup>
-</script>
+<script setup></script>

package/src/directives/sparkTooltip.js

@@ -51,11 +51,7 @@ function createTooltipElement(config) {
 async function updatePosition(el, tooltip, config) {
   const arrowEl = tooltip.querySelector(`.${ARROW_CLASS}`)
 
-  const middleware = [
-    offset(config.offset ?? 8),
-    flip(),
-    shift({ padding: 8 }),
-  ]
+  const middleware = [offset(config.offset ?? 8), flip(), shift({ padding: 8 })]
 
   if (arrowEl) {
     middleware.push(arrow({ element: arrowEl, padding: 5 }))
@@ -94,9 +90,8 @@ function showTooltip(el) {
 
   clearTimeout(state.hideTimeout)
 
-  const delay = typeof state.config.delay === 'number'
-    ? state.config.delay
-    : state.config.delay?.show ?? 200
+  const delay =
+    typeof state.config.delay === 'number' ? state.config.delay : (state.config.delay?.show ?? 200)
 
   state.showTimeout = setTimeout(() => {
     if (state.tooltipEl) return // Already visible
@@ -118,9 +113,7 @@ function hideTooltip(el) {
 
   clearTimeout(state.showTimeout)
 
-  const delay = typeof state.config.delay === 'number'
-    ? 0
-    : state.config.delay?.hide ?? 0
+  const delay = typeof state.config.delay === 'number' ? 0 : (state.config.delay?.hide ?? 0)
 
   state.hideTimeout = setTimeout(() => {
     if (state.tooltipEl) {

package/src/index.js

@@ -5,4 +5,4 @@ export * from './containers/index.js'
 export * from './plugins/index.js'
 export * from './stores/index.js'
 export * from './utils/index.js'
-export * from './views/index.js'
+export * from './views/index.js'

package/src/plugins/app-bootstrap.js

@@ -16,7 +16,7 @@ function registerResetCallback(callback) {
  * @internal
  */
 export function resetAllBootstrapServices() {
-  resetCallbacks.forEach(callback => callback())
+  resetCallbacks.forEach((callback) => callback())
 }
 
 /**

package/src/plugins/axios.js

@@ -31,7 +31,7 @@ export function createAxiosInstance(config = {}) {
           // Otherwise use normal token from cookie
           requestConfig.headers.Authorization = `Bearer ${authStore.state.token}`
         }
-      } catch (error) {
+      } catch {
         // Auth store not initialized yet, skip adding token
         // This can happen during app initialization
       }

package/src/plugins/fontawesome.js

@@ -144,7 +144,7 @@ export const formKitIcons = Object.fromEntries(
   Object.entries(Icons).map(([key, iconDef]) => {
     const result = faIconToSvg(iconDef)
     return [key, result?.html?.[0] || '']
-  })
+  }),
 )
 
 /**
@@ -180,7 +180,7 @@ export const formKitGenesisOverride = Object.fromEntries(
   Object.entries(genesisIconMapping).map(([key, iconDef]) => {
     const result = faIconToSvg(iconDef)
     return [key, result?.html?.[0] || '']
-  })
+  }),
 )
 
 /**
@@ -208,4 +208,4 @@ export function setupFontAwesome(app) {
 
   // Auto-register tooltip directive (used by SparkEntityBadge and available to all consumers)
   setupTooltip(app)
-}
+}

package/src/plugins/index.js

@@ -1,5 +1,19 @@
-export { Icons, addIcons, setupFontAwesome, formKitIcons, formKitIconLoader, formKitGenesisOverride } from './fontawesome.js'
-export { createAuthRoutes, setupAuthGuards, create403Route, create404Route, setupBootstrapGuard, setupDirtyFormGuard } from './router.js'
+export {
+  Icons,
+  addIcons,
+  setupFontAwesome,
+  formKitIcons,
+  formKitIconLoader,
+  formKitGenesisOverride,
+} from './fontawesome.js'
+export {
+  createAuthRoutes,
+  setupAuthGuards,
+  create403Route,
+  create404Route,
+  setupBootstrapGuard,
+  setupDirtyFormGuard,
+} from './router.js'
 export { createAxiosInstance, setupAxios, getAxiosInstance } from './axios.js'
 export { createBootstrapService } from './app-bootstrap.js'
-export { setupTooltip } from './tooltip.js'
+export { setupTooltip } from './tooltip.js'