feat(shortcuts): many key-bindings

src/components/editor/aside/AsideClose.vue

@@ -19,7 +19,5 @@
 </template>
 
 <script setup lang="ts">
-  import { defineEmits } from 'vue'
-
   defineEmits(['close'])
 </script>

src/components/editor/aside/AsideModal.vue

@@ -1,17 +1,32 @@
 <template>
-  <WBModal v-model="show" @complete="onComplete">
+  <WBModal
+    v-model="show"
+    @complete="onComplete"
+    @keypress.enter.prevent="onComplete"
+  >
     <template #title>{{ props.title }}</template>
     <template #confirm>{{ props.confirm }}</template>
     <slot></slot>
   </WBModal>
 
-  <AsideText :text="props.button" @click="show = true"></AsideText>
+  <AsideText
+    :shortcuts="props.shortcut"
+    :text="props.button"
+    @click="onShowModal"
+  ></AsideText>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { computed } from 'vue'
+  import { useStore } from 'vuex'
 
-  const show = ref(false)
+  const store = useStore()
+
+  const show = computed(() => store.state.absolute.modal.newProject)
+
+  const onShowModal = () => {
+    store.commit('absolute/switchProjectModal', true)
+  }
 
   const props = defineProps({
     title: {
@@ -30,11 +45,15 @@
       required: true,
       type: Function,
     },
+    shortcut: {
+      required: false,
+      type: String,
+    },
   })
 
   const onComplete = () => {
     props.complete()
 
-    show.value = false
+    store.commit('absolute/switchProjectModal', false)
   }
 </script>

src/components/editor/aside/page/AsidePageDelete.vue

@@ -0,0 +1,18 @@
+<template>
+  <AsideText
+    class="wb-aside-button"
+    :text="t('editor.aside.project.page.delete.title')"
+    :shortcuts="store.state.shortcuts.deleteChapter[0]"
+    @click.prevent="usePage(store).onDeletePage"
+  >
+  </AsideText>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useStore } from 'vuex'
+  import { usePage } from '@/use/page'
+
+  const store = useStore()
+  const { t } = useI18n()
+</script>

src/components/editor/aside/page/AsidePageNew.vue

@@ -1,15 +1,18 @@
 <template>
-  <InjectButtonInstance
+  <AsideText
     class="wb-aside-button"
-    @click.prevent="usePage().onCreatePage"
+    :text="t('editor.aside.project.page.new.title')"
+    :shortcuts="store.state.shortcuts.newChapter[0]"
+    @click.prevent="usePage(store).onCreatePage"
   >
-    {{ t('editor.aside.project.page.new.title') }}
-  </InjectButtonInstance>
+  </AsideText>
 </template>
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
   import { usePage } from '@/use/page'
+  import { useStore } from 'vuex'
 
+  const store = useStore()
   const { t } = useI18n()
 </script>

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

@@ -1,26 +1,22 @@
 <template>
-  <button class="wb-aside-button" @click="onGeneratePDF">
-    {{ t('editor.aside.pdf.title') }}
-  </button>
+  <AsideText
+    class="wb-aside-button"
+    :text="t('editor.aside.pdf.title')"
+    :shortcuts="store.state.shortcuts.generatePDF[0]"
+    @click.prevent="onGeneratePDF"
+  >
+  </AsideText>
 </template>
 
 <script setup lang="ts">
   import { usePDF } from '@/use/pdf'
-  import { nextTick } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
 
   const store = useStore()
   const { t } = useI18n()
 
   const onGeneratePDF = async () => {
-    store.commit('absolute/load', true)
-
-    await nextTick
-    usePDF()
-      .create(store)
-      .then(() => {
-        store.commit('absolute/load', false)
-      })
+    usePDF().external(store).onGeneratePDF()
   }
 </script>

src/components/editor/aside/project/AsideBarProject.vue

@@ -16,6 +16,9 @@
       </HeroIcon>
     </template>
     <AsideProjectNew />
+    <AsidePageDelete
+      v-if="store.state.project.name !== useEnv().projectEmpty()"
+    />
     <AsidePageNew v-if="store.state.project.name !== useEnv().projectEmpty()" />
     <AsideLine v-if="store.state.project.name !== useEnv().projectEmpty()" />
     <AsideLoadProject />

src/components/editor/aside/project/AsideProjectNew.vue

@@ -4,6 +4,7 @@
     :button="t('editor.aside.project.new.title')"
     :confirm="t('editor.aside.project.new.confirm')"
     :complete="onCreateProject"
+    :shortcut="store.state.shortcuts.newProject[0]"
   >
     <div class="w-full flex flex-col">
       <div class="flex flex-col pt-3">
@@ -37,7 +38,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, nextTick } from 'vue'
+  import { useProject } from '@/use/project'
+  import { ref } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
 
@@ -48,8 +50,9 @@
   const version = ref(t('editor.aside.project.new.content.version'))
 
   const onCreateProject = async () => {
-    store.commit('project/create', { name: name.value, version: version.value })
-    await nextTick
-    store.commit('context/load', store.state.project.pages[0])
+    useProject(store).onCreateProject({
+      name: name.value,
+      version: version.value,
+    })
   }
 </script>

src/components/editor/main/EditorAside.vue

@@ -13,7 +13,7 @@
       rounded-br
     "
     :class="open ? 'left-60' : ''"
-    @click="open = !open"
+    @click="store.commit('absolute/switchAside', !open.value)"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -46,15 +46,17 @@
         dark:bg-gray-700
       "
     >
-      <AsideClose @close="open = false" />
+      <AsideClose @close="store.commit('absolute/switchAside', false)" />
       <AsideBar />
       <AsideGraph />
     </aside>
   </transition>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { computed } from 'vue'
+  import { useStore } from 'vuex'
 
-  const open = ref(true)
+  const store = useStore()
+  const open = computed(() => store.state.absolute.aside)
 </script>

src/components/editor/main/EditorBaseHeader.vue

@@ -4,7 +4,7 @@
   >
     <HeroIcon
       class="wb-icon inline-flex"
-      @click.prevent="usePage().onCreatePage"
+      @click.prevent="usePage(store).onCreatePage"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -21,7 +21,7 @@
     </HeroIcon>
     <HeroIcon
       class="wb-icon inline-flex"
-      @click.prevent="usePage().onDeletePage"
+      @click.prevent="usePage(store).onDeletePage"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -42,4 +42,7 @@
 
 <script setup lang="ts">
   import { usePage } from '@/use/page'
+  import { useStore } from 'vuex'
+
+  const store = useStore()
 </script>

src/components/material/WBModal.vue

@@ -26,20 +26,6 @@
         <slot name="confirm"></slot>
       </button>
     </div>
-    <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 transform rotate-45"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-          clip-rule="evenodd"
-        />
-      </svg>
-    </button>
   </vue-final-modal>
 </template>
 

src/lang/br/editor.ts

@@ -32,6 +32,9 @@ export default {
         new: {
           title: 'Novo Capítulo',
         },
+        delete: {
+          title: 'Deletar Capítulo',
+        },
       },
       new: {
         title: 'Novo Projeto',

src/lang/en/editor.ts

@@ -32,6 +32,9 @@ export default {
         new: {
           title: 'New Chapter',
         },
+        delete: {
+          title: 'Delete Chapter',
+        },
       },
       new: {
         title: 'New Project',

src/store/module/absolute.ts

@@ -6,6 +6,10 @@ export default {
     ({
       commands: false,
       load: false,
+      modal: {
+        newProject: false,
+      },
+      aside: true,
     } as AbsoluteState),
   mutations: {
     commands(state: any) {
@@ -14,6 +18,12 @@ export default {
     load(state: any, b: boolean) {
       state.load = b
     },
+    switchProjectModal(state: any, b: boolean) {
+      state.modal.newProject = b
+    },
+    switchAside(state: any, b: boolean) {
+      state.modal.aside = b
+    },
   },
   actions: {},
   getters: {},

src/store/module/shortcuts.ts

@@ -7,6 +7,10 @@ export default {
     ({
       localSaveProject: useDefines().shortcuts('localSaveProject'),
       localLoadProject: useDefines().shortcuts('localLoadProject'),
+      newProject: useDefines().shortcuts('newProject'),
+      newChapter: useDefines().shortcuts('newChapter'),
+      deleteChapter: useDefines().shortcuts('deleteChapter'),
+      generatePDF: useDefines().shortcuts('generatePDF'),
     } as ShortcutsState),
   mutations: {},
   actions: {},

src/types/absolute.ts

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

src/types/shortcuts.ts

@@ -1,4 +1,8 @@
 export interface ShortcutsState {
   localSaveProject: Array<string>
   localLoadProject: Array<string>
+  newProject: Array<string>
+  newChapter: Array<string>
+  deleteChapter: Array<string>
+  generatePDF: Array<string>
 }

src/use/defines.ts

@@ -5,6 +5,10 @@ export const useDefines: Callback<any> = () => {
     return {
       localSaveProject: ['CTRL + S', 'ctrl > s'],
       localLoadProject: ['CTRL + L', 'ctrl > l'],
+      newProject: ['CTRL + Shift + Q', 'ctrl > shift > q'],
+      newChapter: ['CTRL + Q', 'ctrl > q'],
+      deleteChapter: ['CTRL + D', 'ctrl > d'],
+      generatePDF: ['CTRL + G', 'ctrl > g'],
     }[k]
   }