feat: centralise form error styling

aminnausin · aminnausin · commit 535031558d35 · 2025-06-09T22:03:52.000-04:00
diff --git a/resources/js/components/forms/EditFolder.vue b/resources/js/components/forms/EditFolder.vue
@@ -12,6 +12,7 @@ import { toast } from '@/service/toaster/toastService';
 import FormInputNumber from '@/components/inputs/FormInputNumber.vue';
 import InputMultiChip from '@/components/pinesUI/InputMultiChip.vue';
 import FormInputLabel from '@/components/labels/FormInputLabel.vue';
+import FormErrorList from '@/components/labels/FormErrorList.vue';
 import FormTextArea from '@/components/inputs/FormTextArea.vue';
 import DatePicker from '@/components/pinesUI/DatePicker.vue';
 import FormInput from '@/components/inputs/FormInput.vue';
@@ -220,9 +221,9 @@ watch(tagsQuery, () => {
             />
             <FormInput v-else v-model="form.fields[field.name]" :field="field" />
 
-            <ul class="text-sm text-rose-600 dark:text-rose-400">
+            <FormErrorList>
                 <li v-for="(item, index) in form.errors[field.name]" :key="index">{{ item }}</li>
-            </ul>
+            </FormErrorList>
         </div>
         <div class="relative flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1 w-full">
             <button
diff --git a/resources/js/components/forms/EditLyrics.vue b/resources/js/components/forms/EditLyrics.vue
@@ -12,6 +12,7 @@ import { toast } from '@/service/toaster/toastService';
 
 import FormInputNumber from '@/components/inputs/FormInputNumber.vue';
 import FormInputLabel from '@/components/labels/FormInputLabel.vue';
+import FormErrorList from '@/components/labels/FormErrorList.vue';
 import FormTextArea from '@/components/inputs/FormTextArea.vue';
 import ButtonForm from '@/components/inputs/ButtonForm.vue';
 import LrcLibCard from '@/components/cards/LrcLibCard.vue';
@@ -134,9 +135,9 @@ watch(
             <DatePicker v-else-if="field.type === 'date'" v-model="form.fields[field.name]" :field="field" />
             <FormInputNumber v-else-if="field.type === 'number'" v-model="form.fields[field.name]" :field="field" />
             <FormInput v-else v-model="form.fields[field.name]" :field="field" />
-            <ul class="text-sm text-rose-600 dark:text-rose-400">
+            <FormErrorList>
                 <li v-for="(item, index) in form.errors[field.name]" :key="index">{{ item }}</li>
-            </ul>
+            </FormErrorList>
         </div>
 
         <div class="flex w-full gap-4 flex-wrap xs:flex-nowrap">
diff --git a/resources/js/components/forms/EditVideo.vue b/resources/js/components/forms/EditVideo.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import type { TagResource, VideoResource, VideoTagResource } from '@/types/resources';
-import { MediaType, type FormField, type SelectItem } from '@/types/types';
+import type { FormField, SelectItem } from '@/types/types';
 import type { MetadataUpdateRequest } from '@/types/requests';
 
 import { computed, reactive, ref, watch } from 'vue';
 import { toCalendarFormattedDate } from '@/service/util';
 import { useGetAllTags } from '@/service/queries';
 import { UseCreateTag } from '@/service/mutations';
+import { MediaType } from '@/types/types';
 import { toast } from '@/service/toaster/toastService';
 
 import FormInputNumber from '@/components/inputs/FormInputNumber.vue';
 import InputMultiChip from '@/components/pinesUI/InputMultiChip.vue';
 import FormInputLabel from '@/components/labels/FormInputLabel.vue';
+import FormErrorList from '@/components/labels/FormErrorList.vue';
 import FormTextArea from '@/components/inputs/FormTextArea.vue';
 import DatePicker from '@/components/pinesUI/DatePicker.vue';
 import FormInput from '@/components/inputs/FormInput.vue';
@@ -209,9 +211,9 @@ watch(tagsQuery, () => {
                 @removeAction="handleRemoveTag"
             />
             <FormInput v-else v-model="form.fields[field.name]" :field="field" />
-            <ul class="text-sm text-rose-600 dark:text-rose-400">
+            <FormErrorList>
                 <li v-for="(item, index) in form.errors[field.name]" :key="index">{{ item }}</li>
-            </ul>
+            </FormErrorList>
         </div>
 
         <div class="relative flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1 w-full">
diff --git a/resources/js/components/labels/FormErrorList.vue b/resources/js/components/labels/FormErrorList.vue
@@ -0,0 +1,5 @@
+<template>
+    <ul class="text-rose-600 dark:text-rose-500">
+        <slot></slot>
+    </ul>
+</template>
