feat: logger

src/components/editor/text/EditorTextInput.vue

@@ -58,7 +58,6 @@
 
   onMounted(() => {
     useInput().prevent(input.value)
-    console.log('oieee')
   })
 
   const cmp = computed({

src/components/logger/LoggerItem.vue

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+<template>
+  <p
+    class="w-full p-1 break-all pointer-events-none"
+    :class="[
+      log.method === 'log' ? 'logger-log' : '',
+      log.method === 'warn' ? 'logger-warn' : '',
+      log.method === 'error' ? 'logger-error' : '',
+      log.method === 'info' ? 'logger-info' : '',
+    ]"
+  >
+    {{ render }}
+  </p>
+</template>
+
+<script setup lang="ts">
+  import { computed, watchEffect } from 'vue'
+  import { useScroll } from '@/use/scroll'
+
+  const props = defineProps({
+    log: {
+      required: true,
+      type: Object,
+    },
+  })
+
+  watchEffect(() => {
+    useScroll().force('#logger-absolute')
+  })
+
+  const render = computed(() =>
+    '[ ' + props.log.method.toUpperCase() + ' ]: ' + props.log.arguments !==
+    typeof String
+      ? props.log.arguments[0]
+      : props.log.arguments + ' | ' + props.log.createdAt
+  )
+</script>

src/components/provider/ProviderApp.vue

@@ -2,6 +2,7 @@
   <EditorCommands v-if="store.state.absolute.commands" />
   <EditorShortcutsSwitcher v-if="store.state.absolute.shortcuts.switcher" />
   <ProviderLoad v-if="store.state.absolute.load" />
+  <ProviderLogger v-if="store.state.absolute.logger" />
 </template>
 
 <script setup lang="ts">

src/components/provider/ProviderLogger.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    id="logger-absolute"
+    class="
+      absolute
+      top-1/4
+      right-1/4
+      transform
+      duration-700
+      w-96
+      bg-white
+      dark:bg-gray-700
+      transition
+      flex flex-col
+      z-max
+      h-80
+      overflow-auto
+    "
+  >
+    <LoggerItem v-for="(log, index) in logger" :hey="index" :log="log" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useStore } from 'vuex'
+  import { computed } from 'vue'
+
+  const store = useStore()
+
+  const logger = computed(() => store.state.logger.content)
+</script>

src/preset.css

@@ -80,3 +80,16 @@ input:-webkit-autofill {
 .fade-leave-to {
   opacity: 0;
 }
+
+.logger-log {
+  background-color: #a7ffe5;
+}
+.logger-warn {
+  background-color: #ffc684;
+}
+.logger-error {
+  background-color: #ff8987;
+}
+.logger-info {
+  background-color: #6793ff;
+}

src/store/module/absolute.ts

@@ -13,6 +13,7 @@ export default {
       shortcuts: {
         switcher: false,
       },
+      logger: false,
     } as AbsoluteState),
   mutations: {
     commands(state: any) {
@@ -30,6 +31,9 @@ export default {
     switchShortcutSwitcher(state: any, b: boolean) {
       state.shortcuts.switcher = b
     },
+    switchLogger(state: any, b: boolean) {
+      state.logger = b
+    },
   },
   actions: {},
   getters: {},

src/store/module/shortcuts.ts

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

src/types/absolute.ts

@@ -3,4 +3,5 @@ export interface AbsoluteState {
   load: boolean
   modal: Record<string, any>
   shortcuts: Record<string, any>
+  logger: boolean
 }

src/types/shortcuts.ts

@@ -5,4 +5,5 @@ export interface ShortcutsState {
   newChapter: Array<string>
   deleteChapter: Array<string>
   generatePDF: Array<string>
+  logger: Array<string>
 }

src/use/defines.ts

@@ -4,12 +4,13 @@ export const useDefines: Callback<any> = () => {
   const shortcuts = (k: string) => {
     return {
       localSaveProject: ['CTRL + S', 'ctrl > s'],
-      localLoadProject: ['CTRL + L', 'ctrl > l'],
+      localLoadProject: ['CTRL + P', 'ctrl > p'],
       newProject: ['CTRL + Shift + Q', 'ctrl > shift > q'],
       newChapter: ['CTRL + Q', 'ctrl > q'],
       deleteChapter: ['CTRL + D', 'ctrl > d'],
       generatePDF: ['CTRL + G', 'ctrl > g'],
       switcherRawText: ['CTRL + H', 'ctrl > h'],
+      logger: ['CTRL + L', 'ctrl > l'],
     }[k]
   }
 

src/use/keyboard.ts

@@ -5,7 +5,6 @@ import { useLocalStorage } from './storage/local'
 import { useUtils } from './utils'
 import { usePage } from './page'
 import { usePDF } from './pdf'
-import { useEntity } from './entity'
 
 export const useKeyboard: Callback<any> = () => {
   const store = useStore()
@@ -18,6 +17,7 @@ export const useKeyboard: Callback<any> = () => {
     deleteChapter()
     generatePDF()
     switcherRawText()
+    logger()
   }
 
   const destroy = () => {
@@ -87,5 +87,13 @@ export const useKeyboard: Callback<any> = () => {
     })
   }
 
+  const logger = () => {
+    keyboard.bind(store.state.shortcuts.logger[1], (e: Event) => {
+      useUtils().prevent(e)
+
+      store.commit('absolute/switchLogger', !store.state.absolute.logger)
+    })
+  }
+
   return { init, destroy }
 }