feat(editor): aside commands example

Novout · Sep 21, 2021 · e3b5f96 · e3b5f96
1 parent f828ef1
commit e3b5f96
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 0 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -5,6 +5,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
     AsideBar: typeof import('E:/dev/projects/write-better/src/components/editor/aside/AsideBar.vue')['default']
+    AsideBarCommands: typeof import('E:/dev/projects/write-better/src/components/editor/aside/AsideBarCommands.vue')['default']
     AsideBarItem: typeof import('E:/dev/projects/write-better/src/components/editor/aside/AsideBarItem.vue')['default']
     AsideGraph: typeof import('E:/dev/projects/write-better/src/components/editor/aside/AsideGraph.vue')['default']
     Disclosure: typeof import('@headlessui/vue')['Disclosure']

diff --git a/src/components/editor/aside/AsideBar.vue b/src/components/editor/aside/AsideBar.vue
@@ -104,6 +104,64 @@
         </svg>
       </HeroIcon>
     </template>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[0].title')"
+      :description="t('editor.aside.commands.contents[0].description')"
+    >
+      <template #exib>
+        <p class="text-xl">{{ t('editor.aside.commands.contents[0].tag') }}</p>
+      </template>
+    </AsideBarCommands>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[1].title')"
+      :description="t('editor.aside.commands.contents[1].description')"
+    >
+      <template #exib>
+        <p class="font-bold text-xl">
+          {{ t('editor.aside.commands.contents[1].tag') }}
+        </p>
+      </template>
+    </AsideBarCommands>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[2].title')"
+      :description="t('editor.aside.commands.contents[2].description')"
+    >
+      <template #exib>
+        <p class="font-italic text-xl">
+          {{ t('editor.aside.commands.contents[2].tag') }}
+        </p>
+      </template>
+    </AsideBarCommands>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[3].title')"
+      :description="t('editor.aside.commands.contents[3].description')"
+    >
+      <template #exib>
+        <p class="font-bold text-xl">
+          {{ t('editor.aside.commands.contents[3].tag') }}
+        </p>
+      </template>
+    </AsideBarCommands>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[4].title')"
+      :description="t('editor.aside.commands.contents[4].description')"
+    >
+      <template #exib>
+        <p class="font-bold text-xl">
+          {{ t('editor.aside.commands.contents[4].tag') }}
+        </p>
+      </template>
+    </AsideBarCommands>
+    <AsideBarCommands
+      :title="t('editor.aside.commands.contents[5].title')"
+      :description="t('editor.aside.commands.contents[5].description')"
+    >
+      <template #exib>
+        <p class="font-bold text-xl">
+          {{ t('editor.aside.commands.contents[5].tag') }}
+        </p>
+      </template>
+    </AsideBarCommands>
   </AsideBarItem>
   <AsideBarItem :title="t('editor.aside.project.title')">
     <template #icon>

diff --git a/src/components/editor/aside/AsideBarCommands.vue b/src/components/editor/aside/AsideBarCommands.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="
+      flex
+      mt-2
+      justify-between
+      items-center
+      w-full
+      p-1
+      border-2 border-black
+      dark:border-gray-600
+      text-black
+      dark:text-gray-300
+      rounded
+    "
+  >
+    <slot name="exib" />
+    <div class="flex flex-col items-start justify-start">
+      <p>{{ props.title }}</p>
+      <p class="text-xs">{{ props.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    title: String,
+    description: String,
+  })
+</script>
diff --git a/src/lang/br.ts b/src/lang/br.ts
@@ -20,6 +20,38 @@ export default {
       },
       commands: {
         title: 'Comandos',
+        contents: [
+          {
+            tag: 'P',
+            title: 'Parágrafo',
+            description: '/p texto aqui',
+          },
+          {
+            tag: 'B',
+            title: 'Negrito',
+            description: '&texto aqui&',
+          },
+          {
+            tag: 'I',
+            title: 'Itálico',
+            description: '*texto aqui*',
+          },
+          {
+            tag: 'H1',
+            title: 'Heading 1',
+            description: '/h1 texto aqui',
+          },
+          {
+            tag: 'H2',
+            title: 'Heading 2',
+            description: '/h2 texto aqui',
+          },
+          {
+            tag: 'H3',
+            title: 'Heading 3',
+            description: '/h3 texto aqui',
+          },
+        ],
       },
     },
   },

diff --git a/src/lang/en.ts b/src/lang/en.ts
@@ -20,6 +20,38 @@ export default {
       },
       commands: {
         title: 'Commands',
+        contents: [
+          {
+            tag: 'P',
+            title: 'Paragraph',
+            description: '/p text here',
+          },
+          {
+            tag: 'B',
+            title: 'Bold',
+            description: '&text here&',
+          },
+          {
+            tag: 'I',
+            title: 'Italic',
+            description: '*text here*',
+          },
+          {
+            tag: 'H1',
+            title: 'Heading 1',
+            description: '/h1 text here',
+          },
+          {
+            tag: 'H2',
+            title: 'Heading 2',
+            description: '/h2 text here',
+          },
+          {
+            tag: 'H3',
+            title: 'Heading 3',
+            description: '/h3 text here',
+          },
+        ],
       },
     },
   },