change on memos display & inputs

resources/js/components/TextAreaField.vue

@@ -1,19 +1,32 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="p-1">
-            {{ placeholder }}
-        </textarea>
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
 <script>
     export default {
         name: "TextAreaField",
-        props: [
-            'name', 'label', 'placeholder', 'errors', 'data',
-        ],
+        props: {
+            name: {
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            label:  String,
+            placeholder: String,
+            required: {
+                type: Boolean,
+                default: false
+            },
+            errors: Object,
+            data: String,
+        },
         data: function () {
             return {
                 value: ''
@@ -21,12 +34,12 @@
         },
         computed: {
             hasError: function () {
-                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
             }
         },
         methods: {
             updateField: function () {
-                this.clearErrors(this.name)
+                this.clearErrors(this.name);
                 this.$emit('update:field', this.value)
             },
             errorMessage: function () {
@@ -52,7 +65,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>