From ba4876d0d52c92580e6bac3fd2e22d90c0182824 Mon Sep 17 00:00:00 2001
From: Marvin <33938500+marvin-j97@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:51:52 +0200
Subject: [PATCH] refacor(transformers): use monospace font for JSON and SQL
 text areas (#476)

* feat(c-input): Add monospace prop

* feat: use monospace input for json and sql inputs
---
 src/components/FormatTransformer.vue    |  1 +
 src/tools/json-diff/json-diff.vue       |  2 ++
 src/tools/sql-prettify/sql-prettify.vue |  5 +++--
 src/ui/c-input-text/c-input-text.vue    | 10 +++++++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/FormatTransformer.vue b/src/components/FormatTransformer.vue
index cf62a9f4..677fc25a 100644
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@@ -45,6 +45,7 @@ const output = computed(() => transformer.value(input.value));
     multiline
     test-id="input"
     :validation-rules="inputValidationRules"
+    monospace
   />
 
   <div>
diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue
index 2e57c502..80ada78b 100644
--- a/src/tools/json-diff/json-diff.vue
+++ b/src/tools/json-diff/json-diff.vue
@@ -29,6 +29,7 @@ const jsonValidationRules = [
     multiline
     test-id="leftJson"
     raw-text
+    monospace
   />
 
   <c-input-text
@@ -40,6 +41,7 @@ const jsonValidationRules = [
     multiline
     test-id="rightJson"
     raw-text
+    monospace
   />
 
   <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue
index ee4abdc6..a0da8a75 100644
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -64,16 +64,17 @@ const prettySQL = computed(() => formatSQL(rawSQL.value, config));
   </div>
 
   <n-form-item label="Your SQL query">
-    <n-input
+    <c-input-text
       ref="inputElement"
       v-model:value="rawSQL"
       placeholder="Put your SQL query here..."
-      type="textarea"
       rows="20"
+      multiline
       autocomplete="off"
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
+      monospace
     />
   </n-form-item>
   <n-form-item label="Prettify version of your query">
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index b89d1e40..0f96b2a1 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -30,6 +30,7 @@ const props = withDefaults(
     rows?: number | string
     autosize?: boolean
     autofocus?: boolean
+    monospace?: boolean
   }>(),
   {
     value: '',
@@ -56,13 +57,14 @@ const props = withDefaults(
     rows: 3,
     autosize: false,
     autofocus: false,
+    monospace: false,
   },
 );
 const emit = defineEmits(['update:value']);
 const value = useVModel(props, 'value', emit);
 const showPassword = ref(false);
 
-const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus } = toRefs(props);
+const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace } = toRefs(props);
 
 const validation
   = props.validation
@@ -157,6 +159,9 @@ defineExpose({
           ref="textareaRef"
           v-model="value"
           class="input"
+          :class="{
+            'leading-5 !font-mono': monospace,
+          }"
           :placeholder="placeholder"
           :readonly="readonly"
           :disabled="disabled"
@@ -175,6 +180,9 @@ defineExpose({
           v-model="value"
           :type="htmlInputType"
           class="input"
+          :class="{
+            'leading-5 !font-mono': monospace,
+          }"
           size="1"
           :placeholder="placeholder"
           :readonly="readonly"