@lilaquadrat/design-core 0.2.1 → 0.3.0

package/src/views/download.view.vue

@@ -21,51 +21,53 @@ const isImage = computed(() => imageExtensions.has(extension.value ?? ''));
 const isVideo = computed(() => videoExtensions.has(extension.value ?? ''));
 const downloadUrl = computed(() => {
 
-  const { company, project } = mainStore.config ?? {};
-  const { secure } = mainStore.config?.cdn ?? {};
+    const { company, project } = mainStore;
+    const { secure } = mainStore.endpoints ?? {};
 
-  if (!secure || !company) return undefined;
+    if (!secure || !company) return undefined;
 
-  const parts = [secure, app.value, company];
+    const parts = [secure, app.value, company];
 
-  if (app.value !== 'customers' && project) {
-    parts.push(project);
-    if (list.value) parts.push(list.value);
-  }
+    if (app.value !== 'customers' && project) {
+
+        parts.push(project);
+        if (list.value) parts.push(list.value);
+    
+    }
 
-  parts.push(filename.value);
+    parts.push(filename.value);
 
-  const queryParams = new URLSearchParams();
+    const queryParams = new URLSearchParams();
 
-  if (customer.value) queryParams.set('customer', customer.value);
+    if (customer.value) queryParams.set('customer', customer.value);
 
-  const token = filesStore.token?.token;
+    const token = filesStore.token?.token;
 
-  if (token) queryParams.set('token', token);
+    if (token) queryParams.set('token', token);
 
-  const queryString = queryParams.toString();
+    const queryString = queryParams.toString();
 
-  return parts.join('/') + (queryString ? `?${queryString}` : '');
+    return parts.join('/') + (queryString ? `?${queryString}` : '');
 
 });
 
 onMounted(async () => {
 
-  if (!filesStore.isTokenValid(app.value, scope.value)) {
+    if (!filesStore.isTokenValid(app.value, scope.value)) {
 
-    try {
+        try {
 
-      await filesStore.fetchToken(app.value, scope.value);
+            await filesStore.fetchToken(app.value, scope.value);
 
-    } catch (e) {
+        } catch (e) {
 
-      error.value = (e as Error)?.message || 'TOKEN_FETCH_FAILED';
+            error.value = (e as Error)?.message || 'TOKEN_FETCH_FAILED';
 
-    }
+        }
 
-  }
+    }
 
-  loading.value = false;
+    loading.value = false;
 
 });
 

package/src/views/editor.view.vue

@@ -25,214 +25,239 @@ const settingsCache = ref<AppEditorConfiguration>();
 const active = ref<EditorActiveModule>();
 const mainStore = useMainStore();
 const init = ref<boolean>(false);
+const target = ref<'browser'|'mail'>('browser');
 
 watch(siteSettings, () => {
 
-  /**
+    /**
   * if the target type changes we need to update the available modules
   */
-  const useTarget = siteSettings.value?.target || 'browser';
+    const useTarget = siteSettings.value?.target || 'browser';
 
-  if(useTarget !== mainStore.target) {
+    if(useTarget !== target.value) {
 
-    const target = siteSettings.value?.target === 'browser' || !siteSettings.value?.target 
-      ? 'browser' 
-      : siteSettings.value?.target
+        const moduleTarget = siteSettings.value?.target === 'browser' || !siteSettings.value?.target 
+            ? 'browser' 
+            : siteSettings.value?.target
 
-    mainStore.target = useTarget;
+        target.value = useTarget;
 
-    postModules();
-    postCustomModules();
+        postModules();
+        postCustomModules();
     
-    if (currentInstance) {
+        if (currentInstance) {
 
-      loadViaDeclarationSync(target === 'browser' ? editorStore.modulesBrowser : editorStore.modulesMail, 'lila', 'module', currentInstance.appContext.app);
-      loadViaDeclarationSync(target === 'browser' ? editorStore.partialsBrowser : editorStore.partialsMail, 'lila', 'partial', currentInstance.appContext.app);
+            loadViaDeclarationSync(moduleTarget === 'browser' ? editorStore.modulesBrowser : editorStore.modulesMail, 'lila', 'module', currentInstance.appContext.app);
+            loadViaDeclarationSync(moduleTarget === 'browser' ? editorStore.partialsBrowser : editorStore.partialsMail, 'lila', 'partial', currentInstance.appContext.app);
 
-    }
+        }
 
-  }
+    }
     
 })
 
-function messageHandler (message: StudioIframeMessage) {
+function messageHandler(message: StudioIframeMessage) {
 
-  if (message.data.type === 'studio-content') {
-    console.groupCollapsed('MESSAGE_STUDIO_CONTENT');
-    console.debug(message.data.data);
-    console.groupEnd();
+    if (message.data.type === 'studio-content') {
 
-    contentCache.value = message.data.data;
-    updateContent();
-  }
+        console.groupCollapsed('MESSAGE_STUDIO_CONTENT');
+        console.debug(message.data.data);
+        console.groupEnd();
+
+        contentCache.value = message.data.data;
+        updateContent();
+    
+    }
 
-  //editor main configuration
-  if (message.data.type === 'studio-settings') {
-    console.groupCollapsed('MESSAGE_STUDIO_SETTINGS');
-    console.debug(message.data.data);
-    console.groupEnd();
+    //editor main configuration
+    if (message.data.type === 'studio-settings') {
 
-    settingsCache.value = message.data.data;
-    mainStore.configuration = message.data.data;
-    updateContent();
-  }
+        console.groupCollapsed('MESSAGE_STUDIO_SETTINGS');
+        console.debug(message.data.data);
+        console.groupEnd();
 
-  if (message.data.type === 'studio-editor-settings') {
-    console.groupCollapsed('MESSAGE_STUDIO_EDITOR_SETTINGS');
-    console.debug(message.data.data);
-    console.groupEnd();
+        settingsCache.value = message.data.data;
+        mainStore.editor = message.data.data;
+        updateContent();
+    
+    }
 
-    siteSettings.value = message.data.data;
+    if (message.data.type === 'studio-editor-settings') {
 
-    if(!init.value) {
+        console.groupCollapsed('MESSAGE_STUDIO_EDITOR_SETTINGS');
+        console.debug(message.data.data);
+        console.groupEnd();
 
-      postModules();
-      postCustomModules();
-      postEvents();
-      init.value = true;
+        siteSettings.value = message.data.data;
 
-    }
+        if(!init.value) {
 
-    updateContent();
-    updateContext();
+            postModules();
+            postCustomModules();
+            postEvents();
+            init.value = true;
 
-  }
+        }
 
-  if (message.data.type === 'studio-active') {
-    console.groupCollapsed('MESSAGE_STUDIO_ACTIVE');
-    console.debug(message.data.data);
-    console.groupEnd();
+        updateContent();
+        updateContext();
 
-    active.value = message.data.data;
+    }
+
+    if (message.data.type === 'studio-active') {
+
+        console.groupCollapsed('MESSAGE_STUDIO_ACTIVE');
+        console.debug(message.data.data);
+        console.groupEnd();
+
+        active.value = message.data.data;
 
-    if (active.value) {
+        if (active.value) {
 
-      scrollToModule(active.value);
+            scrollToModule(active.value);
 
+        }
+    
     }
-  }
 
-  if (message.data.type === 'studio-cookie-reset') {
-    console.groupCollapsed('MESSAGE_STUDIO_COOKIE_RESET');
-    console.debug(message.data.data);
-    console.groupEnd();
+    if (message.data.type === 'studio-cookie-reset') {
+
+        console.groupCollapsed('MESSAGE_STUDIO_COOKIE_RESET');
+        console.debug(message.data.data);
+        console.groupEnd();
+
+        resetCookies();
+    
+    }
 
-    resetCookies();
-  }
 }
 
 onMounted(() => {
 
-  if (window.origin === 'null') {
-    live.value = true;
-  }
+    if (window.origin === 'null') {
+
+        live.value = true;
+    
+    }
+
+    if (live.value) return;
 
-  if (live.value) return;
+    removeListeners()
+    addListeners();
 
-  removeListeners()
-  addListeners();
+    window.parent.postMessage('studio-design-settings', '*');
+    window.parent.postMessage('studio-design-ready', '*');
 
-  window.parent.postMessage('studio-design-settings', '*');
-  window.parent.postMessage('studio-design-ready', '*');
 });
 
 onBeforeUnmount(() => removeListeners());
 
-function removeListeners () {
-  window.removeEventListener('message', messageHandler, false);
+function removeListeners() {
+
+    window.removeEventListener('message', messageHandler, false);
+
 }
 
-function addListeners () {
-  window.addEventListener('message', messageHandler, false);
+function addListeners() {
+
+    window.addEventListener('message', messageHandler, false);
+
 }
 
-function updateContent () {
-  content.value = prepareContent({ modules: contentCache.value, ...siteSettings.value });
+function updateContent() {
+
+    content.value = prepareContent({ modules: contentCache.value, ...siteSettings.value });
+
 }
 
-function postModules () {
+function postModules() {
 
-  console.log('POST MODULES', mainStore.target);
+    console.log('POST MODULES', target.value);
 
-  const modules = mainStore.target === 'browser'
-    ? editorStore.availableModulesWithRevision 
-    : editorStore.availableModulesWithRevisionMail
+    const modules = target.value === 'browser'
+        ? editorStore.availableModulesWithRevision 
+        : editorStore.availableModulesWithRevisionMail
 
-  window.parent.postMessage(
-    {
-      type: 'studio-design-modules-with-revision',
-      data: hardCopy(modules),
-    },
-    '*',
-  );
+    window.parent.postMessage(
+        {
+            type: 'studio-design-modules-with-revision',
+            data: hardCopy(modules),
+        },
+        '*',
+    );
 
 }
 
-function postCustomModules () {
+function postCustomModules() {
 
-  const modules = mainStore.target === 'browser'
-    ? mainStore.customModulesBrowser 
-    : mainStore.customModulesMail
+    const modules = target.value === 'browser'
+        ? mainStore.customModulesBrowser 
+        : mainStore.customModulesMail
 
-  if (!modules) return;
+    if (!modules) return;
 
-  window.parent.postMessage(
-    {
-      type: 'studio-design-custom-modules',
-      data: hardCopy(modules),
-    },
-    '*',
-  );
+    window.parent.postMessage(
+        {
+            type: 'studio-design-custom-modules',
+            data: hardCopy(modules),
+        },
+        '*',
+    );
 
 }
 
-function postEvents () {
+function postEvents() {
 
-  window.parent.postMessage(
-    {
-      type: 'studio-design-events',
-      data: eventDeclarations,
-    },
-    '*',
-  );
+    window.parent.postMessage(
+        {
+            type: 'studio-design-events',
+            data: eventDeclarations,
+        },
+        '*',
+    );
 
 }
 
 /**
  * sets sitetitle and description
  */
-function updateContext () {
+function updateContext() {
 
-  contentStore.setContext({
-    sitetitle  : siteSettings?.value?.settings?.title,
-    description: siteSettings?.value?.settings?.description,
-  })
+    contentStore.setContext({
+        sitetitle: siteSettings?.value?.settings?.title,
+        description: siteSettings?.value?.settings?.description,
+    })
 
 }
 
-function resetCookies () {
-  const cookies = document.cookie.split(';').filter((single) => single);
+function resetCookies() {
+
+    const cookies = document.cookie.split(';').filter((single) => single);
 
-  cookies.forEach((single) => {
-    const name = single.split('=');
+    cookies.forEach((single) => {
+
+        const name = single.split('=');
+
+        document.cookie = `${name[0].trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None;`;
+    
+    });
 
-    document.cookie = `${name[0].trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None;`;
-  });
 }
 
-function scrollToModule (active: EditorActiveModule): void {
+function scrollToModule(active: EditorActiveModule): void {
+
+    nextTick().then(() => {
 
-  nextTick().then(() => {
-    const baseModule = contentCache.value?.find((single) => single.uuid === active.uuid);
-    const containerSelector = baseModule?.position === 'content' || !baseModule?.position ? '.lila-content-module .container:not(.top, .bottom)' : `.lila-content-module .container.${baseModule.position}`;
-    const contentPosition: Content['modules'] = baseModule?.position === 'content' || !baseModule?.position ? content.value.content : content.value[baseModule.position];
-    const index = contentPosition?.findIndex((single) => single.uuid === active.uuid);
+        const baseModule = contentCache.value?.find((single) => single.uuid === active.uuid);
+        const containerSelector = baseModule?.position === 'content' || !baseModule?.position ? '.lila-content-module .container:not(.top, .bottom)' : `.lila-content-module .container.${baseModule.position}`;
+        const contentPosition: Content['modules'] = baseModule?.position === 'content' || !baseModule?.position ? content.value.content : content.value[baseModule.position];
+        const index = contentPosition?.findIndex((single) => single.uuid === active.uuid);
 
-    if (!index && index !== 0) return;
+        if (!index && index !== 0) return;
 
-    scrollToSelector(`${containerSelector} .lila-module:nth-child(${index + 1}), ${containerSelector} .partial-container:nth-child(${index + 1})`,)
+        scrollToSelector(`${containerSelector} .lila-module:nth-child(${index + 1}), ${containerSelector} .partial-container:nth-child(${index + 1})`,)
 
-  });
+    });
 
 }
 </script>

package/src/views/login.view.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type AppState from '../interfaces/AppState.interface';
+import type AuthCallbackResult from '../interfaces/AuthCallbackResult.interface';
 import { auth } from '../plugins/auth';
 import useMainStore from '../stores/main.store';
 import useUserStore from '../stores/user.store';
-import type { RedirectLoginResult } from '@auth0/auth0-spa-js';
 import StudioSDK from '@lilaquadrat/sdk';
 import { onBeforeMount, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -17,66 +16,66 @@ const hint = ref<string>();
 
 onBeforeMount(async () => {
 
-  let loginResult: RedirectLoginResult<AppState>;
+    let loginResult: AuthCallbackResult;
 
-  // Attempt to handle the authentication callback.
-  try {
+    // Attempt to handle the authentication callback.
+    try {
 
-    loginResult = await auth.handleCallback();
+        loginResult = await auth.handleCallback();
   
-  } catch (e: any) { 
+    } catch (e: unknown) {
 
-    console.error(e);
-    error.value = true;
-    return;
+        console.error(e);
+        error.value = true;
+        return;
 
-  }
+    }
 
-  await userStore.updateLock();
+    await userStore.updateLock();
   
-  console.log(userStore.locked, loginResult);
+    console.log(userStore.locked, loginResult);
   
-  const sdk = new StudioSDK(mainStore.apiConfig);
+    const sdk = new StudioSDK(mainStore.apiConfig);
 
-  if(userStore.locked === 'user-connect' && loginResult?.appState?.customerId) {
+    if(userStore.locked === 'user-connect' && loginResult?.appState?.customerId) {
 
-    try {
+        try {
 
-      // Attempt to connect the user with the provided customerId.
-      await sdk.members.me.connect(loginResult?.appState?.customerId);
-      await userStore.updateLock();
+            // Attempt to connect the user with the provided customerId.
+            await sdk.members.me.connect(loginResult?.appState?.customerId);
+            await userStore.updateLock();
 
-    } catch (e) {
+        } catch (e) {
 
-      console.error(e);
-      console.error('CONNECT_ACCOUNT_TO_CUSTOMER_FAILED');
+            console.error(e);
+            console.error('CONNECT_ACCOUNT_TO_CUSTOMER_FAILED');
     
-    }
+        }
 
-  }
+    }
 
-  if(!userStore.userData?.emailConfirmed && loginResult?.appState?.emailConfirmationCode) {
+    if(!userStore.userData?.emailConfirmed && loginResult?.appState?.emailConfirmationCode) {
 
-    try {
+        try {
 
-      // Attempt to confirm the email address with the provided code
-      await sdk.members.me.confirmEmail(loginResult?.appState?.emailConfirmationCode)
-      await userStore.updateLock();
+            // Attempt to confirm the email address with the provided code
+            await sdk.members.me.confirmEmail(loginResult?.appState?.emailConfirmationCode)
+            await userStore.updateLock();
 
-    } catch (e) {
+        } catch (e) {
 
-      console.error(e);
-      console.error('EMAIL_CONFIRMATION_FAILED');
+            console.error(e);
+            console.error('EMAIL_CONFIRMATION_FAILED');
     
-    }
+        }
 
-  }
+    }
 
-  router.replace(routeForLock(userStore.locked));
+    router.replace(routeForLock(userStore.locked));
 
 })
 
 </script>
 <template>
   <lila-error-partial v-if="error" :status="400" :hint="hint" type="members" />
-</template>
+</template>

package/src/views/signup-account.view.vue

@@ -14,36 +14,36 @@ const store = useMainStore();
 
 onBeforeMount(() => {
 
-  if(route.query.customerId) {
+    if(route.query.customerId) {
 
-    userStore.setCustomer({ _id: route.query.customerId as string });
+        userStore.setCustomer({ _id: route.query.customerId as string });
 
-  }
+    }
 
-  if(route.query.emailConfirmationCode) {
+    if(route.query.emailConfirmationCode) {
 
-    userStore.emailConfirmationCode = route.query.emailConfirmationCode as string;
+        userStore.emailConfirmationCode = route.query.emailConfirmationCode as string;
 
-  }
+    }
 
-  if(!auth.isAuth.value) {
+    if(!auth.isAuth.value) {
 
-    auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
+        auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
 
-  } else {
+    } else {
 
-    router.push({ name: 'members' });
+        router.push({ name: 'members' });
 
-  }
+    }
 
 });
 
 const contentMerged = computed(() => {
 
-  const data = store.staticData?.redirect;
+    const data = store.staticData?.redirect;
 
-  if(data) return prepareContent(data) as unknown as ContentWithPositions;
-  return prepareContent({}) as unknown as ContentWithPositions;
+    if(data) return prepareContent(data) as unknown as ContentWithPositions;
+    return prepareContent({}) as unknown as ContentWithPositions;
 
 });