feat(validation): format numbers to make them more readable

lib/validation/rules/maxLength.ts

@@ -2,13 +2,15 @@ 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}文字までです。`
+  en: (length: string) => `The value must be less than or equal to ${length} characters.`,
+  ja: (length: string) => `この値は最大${length}文字までです。`
 }
 
 export function maxLength(length: number, msg?: string) {
+  const formatted = Intl.NumberFormat().format(length)
+
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](length),
+    message: ({ lang }) => msg ?? message[lang](formatted),
     optional: true,
     validation: (value) => baseMaxLength(value, length)
   })

lib/validation/rules/maxValue.ts

@@ -2,13 +2,15 @@ import { createRule } from '../Rule'
 import { maxValue as baseMaxValue } from '../validators'
 
 export const message = {
-  en: (max: number) => `The value must be less than or equal to ${max}.`,
-  ja: (max: number) => `この値は最大${max}です。`
+  en: (max: string) => `The value must be less than or equal to ${max}.`,
+  ja: (max: string) => `この値は最大${max}です。`
 }
 
 export function maxValue(max: number, msg?: string) {
+  const formatted = Intl.NumberFormat().format(max)
+
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](max),
+    message: ({ lang }) => msg ?? message[lang](formatted),
     optional: true,
     validation: (value) => baseMaxValue(value, max)
   })

lib/validation/rules/minLength.ts

@@ -2,13 +2,15 @@ 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}文字です。`
+  en: (min: string) => `The value must be greater than or equal to ${min} characters.`,
+  ja: (min: string) => `この値は最小${min}文字です。`
 }
 
 export function minLength(length: number, msg?: string) {
+  const formatted = Intl.NumberFormat().format(length)
+
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](length),
+    message: ({ lang }) => msg ?? message[lang](formatted),
     optional: true,
     validation: (value) => baseMinLength(value, length)
   })

lib/validation/rules/minValue.ts

@@ -2,13 +2,15 @@ import { createRule } from '../Rule'
 import { minValue as baseMinValue } from '../validators'
 
 export const message = {
-  en: (min: number) => `The value must be greater than or equal to ${min}.`,
-  ja: (min: number) => `この値は最大${min}です。`
+  en: (min: string) => `The value must be greater than or equal to ${min}.`,
+  ja: (min: string) => `この値は最大${min}です。`
 }
 
 export function minValue(min: number, msg?: string) {
+  const formatted = Intl.NumberFormat().format(min)
+
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](min),
+    message: ({ lang }) => msg ?? message[lang](formatted),
     optional: true,
     validation: (value) => baseMinValue(value, min)
   })

stories/components/SInputTextarea.01_Playground.story.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import SInputTextarea from 'sefirot/components/SInputTextarea.vue'
-import { ref } from 'vue'
+import { useData } from 'sefirot/composables/Data'
+import { useValidation } from 'sefirot/composables/Validation'
+import { maxLength } from 'sefirot/validation/rules'
 
 const title = 'Components / SInputTextarea / 01. Playground'
 const docs = '/components/input-textarea'
 
-const text = ref('')
+const { data } = useData({
+  text: null as string | null
+})
+
+const { validation } = useValidation(data, {
+  text: {
+    maxLength: maxLength(1000)
+  }
+})
 
 function state() {
   return {
@@ -86,7 +96,8 @@ function state() {
           :rows="state.rows"
           :auto-resize="state.autoResize"
           :disabled="state.disabled"
-          v-model="text"
+          v-model="data.text"
+          :validation="validation.text"
         />
       </Board>
     </template>