@record-evolution/widget-navbar 1.0.5 → 1.0.6

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbar following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbar",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "type": "module",
     "main": "dist/widget-navbar.js",
     "types": "dist/src/widget-navbar.d.ts",

package/src/definition-schema.d.ts

@@ -21,10 +21,20 @@ export type IconName = string;
  * Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
  */
 export type NavigationRoute = string;
+/**
+ * Whether to add a leading slash to the navigation route.
+ */
+export type AddLeadingSlash = boolean;
+/**
+ * Whether to add a trailing slash to the navigation route.
+ */
+export type AddTraillingSlash = boolean;
 export type NavigationItems = {
   label?: Label;
   iconName?: IconName;
   route?: NavigationRoute;
+  leadingSlash?: AddLeadingSlash;
+  trailingSlash?: AddTraillingSlash;
   [k: string]: unknown;
 }[];
 

package/src/definition-schema.json

@@ -68,6 +68,20 @@
                         "order": 3,
                         "description": "Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
                         "type": "string"
+                    },
+                    "leadingSlash": {
+                        "title": "Add Leading Slash",
+                        "order": 4,
+                        "description": "Whether to add a leading slash to the navigation route.",
+                        "dataDrivenDisabled": true,
+                        "type": "boolean"
+                    },
+                    "trailingSlash": {
+                        "title": "Add Trailling Slash",
+                        "order": 5,
+                        "description": "Whether to add a trailing slash to the navigation route.",
+                        "dataDrivenDisabled": true,
+                        "type": "boolean"
                     }
                 }
             }

package/src/widget-navbar.ts

@@ -97,6 +97,16 @@ export class WidgetNavbar extends LitElement {
         return '/' + route.split('/').filter(Boolean).join('/')
     }
 
+    addSlashes(item?: any): string | undefined {
+        if (!item.route?.endsWith('/') && item.trailingSlash) {
+            item.route += '/'
+        }
+        if (!item.route?.startsWith('/') && item.leadingSlash) {
+            item.route = '/' + item.route
+        }
+        return item.route
+    }
+
     matchesRoute(itemRoute?: string) {
         if (itemRoute === undefined) return false
         const route = this.trimRoute(decodeURIComponent(this.route || '/'))
@@ -134,11 +144,11 @@ export class WidgetNavbar extends LitElement {
                         (item) => item.label,
                         (item) => html`
                             <mdif4-secondary-tab
-                                ?active=${this.matchesRoute(item.route)}
+                                ?active=${this.matchesRoute(this.addSlashes(item))}
                                 style="font-size: ${fontSize}px;
                                 --mdif4-secondary-tab-container-color: ${bgColor};
                                 color: ${fontColor};"
-                                @click=${() => this.handleNavItemClick(item.route)}
+                                @click=${() => this.handleNavItemClick(this.addSlashes(item))}
                             >
                                 ${item.iconName
                                     ? html`