feat(lang): add i18n feature

lib/components/STrans.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type Lang, useLang } from '../composables/Lang'
+
+defineProps<{
+  lang: Lang
+}>()
+
+const currentLang = useLang()
+</script>
+
+<template>
+  <slot v-if="currentLang === lang" />
+</template>

lib/composables/Lang.ts

@@ -0,0 +1,34 @@
+import { inject, provide } from 'vue'
+
+export type Lang = 'en' | 'ja'
+
+export interface Trans<T> {
+  t: T
+}
+
+export interface TransMessages<T> {
+  en: T
+  ja: T
+}
+
+export const SefirotLangKey = 'sefirot-lang-key'
+
+export function provideLang(lang: Lang) {
+  provide(SefirotLangKey, lang)
+}
+
+export function useLang(): Lang {
+  // Doing `||` check here because for some reason it doesn't return
+  // the default value in tests but becomes `undefined`.
+  return inject(SefirotLangKey, 'en') || 'en'
+}
+
+export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
+  const lang = useLang()
+
+  const t = messages[lang]
+
+  return {
+    t
+  }
+}

lib/validation/Rule.ts

@@ -0,0 +1,30 @@
+import { type ValidationRuleWithParams } from '@vuelidate/core'
+import { type MessageProps as VMessageProps, helpers } from '@vuelidate/validators'
+import { type Lang, useLang } from '../composables/Lang'
+
+export interface RuleOptions {
+  optional?: boolean
+  message(params: MessageProps): string
+  validation(value: unknown): boolean
+}
+
+export interface MessageProps extends VMessageProps {
+  lang: Lang
+}
+
+export function createRule(
+  options: RuleOptions
+): ValidationRuleWithParams {
+  const lang = useLang()
+
+  return helpers.withMessage(
+    (params) => {
+      return options.message({ ...params, lang })
+    },
+    (value) => {
+      return options.optional && !helpers.req(value)
+        ? true
+        : options.validation(value)
+    }
+  )
+}

lib/validation/rules/index.ts

@@ -1,25 +1,25 @@
 export { and, not, or } from '@vuelidate/validators'
-export * from './checked'
-export * from './decimal'
-export * from './decimalOrHyphen'
-export * from './email'
-export * from './fileExtension'
-export * from './hms'
-export * from './maxFileSize'
-export * from './maxTotalFileSize'
-export * from './maxLength'
-export * from './maxValue'
-export * from './minLength'
-export * from './minValue'
-export * from './month'
-export * from './negativeInteger'
-export * from './positiveInteger'
-export * from './required'
-export * from './requiredHms'
-export * from './requiredIf'
-export * from './requiredYmd'
-export * from './rule'
-export * from './url'
-export * from './ymd'
-export * from './zeroOrNegativeInteger'
-export * from './zeroOrPositiveInteger'
+export { checked } from './checked'
+export { decimal } from './decimal'
+export { decimalOrHyphen } from './decimalOrHyphen'
+export { email } from './email'
+export { fileExtension } from './fileExtension'
+export { hms } from './hms'
+export { maxFileSize } from './maxFileSize'
+export { maxLength } from './maxLength'
+export { maxTotalFileSize } from './maxTotalFileSize'
+export { maxValue } from './maxValue'
+export { minLength } from './minLength'
+export { minValue } from './minValue'
+export { month } from './month'
+export { negativeInteger } from './negativeInteger'
+export { positiveInteger } from './positiveInteger'
+export { required } from './required'
+export { requiredHms } from './requiredHms'
+export { requiredIf } from './requiredIf'
+export { requiredYmd } from './requiredYmd'
+export { rule } from './rule'
+export { url } from './url'
+export { ymd } from './ymd'
+export { zeroOrNegativeInteger } from './zeroOrNegativeInteger'
+export { zeroOrPositiveInteger } from './zeroOrPositiveInteger'

lib/validation/rules/required.ts

@@ -1,8 +1,14 @@
-import { required as baseRequired, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { required as baseRequired } from '../validators'
+
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
 
 export function required(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    baseRequired
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => baseRequired(value)
+  })
 }

lib/validation/validators/index.ts

@@ -7,6 +7,7 @@ export * from './maxTotalFileSize'
 export * from './month'
 export * from './negativeInteger'
 export * from './positiveInteger'
+export * from './required'
 export * from './requiredHms'
 export * from './requiredYmd'
 export * from './ymd'

lib/validation/validators/required.ts

@@ -0,0 +1,25 @@
+import { isArray, isNullish, isString } from '../../support/Utils'
+
+export function required(value: unknown): boolean {
+  if (isArray(value)) {
+    return !!value.length
+  }
+
+  if (isNullish(value)) {
+    return false
+  }
+
+  if (value === false) {
+    return true
+  }
+
+  if (value instanceof Date) {
+    return !Number.isNaN(value.getTime())
+  }
+
+  if (isString(value)) {
+    value = value.trim()
+  }
+
+  return !!String(value).length
+}

tests/composables/Lang.spec.ts

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import { type Lang, SefirotLangKey, useLang, useTrans } from 'sefirot/composables/Lang'
+
+describe('composables/Lang', () => {
+  describe('useLang', () => {
+    test('it returns the default language', () => {
+      const lang = useLang()
+      expect(lang).toBe('en')
+    })
+
+    test('it returns the language provided by provideLang', () => {
+      const c = createComponent(() => ({
+        lang: useLang()
+      }))
+
+      const vm = createWrapperWithLang('ja', c)
+
+      expect(vm.lang).toBe('ja')
+    })
+  })
+
+  describe('useTrans', () => {
+    test('it returns the current translations', () => {
+      const c = createComponent(() => ({
+        trans: useTrans({
+          en: { msg: 'English' },
+          ja: { msg: 'Japanese' }
+        })
+      }))
+
+      const vm = createWrapperWithLang('ja', c)
+
+      expect(vm.trans.t.msg).toBe('Japanese')
+    })
+  })
+})
+
+function createComponent(setup: () => any): any {
+  return {
+    setup,
+    template: '<div />'
+  }
+}
+
+function createWrapperWithLang(lang: Lang, component: any): any {
+  const wrapper = mount(component, {
+    global: {
+      provide: {
+        [SefirotLangKey]: 'ja'
+      }
+    }
+  })
+
+  return wrapper.vm
+}