start add Memos

resources/js/components/TextAreaField.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="relative pb-2">
+        <label :for="name" class="form-label absolute pt-1">{{ label }}</label>
+        <textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="form-textarea pt-4 pb-1">
+            {{ placeholder }}
+        </textarea>
+        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "TextAreaField",
+        props: [
+            'name', 'label', 'placeholder', 'errors', 'data',
+        ],
+        data: function () {
+            return {
+                value: ''
+            }
+        },
+        computed: {
+            hasError: function () {
+                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+            }
+        },
+        methods: {
+            updateField: function () {
+                this.clearErrors(this.name)
+                this.$emit('update:field', this.value)
+            },
+            errorMessage: function () {
+                if (this.hasError) {
+                    return this.errors[this.name][0]
+                }
+            },
+            clearErrors: function () {
+                if (this.hasError) {
+                    this.errors[this.name] = null
+                }
+            },
+            errorClassObject: function () {
+                return {
+                    'error-field': this.hasError
+                }
+            }
+        },
+        watch: {
+            data: function (val) {
+                this.value = val
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>