feat: added language specific default (#3501)

Co-authored-by: Martijn Gaasbeek <[email protected]>

Author: martijn788

packages/i18n/src/index.ts

@@ -27,21 +27,26 @@ class Dictionary {
     return this.format(this.locale, ctx);
   }
 
+  public getLocaleDefault(locale: string, field: string): string | ValidationMessageGenerator | undefined {
+    return this.container[locale]?.fields?.[field]?._default || this.container[locale]?.messages?._default;
+  }
+
   public format(locale: string, ctx: FieldValidationMetaInfo) {
     let message!: ValidationMessageTemplate | undefined;
     const { field, rule, form } = ctx;
+    const fieldName = this.container[locale]?.names?.[field] ?? field;
+
     if (!rule) {
-      return `${field} is not valid`;
+      message = this.getLocaleDefault(locale, field) || `${field} is not valid`;
+      return isCallable(message) ? message(ctx) : interpolate(message, { ...form, field: fieldName });
     }
 
     // find if specific message for that field was specified.
     message = this.container[locale]?.fields?.[field]?.[rule.name] || this.container[locale]?.messages?.[rule.name];
     if (!message) {
-      message = `${field} is not valid`;
+      message = this.getLocaleDefault(locale, field) || 'field is not valid';
     }
 
-    const fieldName = this.container[locale]?.names?.[field] ?? field;
-
     return isCallable(message)
       ? message(ctx)
       : interpolate(message, { ...form, field: fieldName, params: rule.params });

packages/i18n/src/locale/de.json

@@ -1,6 +1,7 @@
 {
   "code": "de",
   "messages": {
+    "_default": "{field} ist ungültig",
     "alpha": "{field} darf nur alphabetische Zeichen enthalten",
     "alpha_dash": "{field} darf alphanumerische Zeichen sowie Striche und Unterstriche enthalten",
     "alpha_num": "{field} darf nur alphanumerische Zeichen enthalten",

packages/i18n/src/locale/en.json

@@ -1,6 +1,7 @@
 {
   "code": "en",
   "messages": {
+    "_default": "The {field} is not valid",
     "alpha": "The {field} field may only contain alphabetic characters",
     "alpha_num": "The {field} field may only contain alpha-numeric characters",
     "alpha_dash": "The {field} field may contain alpha-numeric characters as well as dashes and underscores",

packages/i18n/src/locale/fr.json

@@ -1,6 +1,7 @@
 {
   "code": "fr",
   "messages": {
+    "_default": "Le champ {field} est invalide",
     "alpha": "Le champ {field} ne peut contenir que des lettres",
     "alpha_num": "Le champ {field} ne peut contenir que des caractères alpha-numériques",
     "alpha_dash": "Le champ {field} ne peut contenir que des caractères alpha-numériques, tirets ou soulignés",

packages/i18n/src/locale/nl.json

@@ -1,6 +1,7 @@
 {
   "code": "nl",
   "messages": {
+    "_default": "{field} is ongeldig",
     "alpha": "{field} mag alleen letters bevatten",
     "alpha_dash": "{field} mag alleen letters, nummers, en streepjes bevatten",
     "alpha_num": "{field} mag alleen letters en nummers bevatten",

packages/i18n/tests/index.spec.ts

@@ -128,6 +128,36 @@ test('falls back to the default message if rule without message exists', async (
   expect(error.textContent).toContain('field is not valid');
 });
 
+test('falls back to a language specific default message if rule without message exists', async () => {
+  defineRule('i18n', () => false);
+  configure({
+    generateMessage: localize('nl', {
+      messages: {
+        _default: '{field} is ongeldig',
+      },
+    }),
+  });
+  setLocale('nl');
+
+  const wrapper = mountWithHoc({
+    template: `
+      <div>
+        <Field name="field" rules="required|i18n" v-slot="{ field, errors }">
+          <input v-bind="field" type="text">
+          <span id="error">{{ errors[0] }}</span>
+        </Field>
+      </div>
+    `,
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  const input = wrapper.$el.querySelector('input');
+  setValue(input, '12');
+  await flushPromises();
+
+  expect(error.textContent).toContain('field is ongeldig');
+});
+
 test('can switch between locales with setLocale', async () => {
   configure({
     generateMessage: localize({