change on memos display & inputs

resources/js/components/InputField.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label :for="name" class="pb-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
@@ -10,9 +10,24 @@
 
     export default {
         name: "InputField",
-        props: [
-            'name', 'type', '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: ''
@@ -20,12 +35,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 () {