feat(pdf): configuration base

src/components/editor/aside/pdf/PDFConfiguration.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="flex flex-col justify-start items-start">
+    <HeroIcon class="absolute right-0 wb-icon" @click.prevent="onClose">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </HeroIcon>
     <PDFConfigurationSlot>
       <template #title>
         <h2 class="text-2xl font-bold font-poppins">Paragraph</h2>
@@ -13,11 +27,12 @@
             justify-between
             p-2
             border
-            rounded-xl
+            rounded-lg
             border-gray-300
             dark:border-gray-800
             bg-gray-300
-            dark:hover:bg-gray-800
+            dark:bg-gray-800
+            shadow-lg
             w-32
           "
         >
@@ -32,13 +47,18 @@
         </div>
       </div>
     </PDFConfigurationSlot>
-    <button @click.prevent="onSetConfiguration">test</button>
+    <button
+      class="wb-text mt-5 ml-5 px-4 py-2 bg-gray-600 dark:bg-gray-600"
+      @click.prevent="onSetConfiguration"
+    >
+      {{ t('editor.pdf.custom.save') }}
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
   import { useDefines } from '@/use/defines'
-  import { reactive } from 'vue'
+  import { reactive, nextTick } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
 
@@ -61,9 +81,16 @@
     decorationColor: '' as string,
   })
 
-  const onSetConfiguration = () => {
+  const onSetConfiguration = async () => {
     store.commit('pdf/setStyles', {
       paragraph,
     })
+    await nextTick
+
+    store.commit('absolute/switchPdfConfiguration', false)
+  }
+
+  const onClose = () => {
+    store.commit('absolute/switchPdfConfiguration', false)
   }
 </script>

src/components/material/TextSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <Listbox v-model="cmp" class="w-auto">
-    <div class="relative mt-1">
+    <div class="relative">
       <ListboxButton
         class="
           relative
@@ -11,9 +11,8 @@
           text-left
           bg-gray-200
           dark:bg-gray-600
-          rounded-lg
           shadow-md
-          cursor-default
+          cursor-pointer
           focus:outline-none
           focus-visible:ring-2
           focus-visible:ring-opacity-75
@@ -83,8 +82,7 @@
           >
             <li
               :class="[
-                active ? 'text-amber-900 bg-amber-100' : 'text-gray-900',
-                'cursor-default select-none relative py-2 pl-10 pr-4',
+                'cursor-pointer hover:bg-gray-500 dark:hover:bg-gray-800 select-none relative py-2 pl-10 pr-4',
               ]"
             >
               <span

src/lang/br/editor.ts

@@ -13,6 +13,7 @@ export default {
       paragraph: {
         font: 'Font',
       },
+      save: 'Salvar',
     },
   },
   aside: {

src/lang/en/editor.ts

@@ -13,6 +13,7 @@ export default {
       paragraph: {
         font: 'Font',
       },
+      save: 'Save',
     },
   },
   aside: {

src/store/module/absolute.ts

@@ -15,7 +15,7 @@ export default {
       },
       logger: false,
       pdf: {
-        configuration: true,
+        configuration: false,
       },
     } as AbsoluteState),
   mutations: {
@@ -37,6 +37,9 @@ export default {
     switchLogger(state: any, b: boolean) {
       state.logger = b
     },
+    switchPdfConfiguration(state: any, b: boolean) {
+      state.pdf.configuration = b
+    },
   },
   actions: {},
   getters: {},

src/store/module/shortcuts.ts

@@ -13,6 +13,7 @@ export default {
       generatePDF: useDefines().shortcuts('generatePDF'),
       switcherRawText: useDefines().shortcuts('switcherRawText'),
       logger: useDefines().shortcuts('logger'),
+      configurationPDF: useDefines().shortcuts('configurationPDF'),
     } as ShortcutsState),
   mutations: {},
   actions: {},

src/use/defines.ts

@@ -8,6 +8,7 @@ export const useDefines: Callback<any> = () => {
       newProject: ['CTRL + Shift + Q', 'ctrl > shift > q'],
       newChapter: ['CTRL + Q', 'ctrl > q'],
       deleteChapter: ['CTRL + D', 'ctrl > d'],
+      configurationPDF: ['CTRL + Shift + G', 'ctrl > shift > g'],
       generatePDF: ['CTRL + G', 'ctrl > g'],
       switcherRawText: ['CTRL + H', 'ctrl > h'],
       logger: ['CTRL + L', 'ctrl > l'],

src/use/keyboard.ts

@@ -18,6 +18,7 @@ export const useKeyboard: Callback<any> = () => {
     generatePDF()
     switcherRawText()
     logger()
+    configurationPDF()
   }
 
   const destroy = () => {
@@ -95,5 +96,16 @@ export const useKeyboard: Callback<any> = () => {
     })
   }
 
+  const configurationPDF = () => {
+    keyboard.bind(store.state.shortcuts.configurationPDF[1], (e: Event) => {
+      useUtils().prevent(e)
+
+      store.commit(
+        'absolute/switchPdfConfiguration',
+        !store.state.absolute.pdf.configuration
+      )
+    })
+  }
+
   return { init, destroy }
 }