improve locale error

Author: aguingand

resources/js/components/LocaleSelectTrigger.vue

@@ -2,11 +2,20 @@
     import { Languages } from "lucide-vue-next";
     import { SelectTrigger, SelectValue } from "@/components/ui/select/index.js";
     import { __ } from "@/utils/i18n";
+
+    defineProps<{
+        errorCount?: number,
+    }>();
 </script>
 
 <template>
-    <SelectTrigger class="w-auto h-8" :aria-label="$attrs['aria-label'] ?? __('sharp::action_bar.locale_selector.label')">
+    <SelectTrigger class="w-auto gap-0 h-8" :aria-label="$attrs['aria-label'] ?? __('sharp::action_bar.locale_selector.label')">
         <Languages class="size-3 mr-2.5 opacity-50" />
         <SelectValue class="uppercase text-xs" placeholder="-" />
+        <template v-if="errorCount">
+            <div class="ml-1.5 -mr-0.5 grid place-content-center text-[.625rem]/2.5 px-1 h-3.5 min-w-3.5 bg-destructive rounded-full text-destructive-foreground font-semibold">
+                {{ errorCount }}
+            </div>
+        </template>
     </SelectTrigger>
 </template>

resources/js/form/components/FormFieldLocaleSelect.vue

@@ -18,14 +18,17 @@ const form = useParentForm();
             class="ml-auto w-auto border-transparent hover:border-input aria-expanded:border-input"
             :class="{ '-my-2': isFieldLayout }"
             :aria-label="__('sharp::form.field_locale_selector.aria_label', { field_label:field.label })"
+            :error-count="form.fieldLocalesContainingError(fieldErrorKey).length"
         />
         <SelectContent @close-auto-focus="emit('close-auto-focus', $event)">
             <template v-for="formLocale in form.locales" :key="formLocale">
                 <SelectItem :value="formLocale">
                     <div class="flex items-center">
-                        <span class="uppercase text-xs">{{ formLocale }}</span>
-                        <template v-if="form.fieldLocalesContainingError(fieldErrorKey).includes(formLocale)">
-                            <svg class="ml-1 size-2 fill-destructive" viewBox="0 0 8 8" aria-hidden="true">
+                        <span class="uppercase text-xs">
+                            {{ formLocale }}
+                        </span>
+                        <template v-if="form.fieldHasError(field, fieldErrorKey, formLocale)">
+                            <svg class="ml-1 size-1.5 fill-destructive" viewBox="0 0 8 8" aria-hidden="true">
                                 <circle cx="4" cy="4" r="3" />
                             </svg>
                         </template>

resources/js/form/components/fields/editor/Editor.vue

@@ -412,7 +412,7 @@
                                                     {{ formLocale }}
                                                 </div>
                                                 <template v-if="form.fieldHasError(field, fieldErrorKey, formLocale)">
-                                                    <svg class="absolute top-1/2  right-2.5 -translate-y-1/2 translate-x-1/2 size-1.5 fill-destructive opacity-75 group-data-[state=active]/tab:opacity-100" viewBox="0 0 8 8" aria-hidden="true">
+                                                    <svg class="absolute top-1/2 right-2.5 -translate-y-1/2 translate-x-1/2 size-2 fill-destructive" viewBox="0 0 8 8" aria-hidden="true">
                                                         <circle cx="4" cy="4" r="3" />
                                                     </svg>
                                                 </template>