feat(i18n): yaml to toml & json to yaml

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/json-to-yaml-converter/json-to-yaml.vue

@@ -5,21 +5,22 @@ import type { UseValidationRule } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
 const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
 
 const rules: UseValidationRule<string>[] = [
   {
     validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
-    message: 'Provided JSON is not valid.',
+    message: computed(() => t('tools.json-to-yaml-converter.invalid')),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your JSON"
+    :input-label="t('tools.json-to-yaml-converter.your-json')"
-    input-placeholder="Paste your JSON here..."
+    :input-placeholder="t('tools.json-to-yaml-converter.placeholder.your-json')"
-    output-label="YAML from your JSON"
+    :output-label="t('tools.json-to-yaml-converter.yaml-from-json')"
     output-language="yaml"
     :input-validation-rules="rules"
     :transformer="transformer"

src/tools/json-to-yaml-converter/locales/en.yml

@@ -0,0 +1,9 @@
+tools:
+  json-to-yaml-converter:
+    title: 'JSON to YAML converter'
+    description: 'Simply convert JSON to YAML with this live online converter.'
+    invalid: 'Provided JSON is not valid.'
+    your-json: 'Your JSON'
+    yaml-from-json: 'YAML from your JSON'
+    placeholder:
+      your-json: 'Paste your JSON here...'

src/tools/json-to-yaml-converter/locales/zh.yml

@@ -0,0 +1,9 @@
+tools:
+  json-to-yaml-converter:
+    title: 'JSON to YAML'
+    description: '使用这个在线转换工具，简单地将JSON转换为YAML。'
+    invalid: '提供的JSON有问题'
+    your-json: '原始JSON'
+    yaml-from-json: '转换后的YAML'
+    placeholder:
+      your-json: '在这粘贴你的JSON...'

src/tools/yaml-to-toml/locales/en.yml

@@ -0,0 +1,9 @@
+tools:
+  yaml-to-toml:
+    title: 'YAML to TOML converter'
+    description: 'Parse and convert YAML to TOML.'
+    invalid: 'Provided JSON is not valid.'
+    your-yaml: 'Your YAML'
+    toml-from-yaml: 'TOML from your YAML'
+    placeholder:
+      your-yaml: 'Paste your YAML here...'

src/tools/yaml-to-toml/locales/zh.yml

@@ -0,0 +1,9 @@
+tools:
+  yaml-to-toml:
+    title: 'YAML to TOML'
+    description: '解析并转换 YAML 到 TOML.'
+    invalid: '提供的YAML有问题'
+    your-yaml: '原始YAML'
+    toml-from-yaml: '转换后的TOML'
+    placeholder:
+      your-yaml: '在这粘贴你的YAML...'

src/tools/yaml-to-toml/yaml-to-toml.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { stringify as stringifyToml } from 'iarna-toml-esm';
 import { parse as parseYaml } from 'yaml';
-import { withDefaultOnError } from '../../utils/defaults';
+import { withDefaultOnError } from '@/utils/defaults';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
 const convertYamlToToml = (value: string) => [stringifyToml(parseYaml(value))].flat().join('\n').trim();
 
 const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => convertYamlToToml(value), '');
@@ -11,16 +12,16 @@ const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnE
 const rules: UseValidationRule<string>[] = [
   {
     validator: (v: string) => v === '' || parseYaml(v),
-    message: 'Provided JSON is not valid.',
+    message: computed(() => t('tools.yaml-to-toml.invalid')),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your YAML"
+    :input-label="t('tools.yaml-to-toml.your-yaml')"
-    input-placeholder="Paste your YAML here..."
+    :input-placeholder="t('tools.yaml-to-toml.placeholder.your-yaml')"
-    output-label="TOML from your YAML"
+    :output-label="t('tools.yaml-to-toml.toml-from-yaml')"
     output-language="toml"
     :input-validation-rules="rules"
     :transformer="transformer"