@lilaquadrat/design-core 0.1.0

package/src/components/partials/main-components.partial.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { HelpersPlugin } from '../../plugins/filters';
+import useContentStore from '../../stores/content.store';
+import useMainStore from '../../stores/main.store';
+import useUserStore from '../../stores/user.store';
+import type { BasicData, Content, ContentWithPositions, GenericData } from '@lilaquadrat/interfaces';
+import type { SDKResponse } from '@lilaquadrat/sdk';
+import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/studio';
+import { ref, computed, watch, onServerPrefetch, onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+
+const props = defineProps<{
+    type: 'footer' | 'navigation'
+}>();
+const store = useMainStore();
+const userStore = useUserStore();
+const contentStore = useContentStore(); 
+const route = useRoute();
+const data = ref<SDKResponse<BasicData<Content>>>();
+const dataMerged = ref<ContentWithPositions>();
+const loading = ref<number>(0);
+const error = ref<boolean>(false);
+const typeCache = ref<string>();
+const contentType = computed(() => route.meta.contentType as 'public' | 'members');
+const isLocked = computed(() => contentType.value == 'members' && userStore.locked?.length);
+
+watch(route, () => getContent());
+watch(() => userStore.locked, () => {
+
+  if(!userStore.locked) {
+    getContent();
+  }
+
+});
+
+onBeforeMount(async () => await getContent());
+onServerPrefetch(() => getStoreContent());
+
+function getStoreContent () {
+
+  const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
+  const storeContent = contentStore.findByFilename(contentId);
+
+  if(!storeContent) return;
+
+  data.value = {
+    data  : storeContent,
+    status: 200,
+  };
+
+  loading.value = 200;
+
+  dataMerged.value = mergeContent(data.value.data);
+
+}
+
+async function getContent () {
+
+  getStoreContent();
+  
+  const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
+  
+  if(data.value?.data?.id === contentId) {
+    
+    return;
+    
+  }
+
+  if(isLocked.value) {
+
+    loading.value = 0;
+    error.value = true;
+
+    return;
+  }
+
+  if(contentType.value !== typeCache.value) {
+
+    loading.value = 0;
+    error.value = false;
+    data.value = undefined;
+
+  }
+
+  const storeData = contentStore.findByFilename(contentId);
+
+  if(storeData) {
+
+    data.value = {data: storeData, status: 200};
+    loading.value = 200;
+    return;
+
+  }
+    
+  // get content only if there is a difference between the current and the needed content
+  if (data.value?.data?.id !== contentId && loading.value === 0) {
+    
+    loading.value = 100;
+        
+    try {
+        
+      data.value = await store.getContent({filename: contentId}, contentType.value) as SDKResponse<BasicData<Content>>;
+      loading.value = data.value.status;
+
+    } catch (e: any) {
+
+      data.value = undefined;
+      error.value = true;
+      loading.value = e?.response?.status;
+        
+    }
+
+    if(data.value?.status === 403 || data.value?.status === 401) {
+
+      error.value = true;
+      loading.value = data.value?.status;
+      data.value = undefined;
+
+    } 
+
+    typeCache.value = route.meta.contentType as string;
+
+  }
+
+  if(data.value) {
+
+    dataMerged.value = mergeContent(data.value?.data);
+
+  } else {
+
+    dataMerged.value = undefined;
+
+  }
+
+}
+
+function mergeContent (baseContent: BasicData<Content>) {
+
+  if(baseContent) {
+  
+    const safeData = hardCopy(baseContent);
+
+    if(safeData.modules) {
+      /**
+       * content without generic data is the normal case for a static page, and
+       * generateDataWithContent reads Object.keys of what it is given - so it
+       * throws on undefined instead of returning nothing
+       */
+      if(safeData.genericData) {
+
+        distributeGenericData(safeData.modules, generateDataWithContent(safeData.genericData as GenericData));
+
+      }
+    }
+
+    return prepareContent(safeData);
+
+  }
+
+  return undefined;
+
+} 
+
+</script>
+<template>
+  <lila-content-module v-if="dataMerged" :content="dataMerged" />
+</template>

package/src/components/partials/mediadetection.partial.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useResize } from '../../plugins/resize';
+import { onMounted } from 'vue';
+
+const {plugin} = useResize();
+
+onMounted(() => plugin.getMediaQuery());
+
+</script>
+<template>
+  <section id="mediadetection" class="mediadetection">
+    <div class="mobile" />
+    <div class="tablet" />
+    <div class="desktop" />
+    <div class="wide" />
+  </section>
+</template>
+<style lang="less" scoped>
+.mediadetection {
+
+.tablet,
+.desktop,
+.wide {
+  display: none;
+}
+
+.mobile {
+  display: block;
+}
+
+@media @tablet {
+
+  .mobile,
+  .desktop,
+  .wide {
+    display: none;
+  }
+
+  .tablet {
+    display: block
+  }
+}
+
+@media @desktop {
+
+  .mobile,
+  .tablet,
+  .wide {
+    display: none;
+  }
+
+  .desktop {
+    display: block;
+  }
+}
+
+@media @wide {
+
+  .mobile,
+  .tablet,
+  .desktop {
+    display: none;
+  }
+
+  .wide {
+    display: block
+  }
+}
+
+}
+</style>

package/src/components/partials/qrcode.partial.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import QRCode from 'qrcode';
+import { ref, onMounted } from 'vue';
+
+const props = defineProps<{
+    content: string
+}>();
+const qrCanvas = ref<HTMLCanvasElement | null>(null);
+
+onMounted(() => {
+
+  renderQRCode();
+
+});
+
+const renderQRCode = () => {
+
+  if (qrCanvas.value) {
+
+    QRCode.toCanvas(qrCanvas.value, props.content, {
+      errorCorrectionLevel: 'M',
+      margin              : 5,
+      width               : 250,
+    })
+    
+  }
+
+};
+
+</script>
+<template>
+  <div class="qrcode">
+    <canvas ref="qrCanvas" />
+  </div>
+</template>

package/src/customs.ts

@@ -0,0 +1,12 @@
+import type { HelpersPlugin } from './plugins/filters'
+import type {formatCurrency} from './plugins/currency'
+
+export {}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $currency: typeof formatCurrency
+    $helpers: typeof HelpersPlugin
+    $replacer: (content: string) => string | undefined
+  }
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/functions/PaymenyProviderFactory.ts

@@ -0,0 +1,27 @@
+import ShopifyGraphQLAPI from './shopify.provider';
+import type PaymentProvider from '../interfaces/PaymentProvider.interface';
+import StripePaymentProvider from './stripe.provider';
+
+export default function PaymentProviderFactory (type: 'internal' | 'shopify' | 'stripe', config?: Record<string, string>): PaymentProvider {
+
+  let newProvider: PaymentProvider;
+
+  if(type === 'shopify') {
+
+    if(!config?.store || !config.token) throw new Error('PAYMENT_CONFIG_MISSING');
+
+    newProvider = new ShopifyGraphQLAPI(config.store, config.token);
+
+  } else if(type === 'stripe') {
+
+    newProvider = new StripePaymentProvider();
+    
+  } else {
+    
+    throw new Error('NO_PAYMENT_PROVIDER');
+
+  }
+
+  return newProvider;
+
+}

package/src/functions/lila-dom.ts

@@ -0,0 +1,100 @@
+export class Dom {
+
+  bindings: {event: string, element: any, func: EventListenerOrEventListenerObject}[];
+
+  constructor () {
+
+    this.bindings = [];
+
+  }
+
+  on (events: string, selector: string, func: EventListener) {
+
+    const splitEvents = events.split(' ');
+    const selectedElement = this.getElement(selector);
+
+    splitEvents.forEach((event) => {
+
+      this.bindings.push({ event, element: selectedElement, func });
+      selectedElement.addEventListener(event, func);
+
+    });
+
+  }
+
+  onElement (events: string, element: HTMLElement, func: EventListener) {
+
+    const splitEvents = events.split(' ');
+
+    splitEvents.forEach((event) => {
+
+      this.bindings.push({ event, element, func });
+      element.addEventListener(event, func);
+
+    });
+
+  }
+
+  off (events: string, selector: string) {
+
+    const splitEvents = events.split(' ');
+    const selectedElement = this.getElement(selector);
+    let item;
+
+    splitEvents.forEach((event) => {
+
+      item = this.bindings.find((e) => event === e.event && e.element === selectedElement);
+
+      if(!item) return;
+
+      this.bindings.splice(this.bindings.indexOf(item), 1);
+
+      selectedElement.removeEventListener(event, item.func);
+
+    });
+
+  }
+
+  destroyBindings () {
+
+    this.bindings.forEach((e) => {
+
+      e.element.removeEventListener(e.event, e.func);
+
+    });
+
+    this.bindings = [];
+
+  }
+
+  getElement (selector: string) {
+
+    let selectedElement: Document | HTMLElement;
+
+    if (selector.length > 0) {
+
+      selectedElement = document.querySelector(selector) as HTMLElement;
+
+    } else {
+
+      selectedElement = document;
+
+    }
+
+    return selectedElement;
+
+  }
+
+  // set title (title: string) {
+
+  //   document.title = title
+  //     ? `${title} ${this.store.settings?.title?.short}`
+  //     : this.store.settings?.title?.full;
+
+  // }
+
+}
+
+const dom = new Dom();
+
+export default dom;