@lilaquadrat/design-core 0.1.0

package/src/libs/Models.class.ts

@@ -0,0 +1,482 @@
+import { v4 as uuid } from 'uuid';
+import { hardCopy } from '@lilaquadrat/studio/lib/esm/frontend';
+
+type DeclarationTypes = 'string' | 'number' | 'boolean' | 'object';
+type SingleDeclaration = { type: 'string', default?: string } |
+{ type: 'number', default?: number } |
+{ type: 'boolean', default?: boolean } |
+{ type: 'object', default?: Record<string, any> } |
+{ type: 'array', contains: { type: DeclarationTypes }, default?: (string | number | boolean)[] } |
+{ type: 'array', contains: { model: string }, default?: any[], defaultItems?: number } |
+{ model: string, default?: any };
+
+// interface ModelDeclaration<T = GenericModel> {
+//   [key in keyof T]: SingleDeclaration
+// }
+
+type ModelDeclaration<T> = Record<keyof T, SingleDeclaration>;
+type ModelDeclarationExtended<T, E> = Record<Exclude<keyof T, keyof E>, SingleDeclaration>;
+
+interface ModelOptions {
+  /**
+   * uuid will be automatically added
+   */
+  uuid?: boolean
+  /**
+   * the name of the models will be added as type
+  ```TS
+    type: 'text-module'
+  ```
+   */
+  nameAsType?: boolean
+
+  /**
+   * defines which available model should be used as base
+   */
+  extends?: string
+}
+// eslint-disable-next-line no-unused-vars
+type ModelHook<T> = (data: T) => void;
+
+interface ModelHooks<T> {
+  legacy?: ModelHook<T>
+  preSave?: ModelHook<T>
+  // postSave?: ModelHook<T>
+  preAdd?: ModelHook<T>
+  // postAdd?: ModelHook<T>
+  preClone?: ModelHook<T>
+  // postClone?: ModelHook<T>
+}
+
+class Models {
+
+  registeredModels: string[] = [];
+
+  declarations: Record<string, ModelDeclaration<T>> = {};
+
+  options: Record<string, ModelOptions> = {};
+
+  hooks: Record<string, ModelHooks<T>> = {};
+
+  debug: boolean = false;
+
+  constructor (debug: boolean = false) {
+
+    this.debug = debug;
+
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  register<T>(name: string, declaration: ModelDeclaration<T>, hooks?: ModelHooks<T>, options?: ModelOptions): void;
+
+  // eslint-disable-next-line no-unused-vars
+  register<T, E>(name: string, declaration: ModelDeclarationExtended<T, E>, hooks: ModelHooks<T> | undefined, options: ModelOptions): void;
+
+  register<T, E> (name: string, declaration: ModelDeclaration<T > | ModelDeclarationExtended<T, E>, hooks: ModelHooks<T> | undefined, options?: ModelOptions) {
+
+    if (this.debug) console.debug(`registed model ${name}`);
+    // this.registeredModels[name] = declaration;
+    this.registeredModels.push(name);
+    this.declarations[name] = options?.extends ? this.extendDeclaration(declaration, options.extends) : declaration;
+    
+    if(options) this.options[name] = options;
+    if(hooks) this.hooks[name] = hooks;
+
+  }
+
+  getDeclaration (name: string): ModelDeclaration<any> {
+
+    if (!this.declarations[name]) console.error(`DECLARATION_NOT_FOUND - ${name}`);
+
+    return this.declarations[name] as ModelDeclaration<any> ;
+
+  }
+
+  getOptions (name: string): ModelOptions {
+
+    return this.options[name];
+
+  }
+
+  extendDeclaration (declaration: ModelDeclaration, extendBase: string) {
+
+    const base = this.getDeclaration(extendBase);
+
+    if (!base) throw new Error('MODELS_EXTENDS_BASE_NOT_FOUND');
+
+    return { ...base, ...declaration };
+
+  }
+
+  prepareTargetObject<T> (name: string, data: T & { uuid?: string }, usecase?: 'save' | 'add' | 'clone') {
+
+    const targetObject: GenericModel = {};
+    const options = this.getOptions(name);
+
+    if (options?.uuid) {
+
+      if (usecase === 'clone') {
+
+        targetObject.uuid = uuid();
+
+      } else {
+
+        targetObject.uuid = data.uuid || uuid();
+
+      }
+
+    }
+
+    if (options?.nameAsType) {
+
+      targetObject.type = name;
+
+    }
+
+    return targetObject;
+
+  }
+
+  add<T> (data: Partial<T>, name: string, declaration?: ModelDeclaration<T>): T {
+
+    const modelData = this.setDataV2(data, this.prepareTargetObject(name, data, 'add'), declaration || this.getDeclaration(name), name, 'add');
+
+    // if (this.hooks[name]?.preAdd) this.hooks[name].preAdd(modelData);
+
+    return modelData as T;
+
+  }
+
+  save<T> (data: Partial<T>, name: string, declaration?: ModelDeclaration<T>): T {
+
+    const modelData = this.setDataV2(data, this.prepareTargetObject(name, data, 'save'), declaration || this.getDeclaration(name), name, 'save') as T;
+
+    // if (this.hooks[name]?.postSave) this.hooks[name].postSave(modelData);
+
+    return modelData as T;
+
+  }
+
+  clone<T> (data: Partial<T>, name: string, declaration?: ModelDeclaration<T>): T {
+
+    const modelData = this.setDataV2(data, this.prepareTargetObject(name, data, 'clone'), declaration || this.getDeclaration(name), name, 'clone') as T;
+
+    // if (this.hooks[name].postClone) this.hooks[name].postClone(data);
+
+    return modelData as T;
+
+  }
+
+  setDataV2<T> (data: Partial<T>, targetObject: GenericModel | GenericModel[], declaration: ModelDeclaration, name: string, usecase: 'save' | 'add' | 'clone') {
+
+    if (this.debug) console.debug(data, declaration, targetObject, usecase);
+
+    const keys = Object.keys(declaration || {});
+
+    // if (typeof this.legacy === 'function' && legacy) {
+
+    //   if (data) data = this.legacy(data);
+
+    // }
+
+    // if (typeof this.onSave === 'function' && usecase === 'save') {
+
+    //   if (data) data = this.onSave(data);
+
+    // }
+
+    if (usecase === 'save') {
+
+      if (this.hooks[name]?.preSave) this.hooks[name].preSave(data);
+
+    }
+
+    if (usecase === 'clone') {
+
+      if (this.hooks[name]?.preClone) this.hooks[name].preClone(data);
+
+    }
+
+    if (usecase === 'add') {
+
+      if (this.hooks[name]?.preAdd) this.hooks[name].preAdd(data);
+
+    }
+
+    if (usecase === 'save' && Models.isEmpty(data)) return targetObject;
+
+    // remove the changed flag on save
+    // if (usecase === 'save') {
+
+    // delete this.changed;
+
+    // }
+
+    // delete this.legacy;
+    // delete this.onSave;
+    // delete this.onAdd;
+
+    keys.forEach((keyName: string) => {
+
+      if (this.debug) console.debug('START', keyName, data, declaration, declaration[keyName]);
+
+      const currentDeclaration = declaration[keyName];
+      let currentData: any;
+      let safeData: Partial<T>;
+
+      if (data && !Models.isEmpty(data)) safeData = hardCopy<Partial<T>>(data);
+      if (safeData && safeData[keyName]) currentData = hardCopy(safeData[keyName]);
+
+      if (usecase === 'save' && Models.isEmpty(currentData)) return;
+
+      /**
+      * SPECIAL CASE type
+      * dont override the type of the module
+      */
+      // if (name === 'type' && currentData) {
+
+      //   targetObject.type = currentData;
+      //   return;
+
+      // }
+
+      if ('type' in currentDeclaration) {
+
+        if (currentData) {
+           
+          if (this.debug) console.debug('CHECK CURRENTDATA TYPE', typeof currentData === currentDeclaration.type, currentDeclaration.type, keyName, currentData, currentDeclaration);
+           
+          if (typeof currentData !== currentDeclaration.type && currentDeclaration.type !== 'array' && !Models.isModel(currentDeclaration)) currentData = undefined;
+
+        }
+
+        /**
+        * if usecase is save an no data is given, dont add default values
+        */
+        if (usecase === 'save' && Models.isEmpty(currentData)) {
+
+          // delete declaration[name];
+          return;
+
+        }
+
+        // if (name === 'legacy') return targetObject;
+        // if (name === 'onSave') return targetObject;
+
+        /**
+        * string and number gets assigned
+        */
+        if (['string', 'number', 'boolean', 'object'].includes(currentDeclaration.type)) {
+
+          targetObject[keyName] = currentData || Models.getDefaultValue(currentDeclaration);
+
+        }
+
+        /**
+        * array
+        */
+        if (currentDeclaration.type === 'array') {
+
+          const arrayContains = currentDeclaration.contains;
+
+          if ('type' in arrayContains) {
+
+            if (['string', 'number'].includes(arrayContains.type)) {
+
+              if (this.debug) console.debug('SET ARRAY STRING/NUMBER', currentData);
+
+              targetObject[keyName] = currentData?.slice(0) || Models.getDefaultValue(currentDeclaration);
+
+            }
+
+            if (arrayContains.type === 'object') {
+
+              targetObject[keyName] = [];
+
+              // only add non empty objects to the array
+              currentData?.forEach((single) => {
+
+                // skip if single is empty
+                if (usecase === 'save' && Models.isEmpty(single)) return;
+
+                // only add if the result is not empty
+                if (!Models.isEmpty(single)) targetObject[keyName].push(single);
+
+              });
+
+              if (!targetObject[keyName].length) delete targetObject[keyName];
+
+            }
+
+          }
+
+          if ('model' in arrayContains) {
+
+            if (this.debug) console.debug('SET ARRAY MODEL', keyName, currentData, arrayContains?.model);
+
+            targetObject[keyName] = [];
+
+            if (this.debug) console.debug(keyName, currentData);
+
+            /**
+             * currentdata could be an array with an empty object [{}] which will not count as empty for the Model.isEmpty function
+             * therefore we need to handle the possible empty data here
+             */
+
+            if (currentData) {
+
+              currentData?.forEach((single) => {
+
+                // skip if single is empty
+                if (usecase === 'save' && Models.isEmpty(single)) return;
+
+                const pushData = this.setDataV2(single, {}, this.getDeclaration(arrayContains?.model), arrayContains?.model, usecase);
+
+                // only add if the result is not empty
+                if (!Models.isEmpty(pushData)) targetObject[keyName].push(pushData);
+
+              });
+
+              if (!targetObject[keyName].length) delete targetObject[keyName];
+
+            } else if (usecase !== 'save') {
+
+              targetObject[keyName].push(this.setDataV2({}, {}, this.getDeclaration(arrayContains?.model), arrayContains?.model, usecase));
+
+            }
+
+            if ('defaultItems' in currentDeclaration && usecase !== 'save') {
+
+              if (targetObject[keyName].length < currentDeclaration.defaultItems) {
+
+                const neededItems = currentDeclaration.defaultItems - targetObject[keyName].length;
+
+                for (let index = 0; index < neededItems; index += 1) {
+
+                  targetObject[keyName].push(this.setDataV2({}, {}, this.getDeclaration(arrayContains?.model), arrayContains?.model, usecase));
+
+                }
+
+              }
+
+            }
+
+          }
+
+        }
+
+      }
+
+      /**
+      * if its an object, it will be a child model
+      */
+      if ('model' in currentDeclaration) {
+
+        if (this.debug) console.debug('its a model', keyName, currentDeclaration, currentDeclaration?.model, targetObject);
+
+        // if (usecase === 'save' && (!currentData || (Array.isArray(currentData) && !currentData.length))) {
+
+        //   // delete declaration[name];
+        //   return;
+
+        // 
+
+        targetObject[keyName]= this.setDataV2(currentData, {}, this.getDeclaration(currentDeclaration?.model), currentDeclaration?.model, usecase);
+
+        if (usecase === 'save') {
+
+          if (this.debug) console.debug(124, this[name], Object.keys(this[name]).length);
+
+          if (Models.isEmpty(targetObject[keyName])) {
+
+            delete targetObject[keyName];
+
+          }
+
+        }
+
+      }
+
+    });
+
+    return targetObject;
+
+  }
+
+  static isEmpty (data: any[] | Record<string, any>) {
+
+    if (!data) return true;
+
+    if (Array.isArray(data)) {
+
+      return !data.length;
+
+    }
+
+    if (typeof data === 'object') {
+
+      return !Object.keys(data).length;
+
+    }
+
+    return false;
+
+  }
+
+  static isModel (declaration: SingleDeclaration) {
+
+    return 'model' in declaration;
+
+  }
+
+  static getDefaultValue (declaration: SingleDeclaration) {
+
+    if (declaration.default) {
+
+      return declaration.default;
+
+    }
+
+    if ('type' in declaration) {
+
+      if (declaration.type === 'string') {
+
+        return '';
+
+      }
+
+      if (declaration.type === 'number') {
+
+        return 0;
+
+      }
+
+      if (declaration.type === 'boolean') {
+
+        return false;
+
+      }
+
+      if (declaration.type === 'array') {
+
+        return [];
+
+      }
+
+    }
+
+    return null;
+
+  }
+
+}
+
+const ModelsClass = new Models();
+
+export default ModelsClass;
+export {
+  Models
+};
+export type {
+  ModelDeclaration, ModelDeclarationExtended, ModelOptions, ModelHooks, SingleDeclaration
+};

package/src/main.ts

@@ -0,0 +1,84 @@
+import { createApp, createSSRApp, type Component } from 'vue';
+import { createPinia, type StateTree } from 'pinia';
+import createRouter from './mixins/createRouter';
+import { loadViaDeclarationSync } from './mixins/loadComponents';
+import i18n from './plugins/translations';
+import resizePlugin from './plugins/resize';
+import HelpersPlugin from './plugins/filters';
+import youtubePlugin from './plugins/youtube';
+import traceablePlugin from './plugins/traceable';
+import authPlugin from './plugins/auth';
+import replacerPlugin from './plugins/replacer';
+import currencyPlugin from './plugins/currency';
+import eventsPlugin from './plugins/events';
+import './models';
+import type { RouteRecordRaw } from 'vue-router';
+import logger from './mixins/logger';
+import useMainStore from './stores/main.store';
+
+/**
+ * everything the project owns and the package cannot know: the root component
+ * (App.vue carries the global styles and the editor wiring) and the module and
+ * partial registries for both render targets.
+ */
+export interface AppComponents {
+  root: Component
+  modules: { name: string, component: Component }[]
+  partials: { name: string, component: Component }[]
+  modulesMail: { name: string, component: Component }[]
+  partialsMail: { name: string, component: Component }[]
+}
+
+export function getAppInstance (context: any, routes: readonly RouteRecordRaw[], isSSR: boolean, components: AppComponents) {
+
+  const app = isSSR
+    ? createSSRApp(components.root)
+    : createApp(components.root);
+  const pinia = createPinia();
+
+  app.use(pinia);
+
+  if (isSSR) {
+
+    logger.ssr('set initial state');
+    pinia.state.value = window.__INITIAL_STATE__ as Record<string, StateTree>;
+    
+  } else {
+
+    const mainStore = useMainStore();
+  
+    mainStore.data = context.data;
+    mainStore.layout = context.layout;
+    mainStore.target = context.data?.target || 'browser';
+    mainStore.configuration = context.settings;
+
+  }
+
+  if(context.data?.target === 'mail') {
+
+    loadViaDeclarationSync(components.modulesMail, 'lila', 'module', app);
+    loadViaDeclarationSync(components.partialsMail, 'lila', 'partial', app);
+
+  } else {
+
+    loadViaDeclarationSync(components.modules, 'lila', 'module', app);
+    loadViaDeclarationSync(components.partials, 'lila', 'partial', app);
+
+  }
+
+  const router = createRouter(routes);
+
+  app.use(i18n);
+  app.use(HelpersPlugin);
+  app.use(resizePlugin);
+  app.use(youtubePlugin);
+  app.use(traceablePlugin);
+  app.use(authPlugin);
+  app.use(replacerPlugin);
+  app.use(currencyPlugin);
+  app.use(eventsPlugin);
+
+  app.use(router);
+
+  return { app, router, pinia };
+}

package/src/mixins/createCookieString.ts

@@ -0,0 +1,78 @@
+import dayjs from 'dayjs';
+
+interface CookieOptions {
+    expires?: {
+        value: number;
+        unit: 'days' | 'weeks' | 'months' | 'years';
+    };
+    dev?: boolean;
+    path?: string;
+    domain?: string;
+    // Allow overriding the automatically set values if needed
+    sameSite?: 'None' | 'Lax' | 'Strict';
+    secure?: boolean;
+}
+
+/**
+ * Creates a cookie string for use with document.cookie
+ * 
+ * @example
+ * // For production
+ * document.cookie = createCookieString('lila-cookies', '1');
+ * // For development
+ * document.cookie = createCookieString('lila-cookies', '1', { dev: true });
+ * // Custom values
+ * document.cookie = createCookieString('lila-cookies-accepted', cookieKeys.join(','), { 
+ *   expires: { value: 2, unit: 'years' }
+ * });
+ */
+export function createCookieString (
+  name: string,
+  value: string,
+  options: CookieOptions = {}
+): string {
+  const {
+    expires = { value: 2, unit: 'years' },
+    dev = false,
+    path = '/',
+    domain
+  } = options;
+    // Set sameSite and secure based on dev mode
+    // Can be overridden by explicitly setting these values in options
+  const sameSite = options.sameSite ?? (dev ? 'Lax' : 'None');
+  const secure = options.secure ?? !dev;
+  const cookieParts = [`${name}=${value}`];
+  let isIframe = false;
+
+  try {
+    isIframe = window.self !== window.top;
+  } catch (e) {
+    // If an error occurs, assume the page is in an iframe.
+    isIframe = true;
+  }
+
+  if (expires) {
+    cookieParts.push(`expires=${dayjs().add(expires.value, expires.unit).toString()}`);
+  }
+
+  cookieParts.push(`path=${path}`);
+
+  if (domain) {
+    cookieParts.push(`domain=${domain}`);
+  }
+
+  cookieParts.push(`SameSite=${sameSite}`);
+
+  if (secure) {
+    cookieParts.push('Secure');
+  }
+
+  if(isIframe) {
+    cookieParts.push('Partitioned');
+  }
+
+  console.log(cookieParts.join('; ').trim());
+  return cookieParts.join('; ').trim();
+}
+
+export default createCookieString;

package/src/mixins/createModelDeclaration.ts

@@ -0,0 +1,29 @@
+import type { SingleDeclaration } from '../libs/Models.class';
+import type { BasicData, Structure } from '@lilaquadrat/interfaces';
+
+export default function createModelDeclaration (structure: BasicData<Structure & {required: boolean}>): SingleDeclaration {
+
+  if(!structure) {
+    throw new Error('Structure is required');
+  }
+
+  switch(structure.type) {
+  case 'string':
+  case 'text':
+    return { type: 'string' };
+    
+  case 'number':
+    return { type: 'number' };
+    
+  case 'boolean':
+    return { type: 'boolean' };
+    
+  case 'select':
+    return structure.multiple 
+      ? { type: 'array', contains: { type: 'string' } }
+      : { type: 'string' };
+    
+  default:
+    return {} as SingleDeclaration;
+  }
+}

package/src/mixins/createRouter.ts

@@ -0,0 +1,30 @@
+import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory, type RouteRecordRaw } from 'vue-router';
+import { smartScrollBehavior } from './scroll';
+
+function getHistory () {
+
+  if(import.meta.env.SSR) return createMemoryHistory('/');
+
+  /**
+   * the shareable static preview is opened straight from disk, where pushState
+   * is blocked and no server exists to rewrite deep links - so the route has
+   * to live in the hash
+   */
+  if(__PREVIEW__) return createWebHashHistory();
+
+  return createWebHistory('/');
+
+}
+
+export default (routes: readonly RouteRecordRaw[]) => {
+
+  const historyMode = getHistory();
+  const router = createRouter({
+    history       : historyMode,
+    routes,
+    scrollBehavior: smartScrollBehavior
+  });
+
+  return router;
+
+};