@ulu/frontend-vue 0.6.10 → 0.6.12

package/lib/components/collapsible/UluTabGroup.vue

@@ -2,7 +2,9 @@
   <TabGroup 
     v-slot="slotProps" 
     :defaultIndex="defaultIndex" 
+    :selectedIndex="selectedIndex"
     :vertical="vertical"
+    @change="$emit('change', $event)"
   >
     <div 
       v-bind="$attrs"
@@ -22,12 +24,15 @@
   defineOptions({ 
     inheritAttrs: false 
   });
-
   const props = defineProps({ 
     /**
-     * Active tab index by default
+     * Active tab index by default (uncontrolled)
      */
     defaultIndex: Number,
+    /**
+     * Actively selected tab index (controlled)
+     */
+    selectedIndex: Number,
     /**
      * Whether or not to use vertical layout
      */
@@ -46,6 +51,10 @@
     modifiers: [String, Array]
   });
 
+  // Explicitly declare the emit so Vue knows to capture the @change listener 
+  // from the parent and NOT bundle it into $attrs
+  defineEmits(['change']);
+
   const { resolvedModifiers } = useModifiers({ 
     props, 
     baseClass: "tabs",

package/lib/components/utils/UluRouteAnnouncer.vue

@@ -21,16 +21,16 @@
 </template>
 
 <script setup>
-  import { ref, computed, watch, nextTick } from 'vue';
-  import { useRoute } from 'vue-router';
-  import { getRouteTitle } from '../../utils/router.js';
+  import { ref, computed, watch, nextTick } from "vue";
+  import { useRoute, useRouter, START_LOCATION } from "vue-router";
+  import { getRouteTitle } from "../../utils/router.js";
 
   const props = defineProps({
     /**
      * Allow user to bypass this functionality
      * - Function should return true if the page should be announced
-     * - Function is passed  (to, from, $route) => {}
-     *   - to/from are path strings
+     * - Function is passed (to, from) => {}
+     *   - to/from are RouteLocationNormalizedLoaded objects
      */
     validator: {
       type: Function,
@@ -51,15 +51,20 @@
     getTitle: {
       type: Function,
       default: (route) => getRouteTitle(route)
-    }
+    },
+    /**
+     * Enable debug logging
+     */
+    debug: Boolean
   });
 
   const route = useRoute();
+  const router = useRouter();
   const el = ref(null);
 
   const title = computed(() => {
-    // Check if route exists to prevent crash if not in router context (though required)
-    if (!route) return ""; 
+    // Prevent errors if not in router context, or if it's the initial ghost route
+    if (!route || route.matched.length === 0) return ""; 
     const t = props.getTitle(route);
     if (!t) {
       console.warn("RouteAnnouncer: No page title!");
@@ -67,23 +72,30 @@
     return t;
   });
 
-  if (route) {
+  if (router) {
     watch(
-      () => route.path,
+      router.currentRoute,
       async (to, from) => {
-        if (route.hash) {
+        // Skip the very first route transition from the initial ghost route
+        if (from === START_LOCATION || from.matched.length === 0) {
           return;
         }
-        const isValid = props.validator(to, from, route);
+        if (to.hash) {
+          return;
+        }
+        const isValid = props.validator(to, from);
         const isExcluded = props.exclude.some(ex => {
           // Allow wildcard at end to exclude entire sections, etc
           if (ex.endsWith("*")) {
-            return to.startsWith(ex.slice(0, ex.length - 1));
+            return to.path.startsWith(ex.slice(0, ex.length - 1));
           } else {
-            return to === ex;
+            return to.path === ex;
           }
         });
-        if (isValid && !isExcluded) {
+        if (title.value && isValid && !isExcluded) {
+          if (props.debug) {
+            console.log("RouteAnnouncer: Focused title:", title.value);
+          }
           await nextTick();
           el.value?.focus();
         }
@@ -92,4 +104,4 @@
   } else {
     console.error("RouteAnnouncer: No route found (install vue-router).");
   }
-</script>
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [