refactor(pdf): base footer set

src/components/editor/pdf/PDFConfiguration.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col justify-start items-start p-5">
-    <PDFConfigurationSetHeader />
+    <PDFConfigurationHeader />
     <PDFConfigurationSetCover />
     <PDFConfigurationSetBase />
     <PDFConfigurationSetParagraph />

src/components/editor/pdf/set/PDFConfigurationSetBase.vue

@@ -16,9 +16,9 @@
     >
       <div class="wb-input-container">
         <label class="mx-2 text-xs">{{ t('editor.pdf.cover.type') }}</label>
-        <InputBoolean v-model="switcher.main" />
+        <InputBoolean v-model="PDF.styles.switcher.main" />
         <InputFile
-          v-if="switcher.main"
+          v-if="PDF.styles.switcher.main"
           id="main-background"
           :title="t('generics.input.image')"
           :src="pdf.base.background.main"
@@ -68,14 +68,32 @@
           </section>
         </section>
       </div>
+      <div class="wb-input-container">
+        <label class="mx-2 text-xs">{{
+          t('editor.pdf.base.footer.title')
+        }}</label>
+        <section
+          class="flex justify-between items-center w-full flex-row flex-wrap"
+        >
+          <InputBoolean v-model="pdf.switcher.footer" />
+          <section
+            :class="[
+              !pdf.switcher.footer ? 'wb-disabled' : '',
+            ]"
+          >
+            <label>{{ t('editor.pdf.base.footer.start') }}</label>
+            <InputNumber v-model="pdf.base.footer.start" />
+          </section>
+        </section>
+      </div>
     </div>
   </PDFConfigurationSlot>
 </template>
 
 <script setup lang="ts">
   import { usePDFStore } from '@/store/pdf'
   import { useDefines } from '@/use/defines'
-  import { reactive, computed } from 'vue'
+  import { computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const PDF = usePDFStore()
@@ -84,11 +102,6 @@
 
   const pdf = computed(() => PDF.styles)
 
-  const switcher = reactive({
-    cover: PDF.styles.switcher.cover,
-    main: PDF.styles.switcher.main,
-  })
-
   const onMainImageLoad = (e: any) => {
     PDF.setMainBackground(e)
   }

src/lang/br/editor.ts

@@ -114,6 +114,11 @@ export default {
         right: 'Direita',
         bottom: 'Baixo',
       },
+      footer: {
+        title: 'Rodapé',
+        exists: 'Habilitar',
+        start: 'Início',
+      },
     },
     custom: {
       image: {

src/lang/en/editor.ts

@@ -115,6 +115,11 @@ export default {
         right: 'Right',
         bottom: 'Bottom',
       },
+      footer: {
+        title: 'Footer',
+        exists: 'On',
+        start: 'Initial',
+      },
     },
     custom: {
       image: {

src/store/pdf.ts

@@ -22,6 +22,9 @@ export const usePDFStore = defineStore('pdf', {
             right: useDefines().pdf().base().pageMargins()[2] as number,
             bottom: useDefines().pdf().base().pageMargins()[3] as number,
           },
+          footer: {
+            start: 3,
+          },
         },
         paragraph: {
           font: useDefines().pdf().fontFamily()[1] as string,
@@ -134,6 +137,7 @@ export const usePDFStore = defineStore('pdf', {
         switcher: {
           cover: false,
           main: false,
+          footer: true,
         },
       },
       fonts: [],

src/tailwind.css

@@ -34,7 +34,11 @@
   }
 
   .wb-input-container {
-    @apply flex flex-1 h-20 w-auto items-center justify-between p-2 mx-2 mt-5 border rounded-lg border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-800 shadow-lg;
+    @apply flex flex-1 h-auto w-auto items-center justify-between p-5 mx-2 mt-5 border rounded-lg border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-800 shadow-lg;
+  }
+
+  .wb-disabled {
+    @apply opacity-50 pointer-events-none;
   }
 }
 

src/types/pdf.ts

@@ -25,12 +25,17 @@ export interface PDFStateStylesBaseMargins {
 }
 
 export interface PDFStateStylesBase {
+  footer: PDFStateStylesBaseFooter
   background: PDFStateStylesBaseBackground
   pageSize: string
   pageOrientation: string
   pageMargins: PDFStateStylesBaseMargins
 }
 
+export interface PDFStateStylesBaseFooter {
+  start: number
+}
+
 export interface PDFStateStylesParagraph {
   font: string
   fontSize: number
@@ -66,6 +71,7 @@ export interface PDFStateStylesHeading {
 export interface PDFStateStylesSwitcher {
   cover: boolean
   main: boolean
+  footer: boolean
 }
 
 export interface PDFState {

src/use/pdf.ts

@@ -474,20 +474,21 @@ export const usePDF = () => {
               : undefined
           }
         : undefined,
-      footer: function (
-        currentPage: number,
-        pageCount: number,
-        pageSize: number
-      ) {
-        return [
-          {
-            text: currentPage > 2 ? currentPage.toString() : '',
-            margin: [15, 0],
-            fontSize: 9,
-            alignment: currentPage % 2 ? 'left' : 'right',
-          },
-        ]
-      },
+      footer: PDF.styles.switcher.footer
+        ? function (currentPage: number, pageCount: number, pageSize: number) {
+            return [
+              {
+                text:
+                  currentPage >= PDF.styles.base.footer.start
+                    ? currentPage.toString()
+                    : '',
+                margin: [15, 0],
+                fontSize: 9,
+                alignment: currentPage % 2 ? 'left' : 'right',
+              },
+            ]
+          }
+        : undefined,
       pageBreakBefore: function (
         currentNode: any,
         followingNodesOnPage: any,

src/use/storage/storage.ts

@@ -40,6 +40,20 @@ export const useStorage = () => {
       _.editor.configuration.auto = 5
     }
 
+    // <= 0.7.2
+    if (!_.pdf.styles.base.footer) {
+      _.pdf.styles.base.footer = {
+        start: 3,
+      }
+    }
+
+    if (!_.pdf.styles.switcher.footer) {
+      _.pdf.styles.switcher = {
+        ..._.pdf.styles.switcher,
+        footer: true,
+      }
+    }
+
     return _
   }