@dile/lib 0.1.6 → 0.1.7

package/index.js

@@ -20,4 +20,5 @@ export { DileAppNavigate } from './src/lib/DileAppNavigate.js';
 
 export { DileAppFeedback } from './src/components/DileAppFeedback.js';
 export { DileAppLoading } from './src/components/DileAppLoading.js';
-export { DileAuthGuard } from './src/components/DileAuthGuard.js';
+export { DileAuthGuard } from './src/components/DileAuthGuard.js';
+export { DileRouterLink } from './src/components/DileRouterLink.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/lib",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Common App libraries, mixins and helpers",
   "main": "index.js",
   "scripts": {
@@ -27,5 +27,5 @@
     "@reduxjs/toolkit": "^2.5.1",
     "lit": "^2.7.0 || ^3.0.0"
   },
-  "gitHead": "110749bc9bfd11f72d79e841758dbcd759edcde2"
+  "gitHead": "a4f04b0b0b0e56afd4a7da5c7d934c67d2bd6bab"
 }

package/src/components/DileAuthGuard.js

@@ -16,12 +16,14 @@ export const DileAuthGuard = (store) => class extends DileAppNavigate(DileState(
     return {
       loaded: { type: Boolean },
       pageTitle: { type: String },
+      guestRedirectUrl: { type: String },
     };
   }
 
   constructor() {
     super();
     this.pageTitle = '';
+    this.guestRedirectUrl = '/';
   }
 
   render() {
@@ -45,7 +47,7 @@ export const DileAuthGuard = (store) => class extends DileAppNavigate(DileState(
       if(state.user.isLoggedIn && this.validateAdditionalRules(state)) {
         this.loaded = true;
       } else {
-        this.goToUrl('/', this.pageTitle);
+        this.goToUrl(this.guestRedirectUrl, this.pageTitle);
       }
     } 
   }

package/src/components/DileRouterLink.js

@@ -0,0 +1,36 @@
+import { LitElement, html, css } from 'lit';
+import { DileAppNavigate } from '../lib/DileAppNavigate';
+
+export class DileRouterLink extends DileAppNavigate(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: inline-block
+      }
+      a {
+        color: var(--dile-router-link-color, inherit);
+        text-decoration: var(--dile-router-link-text-decoration, none);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      href: { type: String },
+      title: { type: String },
+    };
+  }
+
+  render() {
+    return html`
+      <a href="${this.href}" @click=${this.handleLink}>
+        <slot></slot>
+      </a>
+    `;
+  }
+
+  handleLink(e) {
+    e.preventDefault();
+    this.goToUrl(this.href, this.title);
+  }
+}

package/src/lib/DileAppNavigate.js

@@ -1,6 +1,5 @@
 export const DileAppNavigate = (superclass) => class extends superclass {
   goToUrl(url, title = '') {
-    console.log('app navigate', url, title)
     document.dispatchEvent(new CustomEvent('dile-lib-navigate', {
       bubbles: true,
       composed: true,
@@ -10,4 +9,9 @@ export const DileAppNavigate = (superclass) => class extends superclass {
       }
     }));
   }
+
+  routerLinkHandler(e) {
+    e.preventDefault();
+    this.goToUrl(e.target.getAttribute('href'));
+  }
 }

package/src/lib/DileAppRouter.js

@@ -14,11 +14,17 @@ export const DileAppRouter = (superclass) => class extends superclass {
   }
 
   programaticNavigation(e) {
+    const title = e.detail.title;
+    const url = e.detail.url;
     history.pushState(
       null, 
-      e.detail.url || 'App', 
-      e.detail.url);
+      title || 'App', 
+      url);
     setTimeout(() => this._routes.goto(e.detail.url), 100);
+
+    if(title) {
+      document.title = title;
+    }
   }
 
   connectedCallback() {