From 6f67a97ade66de89a91145e74c8365e43c33b852 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 30 Aug 2021 22:03:59 +0530
Subject: [PATCH] feat: textare autoresize

---
 assets/scss/styles.scss               |  2 +-
 components/graphql/RequestOptions.vue |  4 ++--
 components/http/Headers.vue           |  4 ++--
 components/http/ImportCurl.vue        |  4 ++--
 components/http/Parameters.vue        |  4 ++--
 nuxt.config.js                        |  1 +
 package-lock.json                     | 31 +++++++++++++++++++++++++++
 package.json                          |  1 +
 plugins/v-textarea.js                 |  4 ++++
 9 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 plugins/v-textarea.js

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index bb7215a74..f54c9535e 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -196,7 +196,7 @@ hr {
 .input,
 .select,
 .textarea {
-  @apply flex flex-1;
+  @apply flex;
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-transparent;
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index d58c76fd6..2a404f1c3 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -174,7 +174,7 @@
             </div>
           </div>
           <div v-if="bulkMode" class="flex">
-            <textarea
+            <textarea-autosize
               v-model="bulkHeaders"
               v-focus
               name="bulk-parameters"
@@ -190,7 +190,7 @@
               "
               rows="10"
               :placeholder="$t('state.bulk_mode_placeholder')"
-            ></textarea>
+            />
           </div>
           <div v-else>
             <div
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index e4f21d9a2..8fcfe5493 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <textarea
+      <textarea-autosize
         v-model="bulkHeaders"
         v-focus
         name="bulk-headers"
@@ -64,7 +64,7 @@
         "
         rows="10"
         :placeholder="$t('state.bulk_mode_placeholder')"
-      ></textarea>
+      />
     </div>
     <div v-else>
       <div
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 10874cda9..79aba62f0 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -2,14 +2,14 @@
   <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <textarea
+        <textarea-autosize
           id="import-curl"
           v-model="curl"
           class="textarea floating-input"
           autofocus
           rows="8"
           placeholder=" "
-        ></textarea>
+        />
         <label for="import-curl">
           {{ $t("request.enter_curl") }}
         </label>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index f0fe323da..01a5f962c 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <textarea
+      <textarea-autosize
         v-model="bulkParams"
         v-focus
         name="bulk-parameters"
@@ -64,7 +64,7 @@
         "
         rows="10"
         :placeholder="$t('state.bulk_mode_placeholder')"
-      ></textarea>
+      />
     </div>
     <div v-else>
       <div
diff --git a/nuxt.config.js b/nuxt.config.js
index 95056dbbd..e72bcbfbd 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -98,6 +98,7 @@ export default {
   plugins: [
     "~/plugins/v-tippy",
     "~/plugins/v-focus",
+    "~/plugins/v-textarea",
     "~/plugins/vue-apollo",
     "~/plugins/crisp",
     { src: "~/plugins/web-worker", ssr: false },
diff --git a/package-lock.json b/package-lock.json
index 13bea05f5..cec5c19e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
         "vue-github-button": "^1.3.0",
+        "vue-textarea-autosize": "^1.1.1",
         "vue-tippy": "^4.10.2",
         "vuejs-auto-complete": "^0.9.0",
         "yargs-parser": "^20.2.9"
@@ -34141,6 +34142,21 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "node_modules/vue-textarea-autosize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-textarea-autosize/-/vue-textarea-autosize-1.1.1.tgz",
+      "integrity": "sha512-B33Mg5ZDEfj/whhoPBLg25qqAdGHGM2NjDT99Qi5MXRyeLmXb4C3s6EprAHqy3nU0cooWXFU+IekI5DpoEbnFg==",
+      "dependencies": {
+        "core-js": "^2.6.5"
+      }
+    },
+    "node_modules/vue-textarea-autosize/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/vue-tippy": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",
@@ -62332,6 +62348,21 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-textarea-autosize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-textarea-autosize/-/vue-textarea-autosize-1.1.1.tgz",
+      "integrity": "sha512-B33Mg5ZDEfj/whhoPBLg25qqAdGHGM2NjDT99Qi5MXRyeLmXb4C3s6EprAHqy3nU0cooWXFU+IekI5DpoEbnFg==",
+      "requires": {
+        "core-js": "^2.6.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        }
+      }
+    },
     "vue-tippy": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",
diff --git a/package.json b/package.json
index 1bfe4b707..5a0cb0dda 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",
     "vue-github-button": "^1.3.0",
+    "vue-textarea-autosize": "^1.1.1",
     "vue-tippy": "^4.10.2",
     "vuejs-auto-complete": "^0.9.0",
     "yargs-parser": "^20.2.9"
diff --git a/plugins/v-textarea.js b/plugins/v-textarea.js
new file mode 100644
index 000000000..340a87d2b
--- /dev/null
+++ b/plugins/v-textarea.js
@@ -0,0 +1,4 @@
+import Vue from "vue"
+import VueTextareaAutosize from "vue-textarea-autosize"
+
+Vue.use(VueTextareaAutosize)