Refactor usage of vuelidate of base input text

* Create a component to reuse that handles vuelidate validations

assets/vue/components/basecomponents/BaseInputTextWithVuelidate.vue

@@ -0,0 +1,54 @@
+<template>
+  <BaseInputText
+    :id="id"
+    :model-value="modelValue"
+    :label="labelWithRequiredIfNeeded"
+    :is-invalid="vuelidateProperty.$error"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #errors>
+      <p
+        v-for="error in vuelidateProperty.$errors"
+        :key="error.$uid"
+        class="mt-1 text-error"
+      >
+        {{ error.$message }}
+      </p>
+    </template>
+  </BaseInputText>
+</template>
+
+<script setup>
+import BaseInputText from "./BaseInputText.vue"
+import {computed} from "vue"
+
+const props = defineProps({
+  id: {
+    type: String,
+    require: true,
+    default: "",
+  },
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  vuelidateProperty: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const labelWithRequiredIfNeeded = computed(() => {
+  if (Object.hasOwn(props.vuelidateProperty, 'required')) {
+    return `* ${props.label}`
+  }
+  return props.label
+})
+</script>

assets/vue/components/social/SocialWallPostForm.vue

@@ -1,23 +1,12 @@
 <template>
   <BaseCard plain>
     <form>
-      <BaseInputText
+      <BaseInputTextWithVuelidate
         v-model="content"
         class="mb-2"
         :label="textPlaceholder"
-        :aria-placeholder="textPlaceholder"
+        :vuelidate-property="v$.content"
-        :is-invalid="v$.content.$error"
+      />
-      >
-        <template #errors>
-          <p
-            v-for="error in v$.content.$errors"
-            :key="error.$uid"
-            class="mt-1 text-error"
-          >
-            {{ error.$message }}
-          </p>
-        </template>
-      </BaseInputText>
 
       <div class="mb-2">
         <BaseCheckbox
@@ -60,9 +49,9 @@ import {required} from "@vuelidate/validators";
 import {useI18n} from "vue-i18n";
 import BaseCard from "../basecomponents/BaseCard.vue";
 import BaseButton from "../basecomponents/BaseButton.vue";
-import BaseInputText from "../basecomponents/BaseInputText.vue";
 import BaseFileUpload from "../basecomponents/BaseFileUpload.vue";
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue";
+import BaseInputTextWithVuelidate from "../basecomponents/BaseInputTextWithVuelidate.vue";
 
 const store = useStore();
 const {t} = useI18n();