chore: format

src/components/editor/EditorBase.vue

@@ -1,19 +1,40 @@
 <template>
-  <div class="md:px-20 sm:px-0 px-0 bg-gray-600 h-screen flex justify-center items-center">
-    <div class="w-11/12 md:h-editor h-screen md:p-5 p-0 bg-gray-700 overflow-y-auto rounded-sm shadow-lg">
-      <TextInput v-model="entry" @enter="enterListener"/>
+  <div
+    class="
+      md:px-20
+      sm:px-0
+      px-0
+      bg-gray-600
+      h-screen
+      flex
+      justify-center
+      items-center
+    "
+  >
+    <div
+      class="
+        w-11/12
+        md:h-editor
+        h-screen
+        md:p-5
+        p-0
+        bg-gray-700
+        overflow-y-auto
+        rounded-sm
+        shadow-lg
+      "
+    >
+      <TextInput v-model="entry" @enter="enterListener" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+  import { ref } from 'vue'
 
-const entry = ref('')
+  const entry = ref('')
 
-const enterListener = () => {
-  
-
-  entry.value = ''
-}
+  const enterListener = () => {
+    entry.value = ''
+  }
 </script>

src/components/editor/TextInput.vue

@@ -1,16 +1,24 @@
 <template>
-  <section @mouseenter="hover = true" @mouseout="hover = false" class="flex justify-center items-center w-full transition-all">
+  <section
+    @mouseenter="hover = true"
+    @mouseout="hover = false"
+    class="flex justify-center items-center w-full transition-all"
+  >
     <input
       v-model="cmp"
       class="flex-1 border-none shadow-2xl p-1"
-      :class="[hover ? 'bg-gray-800 bg-opacity-10' : 'bg-transparent', store.state.editor.styles.input.fontSize, store.state.editor.styles.input.fontFamily, store.state.editor.styles.input.fontColor]"
+      :class="[
+        hover ? 'bg-gray-800 bg-opacity-10' : 'bg-transparent',
+        store.state.editor.styles.input.fontSize,
+        store.state.editor.styles.input.fontFamily,
+        store.state.editor.styles.input.fontColor,
+      ]"
       type="text"
       @input.prevent="handler"
       @keypress.enter="enterHandler"
       :placeholder="t('editor.text.inputCode')"
     />
   </section>
-
 </template>
 
 <script setup lang="ts">

src/components/editor/TextShow.vue

@@ -1,14 +1,32 @@
 <template>
   <section>
     <HeroIcon class="text-gray-200 h-4 w-4 opacity-40">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-        <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
+        />
       </svg>
     </HeroIcon>
     <HeroIcon class="text-gray-200 h-4 w-4 opacity-40">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+        />
       </svg>
     </HeroIcon>
   </section>
-</template>
+</template>

src/components/utils/HeroIcon.vue

@@ -1,3 +1,3 @@
 <template>
   <button><slot /></button>
-</template>
+</template>

src/lang/br.ts

@@ -2,7 +2,7 @@ export default {
   hello: 'mundo',
   editor: {
     text: {
-      inputCode: 'Digite / para comandos.'
-    }
-  }
+      inputCode: 'Digite / para comandos.',
+    },
+  },
 }

src/lang/en.ts

@@ -2,7 +2,7 @@ export default {
   hello: 'world',
   editor: {
     text: {
-      inputCode: 'insert / for commands.'
-    }
-  }
+      inputCode: 'insert / for commands.',
+    },
+  },
 }

src/pages/Editor.vue

@@ -7,5 +7,4 @@
   </section>
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>

src/preset.css

@@ -11,14 +11,15 @@
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
-input:-webkit-autofill:active  {
+input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
 
 @-webkit-keyframes autofill {
-  0%,100% {
-      color: #666;
-      background: transparent;
+  0%,
+  100% {
+    color: #666;
+    background: transparent;
   }
 }
 

src/store/index.ts

@@ -5,6 +5,6 @@ import editor from '@/store/module/editor'
 export default createStore({
   modules: {
     context,
-    editor
+    editor,
   },
 })

src/store/module/editor.ts

@@ -1,21 +1,18 @@
-import { EditorState } from "@/types/editor";
+import { EditorState } from '@/types/editor'
 
 export default {
-  state: () => ({
-    styles: {
-      input: {
-        fontFamily: 'font-raleway',
-        fontSize: 'text-xs',
-        fontColor: 'text-gray-100'
-      }
-    },
-    contentRaw: {
-
-    },
-    contentShow: {
-
-    }
-  }) as EditorState,
+  state: () =>
+    ({
+      styles: {
+        input: {
+          fontFamily: 'font-raleway',
+          fontSize: 'text-xs',
+          fontColor: 'text-gray-100',
+        },
+      },
+      contentRaw: {},
+      contentShow: {},
+    } as EditorState),
   mutations: {},
   actions: {},
   getters: {},

src/types/editor.ts

@@ -1,23 +1,19 @@
 export interface EditorState {
-  styles: EditorStateStyles;
-  contentRaw: EditorStateContentRaw;
-  contentShow: EditorStateContentShow;
+  styles: EditorStateStyles
+  contentRaw: EditorStateContentRaw
+  contentShow: EditorStateContentShow
 }
 
 export interface EditorStateStyles {
   input: EditorStateInput
 }
 
 export interface EditorStateInput {
-  fontFamily: string;
-  fontSize: string;
-  fontColor: string;
+  fontFamily: string
+  fontSize: string
+  fontColor: string
 }
 
-export interface EditorStateContentRaw {
+export interface EditorStateContentRaw {}
 
-}
-
-export interface EditorStateContentShow {
-
-}
+export interface EditorStateContentShow {}