Merge pull request #4 from alrico88/develop

feat: better input performance

assets/main.scss

@@ -8,4 +8,8 @@ $font-family-base: 'Fira Sans';
 
 .overflow-y-auto {
   overflow-y: auto;
-}
+}
+
+.cm-editor {
+    @extend .border;
+}

composables/useInputStyle.ts

@@ -0,0 +1,7 @@
+import type { StyleValue } from "vue";
+
+export function useInputStyle(): StyleValue {
+  return {
+    height: "250px",
+  };
+}

package.json

@@ -9,33 +9,33 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/nuxt": "^10.3.0",
-    "bootstrap": "^5.3.1",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/nuxt": "^10.5.0",
+    "bootstrap": "^5.3.2",
+    "codemirror": "^6.0.1",
     "file-saver": "^2.0.5",
-    "lodash-es": "^4.17.21",
-    "nuxt-umami": "^2.5.3",
-    "promise-file-reader": "^1.0.2"
+    "nuxt-umami": "^2.5.5",
+    "promise-file-reader": "^1.0.2",
+    "vue-codemirror": "^6.1.1"
   },
   "devDependencies": {
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/file-saver": "^2.0.5",
-    "@types/lodash-es": "^4.17.8",
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@types/file-saver": "^2.0.6",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/language-plugin-pug": "^1.8.8",
-    "eslint": "^8.47.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/language-plugin-pug": "^1.8.22",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.18.1",
     "nuxt": "^3.8.0",
     "nuxt-icon": "^0.5.0",
     "nuxt-simple-sitemap": "^3.2.5",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "pug": "^3.0.2",
-    "sass": "^1.57.1",
+    "sass": "^1.69.5",
     "typescript": "^5.2.2"
   }
 }

pages/encode.vue

@@ -4,10 +4,16 @@ root-layout
     .row
       .col
         form.form
-          .form-group.mb-2
-            label.form-label The Base64 for the image is:
-            textarea.form-control(v-model="truncatedText", rows="10", readonly, disabled)
-            .form-text(v-if="needsTruncate") Text too long. Showing first 500 characters.
+          fieldset.mb-2
+            label.form-label(for="image-url") The Base64 for the image is:
+            div(:style="inputStyle")
+              codemirror(
+                id="image-url"
+                v-model="url"
+                :extensions="[EditorView.lineWrapping]"
+                :style="inputStyle"
+                disabled
+              )
           .hstack.gap-2
             button.btn.btn-sm.btn-primary(
               type="button",
@@ -24,36 +30,24 @@ root-layout
 </template>
 
 <script setup lang="ts">
-import { truncate } from "lodash-es";
+import { Codemirror } from 'vue-codemirror';
+import { EditorView } from 'codemirror';
 
-useHead({
+useSeoMeta({
   title: "Encode Image to Base64",
-  meta: [
-    {
-      name: "description",
-      content: "Encode any image to Base 64 online",
-    },
-    {
-      name: "keywords",
-      content: "image,base64,png,convert,string",
-    },
-  ],
+  description: "Encode any image to Base 64 online",
+  keywords: "image,base64,png,convert,string"
 });
 
 const url = ref("");
 
-const needsTruncate = computed(() => url.value.length > 500);
-const truncatedText = computed(() =>
-  truncate(url.value, {
-    length: 500,
-  }),
-);
-
 const { copy, copied } = useClipboard();
 
 const btnDisabled = computed(() => url.value === "");
 
 function download() {
   useDownload(new Blob([url.value]), "base64encoded.txt");
 }
+
+const inputStyle = useInputStyle();
 </script>

pages/index.vue

@@ -4,34 +4,38 @@ root-layout
     .row
       .col
         form.form
-          .form-group.mb-2
-            label(for="image-string") Paste the Base64 string:
-            textarea.form-control(v-model="text", id="image-string", rows="10")
+          fieldset.mb-2
+            label.form-label(for="image-string") Paste the Base64 string:
+            div(:style="inputStyle")
+              codemirror(
+                id="image-string"
+                v-model="text"
+                :extensions="[EditorView.lineWrapping]"
+                :style="inputStyle"
+              )
           .form-group
             .hstack.gap-2
               button.btn.btn-sm.btn-primary(
-                @click="download", 
-                type="button", 
+                @click="download",
+                type="button",
                 :disabled="btnDisabled"
               ) #[icon(name="bi:download")] Download image
               button.btn.btn-sm.btn-light(
-                @click="clearInput", 
-                type="button", 
+                @click="clearInput",
+                type="button",
                 :disabled="btnDisabled"
               ) #[icon(name="material-symbols:clear-all")] Clear field
   template(#image)
     image-decoder(:text="text", :url="url")
 </template>
 
 <script setup lang="ts">
-useHead({
+import { Codemirror } from 'vue-codemirror';
+import { EditorView } from 'codemirror';
+
+useSeoMeta({
   title: "Base 64 Image Viewer",
-  meta: [
-    {
-      name: "description",
-      content: "Online Base64 image viewer",
-    },
-  ],
+  description: "Online Base64 image viewer",
 });
 
 const text = ref("");
@@ -72,4 +76,6 @@ async function download() {
     useDownload(blob, "base64decoded.png");
   });
 }
+
+const inputStyle = useInputStyle();
 </script>