feat: support experimental schema.i18n()

packages/core/src/index.ts

@@ -84,7 +84,7 @@ namespace Schema {
     role?: string
     extra?: any
     link?: string
-    description?: string
+    description?: string | Dict<string>
     comment?: string
     pattern?: { source: string; flags?: string }
     max?: number
@@ -145,6 +145,7 @@ interface Schema<S = any, T = S> extends Schema.Base<T> {
   set(key: string, value: Schema): Schema<S, T>
   push(value: Schema): Schema<S, T>
   simplify(value?: any): any
+  i18n(messages: Dict): Schema<S, T>
 }
 
 Schema.prototype = Object.create(Function.prototype)
@@ -176,6 +177,23 @@ Schema.prototype.push = function push(value) {
   return this
 }
 
+Schema.prototype.i18n = function i18n(messages) {
+  this.meta.description = valueMap(messages, (data) => {
+    if (!data || typeof data === 'string') return data
+    return data.$description
+  })
+  if (this.type === 'object') {
+    for (const key in this.dict!) {
+      this.dict[key].i18n(valueMap(messages, (data) => data?.[key]))
+    }
+  } else if (['union', 'intersect'].includes(this.type)) {
+    for (const item of this.list!) {
+      item.i18n(messages)
+    }
+  }
+  return this
+}
+
 for (const key of ['required', 'hidden']) {
   Object.assign(Schema.prototype, {
     [key](this: Schema, value = true) {

packages/form/src/extensions/object.vue

@@ -3,15 +3,15 @@
     <template #title><slot name="title"></slot></template>
     <template #desc>
       <slot name="desc">
-        <k-markdown :source="schema?.meta.description"></k-markdown>
+        <k-markdown :source="description"></k-markdown>
       </slot>
     </template>
     <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
   </schema-base>
-  <h2 class="k-schema-header" v-else-if="schema.meta.description">
-    {{ schema.meta.description }}
+  <h2 class="k-schema-header" v-else-if="description">
+    {{ description }}
   </h2>
 
   <k-schema
@@ -39,11 +39,11 @@ export default {
 
 <script lang="ts" setup>
 
-import { PropType } from 'vue'
-import { Schema, useConfig } from '../utils'
+import { PropType, computed } from 'vue'
+import { Schema, useConfig, useI18nText } from '../utils'
 import SchemaBase from '../base.vue'
 
-defineProps({
+const props = defineProps({
   schema: {} as PropType<Schema>,
   modelValue: {} as PropType<any>,
   disabled: {} as PropType<boolean>,
@@ -54,6 +54,10 @@ defineProps({
 
 defineEmits(['update:modelValue'])
 
+const tt = useI18nText()
+
 const config = useConfig()
 
+const description = computed(() => tt(props.schema.meta.description))
+
 </script>

packages/form/src/extensions/radio.vue

@@ -11,7 +11,7 @@
           :label="item.value"
           :disabled="disabled"
           v-model="config"
-        >{{ item.meta.description || item.value }}</el-radio>
+        >{{ tt(item.meta.description) || item.value }}</el-radio>
       </li>
     </ul>
   </schema-base>
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 
 import { PropType } from 'vue'
-import { getChoices, Schema, useConfig } from '../utils'
+import { getChoices, Schema, useConfig, useI18nText } from '../utils'
 import SchemaBase from '../base.vue'
 
 defineProps({
@@ -33,6 +33,8 @@ defineProps({
 
 defineEmits(['update:modelValue'])
 
+const tt = useI18nText()
+
 const config = useConfig()
 
 </script>

packages/form/src/extensions/union.vue

@@ -12,7 +12,7 @@
   >
     <template #title><slot name="title"></slot></template>
     <template #desc>
-      <k-markdown :source="schema.meta.description"></k-markdown>
+      <k-markdown :source="tt(schema.meta.description)"></k-markdown>
     </template>
     <template #prefix>
       <el-select
@@ -25,7 +25,7 @@
           v-for="(item, index) in choices"
           :key="index"
           :value="index"
-          :label="item.meta.description || item.value"
+          :label="tt(item.meta.description) || item.value"
         ></el-option>
       </el-select>
     </template>
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 
 import { computed, PropType, ref, watch, WatchStopHandle } from 'vue'
-import { check, deepEqual, getChoices, getFallback, isNullable, Schema } from '../utils'
+import { check, deepEqual, getChoices, getFallback, isNullable, Schema, useI18nText } from '../utils'
 
 const props = defineProps({
   schema: {} as PropType<Schema>,
@@ -49,6 +49,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+const tt = useI18nText()
+
 const config = ref()
 const choices = ref<Schema[]>()
 const cache = ref<any[]>()
@@ -85,7 +87,7 @@ watch(() => [props.modelValue, props.schema] as const, ([value, schema]) => {
 const selectModel = computed({
   get() {
     if (active.value === props.schema) return
-    return active.value?.meta.description || active.value?.value
+    return tt(active.value?.meta.description) || active.value?.value
   },
   set(index) {
     if (active.value === choices.value[index]) return

packages/form/src/schema.vue

@@ -22,7 +22,7 @@
     </template>
     <template #desc>
       <slot name="desc">
-        <k-markdown :source="schema?.meta.description"></k-markdown>
+        <k-markdown :source="tt(schema?.meta.description)"></k-markdown>
       </slot>
     </template>
     <template #prefix><slot name="prefix"></slot></template>
@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 
 import { computed, PropType } from 'vue'
-import { clone, deepEqual, isNullable, Schema } from './utils'
+import { clone, deepEqual, isNullable, Schema, useI18nText } from './utils'
 import form from '.'
 import SchemaPrimitive from './primitive.vue'
 import SchemaBase from './base.vue'
@@ -58,6 +58,8 @@ const props = defineProps({
 
 defineEmits(['update:modelValue'])
 
+const tt = useI18nText()
+
 const isPrimitive = computed(() => {
   return ['string', 'number', 'boolean'].includes(props.schema?.type)
     && (isNullable(props.modelValue) || typeof props.modelValue === props.schema.type)

packages/form/src/utils.ts

@@ -1,10 +1,24 @@
 import Schema from 'schemastery'
-import { clone, deepEqual, valueMap } from 'cosmokit'
+import { clone, deepEqual, Dict, valueMap } from 'cosmokit'
 import { getCurrentInstance, ref, watch, WatchStopHandle } from 'vue'
+import { fallbackWithLocaleChain } from '@intlify/core-base'
+import { useI18n } from 'vue-i18n'
 
 export * from 'cosmokit'
 export { Schema }
 
+export function useI18nText() {
+  const composer = useI18n()
+  const context: any = {}
+  return (message: string | Dict<string>) => {
+    if (!message || typeof message === 'string') return message
+    const locales = fallbackWithLocaleChain(context, composer.fallbackLocale.value, composer.locale.value)
+    for (const locale of locales) {
+      if (locale in message) return message[locale]
+    }
+  }
+}
+
 const dynamic = ['function', 'transform', 'is']
 
 export function getChoices(schema: Schema) {