@ulu/frontend-vue 0.1.0-beta.25 → 0.1.0-beta.27

package/lib/components/navigation/UluBreadcrumb.vue

@@ -4,9 +4,10 @@
     aria-label="Breadcrumb"
     v-if="items.length"
   >
-    <ul :class="classes.list">
+    <ol :class="classes.list">
       <li v-for="(item, index) in items" :key="index" :class="classes.item">
         <router-link
+          v-if="!item.current"
           :to="item.to"
           :class="classes.link"
           :aria-current="item.current ? 'page' : null"
@@ -15,6 +16,11 @@
             {{ item.title }}
           </slot>
         </router-link>
+        <span v-else :class="item.current">
+          <slot :item="item">
+            {{ item.title }}
+          </slot>
+        </span>
         <template v-if="index < items.length - 1">
           <slot name="separator">
             <UluIcon
@@ -24,7 +30,7 @@
           </slot>
         </template>
       </li>
-    </ul>
+    </ol>
   </nav>
 </template>
 
@@ -63,6 +69,7 @@
           list: "breadcrumb__list",
           item: "breadcrumb__item",
           link: "breadcrumb__link",
+          current: "breadcrumb__current",
           separator: "breadcrumb__separator"
         })
       }

package/lib/composables/index.js

@@ -10,5 +10,4 @@ export { useWindowResize } from './useWindowResize.js';
 export { useRequiredInject } from './useRequiredInject.js';
 export { useBreakpointManager } from './useBreakpointManager.js';
 export { usePagination } from './usePagination.js';
-export { useDocumentTitle } from './useDocumentTitle.js';
-export { usePageTitle } from './usePageTitle.js';
+export { useDocumentTitle } from './useDocumentTitle.js';

package/lib/composables/useDocumentTitle.js

@@ -1,46 +1,60 @@
-import { computed } from 'vue';
-import { useHead as defaultUseHead } from '@unhead/vue';
-import { useRoute as defaultUseRoute } from 'vue-router';
-import { pageTitles } from './usePageTitle.js';
+import { reactive, watchEffect, onUnmounted, unref, computed } from "vue";
+import { useHead as defaultUseHead } from "@unhead/vue";
+import { useRoute as defaultUseRoute } from "vue-router";
+import { getRouteTitle } from "../utils/router.js";
+
+// A reactive map to store component-defined titles.
+const componentTitles = reactive({});
 
 /**
- * Manages the document's <title> tag based on the current route's title.
- * It pulls titles from the `usePageTitle` system, falling back to `meta.title`,
- * and formats it with a template.
+ * A composable to manage the document title.
+ *
+ * When called with a `title` option, it sets a dynamic title for the current page.
+ * This is for use within specific components.
  *
- * This should be called once in the root App.vue component.
+ * When called without a `title` option (typically in App.vue), it manages the
+ * document title for the whole app, using titles from components or route meta.
  *
  * @param {object} options
- * @param {string} [options.titleTemplate='%s | My Awesome Site'] - The template for the title.
- * @param {Function} [options.useRoute=defaultUseRoute] - The `useRoute` function, injectable for testing.
- * @param {Function} [options.useHead=defaultUseHead] - The `useHead` function, injectable for testing.
+ * @param {import('vue').Ref<string> | string} [options.title] - The dynamic title to set for the current page.
+ * @param {string} [options.titleTemplate='%s'] - The template for the document title, e.g., '%s | My Site'.
+ * @param {Function} [options.useRoute=defaultUseRoute] - Injectable `useRoute` for testing.
+ * @param {Function} [options.useHead=defaultUseHead] - Injectable `useHead` for testing.
  */
 export function useDocumentTitle(options = {}) {
   const {
-    titleTemplate = '%s',
+    title,
+    titleTemplate = "%s",
     useRoute = defaultUseRoute,
-    useHead = defaultUseHead
+    useHead = defaultUseHead,
   } = options;
 
   const route = useRoute();
+  const path = route.path;
 
-  const documentTitle = computed(() => {
-    // Get the title from our reactive state, or fall back to the route's meta.
-    const titleFromState = pageTitles[route.path];
-    const titleFromMeta = route.meta.title;
+  // --- Setter Mode ---
+  // If a title is provided, we're in "setter" mode, used within a component.
+  if (title !== undefined) {
+    watchEffect(() => {
+      componentTitles[path] = unref(title);
+    });
 
-    let title = titleFromState || titleFromMeta;
+    onUnmounted(() => {
+      delete componentTitles[path];
+    });
+    return; // End execution for setter mode.
+  }
 
-    // If the title from meta is a function, resolve it.
-    if (typeof title === 'function') {
-      title = title(route);
-    }
+  // --- Manager Mode ---
+  // If no title is provided, we're in "manager" mode, used in App.vue.
+  const documentTitle = computed(() => {
+    const titleFromComponent = componentTitles[route.path];
+    const titleFromMeta = getRouteTitle(route, route);
+    const resolvedTitle = titleFromComponent || titleFromMeta;
 
-    // Format the title with the template, or provide a default.
-    return title ? titleTemplate.replace('%s', title) : 'App';
+    return resolvedTitle ? titleTemplate.replace("%s", resolvedTitle) : "App";
   });
 
-  // useHead is reactive, so it will automatically update when documentTitle changes.
   useHead({
     title: documentTitle,
   });

package/lib/utils/router.js

@@ -1,10 +1,29 @@
-import { getPageTitle } from "../composables/usePageTitle.js";
 /**
  * This Module Creates Menus from route or router config
  * - Note: Functions prefixed with "$" work with $route objects (running application, provided by vue-router ie $router, useRoute, etc), 
  * @module router-utils
  */
 
+/**
+ * Resolves a route's title from its meta.
+ * - If `meta.title` is a function, it's called with the `currentRoute` (or the route itself).
+ * - Otherwise, `meta.title` is returned.
+ * This function is the single source of truth for resolving titles from route configuration.
+ * @param {object} route The route or route match object.
+ * @param {object} [currentRoute] The current route from `useRoute()`, passed to functional titles.
+ * @returns {string|undefined} The resolved title, or undefined if not found.
+ */
+export function getRouteTitle(route, currentRoute) {
+  const meta = route?.meta || {};
+  let title = meta.title;
+
+  if (typeof title === "function") {
+    title = title(currentRoute || route);
+  }
+
+  return title;
+}
+
 /**
  * Route Menu Item
  * @typedef {Object} RouteMenuItem
@@ -39,7 +58,6 @@ export function createBaseMenu(routes, options) {
     return currentRoutes
       .filter(r => opts.qualifier(r, parentPath))
       .map(r => {
-        // Need to grab meta from child but use the parent path
         const menuRoute = r.children ? getChildIndexRoute(r.children) : r;
         const children = r.children ? r.children.filter(child => child.path !== "") : false;
         const item = createMenuItem(menuRoute, getItemPath(r, parentPath), opts.item);
@@ -89,7 +107,6 @@ export function createSectionMenu(routes, sectionPath, options) {
   };
   const opts = Object.assign({}, defaults, options);
   const base = routes.find(r => r.path !== "/" && sectionPath.includes(r.path));
-  // Go through each item and 
   const getSection = (current, previous, path) => {
     if (current.children) {
       const child = current.children.find(c => c.path.includes(sectionPath));
@@ -110,20 +127,6 @@ export function createSectionMenu(routes, sectionPath, options) {
     .sort(opts.sort);
 }
 
-/**
- * For a given route this will return the route that renders. For routes without
- * children this is the route itself for those with children (first child with empty path)
- * @param {Object} route Route object to resolve
- * @returns {Object} Resolved route
- */
-// export function resolveRouteIndex(route) {
-//   if (route.children) {
-//     return getChildIndexRoute(route.children);
-//   } else {
-//     return route;
-//   }
-// }
-
 /**
  * For a given array of child routes return the index
  * @param {Array} children Children array of routes
@@ -132,6 +135,7 @@ export function createSectionMenu(routes, sectionPath, options) {
 export function getChildIndexRoute(children) {
   return children.find(r => r.path === "");
 }
+
 /**
  * Creates common menu item structure from route, pulls title and weight from meta (on route or index child)
  * @param {Object} route Route
@@ -151,9 +155,10 @@ export function createMenuItem(route, routePath = route.path, options) {
   if (opts.indexMeta && route.children) {
     meta = Object.assign({}, meta, getChildIndexRoute(route.children)?.meta);
   }
+  const routeWithMergedMeta = { ...route, meta };
   const item = { 
     path: routePath, 
-    title: meta?.title || "Missing Title",
+    title: getRouteTitle(routeWithMergedMeta, route) || "Missing Title",
     weight: meta?.weight || 0,
     meta
   };
@@ -162,23 +167,26 @@ export function createMenuItem(route, routePath = route.path, options) {
   }
   return item;
 }
+
 /**
- * Test if route is static (doesn't incude parameters)
+ * Test if route is static (doesn't include parameters)
  * @param {Object} route Route object to test
  * @returns {Boolean} Whether or not this route is static (not dynamic)
  */
 export function isStaticRoute(route) {
   return !route.path.includes("/:");
 }
+
 /**
  * 
  * @param {Object} route Route object to test
  * @returns {Boolean} Whether or not this route is a static base route
  */
 export function isStaticBaseRoute(route) {
-  const matches = route.path.match(/\//) || [];
+  const matches = route.path.match(/\//g) || [];
   return isStaticRoute(route) && matches.length === 1;
 }
+
 /**
  * Function to make normal <a> behave as router links instread of page reload
  * @param {Object} router Router instance (ie src/router) to push routes to
@@ -195,6 +203,7 @@ export function nativeLinkRouter(router, event) {
     }
   }
 }
+
 /**
  * Returns the child routes for base route
  * @param {Object} route Route Object
@@ -203,6 +212,7 @@ export function nativeLinkRouter(router, event) {
 export function $getRouteChildren(route, parent = $getParentRoute(route)) {
   return parent?.children;
 }
+
 /**
  * Returns the route's parent
  * @param {Object} route Route Object
@@ -257,7 +267,6 @@ export function $createSectionMenu(route, options) {
 /**
  * For a given $route, this will generate a breadcrumb trail.
  * It iterates through `route.matched` to build the trail.
- * - Prioritizes titles set via the `usePageTitle` composable for the current page.
  * - Falls back to `meta.title` (string or function).
  * - Skips routes where `meta.breadcrumb` is set to `false`.
  * - Avoids duplicate crumbs for nested routes with empty paths.
@@ -269,36 +278,16 @@ export function $createBreadcrumb(route) {
   let prevPath;
 
   const crumbs = matched.reduce((arr, match, index) => {
-    // Skip routes configured to be hidden from breadcrumbs
     if (match.meta?.breadcrumb === false) {
       return arr;
     }
 
-    // Avoid duplicates from child routes with empty paths
     if (match.path === prevPath) {
       return arr;
     }
     
     const isLast = index === matched.length - 1;
-    let title;
-
-    // 1. Prioritize component-defined title for the current page
-    if (isLast) {
-      title = getPageTitle(currentPath);
-    }
-
-    // 2. Fallback to meta.title (function or string)
-    if (!title) {
-      const metaTitle = match.meta?.title;
-      if (typeof metaTitle === 'function') {
-        title = metaTitle(route);
-      } else {
-        title = metaTitle;
-      }
-    }
-
-    // 3. Final fallback
-    title = title || 'Missing Title';
+    const title = getRouteTitle(match, route) || "Missing Title";
 
     arr.push({
       title,
@@ -311,4 +300,4 @@ export function $createBreadcrumb(route) {
   }, []);
   
   return crumbs;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.25",
+  "version": "0.1.0-beta.27",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -59,7 +59,7 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.102",
+    "@ulu/frontend": "^0.1.0-beta.104",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -82,7 +82,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.102",
+    "@ulu/frontend": "^0.1.0-beta.104",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/types/composables/index.d.ts

@@ -5,5 +5,4 @@ export { useRequiredInject } from "./useRequiredInject.js";
 export { useBreakpointManager } from "./useBreakpointManager.js";
 export { usePagination } from "./usePagination.js";
 export { useDocumentTitle } from "./useDocumentTitle.js";
-export { usePageTitle } from "./usePageTitle.js";
 //# sourceMappingURL=index.d.ts.map

package/types/composables/useDocumentTitle.d.ts

@@ -1,16 +1,20 @@
 /**
- * Manages the document's <title> tag based on the current route's title.
- * It pulls titles from the `usePageTitle` system, falling back to `meta.title`,
- * and formats it with a template.
+ * A composable to manage the document title.
  *
- * This should be called once in the root App.vue component.
+ * When called with a `title` option, it sets a dynamic title for the current page.
+ * This is for use within specific components.
+ *
+ * When called without a `title` option (typically in App.vue), it manages the
+ * document title for the whole app, using titles from components or route meta.
  *
  * @param {object} options
- * @param {string} [options.titleTemplate='%s | My Awesome Site'] - The template for the title.
- * @param {Function} [options.useRoute=defaultUseRoute] - The `useRoute` function, injectable for testing.
- * @param {Function} [options.useHead=defaultUseHead] - The `useHead` function, injectable for testing.
+ * @param {import('vue').Ref<string> | string} [options.title] - The dynamic title to set for the current page.
+ * @param {string} [options.titleTemplate='%s'] - The template for the document title, e.g., '%s | My Site'.
+ * @param {Function} [options.useRoute=defaultUseRoute] - Injectable `useRoute` for testing.
+ * @param {Function} [options.useHead=defaultUseHead] - Injectable `useHead` for testing.
  */
 export function useDocumentTitle(options?: {
+    title?: import("vue").Ref<string> | string;
     titleTemplate?: string;
     useRoute?: Function;
     useHead?: Function;

package/types/composables/useDocumentTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDocumentTitle.d.ts","sourceRoot":"","sources":["../../lib/composables/useDocumentTitle.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;GAWG;AACH,2CAJG;IAAyB,aAAa,GAA9B,MAAM;IACa,QAAQ;IACR,OAAO;CACpC,QA8BA"}
+{"version":3,"file":"useDocumentTitle.d.ts","sourceRoot":"","sources":["../../lib/composables/useDocumentTitle.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;GAcG;AACH,2CALG;IAAqD,KAAK,GAAlD,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM;IACjB,aAAa,GAA9B,MAAM;IACa,QAAQ;IACR,OAAO;CACpC,QAsCA"}

package/types/utils/router.d.ts

@@ -3,6 +3,16 @@
  * - Note: Functions prefixed with "$" work with $route objects (running application, provided by vue-router ie $router, useRoute, etc),
  * @module router-utils
  */
+/**
+ * Resolves a route's title from its meta.
+ * - If `meta.title` is a function, it's called with the `currentRoute` (or the route itself).
+ * - Otherwise, `meta.title` is returned.
+ * This function is the single source of truth for resolving titles from route configuration.
+ * @param {object} route The route or route match object.
+ * @param {object} [currentRoute] The current route from `useRoute()`, passed to functional titles.
+ * @returns {string|undefined} The resolved title, or undefined if not found.
+ */
+export function getRouteTitle(route: object, currentRoute?: object): string | undefined;
 /**
  * Route Menu Item
  * @typedef {Object} RouteMenuItem
@@ -38,12 +48,6 @@ export function createSectionMenu(routes: any, sectionPath: any, options: {
     includeIndex: boolean;
     item: any;
 }): Array<RouteMenuItem>;
-/**
- * For a given route this will return the route that renders. For routes without
- * children this is the route itself for those with children (first child with empty path)
- * @param {Object} route Route object to resolve
- * @returns {Object} Resolved route
- */
 /**
  * For a given array of child routes return the index
  * @param {Array} children Children array of routes
@@ -64,7 +68,7 @@ export function createMenuItem(route: any, routePath: any, options: {
     indexMeta: Function;
 }): RouteMenuItem;
 /**
- * Test if route is static (doesn't incude parameters)
+ * Test if route is static (doesn't include parameters)
  * @param {Object} route Route object to test
  * @returns {Boolean} Whether or not this route is static (not dynamic)
  */
@@ -113,7 +117,6 @@ export function $createSectionMenu(route: any, options: {
 /**
  * For a given $route, this will generate a breadcrumb trail.
  * It iterates through `route.matched` to build the trail.
- * - Prioritizes titles set via the `usePageTitle` composable for the current page.
  * - Falls back to `meta.title` (string or function).
  * - Skips routes where `meta.breadcrumb` is set to `false`.
  * - Avoids duplicate crumbs for nested routes with empty paths.

package/types/utils/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../lib/utils/router.js"],"names":[],"mappings":"AACA;;;;GAIG;AAEH;;;;;GAKG;AAEH;;;;;;;GAOG;AACH,uCANW,GAAC,WAET;IAAwB,SAAS;IACT,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAiCjC;AAED;;GAEG;AACH,4CAcC;AAED;;;;;;;;GAQG;AACH,0CAPW,GAAC,eACD,GAAC,WAET;IAAyB,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CA6BjC;AAED;;;;;GAKG;AASH;;;;GAIG;AACH,yDAEC;AACD;;;;;;;;GAQG;AACH,oEAJG;IAA0B,MAAM;IACN,SAAS;CACnC,GAAU,aAAa,CAsBzB;AACD;;;;GAIG;AACH,mDAEC;AACD;;;;GAIG;AACH,uDAGC;AACD;;;;GAIG;AACH,gEAUC;AACD;;;;GAIG;AACH,iEAEC;AACD;;;;;GAKG;AACH,2DAFY,UAAW,CAUtB;AAUD;;;;;;;;;;GAUG;AACH,wDALG;IAAwB,MAAM;IACL,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgBjC;AAED;;;;;;;;;GASG;AACH,+CAFa,KAAK,CAAE;IAAC,KAAK,SAAS;IAAC,EAAE,MAAS;IAAC,OAAO,UAAS;CAAC,CAAC,CAiDjE"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../lib/utils/router.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;GAQG;AACH,qCAJW,MAAM,iBACN,MAAM,GACJ,MAAM,GAAC,SAAS,CAW5B;AAED;;;;;GAKG;AAEH;;;;;;;GAOG;AACH,uCANW,GAAC,WAET;IAAwB,SAAS;IACT,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgCjC;AAED;;GAEG;AACH,4CAcC;AAED;;;;;;;;GAQG;AACH,0CAPW,GAAC,eACD,GAAC,WAET;IAAyB,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CA4BjC;AAED;;;;GAIG;AACH,yDAEC;AAED;;;;;;;;GAQG;AACH,oEAJG;IAA0B,MAAM;IACN,SAAS;CACnC,GAAU,aAAa,CAuBzB;AAED;;;;GAIG;AACH,mDAEC;AAED;;;;GAIG;AACH,uDAGC;AAED;;;;GAIG;AACH,gEAUC;AAED;;;;GAIG;AACH,iEAEC;AAED;;;;;GAKG;AACH,2DAFY,UAAW,CAUtB;AAUD;;;;;;;;;;GAUG;AACH,wDALG;IAAwB,MAAM;IACL,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgBjC;AAED;;;;;;;;GAQG;AACH,+CAFa,KAAK,CAAE;IAAC,KAAK,SAAS;IAAC,EAAE,MAAS;IAAC,OAAO,UAAS;CAAC,CAAC,CA6BjE"}

package/lib/composables/usePageTitle.js

@@ -1,37 +0,0 @@
-import { reactive, watchEffect, onUnmounted, unref } from "vue";
-import { useRoute as defaultUseRoute } from "vue-router";
-
-// A reactive map to store component-defined titles for the current route.
-// Key: route.path, Value: title string
-export const pageTitles = reactive({});
-
-/**
- * A composable to set the title for the current page/route from within its component.
- * This provides a single source of truth for a page's title, which can be
- * consumed by various parts of the application (e.g., breadcrumbs, document title).
- * @param {import('vue').Ref<string> | string} title The title to set for the current page. Can be a ref, computed, or a plain string.
- * @param {{ useRoute: Function }} options For dependency injection in tests/stories.
- */
-export function usePageTitle(title, { useRoute = defaultUseRoute } = {}) {
-  const route = useRoute();
-  const path = route.path;
-
-  watchEffect(() => {
-    pageTitles[path] = unref(title);
-  });
-
-  // Clean up when the component is unmounted to prevent memory leaks
-  onUnmounted(() => {
-    delete pageTitles[path];
-  });
-}
-
-/**
- * Gets the dynamically set page title for a given path.
- * For internal use by consumers like breadcrumb or document title utilities.
- * @param {string} path The route path to look up.
- * @returns {string | undefined}
- */
-export function getPageTitle(path) {
-  return pageTitles[path];
-}