feat(file): base64 converter

src/components/editor/main/EditorBase.vue

@@ -88,4 +88,8 @@
   const id = (entity: ContextStatePageContent) => {
     if (!entity.external) return entity.type + '-' + entity.id
   }
+
+  const onLoad = (e: string) => {
+    store.commit('pdf/setBackground', e)
+  }
 </script>

src/components/material/InputFile.vue

@@ -0,0 +1,60 @@
+<template>
+  <label
+    :for="`input-file-${props.title}`"
+    :class="width"
+    class="
+      flex
+      items-center
+      p-1
+      justify-center
+      rounded
+      cursor-pointer
+      wb-text
+      bg-gray-300
+      dark:bg-gray-600
+      block
+    "
+    >{{ props.title }}</label
+  >
+  <input
+    :id="`input-file-${props.title}`"
+    ref="inp"
+    class="opacity-0 absolute z-min"
+    type="file"
+    @change.prevent="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const inp = ref<HTMLElement | null>(null as any)
+
+  const emit = defineEmits(['load', 'error'])
+
+  const props = defineProps({
+    title: {
+      required: false,
+      type: String,
+      default: 'Inserir Imagem',
+    },
+    width: {
+      required: false,
+      type: String,
+      default: 'w-32',
+    },
+  })
+
+  const onChange = () => {
+    const file = (inp.value as any).files[0]
+
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = function () {
+      emit('load', reader.result)
+    }
+    reader.onerror = function (error) {
+      emit('error', error)
+    }
+  }
+</script>

src/store/module/pdf.ts

@@ -7,6 +7,9 @@ export default {
     ({
       styles: {
         base: {
+          background: {
+            data: '' as string,
+          },
           pageSize: useDefines().pdf().base().pageSize()[0] as string,
           pageOrientation: useDefines()
             .pdf()
@@ -139,6 +142,9 @@ export default {
     setStyles(state: PDFState, payload: any) {
       state.styles = payload
     },
+    setBackground(state: PDFState, payload: any) {
+      state.styles.base.background.data = payload
+    },
   },
   actions: {},
   getters: {},

src/use/defines.ts

@@ -93,6 +93,61 @@ export const useDefines: Callback<any> = () => {
         ]
       }
 
+      const pageSizeFixes = () => {
+        return {
+          '4A0': [4767.87, 6740.79],
+          '2A0': [3370.39, 4767.87],
+          A0: [2383.94, 3370.39],
+          A1: [1683.78, 2383.94],
+          A2: [1190.55, 1683.78],
+          A3: [841.89, 1190.55],
+          A4: [595.28, 841.89],
+          A5: [419.53, 595.28],
+          A6: [297.64, 419.53],
+          A7: [209.76, 297.64],
+          A8: [147.4, 209.76],
+          A9: [104.88, 147.4],
+          A10: [73.7, 104.88],
+          B0: [2834.65, 4008.19],
+          B1: [2004.09, 2834.65],
+          B2: [1417.32, 2004.09],
+          B3: [1000.63, 1417.32],
+          B4: [708.66, 1000.63],
+          B5: [498.9, 708.66],
+          B6: [354.33, 498.9],
+          B7: [249.45, 354.33],
+          B8: [175.75, 249.45],
+          B9: [124.72, 175.75],
+          B10: [87.87, 124.72],
+          C0: [2599.37, 3676.54],
+          C1: [1836.85, 2599.37],
+          C2: [1298.27, 1836.85],
+          C3: [918.43, 1298.27],
+          C4: [649.13, 918.43],
+          C5: [459.21, 649.13],
+          C6: [323.15, 459.21],
+          C7: [229.61, 323.15],
+          C8: [161.57, 229.61],
+          C9: [113.39, 161.57],
+          C10: [79.37, 113.39],
+          RA0: [2437.8, 3458.27],
+          RA1: [1729.13, 2437.8],
+          RA2: [1218.9, 1729.13],
+          RA3: [864.57, 1218.9],
+          RA4: [609.45, 864.57],
+          SRA0: [2551.18, 3628.35],
+          SRA1: [1814.17, 2551.18],
+          SRA2: [1275.59, 1814.17],
+          SRA3: [907.09, 1275.59],
+          SRA4: [637.8, 907.09],
+          EXECUTIVE: [521.86, 756.0],
+          FOLIO: [612.0, 936.0],
+          LEGAL: [612.0, 1008.0],
+          LETTER: [612.0, 792.0],
+          TABLOID: [792.0, 1224.0],
+        }
+      }
+
       const pageOrientation = (): Array<string> => {
         return ['portrait', 'landscape']
       }
@@ -101,7 +156,7 @@ export const useDefines: Callback<any> = () => {
         return [40, 5, 40, 5]
       }
 
-      return { pageSize, pageMargins, pageOrientation }
+      return { pageSize, pageMargins, pageOrientation, pageSizeFixes }
     }
 
     return {

src/use/google/fonts.ts

@@ -85,6 +85,8 @@ export const useFonts: Callback<any> = () => {
           : obj.files['regular'],
       }
 
+      // console.log(normalize[obj.family])
+
       names.push(obj.family)
     })
 

src/use/pdf.ts

@@ -7,6 +7,8 @@ import { ContextState, ContextStatePageContent } from '@/types/context'
 import { useRaw } from './raw'
 import { useEnv } from './env'
 import { useFonts } from './google/fonts'
+import { useDefines } from './defines'
+import store from '@/store'
 
 export const usePDF: Callback<any> = () => {
   const toast = useToast()
@@ -84,10 +86,29 @@ export const usePDF: Callback<any> = () => {
       }
     }
 
+    const frontCover = (store: Store<any>) => {
+      let _raw = {
+        image: store.state.pdf.styles.base.background.data,
+        pageBreak: 'after',
+        width: useDefines().pdf().base().pageSizeFixes()[
+          store.state.pdf.styles.base.pageSize
+        ][0],
+        height: useDefines().pdf().base().pageSizeFixes()[
+          store.state.pdf.styles.base.pageSize
+        ][1],
+      }
+
+      return _raw
+    }
+
     const content = (store: Store<any>): Array<any> => {
       const pages: Array<ContextState> = store.state.project.pages
       const arr: Array<any> = []
 
+      // TODO: Resolve this
+      const cover = frontCover(store)
+      arr.push(cover)
+
       pages.forEach((page: ContextState) => {
         page.entity.forEach((entity: ContextStatePageContent) => {
           let _raw = {}

tailwind.config.js

@@ -64,7 +64,8 @@ module.exports = {
         "max": "9999",
         "preview": "200",
         "aside": "100",
-        "aside-open": "100"
+        "aside-open": "100",
+        "min": "-1"
       })
     },
     textIndent: {