From cb836386030f19f1af7adf5b1aa0b95e2a50c51c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 10 Dec 2018 13:56:49 +0300
Subject: [PATCH] Implemented Textarea component

---
 src/AppMenu.vue                      |  1 +
 src/assets/styles/primevue.css       |  1 +
 src/components/textarea/Textarea.css |  8 +++++
 src/components/textarea/Textarea.vue | 54 ++++++++++++++++++++++++++++
 src/main.js                          |  8 +++--
 src/router.js                        |  5 +++
 src/views/textarea/TextareaDemo.vue  | 37 +++++++++++++++++++
 7 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 src/components/textarea/Textarea.css
 create mode 100644 src/components/textarea/Textarea.vue
 create mode 100644 src/views/textarea/TextareaDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f83a78558..2bdd39de2 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -10,6 +10,7 @@
                 <div>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; ListBox</router-link>
+                    <router-link to="/textarea">&#9679; Textarea</router-link>
                 </div>
             </div>
 
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 4e24c10bf..9857969c1 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -4,4 +4,5 @@
 @import '../../components/button/Button.css';
 @import '../../components/panel/Panel.css';
 @import '../../components/fieldset/Fieldset.css';
+@import '../../components/textarea/Textarea.css';
 @import '../../components/toolbar/Toolbar.css';
\ No newline at end of file
diff --git a/src/components/textarea/Textarea.css b/src/components/textarea/Textarea.css
new file mode 100644
index 000000000..3bfe412c1
--- /dev/null
+++ b/src/components/textarea/Textarea.css
@@ -0,0 +1,8 @@
+.p-inputtextarea-resizable {
+    overflow: hidden;
+    resize: none;
+}
+
+.p-fluid .p-inputtextarea {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/textarea/Textarea.vue b/src/components/textarea/Textarea.vue
new file mode 100644
index 000000000..b9a935186
--- /dev/null
+++ b/src/components/textarea/Textarea.vue
@@ -0,0 +1,54 @@
+<template>
+    <textarea ref="element" :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" v-on="listeners" :value="value"></textarea>
+</template>
+
+<script>
+export default {
+    props: {
+        value: null,
+        autoResize: Boolean
+    },
+    cachedScrollHeight: null,
+    mounted() {
+        if (this.autoResize) {
+            this.resize();
+        }
+    },
+    updated() {
+        if (this.autoResize) {
+            this.resize();
+        }
+    },
+    methods: {
+        resize() {
+            this.$refs.element.style.height = '';
+            this.$refs.element.style.height = this.$refs.element.scrollHeight + 'px';
+
+            if (parseFloat(this.$refs.element.style.height) >= parseFloat(this.$refs.element.style.maxHeight)) {
+                this.$refs.element.style.overflowY = "scroll";
+                this.$refs.element.style.height = this.$refs.element.style.maxHeight;
+            }
+            else {
+                this.$refs.element.style.overflow = "hidden";
+            }
+        }
+    },
+    computed: {
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => {
+                    if (this.autoResize) {
+                        this.resize();
+                    }
+
+                    this.$emit('input', event.target.value);
+                }
+            };
+        },
+        filled() {
+            return (this.value != null && this.value.toString().length > 0)
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4118c359e..6189e19ed 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import InputText from './components/inputtext/InputText';
-import ListBox from './components/listbox/ListBox';
 import Button from './components/button/Button';
-import Panel from './components/panel/Panel';
+import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
+import ListBox from './components/listbox/ListBox';
+import Panel from './components/panel/Panel';
+import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
 
 import './assets/styles/primevue.css';
@@ -20,6 +21,7 @@ Vue.component('p-listBox', ListBox);
 Vue.component('p-panel', Panel);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-toolbar', Toolbar);
+Vue.component('p-textarea', Textarea);
 
 new Vue({
   router,
diff --git a/src/router.js b/src/router.js
index 78c7d4de8..b8fb5a3e0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -36,6 +36,11 @@ export default new Router({
         name: 'fieldset',
         component: () => import('./views/fieldset/FieldsetDemo.vue')
     },
+    {
+        path: '/textarea',
+        name: 'textarea',
+        component: () => import('./views/textarea/TextareaDemo.vue')
+    },
     {
         path: '/toolbar',
         name: 'toolbar',
diff --git a/src/views/textarea/TextareaDemo.vue b/src/views/textarea/TextareaDemo.vue
new file mode 100644
index 000000000..27e9f8aad
--- /dev/null
+++ b/src/views/textarea/TextareaDemo.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Textarea</h1>
+                <p>Textarea is a multi-line text input element.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-textarea v-model="value1" rows="5" cols="30" />
+
+            <h3>Auto Resize</h3>
+            <p-textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
+
+            <h3>Disabled</h3>
+            <p-textarea v-model="value3" disabled rows="5" cols="30" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 'Welcome to PrimeVue',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>