Implemented Textarea component

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>
 

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';

src/components/textarea/Textarea.css

@@ -0,0 +1,8 @@
+.p-inputtextarea-resizable {
+    overflow: hidden;
+    resize: none;
+}
+
+.p-fluid .p-inputtextarea {
+    width: 100%;
+}

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>

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,

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

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>