feat(validation): add Japanese error messages (#437)

lib/validation/Rule.ts

@@ -5,7 +5,7 @@ import { type Lang, useLang } from '../composables/Lang'
 export interface RuleOptions {
   optional?: boolean
   message(params: MessageProps): string
-  validation(value: unknown): boolean
+  validation(value: unknown): boolean | Promise<boolean>
 }
 
 export interface MessageProps extends VMessageProps {

lib/validation/rules/checked.ts

@@ -1,9 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { checked as baseChecked } from '../validators/checked'
 
+export const message = {
+  en: 'You must check the field.',
+  ja: 'この項目は選択が必須です。'
+}
+
 export function checked(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'You must check the field.',
-    (value: boolean) => !helpers.req(value) || baseChecked(value)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value: boolean) => baseChecked(value)
+  })
 }

lib/validation/rules/decimal.ts

@@ -1,9 +1,14 @@
-import { and, decimal as baseDecimal, helpers, not } from '@vuelidate/validators'
-import { hyphen } from '../validators'
+import { createRule } from '../Rule'
+import { decimal as baseDecimal, hyphen } from '../validators'
+
+export const message = {
+  en: 'The value must be valid decimal numbers.',
+  ja: 'この値は小数または10進数である必要があります。'
+}
 
 export function decimal(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid decimal numbers.',
-    and(not(hyphen), baseDecimal)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: string) => !hyphen(value) && baseDecimal(value)
+  })
 }

lib/validation/rules/decimalOrHyphen.ts

@@ -1,8 +1,14 @@
-import { decimal as baseDecimal, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { decimal as baseDecimal, hyphen } from '../validators'
+
+export const message = {
+  en: 'The value must be valid decimal numbers or just a hyphen.',
+  ja: 'この値は小数、10進数、またはハイフンである必要があります。'
+}
 
 export function decimalOrHyphen(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid decimal numbers or just a hyphen.',
-    baseDecimal
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: string) => hyphen(value) || baseDecimal(value)
+  })
 }

lib/validation/rules/email.ts

@@ -1,8 +1,14 @@
-import { email as baseEmail, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { email as baseEmail } from '../validators'
+
+export const message = {
+  en: 'The Email is invalid.',
+  ja: 'Emailの形式が正しくありません。'
+}
 
 export function email(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The Email is invalid.',
-    baseEmail
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: string) => baseEmail(value)
+  })
 }

lib/validation/rules/fileExtension.ts

@@ -1,11 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { fileExtension as baseFileExtension } from '../validators/fileExtension'
 
+export const message = {
+  en: 'The file extension is invalid.',
+  ja: 'ファイル拡張子が正しくありません。'
+}
+
 export function fileExtension(extensions: string[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The file extension is invalid.',
-    (value: File) => {
-      return !helpers.req(value) || baseFileExtension(value, extensions)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value: File) => baseFileExtension(value, extensions)
+  })
 }

lib/validation/rules/hms.ts

@@ -1,14 +1,18 @@
-import { helpers } from '@vuelidate/validators'
 import { type Hms } from '../../support/Day'
+import { createRule } from '../Rule'
 import { hms as baseHms } from '../validators/hms'
 
 type HmsType = 'h' | 'm' | 's'
 
+export const message = {
+  en: 'The time is invalid.',
+  ja: '時間表記が正しくありません。'
+}
+
 export function hms(required?: HmsType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The time is invalid.',
-    (value: Hms) => {
-      return !helpers.req(value) || baseHms(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value: Hms) => baseHms(value, required)
+  })
 }

lib/validation/rules/maxFileSize.ts

@@ -1,16 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { maxFileSize as baseMaxFileSize } from '../validators/maxFileSize'
 
+export const message = {
+  en: (size: string) => `The file must be smaller than or equal to ${size}.`,
+  ja: (size: string) => `ファイルは${size}よりも小さい必要があります。`
+}
+
 export function maxFileSize(size: string, msg?: string) {
-  return helpers.withParams(
-    { size },
-    helpers.withMessage(
-      ({ $params }) => {
-        return msg ?? `The file must be smaller than ${$params.size}.`
-      },
-      (value: File) => {
-        return !helpers.req(value) || baseMaxFileSize(value, size)
-      }
-    )
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](size),
+    optional: true,
+    validation: (value: File) => baseMaxFileSize(value, size)
+  })
 }

lib/validation/rules/maxLength.ts

@@ -1,10 +1,15 @@
-import { maxLength as baseMaxLength, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { maxLength as baseMaxLength } from '../validators'
+
+export const message = {
+  en: (length: number) => `The value must be less than or equal to ${length} characters.`,
+  ja: (length: number) => `この値は、最大${length}文字までです。`
+}
 
 export function maxLength(length: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be less or equal to ${($params as any).max} characters.`
-    },
-    baseMaxLength(length)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](length),
+    optional: true,
+    validation: (value: string) => baseMaxLength(value, length)
+  })
 }

lib/validation/rules/maxTotalFileSize.ts

@@ -1,16 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { maxTotalFileSize as baseMaxTotalFileSize } from '../validators/maxTotalFileSize'
 
+export const message = {
+  en: (size: string) => `The total file size must be smaller than or equal to ${size}.`,
+  ja: (size: string) => `合計ファイルサイズは最大${size}までです。`
+}
+
 export function maxTotalFileSize(size: string, msg?: string) {
-  return helpers.withParams(
-    { size },
-    helpers.withMessage(
-      ({ $params }) => {
-        return msg ?? `The total file size must be smaller than ${$params.size}.`
-      },
-      (files: File[]) => {
-        return !helpers.req(files) || baseMaxTotalFileSize(files, size)
-      }
-    )
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](size),
+    optional: true,
+    validation: (value: File[]) => baseMaxTotalFileSize(value, size)
+  })
 }

lib/validation/rules/maxValue.ts

@@ -1,10 +1,14 @@
-import { maxValue as baseMaxValue, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { maxValue as baseMaxValue } from '../validators'
 
-export function maxValue(value: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be less or equal to ${($params as any).max}.`
-    },
-    baseMaxValue(value)
-  )
+export const message = {
+  en: (max: number) => `The value must be less than or equal to ${max}.`,
+  ja: (max: number) => `この値は最大${max}です。`
+}
+
+export function maxValue(max: number, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](max),
+    validation: (value: unknown) => baseMaxValue(value, max)
+  })
 }

lib/validation/rules/minLength.ts

@@ -1,10 +1,15 @@
-import { minLength as baseMinLength, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { minLength as baseMinLength } from '../validators'
+
+export const message = {
+  en: (min: number) => `The value must be greater than or equal to ${min} characters.`,
+  ja: (min: number) => `この値は最小${min}文字です。`
+}
 
 export function minLength(length: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be greater or equal to ${($params as any).min} characters.`
-    },
-    baseMinLength(length)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](length),
+    optional: true,
+    validation: (value: string) => baseMinLength(value, length)
+  })
 }

lib/validation/rules/minValue.ts

@@ -1,10 +1,14 @@
-import { minValue as baseMinValue, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { minValue as baseMinValue } from '../validators'
 
-export function minValue(value: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be greater or equal to ${($params as any).min}.`
-    },
-    baseMinValue(value)
-  )
+export const message = {
+  en: (min: number) => `The value must be greater than or equal to ${min}.`,
+  ja: (min: number) => `この値は最大${min}です。`
+}
+
+export function minValue(min: number, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](min),
+    validation: (value: unknown) => baseMinValue(value, min)
+  })
 }

lib/validation/rules/month.ts

@@ -1,11 +1,15 @@
-import { helpers } from '@vuelidate/validators'
-import { month as baseMonth } from '../validators/month'
+import { createRule } from '../Rule'
+import { month as baseMonth } from '../validators'
+
+export const message = {
+  en: 'The month is invalid.',
+  ja: '月が正しくありません。'
+}
 
 export function month(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The month is invalid.',
-    (value: number) => {
-      return !helpers.req(value) || baseMonth(value)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value: number) => baseMonth(value)
+  })
 }

lib/validation/rules/negativeInteger.ts

@@ -1,9 +1,14 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { negativeInteger as baseNegativeInteger } from '../validators'
 
+export const message = {
+  en: 'The value must be valid negative integer.',
+  ja: 'この値は負の整数である必要があります。'
+}
+
 export function negativeInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid negative integer.',
-    baseNegativeInteger
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: number) => baseNegativeInteger(value)
+  })
 }

lib/validation/rules/positiveInteger.ts

@@ -1,9 +1,14 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { positiveInteger as basePositiveInteger } from '../validators'
 
+export const message = {
+  en: 'The value must be valid positive integer.',
+  ja: 'この値は正の整数である必要があります。'
+}
+
 export function positiveInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid positive integer.',
-    basePositiveInteger
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: number) => basePositiveInteger(value)
+  })
 }

lib/validation/rules/requiredHms.ts

@@ -1,14 +1,17 @@
-import { helpers } from '@vuelidate/validators'
 import { type Hms } from '../../support/Day'
+import { createRule } from '../Rule'
 import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 type HmsType = 'h' | 'm' | 's'
 
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
+
 export function requiredHms(required?: HmsType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    (value: Hms) => {
-      return !helpers.req(value) || baseRequiredHms(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value: Hms) => baseRequiredHms(value, required)
+  })
 }