@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.10

package/lib/utils/{vue-router.js → router.js}

@@ -1,9 +1,29 @@
 /**
  * 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 utils/router-utils
+ * @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
@@ -21,21 +41,55 @@
  */
 export function createBaseMenu(routes, options) {
   const defaults = {
-    qualifier: isStaticBaseRoute,
+    qualifier(route, parentPath) {
+      if (!parentPath) {
+        return isStaticBaseRoute(route);
+      } else {
+        return isStaticRoute(route);
+      }
+    },
     sort: sortByWeight,
-    item: {}
+    item: {},
+    includeChildren: false
   };
   const opts = Object.assign({}, defaults, options);
-  return routes
-    .filter(opts.qualifier)
-    .map(r => {
-      // Need to grab meta from child but use the parent path
-      const menuRoute = r.children ? getChildIndexRoute(r.children) : r;
-      return createMenuItem(menuRoute, r.path, opts.item);
-    })
-    .sort(opts.sort);
+  const getItemPath = (r, parentPath) => parentPath ? `${ parentPath }/${ r.path }` : r.path;
+  const toMenuItems = (currentRoutes, parentPath = null) => {
+    return currentRoutes
+      .filter(r => opts.qualifier(r, parentPath))
+      .map(r => {
+        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);
+        if (opts.includeChildren && children.length) {
+          item.children = toMenuItems(children, item.path);
+        }
+        return item;
+      })
+      .sort(opts.sort);
+  };
+  return toMenuItems(routes);
 }
 
+/**
+ * Returns menu flat (no parent children)
+ */
+export function flattenMenu(menu) {
+  function flatten(items) {
+    const result = [];
+    for (const item of items) {
+      const newItem = { ...item };
+      delete newItem.children;
+      result.push(newItem);
+      if (item.children) {
+        result.push(...flatten(item.children));
+      }
+    }
+    return result;
+  }
+  return flatten(menu);
+} 
+
 /**
  * Print out a section's menu based on path
  * @param {*} routes All routes 
@@ -53,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));
@@ -74,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
@@ -96,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
@@ -115,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
   };
@@ -126,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
@@ -159,6 +203,7 @@ export function nativeLinkRouter(router, event) {
     }
   }
 }
+
 /**
  * Returns the child routes for base route
  * @param {Object} route Route Object
@@ -167,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
@@ -216,4 +262,42 @@ export function $createSectionMenu(route, options) {
     .filter(includeIndex(opts.includeIndex))
     .map(r => createMenuItem(r, `${ parent.path }/${ r.path }`, opts.item))
     .sort(opts.sort);
-}
+}
+
+/**
+ * For a given $route, this will generate a breadcrumb trail.
+ * It iterates through `route.matched` to build the trail.
+ * - 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.
+ * @param {Object} route The Vue Router `$route` object.
+ * @returns {Array.<{title: String, to: Object, current: Boolean}>} An array of breadcrumb items.
+ */
+export function $createBreadcrumb(route) {
+  const { matched, path: currentPath } = route;
+  let prevPath;
+
+  const crumbs = matched.reduce((arr, match, index) => {
+    if (match.meta?.breadcrumb === false) {
+      return arr;
+    }
+
+    if (match.path === prevPath) {
+      return arr;
+    }
+    
+    const isLast = index === matched.length - 1;
+    const title = getRouteTitle(match, route) || "Missing Title";
+
+    arr.push({
+      title,
+      to: { path: isLast ? currentPath : match.path },
+      current: isLast,
+    });
+
+    prevPath = match.path;
+    return arr;
+  }, []);
+  
+  return crumbs;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.9",
+  "version": "0.1.1-beta.10",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -11,17 +11,22 @@
   "module": "./lib/index.js",
   "exports": {
     ".": {
-      "import": "./lib/index.js"
+      "import": "./lib/index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./*": {
+      "import": "./lib/*",
+      "types": "./types/*"
     },
     "./dist": {
       "import": "./dist/frontend-vue.js"
     },
-    "./*": "./lib/*",
     "./scss": "./lib/_index.scss"
   },
+  "types": "./types/index.d.ts",
   "typesVersions": {
     "*": {
-      "lib/*": [
+      "*": [
         "./types/*"
       ]
     }
@@ -34,8 +39,9 @@
     "dev": "storybook dev -p 6006",
     "docs:build": "storybook build -o docs",
     "build": "vite build",
-    "types": "npx tsc",
-    "deploy": "npm run types && npm run build && npm run docs:build"
+    "types": "vue-tsc",
+    "deploy": "npm run types && npm run build && npm run docs:build",
+    "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .ctx/frontend/"
   },
   "keywords": [
     "vue",
@@ -55,14 +61,16 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.112",
+    "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
   "optionalDependencies": {
-    "gsap": "^3.13.0",
     "fuse.js": "^6.6.2",
+    "gsap": "^3.13.0",
     "vue3-dropzone": "^2.2.1"
   },
   "dependencies": {
@@ -71,14 +79,16 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
     "@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.94",
+    "@ulu/frontend": "^0.1.0-beta.112",
+    "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",
@@ -86,12 +96,12 @@
     "sass-embedded": "^1.89.2",
     "storybook": "^9.1.1",
     "storybook-addon-vue-mdx": "^2.0.2",
+    "typescript": "^5.3.3",
     "vite": "^7.0.0",
     "vue-router": "^4.5.1",
-    "typescript": "^5.3.3"
+    "vue-tsc": "^3.0.6"
   },
   "volta": {
     "node": "22.17.0"
   }
 }
-

package/types/components/collapsible/UluAccordion.vue.d.ts

@@ -0,0 +1,42 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    startOpen: boolean;
+    classes: Record<string, any>;
+    animate: boolean | Record<string, any>;
+    triggerTextElement: string;
+    triggerText?: string | undefined;
+    modifiers?: string | unknown[] | undefined;
+    modelValue?: boolean | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        open: boolean | undefined;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+} & {
+    icon?: ((props: {
+        open: boolean | undefined;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        open: true;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly startOpen: boolean;
+    readonly classes: Record<string, any>;
+    readonly animate: boolean | Record<string, any>;
+    readonly triggerTextElement: string;
+    readonly triggerText?: string | undefined;
+    readonly modifiers?: string | unknown[] | undefined;
+    readonly modelValue?: boolean | undefined;
+};
+//# sourceMappingURL=UluAccordion.vue.d.ts.map

package/types/components/collapsible/UluAccordion.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluAccordion.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordion.vue"],"names":[],"mappings":"wBAmSqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAGrC;;;;;;;;;;;;;;;;AAlID,yEAAgD;AArDhD;;;;;;;;EAmDG"}

package/types/components/collapsible/UluAccordionGroup.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    items: unknown[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    item?: ((props: {
+        item: never;
+        index: number;
+    }) => any) | undefined;
+};
+declare const props: {
+    readonly items: unknown[];
+};
+//# sourceMappingURL=UluAccordionGroup.vue.d.ts.map

package/types/components/collapsible/UluAccordionGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluAccordionGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordionGroup.vue"],"names":[],"mappings":"wBAwKqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;2OAErC;;;;;;;AA5GH;;EASG"}

package/types/components/collapsible/UluCollapsible.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    startOpen: boolean;
+    classes: Record<string, any>;
+    animate: boolean | Record<string, any>;
+    closeOnEscape: boolean;
+    triggerText?: string | undefined;
+    modelValue?: boolean | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        isOpen: boolean | undefined;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        isOpen: true;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly startOpen: boolean;
+    readonly classes: Record<string, any>;
+    readonly animate: boolean | Record<string, any>;
+    readonly closeOnEscape: boolean;
+    readonly triggerText?: string | undefined;
+    readonly modelValue?: boolean | undefined;
+};
+/**
+ * Function used to toggle the collapsible
+ */
+declare function toggle(): void;
+//# sourceMappingURL=UluCollapsible.vue.d.ts.map

package/types/components/collapsible/UluCollapsible.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluCollapsible.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluCollapsible.vue"],"names":[],"mappings":"wBAgWqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;2OAGrC;;;;;;;;;;;;AA3JD,yEAAgD;AA/ChD;;;;;;;EA6CG;AAiDH;;GAEG;AACH,gCAEC"}

package/types/components/collapsible/UluDropdown.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    popoverClasses: Record<string, any>;
+    triggerText?: string | undefined;
+    items?: unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        isOpen: boolean;
+    }) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly popoverClasses: Record<string, any>;
+    readonly triggerText?: string | undefined;
+    readonly items?: unknown[] | undefined;
+};
+//# sourceMappingURL=UluDropdown.vue.d.ts.map

package/types/components/collapsible/UluDropdown.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluDropdown.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluDropdown.vue"],"names":[],"mappings":"wBA2JqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;;2OAE3C;;;;;;AA5GD;;;;EAkBG"}