@wishbone-media/spark 0.41.0 → 0.43.0

package/package.json

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

package/src/components/SparkButtonGroup.vue

@@ -5,9 +5,17 @@
 </template>
 
 <script setup>
-import { provide, ref } from 'vue'
+import { provide, ref, onMounted, onUpdated } from 'vue'
 
 const groupRef = ref(null)
+const childCount = ref(0)
+
+function syncChildCount() {
+  childCount.value = groupRef.value?.children.length || 0
+}
+
+onMounted(syncChildCount)
+onUpdated(syncChildCount)
 
 const getButtonIndex = (buttonElement) => {
   if (!groupRef.value) return -1
@@ -16,7 +24,9 @@ const getButtonIndex = (buttonElement) => {
 }
 
 const getButtonCount = () => {
-  return groupRef.value?.children.length || 0
+  // Reading childCount.value creates a reactive dependency so SparkButton's
+  // computed re-evaluates when items are added/removed
+  return childCount.value
 }
 
 provide('buttonGroup', {

package/src/components/index.js

@@ -17,6 +17,7 @@ export { default as SparkModalDialog } from './SparkModalDialog.vue'
 export { default as SparkOverlay } from './SparkOverlay.vue'
 export { default as SparkSubNav } from './SparkSubNav.vue'
 export { default as SparkTable } from './SparkTable.vue'
+export { default as SparkTablePaginationDetails } from './SparkTablePaginationDetails.vue'
 export { default as SparkTablePaginationPaging } from './SparkTablePaginationPaging.vue'
 export { default as SparkTablePaginationPerPage } from './SparkTablePaginationPerPage.vue'
 export { default as SparkTableToolbar } from './SparkTableToolbar.vue'

package/src/composables/useSubNavigation.js

@@ -9,9 +9,13 @@ import { sparkOverlayService } from './sparkOverlayService.js'
  * @param {Object} options - Configuration options
  * @param {Array} options.items - Navigation items array
  * @param {string} [options.defaultId] - Default active item ID (falls back to first visible item)
+ * @param {boolean|string} [options.syncToQuery=false] - Sync active tab to URL query param.
+ *   `true` uses 'tab' as the param name, a string uses that as the param name.
+ *   When enabled, items without a route/overlay/modal/action will update the query param on navigate.
  * @returns {Object} Sub-navigation utilities
  *
  * @example
+ * // Route-based tabs
  * const subNav = useSubNavigation({
  *   items: [
  *     { id: 'general', label: 'General', route: { name: 'brands.general' } },
@@ -21,6 +25,17 @@ import { sparkOverlayService } from './sparkOverlayService.js'
  *   ]
  * })
  *
+ * @example
+ * // Local tabs with URL query sync (e.g. ?tab=addresses)
+ * const subNav = useSubNavigation({
+ *   items: [
+ *     { id: 'contacts', label: 'Contacts' },
+ *     { id: 'addresses', label: 'Addresses' },
+ *   ],
+ *   syncToQuery: true,
+ *   defaultId: 'contacts',
+ * })
+ *
  * // Item structure:
  * // {
  * //   id: 'general',           // Unique identifier (required)
@@ -41,7 +56,10 @@ import { sparkOverlayService } from './sparkOverlayService.js'
  * // }
  */
 export function useSubNavigation(options = {}) {
-  const { items: initialItems = [], defaultId = null } = options
+  const { items: initialItems = [], defaultId = null, syncToQuery = false } = options
+
+  // Resolve syncToQuery: true → 'tab', string → custom param name, false → null
+  const syncToQueryParam = syncToQuery === true ? 'tab' : syncToQuery || null
 
   const router = useRouter()
   const route = useRoute()
@@ -95,7 +113,18 @@ export function useSubNavigation(options = {}) {
    */
   function isActive(item) {
     const itemObj = typeof item === 'string' ? items.value.find((i) => i.id === item) : item
-    if (!itemObj || !itemObj.route) return false
+    if (!itemObj) return false
+
+    // syncToQuery mode: match against query param value for items without a route
+    if (syncToQueryParam && !itemObj.route) {
+      const queryValue = route.query[syncToQueryParam]
+      if (queryValue) return itemObj.id === queryValue
+      // No query param → active if this is the default/first visible item
+      const fallbackId = defaultId || visibleItems.value[0]?.id
+      return itemObj.id === fallbackId
+    }
+
+    if (!itemObj.route) return false
 
     // Handle route as string (route name) or object
     const itemRoute = typeof itemObj.route === 'string' ? { name: itemObj.route } : itemObj.route
@@ -191,6 +220,12 @@ export function useSubNavigation(options = {}) {
       return true
     }
 
+    // Handle syncToQuery for items without explicit navigation type
+    if (syncToQueryParam) {
+      await router.replace({ query: { ...route.query, [syncToQueryParam]: itemObj.id } })
+      return true
+    }
+
     return false
   }
 

package/src/containers/SparkDefaultContainer.vue

@@ -1,102 +1,118 @@
 <template>
   <div :class="sidebarClass" class="fixed inset-y-0 flex transition-all z-100">
     <div class="flex grow m-2.5 p-[10px] rounded-lg">
-      <nav class="flex flex-1 flex-col">
-        <ul class="flex flex-1 flex-col gap-y-7" role="list">
-          <li class="flex flex-1 flex-col">
-            <ul role="list" class="flex flex-1 flex-col">
-              <li class="flex items-center pb-8">
-                <a
-                  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[appIcon]" class="size-5" />
-                </a>
-                <a
+      <nav class="flex flex-1 flex-col min-h-0">
+        <!-- Logo (fixed at top) -->
+        <div class="flex-shrink-0 flex items-center pb-8">
+          <a
+            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[appIcon]" class="size-5" />
+          </a>
+          <a
+            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>
+        </div>
+
+        <!-- Menu items (scrollable) -->
+        <ul role="list" class="flex-1 overflow-y-auto">
+          <template v-for="item in menuItems" :key="item.name">
+            <li :class="{ 'mt-[10px]': item.children }">
+              <a
+                :class="{
+                  'bg-gray-100': isCurrentRoute(item),
+                  'hover:bg-gray-100': item?.href,
+                }"
+                :href="item?.href"
+                class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
+                @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"
+                />
+                <span
                   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>
-              </li>
-              <template v-for="item in mainNavStore.state.menu" :key="item.name">
-                <li
                   :class="{
-                    'mt-[10px]': item.children,
-                    'mt-auto': item.footerSection,
+                    'text-[11px]': item?.children,
+                    'text-[13px]': !item?.children,
+                    'font-semibold': item?.children,
+                    'text-gray-500': item?.children,
                   }"
                 >
+                  {{ 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>
+              </a>
+              <ul v-if="item.children" class="mt-[5px] flex flex-col gap-[5px]">
+                <li v-for="child in item.children" :key="child.name">
                   <a
-                    :class="{
-                      'bg-gray-100': isCurrentRoute(item),
-                      'hover:bg-gray-100': item?.href,
-                    }"
-                    :href="item?.href"
+                    :class="[isCurrentRoute(child) ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
+                    :href="child.href"
                     class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
-                    @click.prevent="mainNavStore.goto(item.href)"
+                    @click.prevent="mainNavStore.goto(child.href)"
                   >
                     <font-awesome-icon
-                      v-if="item.icon"
-                      :icon="Icons[item.icon]"
-                      :class="[isCurrentRoute(item) ? 'text-gray-400' : 'text-gray-400']"
+                      v-if="child.icon"
+                      :icon="Icons[child.icon]"
+                      :class="[isCurrentRoute(child) ? 'text-gray-400' : 'text-gray-400']"
                       class="size-4"
                     />
-                    <span
-                      v-if="!mainNavStore.state.collapsed"
-                      :class="{
-                        'text-[11px]': item?.children,
-                        'text-[13px]': !item?.children,
-                        'font-semibold': item?.children,
-                        'text-gray-500': item?.children,
-                      }"
-                    >
-                      {{ item.name }}
+                    <span v-if="!mainNavStore.state.collapsed" class="text-[13px]">
+                      {{ child.name }}
                     </span>
-                    <div v-else-if="item?.children" class="w-full flex justify-center">
-                      <div class="w-[10px] h-px bg-gray-400" />
-                    </div>
                   </a>
-                  <ul v-if="item.children" class="mt-[5px] flex flex-col gap-[5px]">
-                    <li v-for="child in item.children" :key="child.name">
-                      <a
-                        :class="[isCurrentRoute(child) ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
-                        :href="child.href"
-                        class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
-                        @click.prevent="mainNavStore.goto(child.href)"
-                      >
-                        <font-awesome-icon
-                          v-if="child.icon"
-                          :icon="Icons[child.icon]"
-                          :class="[isCurrentRoute(child) ? 'text-gray-400' : 'text-gray-400']"
-                          class="size-4"
-                        />
-                        <span v-if="!mainNavStore.state.collapsed" class="text-[13px]">
-                          {{ child.name }}
-                        </span>
-                      </a>
-                    </li>
-                  </ul>
                 </li>
-              </template>
-            </ul>
-          </li>
-          <li class="mt-auto">
-            <slot name="sidebar-footer" />
-            <a
-              class="font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out"
-              href="#"
-              @click.prevent="mainNavStore.toggleCollapsed()"
-            >
-              <font-awesome-icon
-                :icon="
-                  Icons[mainNavStore.state.collapsed ? 'farArrowRightToLine' : 'farArrowLeftToLine']
-                "
-                class="class-5"
-              />
-            </a>
-          </li>
+              </ul>
+            </li>
+          </template>
         </ul>
+
+        <!-- Footer items (fixed at bottom) -->
+        <div class="flex-shrink-0 mt-auto">
+          <ul v-if="footerItems.length" role="list" class="flex flex-col gap-[5px]">
+            <li v-for="child in footerItems" :key="child.name">
+              <a
+                :class="[isCurrentRoute(child) ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
+                :href="child.href"
+                class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
+                @click.prevent="mainNavStore.goto(child.href)"
+              >
+                <font-awesome-icon
+                  v-if="child.icon"
+                  :icon="Icons[child.icon]"
+                  :class="[isCurrentRoute(child) ? 'text-gray-400' : 'text-gray-400']"
+                  class="size-4"
+                />
+                <span v-if="!mainNavStore.state.collapsed" class="text-[13px]">
+                  {{ child.name }}
+                </span>
+              </a>
+            </li>
+          </ul>
+          <slot name="sidebar-footer" />
+          <a
+            class="font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out"
+            href="#"
+            @click.prevent="mainNavStore.toggleCollapsed()"
+          >
+            <font-awesome-icon
+              :icon="
+                Icons[mainNavStore.state.collapsed ? 'farArrowRightToLine' : 'farArrowLeftToLine']
+              "
+              class="class-5"
+            />
+          </a>
+        </div>
       </nav>
     </div>
   </div>
@@ -213,6 +229,16 @@ const isCurrentRoute = (item) => {
   return false
 }
 
+// Split menu items: scrollable items vs footer items (sticky at bottom)
+const menuItems = computed(() =>
+  props.mainNavStore.state.menu.filter((item) => !item.footerSection),
+)
+const footerItems = computed(() =>
+  props.mainNavStore.state.menu
+    .filter((item) => item.footerSection)
+    .flatMap((item) => item.children || []),
+)
+
 const sparkBrandFilterStore = useSparkBrandFilterStore()
 const sparkAppSelectorStore = useSparkAppSelectorStore()