feat: textare autoresize

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;

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

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

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>

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

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 },

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",

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"

plugins/v-textarea.js

@@ -0,0 +1,4 @@
+import Vue from "vue"
+import VueTextareaAutosize from "vue-textarea-autosize"
+
+Vue.use(VueTextareaAutosize)