@lilaquadrat/design-core 0.2.2 → 0.3.0

package/src/mixins/loadComponents.ts

@@ -1,107 +1,109 @@
 import { defineAsyncComponent, type App, type Component, type AsyncComponentLoader } from 'vue';
 
-function getName (name: string, type: 'module' | 'partial', namespace?: string) {
+function getName(name: string, type: 'module' | 'partial', namespace?: string) {
 
-  return namespace ? `${namespace}-${name}-${type}` : `${name}-${type}`;
+    return namespace ? `${namespace}-${name}-${type}` : `${name}-${type}`;
 
 }
 
-function loadViaGlob (components: Record<string, Record<'default', Component>>, namespace: string | undefined, app: App<Element>) {
+function loadViaGlob(components: Record<string, Record<'default', Component>>, namespace: string | undefined, app: App<Element>) {
 
-  Object.entries(components).forEach(([filename, definition]) => {
+    Object.entries(components).forEach(([filename, definition]) => {
 
-    // Get name of component, based on filename
-    // "./components/Fruits.vue" will become "Fruits"
-    const matches = filename.match(/([a-z-]+)\.(module|partial).(vue|ts)$/i);
+        // Get name of component, based on filename
+        // "./components/Fruits.vue" will become "Fruits"
+        const matches = filename.match(/([a-z-]+)\.(module|partial).(vue|ts)$/i);
 
-    if (matches) {
+        if (matches) {
 
-      const componentName = namespace ? `${namespace}-${matches[1]}-${matches[2]}` : `${matches[1]}-${matches[2]}`;
+            const componentName = namespace ? `${namespace}-${matches[1]}-${matches[2]}` : `${matches[1]}-${matches[2]}`;
 
-      // Register component on this Vue instance
-      app.component(componentName, definition.default);
-    }
-  });
+            // Register component on this Vue instance
+            app.component(componentName, definition.default);
+        
+        }
+    
+    });
 
 }
 
-function loadViaDeclaration (components: { name: string, component: AsyncComponentLoader<Component> }[], namespace: string | undefined, type: 'module' | 'partial', app: App<Element>) {
+function loadViaDeclaration(components: { name: string, component: AsyncComponentLoader<Component> }[], namespace: string | undefined, type: 'module' | 'partial', app: App<Element>) {
 
-  components.forEach((single) => {
+    components.forEach((single) => {
 
-    const name = getName(single.name, type, namespace);
+        const name = getName(single.name, type, namespace);
 
-    app.component(name, defineAsyncComponent(single.component));
+        app.component(name, defineAsyncComponent(single.component));
 
-  });
+    });
 
 }
 
-function loadViaDeclarationSync (components: { name: string, component: Component }[], namespace: string | undefined, type: 'module' | 'partial', app: App<Element>) {
+function loadViaDeclarationSync(components: { name: string, component: Component }[], namespace: string | undefined, type: 'module' | 'partial', app: App<Element>) {
 
-  return components.map(async (single) => {
+    return components.map(async (single) => {
 
-    const name = getName(single.name, type, namespace);
+        const name = getName(single.name, type, namespace);
 
-    app.component(name, single.component);
+        app.component(name, single.component);
 
-  });
+    });
 
 }
 
-function getAvailableModules (modules: any[]) {
+function getAvailableModules(modules: any[]) {
 
-  return modules.filter((single) => single.availableInEditor !== false).map((single) => ({
-    name          : `${single.name}-module`,
-    variants      : single.variants || [],
-    editor        : single.editor || {},
-    additionalData: single.additionalData || {}
-  }));
+    return modules.filter((single) => single.availableInEditor !== false).map((single) => ({
+        name: `${single.name}-module`,
+        variants: single.variants || [],
+        editor: single.editor || {},
+        additionalData: single.additionalData || {}
+    }));
 
 }
 
-function createModulesArray (modules: any[]) {
+function createModulesArray(modules: any[]) {
 
-  const modulesArray: any[] = [];
+    const modulesArray: any[] = [];
 
-  modules.forEach((singleModule) => {
+    modules.forEach((singleModule) => {
 
-    if (!singleModule.target) return;
+        if (!singleModule.target) return;
 
-    const foundModule = modulesArray.find((single) => single.name === singleModule.name);
-    const useModule = foundModule
-      ? foundModule
-      : {
-        name   : singleModule.name,
-        targets: {}
-      }
+        const foundModule = modulesArray.find((single) => single.name === singleModule.name);
+        const useModule = foundModule
+            ? foundModule
+            : {
+                name: singleModule.name,
+                targets: {}
+            }
 
-    singleModule.target.forEach((target: string) => {
+        singleModule.target.forEach((target: string) => {
 
-      useModule.targets[target] = {
-        variants  : singleModule.variants,
-        components: singleModule.component,
-        name      : singleModule.name
-      };
+            useModule.targets[target] = {
+                variants: singleModule.variants,
+                components: singleModule.component,
+                name: singleModule.name
+            };
 
-    });
+        });
 
-    if (!foundModule) {
+        if (!foundModule) {
 
-      modulesArray.push(useModule);
+            modulesArray.push(useModule);
 
-    }
+        }
 
-  });
+    });
 
-  return modulesArray;
+    return modulesArray;
 
 }
 
 export {
-  loadViaGlob,
-  loadViaDeclaration,
-  loadViaDeclarationSync,
-  getAvailableModules,
-  createModulesArray,
+    loadViaGlob,
+    loadViaDeclaration,
+    loadViaDeclarationSync,
+    getAvailableModules,
+    createModulesArray,
 }

package/src/mixins/logger.ts

@@ -8,25 +8,29 @@ interface Logger {
 
 // Predefined colors for categories, if needed
 const categoryColors: { [key: string]: string } = {
-  plugins: 'background-color: #3f2d56; color: #FFF',
-  startup: 'background-color: #5A8C99; color: #FFF',
-  auth   : 'background-color: #5A8C99; color: #FFF',
-  // Add other predefined categories and colors as needed
+    plugins: 'background-color: #3f2d56; color: #FFF',
+    startup: 'background-color: #5A8C99; color: #FFF',
+    auth: 'background-color: #5A8C99; color: #FFF',
+    // Add other predefined categories and colors as needed
 };
 const logger = new Proxy<Logger>({}, {
    
-  get: function (target, propKey, receiver) {
-    // Method to log messages with dynamic category-based styling and optional color for the category
-    const log = (category: string, message: string, color?: string): void => {
-      const categoryStyle = color ? `color: ${color}` : categoryColors[category.toLowerCase()] || 'color: #FFF';
+    get: function(target, propKey, receiver) {
 
-      // Log the category with style and message without style
+        // Method to log messages with dynamic category-based styling and optional color for the category
+        const log = (category: string, message: string, color?: string): void => {
 
-      console.log(`%c[FRONTEND]%c%c[${category.toUpperCase()}]%c ${message}`, 'background-color: #3f2d56;', 'padding: 5px', categoryStyle, 'color: inherit');
-    };
+            const categoryStyle = color ? `color: ${color}` : categoryColors[category.toLowerCase()] || 'color: #FFF';
 
-    return (message: string, color?: string) => log(propKey.toString(), message, color);
-  }
+            // Log the category with style and message without style
+
+            console.log(`%c[FRONTEND]%c%c[${category.toUpperCase()}]%c ${message}`, 'background-color: #3f2d56;', 'padding: 5px', categoryStyle, 'color: inherit');
+        
+        };
+
+        return (message: string, color?: string) => log(propKey.toString(), message, color);
+    
+    }
 });
 
 export default logger;

package/src/mixins/replaceVariables.ts

@@ -1,19 +1,21 @@
-import type { Customers, List, Me } from '@lilaquadrat/interfaces';
+import type { Cart, Customers, List, Me } from '@lilaquadrat/interfaces';
 import objectPath from 'object-path';
 import useDate from './date';
 import 'dayjs/locale/de';
 
 const dateVariables = ['list.start', 'list.end'];
 
-export default (template?: string, variables?: Record<string, string | undefined | Record<string, string> | Customers | Me | List>) => template?.replace(/\$([\w.]+)/g, (match, name) => {
-  // Check if the placeholder's name exists in the variables object
-  if(!variables) return '';
+export default (template?: string, variables?: Record<string, string | undefined | Record<string, string> | Customers | Me | List | Cart>) => template?.replace(/\$([\w.]+)/g, (match, name) => {
 
-  const returnString = objectPath.get(variables as Record<string, string>, name);
+    // Check if the placeholder's name exists in the variables object
+    if(!variables) return '';
 
-  if(!returnString) return '';
+    const returnString = objectPath.get(variables as Record<string, string>, name);
 
-  if(dateVariables.includes(name)) return useDate(returnString).locale('de').format('DD.MM.YYYY HH:mm');
+    if(!returnString) return '';
+
+    if(dateVariables.includes(name)) return useDate(returnString).locale('de').format('DD.MM.YYYY HH:mm');
+
+    return returnString;
 
-  return returnString;
 });

package/src/mixins/scroll.ts

@@ -10,74 +10,90 @@ interface ScrollPosition {
 const GENERAL_OFFSET = 20;
 
 // Helper function to calculate the total height of fixed or overlaying elements.
-function getFixedElementsOffset (): number {
-  const selectors: string[] = ['.anchor-calculation'];
+function getFixedElementsOffset(): number {
 
-  return selectors.reduce((total, selector) => {
-    const el = document.querySelector(selector) as HTMLElement | null;
+    const selectors: string[] = ['.anchor-calculation'];
+
+    return selectors.reduce((total, selector) => {
+
+        const el = document.querySelector(selector) as HTMLElement | null;
+
+        return el ? total + el.offsetHeight : total;
+    
+    }, 0);
 
-    return el ? total + el.offsetHeight : total;
-  }, 0);
 }
 
 /**
  * scroll into view with calulated offset from fixed overlay elements
  */
-export function scrollToSelector (selector: string): Promise<void> {
-  return new Promise((resolve) => {
-    const targetEl = document.querySelector(selector) as HTMLElement | null;
-
-    if (targetEl) {
-      const offset = getFixedElementsOffset();
-      const elementTop = targetEl.getBoundingClientRect().top + window.scrollY;
-
-      window.scrollTo({
-        left    : 0,
-        top     : elementTop - offset - GENERAL_OFFSET,
-        behavior: 'smooth'
-      });
-    }
+export function scrollToSelector(selector: string): Promise<void> {
+
+    return new Promise((resolve) => {
+
+        const targetEl = document.querySelector(selector) as HTMLElement | null;
+
+        if (targetEl) {
+
+            const offset = getFixedElementsOffset();
+            const elementTop = targetEl.getBoundingClientRect().top + window.scrollY;
+
+            window.scrollTo({
+                left: 0,
+                top: elementTop - offset - GENERAL_OFFSET,
+                behavior: 'smooth'
+            });
+        
+        }
+
+        resolve();
+    
+    });
 
-    resolve();
-  });
 }
 /**
  * scroll into view with calulated offset from fixed overlay elements
  * usage for vue-router scrollBehavior
  */
 export const smartScrollBehavior: RouterScrollBehavior = (
-  to: RouteLocationNormalized,
-  _from: RouteLocationNormalized,
-  savedPosition: ScrollPosition | null | undefined
+    to: RouteLocationNormalized,
+    _from: RouteLocationNormalized,
+    savedPosition: ScrollPosition | null | undefined
 ): ReturnType<RouterScrollBehavior> => {
-  if (savedPosition) {
-    return savedPosition;
-  }
 
-  if (to.hash) {
+    if (savedPosition) {
 
-    return new Promise((resolve) => {
+        return savedPosition;
+    
+    }
 
-      const targetEl = document.querySelector(to.hash) as HTMLElement | null;
+    if (to.hash) {
 
-      if (targetEl) {
+        return new Promise((resolve) => {
 
-        const offset = getFixedElementsOffset();
-        const elementTop = targetEl.getBoundingClientRect().top + window.scrollY;
+            const targetEl = document.querySelector(to.hash) as HTMLElement | null;
 
-        resolve({ 
-          left    : 0,
-          top     : elementTop - offset - GENERAL_OFFSET,
-          behavior: 'smooth'
-        });
+            if (targetEl) {
 
-      } else {
-        resolve({ left: 0, top: 0 });
-      }
+                const offset = getFixedElementsOffset();
+                const elementTop = targetEl.getBoundingClientRect().top + window.scrollY;
 
-    });
+                resolve({ 
+                    left: 0,
+                    top: elementTop - offset - GENERAL_OFFSET,
+                    behavior: 'smooth'
+                });
+
+            } else {
+
+                resolve({ left: 0, top: 0 });
+            
+            }
+
+        });
     
-  }
+    }
+
+    return { left: 0, top: 0 };
 
-  return { left: 0, top: 0 };
 };

package/src/models/Address.model.ts

@@ -12,13 +12,13 @@ export default interface Address {
 }
 
 const declaration: ModelDeclaration<Address> = {
-  osm_id         : { type: 'number' },
-  street         : { type: 'string' },
-  streetNumber   : { type: 'string' },
-  city           : { type: 'string' },
-  zipcode        : { type: 'string' },
-  country        : { type: 'string' },
-  addressAddition: { type: 'string' },
+    osm_id: { type: 'number' },
+    street: { type: 'string' },
+    streetNumber: { type: 'string' },
+    city: { type: 'string' },
+    zipcode: { type: 'string' },
+    country: { type: 'string' },
+    addressAddition: { type: 'string' },
 };
 
 Models.register('address', declaration);

package/src/models/Contact.model.ts

@@ -3,20 +3,20 @@ import Models, { type ModelDeclaration } from '../libs/Models.class';
 import type { Contact } from '@lilaquadrat/interfaces';
 
 const declaration: ModelDeclaration<Omit<Contact, 'emailConfirmed' | 'emailConfirmationCode'>> = {
-  prename        : { type: 'string' },
-  name           : { type: 'string' },
-  email          : { type: 'string' },
-  phone          : { type: 'string' },
-  message        : { type: 'string' },
-  type           : { type: 'string' },
-  category       : { type: 'string' },
-  osm_id         : { type: 'number' },
-  street         : { type: 'string' },
-  streetNumber   : { type: 'string' },
-  city           : { type: 'string' },
-  zipcode        : { type: 'string' },
-  country        : { type: 'string' },
-  addressAddition: { type: 'string' },
+    prename: { type: 'string' },
+    name: { type: 'string' },
+    email: { type: 'string' },
+    phone: { type: 'string' },
+    message: { type: 'string' },
+    type: { type: 'string' },
+    category: { type: 'string' },
+    osm_id: { type: 'number' },
+    street: { type: 'string' },
+    streetNumber: { type: 'string' },
+    city: { type: 'string' },
+    zipcode: { type: 'string' },
+    country: { type: 'string' },
+    addressAddition: { type: 'string' },
 };
 
 Models.register('contact', declaration);

package/src/plugins/analytics.ts

@@ -0,0 +1,198 @@
+import { START_LOCATION, type Router } from 'vue-router';
+import { nextTick } from 'vue';
+import type { FrontendConfigAnalyticsGoogle, FrontendConfigAnalyticsMatomo } from '@lilaquadrat/interfaces';
+
+declare global {
+
+  interface Window {
+    _paq?: unknown[][]
+    dataLayer?: unknown[][]
+    gtag?: (...args: unknown[]) => void
+  }
+
+}
+
+const initialized = false;
+
+/**
+ * the cookie module stores the accepted categories in this cookie. it is read
+ * here as well because the tracker starts before the module is mounted.
+ */
+function hasAnalyticsConsent() {
+
+    const accepted = document.cookie
+        .split(';')
+        .map((single) => single.trim())
+        .find((single) => single.startsWith('lila-cookies-accepted='));
+
+    return !!accepted && accepted.split('=')[1].split(',').includes('analytics');
+
+}
+
+/**
+ * the auth0 login callback carries a one-time authorization code and its state
+ * in the query. they must never end up in the analytics log.
+ */
+function trackableUrl(fullPath: string) {
+
+    const url = new URL(fullPath, window.location.origin);
+
+    url.searchParams.delete('code');
+    url.searchParams.delete('state');
+
+    return url.toString();
+
+}
+
+function matomoPush(command: unknown[]) {
+
+    window._paq = window._paq || [];
+    window._paq.push(command);
+
+}
+
+/**
+ * starts matomo for the current target. visits are tracked without cookies
+ * until the visitor accepts analytics, comparable to google consent mode.
+ */
+function initMatomo(router: Router, config: FrontendConfigAnalyticsMatomo) {
+
+    // with a trackerPath the edge proxies script and hits under neutral names on
+    // the page's own origin. the names are fixed in the edge Caddyfile.
+    const proxyBase = config.trackerPath ? `${window.location.origin}${config.trackerPath}` : undefined;
+    const trackerUrl = proxyBase ? `${proxyBase}/c` : `${config.url}/matomo.php`;
+    const scriptUrl = proxyBase ? `${proxyBase}/v.js` : `${config.url}/matomo.js`;
+
+    if (config.requireConsent !== false) matomoPush(['requireCookieConsent']);
+
+    matomoPush(['setCookieNamePrefix', 'lq_']);
+
+    if (hasAnalyticsConsent()) matomoPush(['rememberCookieConsentGiven']);
+
+    matomoPush(['setTrackerUrl', trackerUrl]);
+    matomoPush(['setSiteId', config.siteId]);
+    matomoPush(['enableLinkTracking']);
+
+    router.afterEach((to, from, failure) => {
+
+        if (failure) return;
+
+        // the title is set by the page after the navigation has resolved
+        nextTick(() => {
+
+            if (from !== START_LOCATION) matomoPush(['setReferrerUrl', trackableUrl(from.fullPath)]);
+
+            matomoPush(['setCustomUrl', trackableUrl(to.fullPath)]);
+            matomoPush(['setDocumentTitle', document.title]);
+            matomoPush(['trackPageView']);
+
+        });
+
+    });
+
+    const script = document.createElement('script');
+
+    script.async = true;
+    script.src = scriptUrl;
+    document.head.appendChild(script);
+
+}
+
+function googlePush(...args: unknown[]) {
+
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push(args);
+
+}
+
+/**
+ * loads gtag.js and starts google analytics. hits are sent without cookies
+ * until the visitor grants consent (consent mode default is denied).
+ */
+function initGoogleAnalytics(router: Router, config: FrontendConfigAnalyticsGoogle) {
+
+    window.dataLayer = window.dataLayer || [];
+
+    const gtag: (...args: unknown[]) => void = window.gtag || ((...args: unknown[]) => googlePush(...args));
+
+    window.gtag = gtag;
+
+    if (config.requireConsent) {
+
+        gtag('consent', 'default', { ad_storage: 'denied', analytics_storage: 'denied' });
+
+    }
+
+    gtag('js', new Date());
+    gtag('config', config.measurementId, { send_page_view: false });
+
+    router.afterEach((to, from, failure) => {
+
+        if (failure) return;
+
+        // the title is set by the page after the navigation has resolved
+        nextTick(() => {
+
+            window.gtag?.('event', 'page_view', {
+                page_path: trackableUrl(to.fullPath),
+                page_location: trackableUrl(to.fullPath),
+                page_title: document.title,
+            });
+
+        });
+
+    });
+
+    const script = document.createElement('script');
+
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${config.measurementId}`;
+    document.head.appendChild(script);
+
+}
+
+/**
+ * starts the analytics provider configured in `__FRONTEND_CONFIG__.analytics`.
+ * the provider owns the consent-gated cookie behaviour: either matomo's cookie
+ * consent or google's consent mode.
+ */
+export function initAnalytics(router: Router): void {
+
+    //   const config = __FRONTEND_CONFIG__.analytics;
+    //
+    //   if (!config || initialized || typeof window === 'undefined') return;
+    //
+    //   initialized = true;
+    //
+    //   if (config.provider === 'matomo') {
+    //
+    //     initMatomo(router, config);
+    //
+    //   } else {
+    //
+    //     initGoogleAnalytics(router, config);
+    //
+    //   }
+
+}
+
+/**
+ * matomo forgetCookieConsentGiven makes matomo delete its own tracking cookies,
+ * so no manual cleanup is needed on opt-out. google uses consent mode update.
+ */
+export function setAnalyticsConsent(granted: boolean): void {
+
+    if (!initialized || typeof window === 'undefined') return;
+
+    if (window._paq) {
+
+        matomoPush([granted ? 'rememberCookieConsentGiven' : 'forgetCookieConsentGiven']);
+
+    }
+
+    window.gtag?.('consent', 'update', {
+        ad_storage: granted ? 'granted' : 'denied',
+        analytics_storage: granted ? 'granted' : 'denied',
+    });
+
+}