mark mandatory fields

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/components/FormWishlist.vue

@@ -4,6 +4,7 @@
       <InputText
         name="title"
         type="text"
+        required
         :value="wishlist?.title"
         :label="t('components.form-wishlist.title.label')"
       />
@@ -22,16 +23,19 @@
       <InputText
         name="imageSrc"
         type="text"
+        required
         :value="wishlist?.imageSrc"
         :label="t('components.form-wishlist.image-src.label')"
       />
       <InputFile
         name="imageFile"
+        required
         :label="t('components.form-wishlist.image-file.label')"
       />
       <InputText
         name="slugUrlText"
         type="text"
+        required
         :value="wishlist?.slugUrlText"
         :label="t('components.form-wishlist.slug-text.label')"
       />

src/components/FormWishlistItem.vue

@@ -22,12 +22,14 @@
         <InputText
           name="title"
           type="text"
+          required
           :value="item.title"
           :label="t('components.form-wishlist-item.title.label')"
         />
         <InputTextArea
           name="description"
           type="text"
+          required
           :value="item.description"
           height-class="h-20"
           :label="t('components.form-wishlist-item.description.label')"

src/components/InputFile.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="relative mb-8">
-    <label class="mb-1 block w-full" :for="name">{{ label }}</label>
+    <label class="mb-1 block w-full" :for="name"
+      >{{ label }}<span v-if="required" class="text-red-500">*</span></label
+    >
     <div
       class="flex h-24 w-full flex-row items-center space-x-10 rounded-md border-2 border-solid border-stone-300 bg-transparent px-2 outline-none dark:border-stone-700"
       :class="{
@@ -70,6 +72,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { value, errorMessage, setErrors } = useField(props.name, undefined, {})

src/components/InputText.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="relative mb-8">
-    <label class="mb-1 block w-full" :for="name">{{ label }}</label>
+    <label class="mb-1 block w-full" :for="name"
+      >{{ label }}<span v-if="required" class="text-red-500">*</span></label
+    >
     <input
       class="h-12 w-full rounded-md border-2 border-solid border-stone-300 bg-transparent px-2 outline-none dark:border-stone-700"
       :class="{ 'border-rose-500': !!errorMessage }"
@@ -44,13 +46,16 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 })
-const {
+const { value: inputValue, errorMessage, handleBlur, handleChange } = useField(
-  value: inputValue,
+  props.name,
-  errorMessage,
+  undefined,
-  handleBlur,
+  {
-  handleChange,
-} = useField(props.name, undefined, {
     initialValue: props.value,
-})
+  }
+)
 </script>

src/components/InputTextArea.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="relative mb-8">
-    <label class="mb-1 block w-full" :for="name">{{ label }}</label>
+    <label class="mb-1 block w-full" :for="name"
+      >{{ label }}<span v-if="required" class="text-red-500">*</span></label
+    >
     <textarea
       class="w-full rounded-md border-2 border-solid border-stone-300 bg-transparent px-2 outline-none dark:border-stone-700"
       :class="[heightClass, !!errorMessage ? 'border-rose-500' : '']"
@@ -48,13 +50,16 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 })
-const {
+const { value: inputValue, errorMessage, handleBlur, handleChange } = useField(
-  value: inputValue,
+  props.name,
-  errorMessage,
+  undefined,
-  handleBlur,
+  {
-  handleChange,
-} = useField(props.name, undefined, {
     initialValue: props.value,
-})
+  }
+)
 </script>