From 3b285f088f28525baa41110aaab0fdf3c03d2870 Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Fri, 30 Aug 2019 17:40:39 +0300
Subject: [PATCH] textareaAutoResize directive added and applied to textareas.

---
 directives/textareaAutoHeight.js |  8 ++++++++
 pages/index.vue                  | 12 ++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 directives/textareaAutoHeight.js

diff --git a/directives/textareaAutoHeight.js b/directives/textareaAutoHeight.js
new file mode 100644
index 000000000..10a566ac5
--- /dev/null
+++ b/directives/textareaAutoHeight.js
@@ -0,0 +1,8 @@
+export default {
+ name: "textareaAutoHeight",
+ update(element) {
+  if (element.scrollHeight !== element.clientHeight) {
+   element.style.minHeight = `${element.scrollHeight}px`;
+  }
+ }
+}
diff --git a/pages/index.vue b/pages/index.vue
index af4e1bd9e..3c56eebcc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -66,12 +66,12 @@
         <ul>
           <li>
             <label for="request">Parameter List</label>
-            <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
+            <textarea name="request" rows="1" v-textarea-auto-height="rawRequestBody" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
           </li>
         </ul>
       </div>
       <div v-else>
-        <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
+        <textarea v-model="rawParams" v-textarea-auto-height="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
       </div>
     </pw-section>
     <pw-section class="green" label="Authentication" collapsed>
@@ -126,7 +126,7 @@
       <ul>
         <li>
           <label for="request">Header List</label>
-          <textarea name="request" rows="1" readonly>{{headerString || '(add at least one header)'}}</textarea>
+          <textarea v-textarea-auto-height="headerString" name="request" rows="1" readonly ref="requestTextarea">{{headerString || '(add at least one header)'}}</textarea>
         </li>
       </ul>
     </pw-section>
@@ -154,7 +154,7 @@
       <ul>
         <li>
           <label for="request">Parameter List</label>
-          <textarea name="request" rows="1" readonly>{{queryString || '(add at least one parameter)'}}</textarea>
+          <textarea name="request" v-textarea-auto-height="queryString" rows="1" readonly>{{queryString || '(add at least one parameter)'}}</textarea>
         </li>
       </ul>
     </pw-section>
@@ -194,6 +194,7 @@
 <script>
 		import history from "../components/history";
 		import section from "../components/section";
+		import textareaAutoHeight from "../directives/textareaAutoHeight";
 
 		const statusCategories = [{
       name: 'informational',
@@ -242,6 +243,9 @@
   export const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
   export default {
+  		directives: {
+  				textareaAutoHeight
+    },
     components: {
       'pw-section': section,
       history