cec-nuxt-lib 0.2.4 → 0.3.0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "cec-nuxt-lib",
   "configKey": "cec-nuxt-lib",
-  "version": "0.2.4"
+  "version": "0.3.0"
 }

package/dist/runtime/components/cecBreadcrumb.vue

@@ -3,15 +3,15 @@ import { useState } from '#app';
 import { useRuntimeConfig } from '#app';
 import { useRoute } from 'vue-router';
 
+const classicPath = useState('classicPath');
 const config = useRuntimeConfig();
+const path = useState('path');
 const route = useRoute();
-const classicPath = useState('classicPath');
 const baseUrl = config.app.baseURL;
 
 // Helper functions
 const makeLink = (i, routes) => {
-  let temp = routes.slice(0, i).join('/');
-  return temp.length ? temp : '/';
+  return routes.slice(0, i + 1).join('/');
 };
 
 const toTitleCase = (str) => {
@@ -20,19 +20,34 @@ const toTitleCase = (str) => {
     : `${str[0].toUpperCase()}${str.slice(1).replace(/[-_]/g, ' ')}`;
 };
 
-// Construct links and labels for breadcrumb
-let rLength = route.path.split('/').length;
-let cLength = classicPath.value.split('/').length;
-let routes = route.path
-  .split('/')
-  .filter((e, i) => !(i === rLength - 1 && !e.length));
-let classic = classicPath.value
-  .split('/')
-  .filter((e, i) => !(i === cLength - 1 && !e.length));
+const makeArr = (str) => {
+  return str.split('/').reduce((acc, e, i) => {
+    if (!i || (i && e.length)) {
+      return [...acc, e];
+    }
+    return acc;
+  }, []);
+};
+
+const trimPath = (str) => str.replace(/\/$/, '');
+
+// Make arrays of the items in the paths
+let routeTrim = trimPath(route.path);
+let pathTrim = trimPath(path.value);
+let routes = makeArr(routeTrim);
+let paths = makeArr(pathTrim);
+
+// Use the route path if it includes the node's path
+if (!routeTrim.toLowerCase().startsWith(pathTrim.toLowerCase())) {
+  routes = [...paths, ...routes.filter((e) => e.length)];
+}
+
+// Get the classic path for legacy links
+let classic = trimPath(classicPath.value).split('/');
 const length = classic.length;
 let hrefs =
-  baseUrl.length > 1
-    ? `${classicPath.value}${route.path !== '/' ? route.path : ''}`.split('/')
+  baseUrl.length > 1 && route.path !== '/'
+    ? `${classicPath.value}${routeTrim}`.split('/')
     : routes.reduce((acc, e, i) => {
         return classic[i] ? [...acc, classic[i]] : [...acc, e];
       }, []);
@@ -48,9 +63,7 @@ const links = hrefs.map((e, i) => (!i ? 'Home' : toTitleCase(e)));
               <li class="breadcrumb-item" v-for="(l, i) in links" :key="i">
                 <span v-if="i === links.length - 1">{{ l }}</span>
                 <template v-else-if="i + 1 >= length">
-                  <NuxtLink :to="makeLink(length - i, routes)">{{
-                    l
-                  }}</NuxtLink>
+                  <NuxtLink :to="makeLink(i, routes)">{{ l }}</NuxtLink>
                 </template>
                 <a v-else :href="'/' + hrefs.slice(1, i + 1).join('/')">
                   {{ l }}</a

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.4",
+  "version": "0.3.0",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",
@@ -28,15 +28,16 @@
     "link": "npm link"
   },
   "dependencies": {
+    "@contensis/canvas-html": "^1.2.0",
     "@nuxt/kit": "^3.11.2"
   },
   "devDependencies": {
-    "@types/node": "^20.12.4",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.0",
+    "@types/node": "^20.12.4",
     "changelogen": "^0.5.5",
     "eslint": "^8.57.0",
     "nuxt": "^3.13.2",