@lilaquadrat/design-core 0.2.2 → 0.3.0

package/src/plugins/signupFlow.ts

@@ -18,71 +18,73 @@ const STEP_ORDER: SignupStepKey[] = ['register', 'account', 'connect', 'verify']
  * maps a lock state to the route the user has to complete next.
  * keep this the single place that knows about the lock string values.
  */
-function routeForLock (locked?: string): { name: string } {
+function routeForLock(locked?: string): { name: string } {
 
-  if (locked === 'user-connect') return { name: 'signup-connect' };
-  if (locked === 'email-verified') return { name: 'signup-verify' };
+    if (locked === 'user-connect') return { name: 'signup-connect' };
+    if (locked === 'email-verified') return { name: 'signup-verify' };
 
-  return { name: 'members' };
+    return { name: 'members' };
 
 }
 
-function useSignupFlow () {
+function useSignupFlow() {
 
-  const userStore = useUserStore();
-  const route = useRoute();
-  // DEBUG: ?step=<1|2|3|4> forces the active step (dev only)
-  const debugStep = computed<SignupStepKey | undefined>(() => {
+    const userStore = useUserStore();
+    const route = useRoute();
+    // DEBUG: ?step=<1|2|3|4> forces the active step (dev only)
+    const debugStep = computed<SignupStepKey | undefined>(() => {
 
-    const step = route?.query?.step;
+        const step = route?.query?.step;
 
-    if (import.meta.env.DEV && typeof step === 'string') {
+        if (import.meta.env.DEV && typeof step === 'string') {
 
-      const index = Number(step) - 1;
+            const index = Number(step) - 1;
 
-      if (index >= 0 && index < STEP_ORDER.length) return STEP_ORDER[index];
+            if (index >= 0 && index < STEP_ORDER.length) return STEP_ORDER[index];
 
-    }
+        }
 
-    return undefined;
+        return undefined;
 
-  });
-  // the furthest step the user has reached, derived from auth + lock state.
-  // being authenticated implies register + account are done, even when there
-  // is no local customer (e.g. connecting from a different browser).
-  const currentKey = computed<SignupStepKey>(() => {
+    });
+    // the furthest step the user has reached, derived from auth + lock state.
+    // being authenticated implies register + account are done, even when there
+    // is no local customer (e.g. connecting from a different browser).
+    const currentKey = computed<SignupStepKey>(() => {
 
-    if (debugStep.value) return debugStep.value;
+        if (debugStep.value) return debugStep.value;
 
-    if (!auth.isAuth.value) {
-      return (userStore.customer || userStore.userData) ? 'account' : 'register';
-    }
+        if (!auth.isAuth.value) {
 
-    if (userStore.locked === 'user-connect') return 'connect';
-    if (userStore.locked === 'email-verified') return 'verify';
+            return (userStore.customer || userStore.userData) ? 'account' : 'register';
+        
+        }
 
-    return 'verify';
+        if (userStore.locked === 'user-connect') return 'connect';
+        if (userStore.locked === 'email-verified') return 'verify';
 
-  });
-  const isComplete = computed(() => !debugStep.value && auth.isAuth.value && !userStore.locked);
-  // steps are monotonic: everything before the current step counts as done
-  const steps = computed<SignupStep[]>(() => {
+        return 'verify';
 
-    const currentIndex = STEP_ORDER.indexOf(currentKey.value);
+    });
+    const isComplete = computed(() => !debugStep.value && auth.isAuth.value && !userStore.locked);
+    // steps are monotonic: everything before the current step counts as done
+    const steps = computed<SignupStep[]>(() => {
 
-    return STEP_ORDER.map((key, index) => ({
-      key,
-      label : `signup-step-${key}`,
-      status: isComplete.value || index < currentIndex
-        ? 'done'
-        : index === currentIndex
-          ? 'current'
-          : 'upcoming',
-    }));
+        const currentIndex = STEP_ORDER.indexOf(currentKey.value);
 
-  });
+        return STEP_ORDER.map((key, index) => ({
+            key,
+            label: `signup-step-${key}`,
+            status: isComplete.value || index < currentIndex
+                ? 'done'
+                : index === currentIndex
+                    ? 'current'
+                    : 'upcoming',
+        }));
 
-  return { steps, currentKey, isComplete, routeForLock };
+    });
+
+    return { steps, currentKey, isComplete, routeForLock };
 
 }
 

package/src/plugins/traceable.ts

@@ -3,51 +3,53 @@ import useCallStore from '../stores/calls.store';
 import type { Ref } from 'vue';
 
 const plugin = {
-  install: (): void => {
-    logger.plugins('traceable installed')
-  },
+    install: (): void => {
+
+        logger.plugins('traceable installed')
+    
+    },
 };
 const useTraceable = () => {
 
-  const { addCall, updateCall } = useCallStore();
+    const { addCall, updateCall } = useCallStore();
 
-  async function traceable<T> (promise: Promise<T>, traceId?: Ref<string|undefined>, options: {time: number} = {time: 3000}) {
+    async function traceable<T>(promise: Promise<T>, traceId?: Ref<string|undefined>, options: {time: number} = {time: 3000}) {
 
-    // add the new call to vuex and fetch the id
-    const id = addCall();
+        // add the new call to vuex and fetch the id
+        const id = addCall();
 
-    if(traceId) traceId.value = id;
+        if(traceId) traceId.value = id;
 
-    const minimum = new Promise<void>((resolve) => {
+        const minimum = new Promise<void>((resolve) => {
     
-      setTimeout(() => resolve(), options.time);
+            setTimeout(() => resolve(), options.time);
     
-    });
-    // the minimum promise will hold the execution of allsettled
-    const results = await Promise.allSettled([minimum, promise]);
+        });
+        // the minimum promise will hold the execution of allsettled
+        const results = await Promise.allSettled([minimum, promise]);
     
-    // no error will be thrown, we need to check the result of the given promise
-    if (results[1].status === 'rejected') {
+        // no error will be thrown, we need to check the result of the given promise
+        if (results[1].status === 'rejected') {
     
-      updateCall(id, 'rejected');
-      throw results[1].reason;
+            updateCall(id, 'rejected');
+            throw results[1].reason;
     
-    } else {
+        } else {
     
-      updateCall(id, 'resolved');
-      return results[1].value;
+            updateCall(id, 'resolved');
+            return results[1].value;
     
-    }
+        }
     
-  }
+    }
   
-  return {
-    traceable
-  }
+    return {
+        traceable
+    }
   
 };
 
 export default plugin;
 export {
-  useTraceable
+    useTraceable
 }

package/src/plugins/translations.ts

@@ -2,13 +2,13 @@ import { createI18n } from 'vue-i18n';
 import de from '../translations/de';
 
 const i18n = createI18n({
-  legacy        : false,
-  locale        : 'de',
-  fallbackLocale: 'de',
-  missingWarn   : false,
-  fallbackWarn  : false,
-  missing       : (_locale, key) => key,
-  messages      : { de },
+    legacy: false,
+    locale: 'de',
+    fallbackLocale: 'de',
+    missingWarn: false,
+    fallbackWarn: false,
+    missing: (_locale, key) => key,
+    messages: { de },
 });
 const { t } = i18n.global;
 
@@ -19,9 +19,9 @@ const { t } = i18n.global;
  * the strings it renders itself - so a project calls this once at startup with
  * its own translation file.
  */
-function addMessages (locale: string, messages: Record<string, unknown>) {
+function addMessages(locale: string, messages: Record<string, unknown>) {
 
-  i18n.global.mergeLocaleMessage(locale, messages);
+    i18n.global.mergeLocaleMessage(locale, messages);
 
 }
 

package/src/plugins/youtube.ts

@@ -3,78 +3,83 @@ import { ref } from 'vue';
 
 class Youtube {
 
-  youtubeApiState = ref<boolean>(false);
+    youtubeApiState = ref<boolean>(false);
 
-  loadState = ref<boolean>(false);
+    loadState = ref<boolean>(false);
 
-  loadApi () {
+    loadApi() {
 
-    if(this.loadState.value) return Promise.resolve();
+        if(this.loadState.value) return Promise.resolve();
     
-    return new Promise<void>((resolve) => {
+        return new Promise<void>((resolve) => {
       
-      const script = document.createElement('script');
+            const script = document.createElement('script');
       
-      script.src = 'https://www.youtube.com/iframe_api';
+            script.src = 'https://www.youtube.com/iframe_api';
       
-      script.onload = () => {
-        resolve();
-      };
+            script.onload = () => {
+
+                resolve();
+            
+            };
       
-      document.body.appendChild(script);
-      this.loadState.value = true;
+            document.body.appendChild(script);
+            this.loadState.value = true;
             
-    });
-  }
+        });
+    
+    }
 
-  /**
+    /**
    * load the youtube iframe api and changes the youtubeApiState to true when all is ready
    */
-  addYoutube () {
+    addYoutube() {
 
-    if(!this.youtubeApiState.value) {
+        if(!this.youtubeApiState.value) {
 
-      this.loadApi()
+            this.loadApi()
 
-    }
+        }
   
-  }
+    }
 
 }
 
 const youtubePlugin = new Youtube();
 const plugin = {
-  install: (): void => {
-    // this exists only for initialization purposes
-    logger.plugins('youtube installed');
-  },
+    install: (): void => {
+
+        // this exists only for initialization purposes
+        logger.plugins('youtube installed');
+    
+    },
 };
 
 if(typeof window !== 'undefined') {
 
-  window.onYouTubeIframeAPIReady = () => {
+    window.onYouTubeIframeAPIReady = () => {
   
-    youtubePlugin.youtubeApiState.value = true;
+        youtubePlugin.youtubeApiState.value = true;
     
-  };
+    };
     
 }
 
-function useYoutube () {
+function useYoutube() {
       
-  return {
-    youtubeApiState: youtubePlugin.youtubeApiState, 
-    /**
+    return {
+        youtubeApiState: youtubePlugin.youtubeApiState, 
+        /**
     * loads the youtube iframe api and changes the youtubeApiState to true when all is ready
     */
-    addYoutube     : () => youtubePlugin.addYoutube()
-  };
+        addYoutube: () => youtubePlugin.addYoutube()
+    };
       
 }
 
 export default plugin;
   
 export {
-  useYoutube
+    useYoutube
 };
   

package/src/routes.ts

@@ -7,126 +7,126 @@ import SignupAccountView from './views/signup-account.view.vue';
 import DownloadView from './views/download.view.vue';
 
 const dynamicRoutes: readonly RouteRecordRaw[] = [
-  {
-    path     : '/m/:pathMatch(.*)?',
-    name     : 'members',
-    component: ContentView,
-    meta     : {
-      contentType: 'members'
-    }
-  },
-  {
-    path     : '/login-callback',
-    name     : 'login-callback',
-    component: LoginView
-  },
-  {
-    path     : '/signup/account',
-    name     : 'signup-account',
-    component: SignupAccountView
-  },
-  {
-    path     : '/signup',
-    name     : 'signup',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
-  {
-    path     : '/signup/connect',
-    name     : 'signup-connect',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
-  {
-    path     : '/signup/verify',
-    name     : 'signup-verify',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
-  {
-    path     : '/signup/done',
-    name     : 'signup-done',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
-  {
-    path     : '/download/:app/:filename',
-    name     : 'download',
-    component: DownloadView,
-    meta     : {
-      contentType: 'members'
-    }
-  },
-  {
-    path     : '',
-    name     : 'public-home',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
-  {
-    path     : '/:pathMatch(.*)*',
-    name     : 'public-content',
-    component: ContentView,
-    meta     : {
-      contentType: 'public'
-    }
-  },
+    {
+        path: '/m/:pathMatch(.*)?',
+        name: 'members',
+        component: ContentView,
+        meta: {
+            contentType: 'members'
+        }
+    },
+    {
+        path: '/login-callback',
+        name: 'login-callback',
+        component: LoginView
+    },
+    {
+        path: '/signup/account',
+        name: 'signup-account',
+        component: SignupAccountView
+    },
+    {
+        path: '/signup',
+        name: 'signup',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
+    {
+        path: '/signup/connect',
+        name: 'signup-connect',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
+    {
+        path: '/signup/verify',
+        name: 'signup-verify',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
+    {
+        path: '/signup/done',
+        name: 'signup-done',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
+    {
+        path: '/download/:app/:filename',
+        name: 'download',
+        component: DownloadView,
+        meta: {
+            contentType: 'members'
+        }
+    },
+    {
+        path: '',
+        name: 'public-home',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'public-content',
+        component: ContentView,
+        meta: {
+            contentType: 'public'
+        }
+    },
 ];
 const editorRoutes: readonly RouteRecordRaw[] = [
-  {
-    path     : '/:pathMatch(.*)*',
-    name     : 'editor',
-    component: EditorView
-  },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'editor',
+        component: EditorView
+    },
 ];
 
 /**
  * the module gallery is the design itself, so the project provides the views.
  * testView is dev only and is left out of a production build.
  */
-function createPreviewRoutes (previewView: Component, testView?: Component): readonly RouteRecordRaw[] {
+function createPreviewRoutes(previewView: Component, testView?: Component): readonly RouteRecordRaw[] {
 
-  const testRoutes: RouteRecordRaw[] = testView && import.meta.env.DEV
-    ? [
-      {
-        path     : '/test/:name',
-        name     : 'test-view',
-        component: testView,
-        meta     : {
-          testOnly: true,
-        },
-      },
-    ]
-    : [];
+    const testRoutes: RouteRecordRaw[] = testView && import.meta.env.DEV
+        ? [
+            {
+                path: '/test/:name',
+                name: 'test-view',
+                component: testView,
+                meta: {
+                    testOnly: true,
+                },
+            },
+        ]
+        : [];
 
-  return [
-    ...testRoutes,
-    {
-      path     : '/:pathMatch(.*)*',
-      name     : 'preview',
-      component: previewView
-    },
-    {
-      path     : '',
-      name     : 'preview-home',
-      component: previewView
-    },
-  ];
+    return [
+        ...testRoutes,
+        {
+            path: '/:pathMatch(.*)*',
+            name: 'preview',
+            component: previewView
+        },
+        {
+            path: '',
+            name: 'preview-home',
+            component: previewView
+        },
+    ];
 
 }
 
 export {
-  dynamicRoutes,
-  editorRoutes,
-  createPreviewRoutes
+    dynamicRoutes,
+    editorRoutes,
+    createPreviewRoutes
 };