docs(Field): update i18n usage

src/field/demo/Autosize.vue

@@ -11,11 +11,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     message: '留言',
     autosize: '高度自适应',
@@ -26,11 +26,14 @@ export default {
     autosize: 'Auto Resize',
     placeholder: 'Message',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>

src/field/demo/BasicUsage.vue

@@ -10,11 +10,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     label: '文本',
     placeholder: '请输入文本',
@@ -23,11 +23,13 @@ export default {
     label: 'Label',
     placeholder: 'Text',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+    return { t, value };
   },
 };
 </script>

src/field/demo/CustomType.vue

@@ -32,11 +32,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     text: '文本',
     digit: '整数',
@@ -61,9 +61,11 @@ export default {
     phonePlaceholder: 'Phone',
     numberPlaceholder: 'Number',
   },
-  },
+};
 
-  data() {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       text: '',
       phone: '',
@@ -72,7 +74,10 @@ export default {
       password: '',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>

src/field/demo/Disabled.vue

@@ -5,9 +5,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     text: '文本',
     disabled: '禁用输入框',
@@ -19,6 +20,13 @@ export default {
     inputReadonly: 'Input Readonly',
     inputDisabled: 'Input Disabled',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+
+    return { t };
   },
 };
 </script>

src/field/demo/ErrorInfo.vue

@@ -17,11 +17,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     phone: '手机号',
     errorInfo: '错误提示',
@@ -34,15 +34,20 @@ export default {
     phoneError: 'Invalid phone',
     phonePlaceholder: 'Phone',
   },
-  },
+};
 
-  data() {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       phone: '123',
       username: '',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>

src/field/demo/FormatValue.vue

@@ -16,11 +16,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     text: '文本',
     formatValue: '格式化输入内容',
@@ -33,17 +33,20 @@ export default {
     formatOnBlur: 'Format On Blur',
     formatOnChange: 'Format On Change',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       value1: '',
       value2: '',
     });
-    const formatter = (value) => value.replace(/\d/g, '');
+    const formatter = (value: string) => value.replace(/\d/g, '');
 
     return {
       ...toRefs(state),
+      t,
       formatter,
     };
   },

src/field/demo/InputAlign.vue

@@ -9,11 +9,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     text: '文本',
     inputAlign: '输入框内容对齐',
@@ -24,11 +24,14 @@ export default {
     inputAlign: 'Input Align',
     alignPlaceHolder: 'Input Align Right',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>

src/field/demo/InsertButton.vue

@@ -16,11 +16,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     sms: '短信验证码',
     sendSMS: '发送验证码',
@@ -33,11 +33,14 @@ export default {
     insertButton: 'Insert Button',
     smsPlaceholder: 'SMS',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const sms = ref('');
-    return { sms };
+
+    return { t, sms };
   },
 };
 </script>

src/field/demo/ShowIcon.vue

@@ -17,11 +17,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     text: '文本',
     showIcon: '显示图标',
@@ -32,15 +32,20 @@ export default {
     showIcon: 'Show Icon',
     showClearIcon: 'Show Clear Icon',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       icon1: '',
       icon2: '123',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>

src/field/demo/ShowWordLimit.vue

@@ -13,11 +13,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     message: '留言',
     placeholder: '请输入留言',
@@ -28,11 +28,14 @@ export default {
     placeholder: 'Message',
     showWordLimit: 'Show Word Limit',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>