feat(i18n):-url-parser

src/composable/validation.ts

@@ -6,7 +6,7 @@ type ValidatorReturnType = unknown;
 
 export interface UseValidationRule<T> {
   validator: (value: T) => ValidatorReturnType
-  message: string
+  message: any
 }
 
 export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
@@ -56,7 +56,6 @@ export function useValidation<T>({
   watch(
     [source, ...watchRefs],
     () => {
-      state.message = '';
       state.status = undefined;
 
       for (const rule of get(rules)) {

src/tools/url-parser/locales/en.yml

@@ -0,0 +1,15 @@
+tools:
+  url-parser:
+    title: 'Url parser'
+    description: 'Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...)'
+    your-url: 'Your url to parse:'
+    protocol: 'Protocol'
+    username: 'Username'
+    password: 'Password'
+    hostname: 'Hostname'
+    port: 'Port'
+    path: 'Path'
+    params: 'Params'
+    placeholder:
+      your-url: 'Your url to parse...'
+    invalid-url: 'Invalid url'

src/tools/url-parser/locales/zh.yml

@@ -0,0 +1,15 @@
+tools:
+  url-parser:
+    title: 'URL解析'
+    description: '解析URL字符串以获取所有不同的部分（协议、来源、参数、端口、用户名、密码等）。'
+    your-url: '准备解析的URL:'
+    protocol: '协议'
+    username: '用户名'
+    password: '密码'
+    hostname: '主机名'
+    port: '端口'
+    path: '路径'
+    params: '参数'
+    placeholder:
+      your-url: '准备解析的URL...'
+    invalid-url: 'URL无效'

src/tools/url-parser/url-parser.vue

@@ -3,33 +3,34 @@ import InputCopyable from '../../components/InputCopyable.vue';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
 const urlToParse = ref('https://me:[email protected]:3000/url-parser?key1=value&key2=value2#the-hash');
 
 const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
 const urlValidationRules = [
   {
     validator: (value: string) => isNotThrowing(() => new URL(value)),
-    message: 'Invalid url',
+    message: computed(() => t('tools.url-parser.invalid-url')),
   },
 ];
 
-const properties: { title: string; key: keyof URL }[] = [
-  { title: 'Protocol', key: 'protocol' },
-  { title: 'Username', key: 'username' },
-  { title: 'Password', key: 'password' },
-  { title: 'Hostname', key: 'hostname' },
-  { title: 'Port', key: 'port' },
-  { title: 'Path', key: 'pathname' },
-  { title: 'Params', key: 'search' },
+const properties: { title: ComputedRef<string>; key: keyof URL }[] = [
+  { title: computed(() => t('tools.url-parser.protocol')), key: 'protocol' },
+  { title: computed(() => t('tools.url-parser.username')), key: 'username' },
+  { title: computed(() => t('tools.url-parser.password')), key: 'password' },
+  { title: computed(() => t('tools.url-parser.hostname')), key: 'hostname' },
+  { title: computed(() => t('tools.url-parser.port')), key: 'port' },
+  { title: computed(() => t('tools.url-parser.path')), key: 'pathname' },
+  { title: computed(() => t('tools.url-parser.params')), key: 'search' },
 ];
 </script>
 
 <template>
   <c-card>
     <c-input-text
       v-model:value="urlToParse"
-      label="Your url to parse:"
-      placeholder="Your url to parse..."
+      :label="t('tools.url-parser.your-url')"
+      :placeholder="t('tools.url-parser.placeholder.your-url')"
       raw-text
       :validation-rules="urlValidationRules"
     />