@lilaquadrat/design-core 0.1.0

package/src/mixins/date.ts

@@ -0,0 +1,23 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/de';
+
+// Initialize dayjs plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+dayjs.locale('de');
+
+/**
+ * Returns a dayjs instance with the timezone set to Berlin
+ * 
+ * @param date Optional date parameter to initialize the dayjs instance with
+ * @returns A dayjs instance with Berlin timezone
+ */
+export function useDate (date?: string | number | Date | dayjs.Dayjs) {
+  return dayjs(date).tz('Europe/Berlin');
+}
+
+export default useDate;

package/src/mixins/formatSize.ts

@@ -0,0 +1,12 @@
+export function formatSize (size?: number): string {
+
+  if (!size) return '';
+
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+
+}
+
+export default formatSize;

package/src/mixins/getAnchor.ts

@@ -0,0 +1,14 @@
+/**
+ * Converts the input string to a URL-friendly format.
+ *
+ * The function performs the following operations in order:
+ * 1. Converts all characters in the input string to lowercase.
+ * 2. Removes all non-word characters (anything except alphanumeric and underscores),
+ *    whitespace, and hyphens.
+ * 3. Trims leading and trailing spaces from the string.
+ * 4. Replaces one or more spaces with a single hyphen.
+ * 5. Replaces multiple consecutive hyphens with a single hyphen.
+ *
+ */
+export default (input: string) => input?.toLowerCase().replace(/[^\w\s-]/g, '').trim().replace(/\s+/g, '-')
+  .replace(/-+/g, '-');

package/src/mixins/getRoutes.ts

@@ -0,0 +1,50 @@
+import type { RouteRecordRaw } from 'vue-router';
+import logger from './logger';
+
+export interface RouteSets {
+  dynamicRoutes: readonly RouteRecordRaw[]
+  editorRoutes: readonly RouteRecordRaw[]
+  previewRoutes: readonly RouteRecordRaw[]
+}
+
+export default (routeSets: RouteSets) => {
+
+  const config = __FRONTEND_CONFIG__;
+  const mode = import.meta.env.MODE;
+  const isIframe = window !== window.top;
+  const isDynamic = config.dynamic;
+
+  /**
+   * the shareable static build (yarn build:preview) is always the module
+   * gallery - it has no backend and no editor parent to talk to
+   */
+  if(__PREVIEW__) {
+
+    logger.router('mode: preview routes (static build)');
+    return routeSets.previewRoutes;
+
+  }
+
+  /**
+   * running in an iframe indicates that we are in the STUDIO editor
+   */
+  if(isIframe) {
+
+    logger.router('mode: editor routes');
+    return routeSets.editorRoutes;
+  }
+
+  /**
+   * no iframe but development mode indicates that the design is started locally
+   */
+  if(mode === 'development' && !isDynamic) {
+    
+    logger.router('mode: preview routes');
+    return routeSets.previewRoutes
+    
+  }
+
+  logger.router('mode: dynamic routes');
+  return routeSets.dynamicRoutes;
+
+}

package/src/mixins/hasSlotContent.ts

@@ -0,0 +1,32 @@
+// slotUtils.ts
+import type { Slot, VNode } from 'vue';
+import { Comment } from 'vue';
+
+/**
+ * Checks whether the provided slot function returns any meaningful content.
+ *
+ * @param slot - The slot function to check.
+ * @returns True if the slot has meaningful content, false otherwise.
+ */
+export function hasSlotContent (slot: Slot | undefined): boolean {
+  // If the slot function does not exist, consider the slot empty.
+  if (!slot) return false;
+
+  // Call the slot function to retrieve an array of VNodes.
+  const nodes: VNode[] = slot();
+
+  if (!nodes || nodes.length === 0) return false;
+
+  // Check if any of the VNodes contain meaningful content.
+  return nodes.some((node: VNode) => {
+    // Ignore comment nodes.
+    if (node.type === Comment) return false;
+    
+    // If the node's children is a string, ignore it if it’s only whitespace.
+    if (typeof node.children === 'string' && node.children.trim() === '') {
+      return false;
+    }
+
+    return true;
+  });
+}

package/src/mixins/hooks.ts

@@ -0,0 +1,104 @@
+import { useMainStore } from '../stores/main.store'
+import type { Router } from 'vue-router';
+import logger from './logger';
+import { auth } from '../plugins/auth';
+import useUserStore from '../stores/user.store';
+import { routeForLock } from '../plugins/signupFlow';
+
+export default (router: Router, options?: {initAuth?: boolean}, target: 'server' | 'client' = 'server') => {
+
+  router.beforeEach(async (to, from, next) => {
+
+    const mainStore = useMainStore();
+    const userStore = useUserStore();
+
+    if (!mainStore.startupDone) {
+
+      logger.startup('start');
+
+      if(!mainStore.config) {
+        mainStore.config = __FRONTEND_CONFIG__;
+      }
+
+      if(options?.initAuth !== false && !mainStore.isEditor){
+        if (mainStore.config?.auth0Options) {
+  
+          await auth.init(mainStore.config.auth0Options);
+  
+        }
+  
+        await userStore.initCustomer();
+      }
+
+      mainStore.startupDone = true;
+
+      logger.startup('done');
+
+    } else {
+
+      if(target === 'client') {
+
+        if(!mainStore.clientOnlyStartupDone) {
+
+          if(options?.initAuth !== false) {
+            
+            if (mainStore.config?.auth0Options) {
+      
+              await auth.init(mainStore.config.auth0Options);
+      
+            }
+      
+            await userStore.initCustomer();
+          }
+    
+          mainStore.clientOnlyStartupDone = true;
+
+        }
+
+      }
+
+    }
+
+    if(mainStore.disabledLockUpdate) mainStore.disabledLockUpdate = false;
+
+    /**
+    * signup gate: locked users are forced through the signup steps before they can
+    * reach any members area. public pages stay reachable.
+    */
+    const locked = userStore.locked;
+    const toName = typeof to.name === 'string' ? to.name : '';
+
+    if (locked) {
+
+      const stepRoute = routeForLock(locked);
+
+      // a locked user heading into members content (that isn't a signup step) → current step
+      if (to.meta?.contentType === 'members' && !toName.startsWith('signup') && toName !== stepRoute.name) {
+
+        return next(stepRoute);
+
+      }
+
+      // a locked user on any signup screen that isn't their current step → that step
+      // (signup-account is the external account-creation trigger, leave it alone)
+      if (toName.startsWith('signup') && toName !== 'signup-account' && toName !== stepRoute.name) {
+
+        return next(stepRoute);
+
+      }
+
+    } else if (toName === 'signup' || toName === 'signup-connect' || toName === 'signup-verify') {
+
+      // not locked: a fully set up (authenticated) user has nothing to do here → app
+      if (auth.isAuth.value) return next({ name: 'members' });
+
+      // a guest can only start at the register step
+      if (toName !== 'signup') return next({ name: 'signup' });
+
+    }
+
+    next();
+
+  });
+
+};

package/src/mixins/loadComponents.ts

@@ -0,0 +1,107 @@
+import { defineAsyncComponent, type App, type Component, type AsyncComponentLoader } from 'vue';
+
+function getName (name: string, type: 'module' | 'partial', namespace?: string) {
+
+  return namespace ? `${namespace}-${name}-${type}` : `${name}-${type}`;
+
+}
+
+function loadViaGlob (components: Record<string, Record<'default', Component>>, namespace: string | undefined, app: App<Element>) {
+
+  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);
+
+    if (matches) {
+
+      const componentName = namespace ? `${namespace}-${matches[1]}-${matches[2]}` : `${matches[1]}-${matches[2]}`;
+
+      // 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>) {
+
+  components.forEach((single) => {
+
+    const name = getName(single.name, type, namespace);
+
+    app.component(name, defineAsyncComponent(single.component));
+
+  });
+
+}
+
+function loadViaDeclarationSync (components: { name: string, component: Component }[], namespace: string | undefined, type: 'module' | 'partial', app: App<Element>) {
+
+  return components.map(async (single) => {
+
+    const name = getName(single.name, type, namespace);
+
+    app.component(name, single.component);
+
+  });
+
+}
+
+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 || {}
+  }));
+
+}
+
+function createModulesArray (modules: any[]) {
+
+  const modulesArray: any[] = [];
+
+  modules.forEach((singleModule) => {
+
+    if (!singleModule.target) return;
+
+    const foundModule = modulesArray.find((single) => single.name === singleModule.name);
+    const useModule = foundModule
+      ? foundModule
+      : {
+        name   : singleModule.name,
+        targets: {}
+      }
+
+    singleModule.target.forEach((target: string) => {
+
+      useModule.targets[target] = {
+        variants  : singleModule.variants,
+        components: singleModule.component,
+        name      : singleModule.name
+      };
+
+    });
+
+    if (!foundModule) {
+
+      modulesArray.push(useModule);
+
+    }
+
+  });
+
+  return modulesArray;
+
+}
+
+export {
+  loadViaGlob,
+  loadViaDeclaration,
+  loadViaDeclarationSync,
+  getAvailableModules,
+  createModulesArray,
+}

package/src/mixins/logger.ts

@@ -0,0 +1,32 @@
+interface LoggerFunction {
+    (message: string, color?: string): void;
+}
+
+interface Logger {
+    [key: string]: LoggerFunction;
+}
+
+// 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
+};
+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';
+
+      // 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

@@ -0,0 +1,19 @@
+import type { 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 '';
+
+  const returnString = objectPath.get(variables as Record<string, string>, name);
+
+  if(!returnString) return '';
+
+  if(dateVariables.includes(name)) return useDate(returnString).locale('de').format('DD.MM.YYYY HH:mm');
+
+  return returnString;
+});

package/src/mixins/scroll.ts

@@ -0,0 +1,83 @@
+import type { RouteLocationNormalized, RouterScrollBehavior } from 'vue-router';
+
+interface ScrollPosition {
+  left: number;
+  top: number;
+  behavior?: ScrollBehavior;
+}
+
+// Add this constant at the top of the file, after the interfaces
+const GENERAL_OFFSET = 20;
+
+// Helper function to calculate the total height of fixed or overlaying elements.
+function getFixedElementsOffset (): number {
+  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);
+}
+
+/**
+ * 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'
+      });
+    }
+
+    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
+): ReturnType<RouterScrollBehavior> => {
+  if (savedPosition) {
+    return savedPosition;
+  }
+
+  if (to.hash) {
+
+    return new Promise((resolve) => {
+
+      const targetEl = document.querySelector(to.hash) as HTMLElement | null;
+
+      if (targetEl) {
+
+        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 };
+};

package/src/models/Address.model.ts

@@ -0,0 +1,24 @@
+
+import Models, { type ModelDeclaration } from '../libs/Models.class';
+
+export default interface Address {
+  osm_id: number
+  street: string
+  streetNumber: string
+  city: string
+  zipcode: string
+  country: string
+  addressAddition: string
+}
+
+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' },
+};
+
+Models.register('address', declaration);

package/src/models/Contact.model.ts

@@ -0,0 +1,22 @@
+
+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' },
+};
+
+Models.register('contact', declaration);

package/src/models.ts

@@ -0,0 +1,2 @@
+import './models/Contact.model';
+import './models/Address.model';

package/src/plugins/auth.ts

@@ -0,0 +1,121 @@
+import type AppState from '../interfaces/AppState.interface';
+import type IdTokenExtended from '../interfaces/IdTokenExtended.interface';
+import logger from '../mixins/logger';
+import { Auth0Client, type Auth0ClientOptions } from '@auth0/auth0-spa-js';
+import { ref } from 'vue';
+
+class Auth {
+
+  auth0!: Auth0Client;
+
+  options: { dev: boolean } = { dev: false };
+
+  isAuth = ref<boolean>(false);
+
+  token = ref<string>();
+
+  returnTo?: string;
+
+  async init (auth0: Auth0ClientOptions, options?: { dev: boolean }) {
+
+    logger.auth('init')
+    this.auth0 = new Auth0Client(auth0);
+
+    const redirectUri = auth0.authorizationParams?.redirect_uri;
+
+    if (redirectUri) this.returnTo = new URL(redirectUri).origin;
+
+    if (options) this.options = options;
+
+    try {
+
+      await this.updateAuthStatus();
+
+    } catch (error) {
+
+      console.error(error);
+
+    }
+
+    try {
+      
+      if (this.isAuth.value && !this.token.value) await this.getToken();
+
+    } catch (error) {
+      
+      console.error(error);
+
+    }
+
+    logger.auth('init done')
+  }
+
+  async updateAuthStatus () {
+
+    this.isAuth.value = await this.auth0.isAuthenticated();
+
+  }
+
+  async getToken () {
+
+    this.token.value = await this.auth0.getTokenSilently({ authorizationParams: { scope: 'openid profile email offline_access' } });
+
+  }
+
+  async refreshToken () {
+
+    this.token.value = await this.auth0.getTokenSilently({ authorizationParams: { scope: 'openid profile email offline_access' } });
+
+  }
+
+  getTokenContent (): Promise<IdTokenExtended | undefined> {
+
+    return this.auth0.getIdTokenClaims() as Promise<IdTokenExtended | undefined>;
+
+  }
+
+  triggerLogin (customerId?: string, emailConfirmationCode?: string) {
+
+    this.auth0.loginWithRedirect<AppState>({ appState: { customerId, emailConfirmationCode } });
+
+  }
+
+  triggerSignup (customerId?: string, emailConfirmationCode?: string) {
+
+    this.auth0.loginWithRedirect<AppState>({ appState: { customerId, emailConfirmationCode }, authorizationParams: { screen_hint: 'signup' } });
+
+  }
+
+  triggerLogout () {
+
+    this.auth0.logout(this.returnTo ? { logoutParams: { returnTo: this.returnTo } } : undefined);
+    localStorage.removeItem('lila-customer');
+
+  }
+
+  async handleCallback () {
+
+    const result = await this.auth0.handleRedirectCallback<AppState>();
+
+    await this.updateAuthStatus();
+    await this.getToken();
+
+    return result;
+
+  }
+
+}
+
+const auth = new Auth;
+const plugin = {
+  install: (): void => {
+    logger.plugins('auth installed')
+  },
+};
+const useAuth = () => ({ authToken: auth.token.value })
+
+export default plugin;
+export {
+  auth,
+  useAuth
+}

package/src/plugins/currency.ts

@@ -0,0 +1,26 @@
+import logger from '../mixins/logger';
+import type { App } from 'vue';
+
+function formatCurrency (amount: number) {
+
+  return new Intl.NumberFormat(navigator?.language || 'en-US', {
+    style   : 'currency',
+    currency: 'EUR',
+  }).format(amount);
+
+}
+
+const plugin = {
+  install: (vue: App): void => {
+      
+    vue.config.globalProperties.$currency = (amount: number) => formatCurrency(amount);
+  
+    logger.plugins('currency installed');
+      
+  },
+};
+
+export default plugin;
+export {
+  formatCurrency
+}