feat: ZodForm

package.json

@@ -15,10 +15,13 @@
     "@formkit/icons": "latest",
     "@formkit/themes": "latest",
     "@formkit/vue": "latest",
+    "@formkit/zod": "^1.6.9",
     "autoprefixer": "latest",
+    "i18next": "^23.16.6",
     "postcss": "latest",
     "tailwindcss": "latest",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "zod-i18n-map": "^2.27.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.0",

pnpm-lock.yaml

@@ -23,9 +23,15 @@ importers:
       '@formkit/vue':
         specifier: latest
         version: 1.6.9(tailwindcss@3.4.15)(vue@3.5.13(typescript@5.6.3))
+      '@formkit/zod':
+        specifier: ^1.6.9
+        version: 1.6.9(zod@3.23.8)
       autoprefixer:
         specifier: latest
         version: 10.4.20(postcss@8.4.49)
+      i18next:
+        specifier: ^23.16.6
+        version: 23.16.6
       postcss:
         specifier: latest
         version: 8.4.49
@@ -35,6 +41,9 @@ importers:
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.6.3)
+      zod-i18n-map:
+        specifier: ^2.27.0
+        version: 2.27.0(i18next@23.16.6)(zod@3.23.8)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.2.0
@@ -68,6 +77,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.26.0':
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.26.0':
     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
@@ -262,6 +275,11 @@ packages:
     peerDependencies:
       vue: ^3.4.0
 
+  '@formkit/zod@1.6.9':
+    resolution: {integrity: sha512-oQp2n2UoJTZTVsbbiDLRzpdOcGPrFTpmoaqp3tzbL4m7XJ9CE+Z9Q1sFA3MXTb1xrdCh3xWY2KAyXB0x4j5svw==}
+    peerDependencies:
+      zod: ^3.0.0
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -621,6 +639,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  i18next@23.16.6:
+    resolution: {integrity: sha512-wGdE5rUfkZtrL5k6MCptxbpjmgwku4rBRVU/YOJ7Xfd841fgaZjlxHpVJ5NIz8sfSvAJhEhJrvJ8qE7AWXE4Xg==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -801,6 +822,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -962,6 +986,15 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  zod-i18n-map@2.27.0:
+    resolution: {integrity: sha512-ORu9XpiVh3WDiEUs5Cr9siGgnpeODoBsTIgSD8sQCH9B//f9KowlzqHUEdPYb3vFonaSH8yPvPCOFM4niwp3Sg==}
+    peerDependencies:
+      i18next: '>=21.3.0'
+      zod: '>=3.17.0'
+
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -974,6 +1007,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.0
 
+  '@babel/runtime@7.26.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/types@7.26.0':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
@@ -1123,6 +1160,11 @@ snapshots:
       - unocss
       - windicss
 
+  '@formkit/zod@1.6.9(zod@3.23.8)':
+    dependencies:
+      '@formkit/core': 1.6.9
+      zod: 3.23.8
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -1490,6 +1532,10 @@ snapshots:
 
   he@1.2.0: {}
 
+  i18next@23.16.6:
+    dependencies:
+      '@babel/runtime': 7.26.0
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -1631,6 +1677,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  regenerator-runtime@0.14.1: {}
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -1806,3 +1854,10 @@ snapshots:
       strip-ansi: 7.1.0
 
   yaml@2.6.0: {}
+
+  zod-i18n-map@2.27.0(i18next@23.16.6)(zod@3.23.8):
+    dependencies:
+      i18next: 23.16.6
+      zod: 3.23.8
+
+  zod@3.23.8: {}

src/App.vue

@@ -1,233 +1,15 @@
 <script setup lang="ts">
-import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
+import TutorialForm from './tutorial-form/index.vue'
-import { onMounted } from 'vue';
+import ZodForm from './zod-form/index.vue'
-import Guests from './guests.vue';
-
-async function submit(...args: any[]) {
-  console.debug('submit', `args :>> `, args);
-  await new Promise(r => setTimeout(r, 1000))
-  alert('Submitted! 🎉')
-}
-
-const castNumber = (node: FormKitNode) => {
-  node.hook.input((value, next) => next(Number(value)))
-}
-
-onMounted(() => {
-  console.group('onMounted')
-  const nameNode = getNode('nameNodeId') // 用 id 获取节点
-  Object.assign(window, { nameNode })
-  console.debug(`nameNode :>> `, nameNode);
-
-  const schemaGroupInput = nameNode?.root.at('schemaGroup.input') // 用路径获取节点
-  console.debug(`schemaGroupInput :>> `, schemaGroupInput);
-  nameNode?.on('commit', ({ payload }) => {
-    console.debug('[nameNode] [on commit]', `payload :>> `, payload);
-    schemaGroupInput?.input(`姓名：${payload}`)
-  })
-  console.groupEnd()
-})
-
-const SCHEMA: FormKitSchemaDefinition = [
-  {
-    $el: 'h1',
-    children: [
-      {
-        $el: 'span',
-        children: 'JSON Schema Form',
-      },
-    ],
-    attrs: {
-      class: 'font-bold text-2xl mb-4',
-      'data-foo': 'bar',
-    },
-  },
-  {
-    $formkit: 'group',
-    name: 'schemaGroup',
-    children: [
-      {
-        $formkit: 'text',
-        label: 'JSON Schema 渲染的输入框',
-        name: 'input',
-        validation: 'required',
-        validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
-        errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
-      }
-    ]
-  }
-];
-
-function onChangeName() {
-  const nameNode = getNode('nameNodeId')
-  nameNode?.input('测试')
-}
-
-import autoAnimate from "@formkit/auto-animate"
-onMounted(() => {
-  // setTimeout(() => {
-  autoAnimate(document.getElementById('attributes-group-wrapper')!);
-  // });
-})
-
 </script>
 
 <template>
-  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
+  <ZodForm />
-
+  <TutorialForm />
-    <FormKit
-      type="form"
-      #default="{ value }"
-      @submit="submit"
-      submit-label="提交 ✨"
-    >
-      <!-- v-auto-animate -->
-      <div
-        class="character-attributes"
-        id="attributes-group-wrapper"
-      >
-        <FormKit
-          type="group"
-          name="attributes"
-          :validation-rules="{
-            validateGroup: (node) => {
-              const name = (node.value as Record<string, any>).name
-              return name?.includes('测试') ? true : false
-            }
-          }"
-          validation-visibility="dirty"
-          validation="validateGroup"
-          :validation-messages="{
-            validateGroup: ({ name/* , args */ }) => {
-              return `分组 ${name} 下的姓名必须包含 '测试' 字符串。`
-            },
-          }"
-          #default="{ id, messages, fns, classes, value: attributes, }"
-        >
-
-          <FormKit
-            type="text"
-            name="name"
-            id="nameNodeId"
-            label="姓名"
-            :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
-            some-attr="some-attr-value"
-          >
-            <template #label="{ classes, attrs, label }">
-              <!-- <pre
-                class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
-              <label
-                for="nameNodeId"
-                v-bind="attrs"
-                :class="classes.label"
-              >{{ label }}<button
-                  class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
-                  type="button"
-                  @click="onChangeName"
-                >点击赋值</button>
-              </label>
-            </template>
-          </FormKit>
-
-          <FormKit
-            v-if="attributes?.name"
-            :preserve="false"
-            name="confirmName"
-            type="checkbox"
-            :value="false"
-            :label="`如果清空 name 输入框，这个确认框及其值将被移除。`"
-          />
-
-          <FormKit
-            type="checkbox"
-            name="flavors"
-            label="最喜欢的冰淇淋口味"
-            :options="{
-              'vanilla': '香草',
-              'chocolate': '巧克力',
-              'strawberry': '草莓',
-            }"
-            validation="required|min:2"
-          />
-
-          <FormKit
-            type="range"
-            name="strength"
-            id="strength"
-            label="力量"
-            value="5"
-            validation="min:2|max:9"
-            validation-visibility="live"
-            min="1"
-            max="10"
-            step="1"
-            help="这个角色应该有多少力量点？"
-            :plugins="[castNumber]"
-            class="mb-4"
-          />
-
-          <FormKit
-            type="textarea"
-            auto-height
-            label="我有自动高度插件"
-            help="这个文本框会随着输入内容增加而增高"
-          />
-
-          <!-- By default groups do not show validation messages, so we need to add it manually -->
-          <ul
-            class="error-box"
-            :class="classes.messages"
-            v-if="fns.length(messages)"
-          >
-            <li
-              v-for="message in messages"
-              :key="message.key"
-              :id="`${id}-${message.key}`"
-              :data-message-type="message.type"
-            >
-              {{ message.value }}
-            </li>
-          </ul>
-        </FormKit>
-      </div>
-
-      <div class="character-attributes">
-        <FormKitSchema :schema="SCHEMA" />
-      </div>
-
-      <Guests />
-
-      <FormKit
-        type="checkbox"
-        name="agree"
-        label="我同意FormKit是最好的表单开发框架。"
-        class="mb-4"
-      />
-
-      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
-
-    </FormKit>
-  </div>
 </template>
 
-<style scoped>
-ul.error-box {
-  padding: 0.75rem;
-  border: 1px solid #ef4444;
-  border-radius: 0.375rem;
-  background-color: #fee2e2;
-  color: #b91c1c;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-ul.error-box p {
-  font-weight: 500;
-}
-</style>
-
 <style>
-.character-attributes {
+.attributes-group {
   padding: 1.5rem;
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;

src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/tutorial-form/guests.vue

@@ -13,7 +13,7 @@ import { FormKitMessages } from '@formkit/vue'
     #default="{ items, node, value }"
   >
     <div
-      class="character-attributes"
+      class="attributes-group"
       v-auto-animate
     >
       <FormKitMessages />

src/tutorial-form/index.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
+import { onMounted } from 'vue';
+import Guests from './guests.vue';
+
+async function submit(...args: any[]) {
+  console.debug('submit', `args :>> `, args);
+  await new Promise(r => setTimeout(r, 1000))
+  alert('Submitted! 🎉')
+}
+
+const castNumber = (node: FormKitNode) => {
+  node.hook.input((value, next) => next(Number(value)))
+}
+
+onMounted(() => {
+  console.group('onMounted')
+  const nameNode = getNode('nameNodeId') // 用 id 获取节点
+  Object.assign(window, { nameNode })
+  console.debug(`nameNode :>> `, nameNode);
+
+  const schemaGroupInput = nameNode?.root.at('schemaGroup.input') // 用路径获取节点
+  console.debug(`schemaGroupInput :>> `, schemaGroupInput);
+  nameNode?.on('commit', ({ payload }) => {
+    console.debug('[nameNode] [on commit]', `payload :>> `, payload);
+    schemaGroupInput?.input(`姓名：${payload}`)
+  })
+  console.groupEnd()
+})
+
+const SCHEMA: FormKitSchemaDefinition = [
+  {
+    $el: 'h1',
+    children: [
+      {
+        $el: 'span',
+        children: 'JSON Schema Form',
+      },
+    ],
+    attrs: {
+      class: 'font-bold text-2xl mb-4',
+      'data-foo': 'bar',
+    },
+  },
+  {
+    $formkit: 'group',
+    name: 'schemaGroup',
+    children: [
+      {
+        $formkit: 'text',
+        label: 'JSON Schema 渲染的输入框',
+        name: 'input',
+        validation: 'required',
+        validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
+        errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
+      }
+    ]
+  }
+];
+
+function onChangeName() {
+  const nameNode = getNode('nameNodeId')
+  nameNode?.input('测试')
+}
+
+import autoAnimate from "@formkit/auto-animate"
+onMounted(() => {
+  // setTimeout(() => {
+  autoAnimate(document.getElementById('attributes-group-wrapper')!);
+  // });
+})
+
+</script>
+
+<template>
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
+    <h1
+      class="font-bold text-2xl mb-4"
+      data-foo="bar"
+    >Tutorial Form</h1>
+    <FormKit
+      type="form"
+      #default="{ value }"
+      @submit="submit"
+      submit-label="提交 ✨"
+    >
+      <!-- v-auto-animate -->
+      <div
+        class="attributes-group"
+        id="attributes-group-wrapper"
+      >
+        <FormKit
+          type="group"
+          name="attributes"
+          :validation-rules="{
+            validateGroup: (node) => {
+              const name = (node.value as Record<string, any>).name
+              return name?.includes('测试') ? true : false
+            }
+          }"
+          validation-visibility="dirty"
+          validation="validateGroup"
+          :validation-messages="{
+            validateGroup: ({ name/* , args */ }) => {
+              return `分组 ${name} 下的姓名必须包含 '测试' 字符串。`
+            },
+          }"
+          #default="{ id, messages, fns, classes, value: attributes, }"
+        >
+
+          <FormKit
+            type="text"
+            name="name"
+            id="nameNodeId"
+            label="姓名"
+            :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
+            some-attr="some-attr-value"
+          >
+            <template #label="{ classes, attrs, label }">
+              <!-- <pre
+                class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
+              <label
+                for="nameNodeId"
+                v-bind="attrs"
+                :class="classes.label"
+              >{{ label }}<button
+                  class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
+                  type="button"
+                  @click="onChangeName"
+                >点击赋值</button>
+              </label>
+            </template>
+          </FormKit>
+
+          <FormKit
+            v-if="attributes?.name"
+            :preserve="false"
+            name="confirmName"
+            type="checkbox"
+            :value="false"
+            :label="`如果清空 name 输入框，这个确认框及其值将被移除。`"
+          />
+
+          <FormKit
+            type="checkbox"
+            name="flavors"
+            label="最喜欢的冰淇淋口味"
+            :options="{
+              'vanilla': '香草',
+              'chocolate': '巧克力',
+              'strawberry': '草莓',
+            }"
+            validation="required|min:2"
+          />
+
+          <FormKit
+            type="range"
+            name="strength"
+            id="strength"
+            label="力量"
+            value="5"
+            validation="min:2|max:9"
+            validation-visibility="live"
+            min="1"
+            max="10"
+            step="1"
+            help="这个角色应该有多少力量点？"
+            :plugins="[castNumber]"
+            class="mb-4"
+          />
+
+          <FormKit
+            type="textarea"
+            auto-height
+            label="我有自动高度插件"
+            help="这个文本框会随着输入内容增加而增高"
+          />
+
+          <!-- By default groups do not show validation messages, so we need to add it manually -->
+          <ul
+            class="error-box"
+            :class="classes.messages"
+            v-if="fns.length(messages)"
+          >
+            <li
+              v-for="message in messages"
+              :key="message.key"
+              :id="`${id}-${message.key}`"
+              :data-message-type="message.type"
+            >
+              {{ message.value }}
+            </li>
+          </ul>
+        </FormKit>
+      </div>
+
+      <div class="attributes-group">
+        <FormKitSchema :schema="SCHEMA" />
+      </div>
+
+      <Guests />
+
+      <FormKit
+        type="checkbox"
+        name="agree"
+        label="我同意FormKit是最好的表单开发框架。"
+        class="mb-4"
+      />
+
+      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
+
+    </FormKit>
+  </div>
+</template>
+
+<style scoped>
+ul.error-box {
+  padding: 0.75rem;
+  border: 1px solid #ef4444;
+  border-radius: 0.375rem;
+  background-color: #fee2e2;
+  color: #b91c1c;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+ul.error-box p {
+  font-weight: 500;
+}
+</style>
+
+<style>
+.attributes-group {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9fafb;
+}
+</style>

src/zod-form/index.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { createZodPlugin } from '@formkit/zod'
+import { z } from 'zod'
+// https://github.com/aiji42/zod-i18n?tab=readme-ov-file#how-to-use
+import i18next from "i18next";
+import { zodI18nMap } from "zod-i18n-map";
+// Import your language translation files
+import translation from "zod-i18n-map/locales/zh-CN/zod.json";
+
+// lng and resources key depend on your locale.
+i18next.init({
+  lng: "es",
+  resources: {
+    es: { zod: translation },
+  },
+});
+z.setErrorMap(zodI18nMap);
+
+const zodSchema = z.object({
+  personalInfo: z.object({
+    firstName: z.string().min(3).max(25),
+    lastName: z.string().min(3).max(25),
+  }),
+  email: z.string().email(),
+  arrayMin: z.string().array().min(2),
+})
+
+const [zodPlugin, submitHandler] = createZodPlugin(
+  zodSchema,
+  async (formData) => {
+    // fake submit handler, but this is where you
+    // do something with your valid data.
+    await new Promise((r) => setTimeout(r, 1000))
+    alert('Form was submitted!')
+    console.log(formData)
+  }
+)
+</script>
+
+<template>
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
+    <h1>Validation from Zod schema</h1>
+    <FormKit
+      type="form"
+      :plugins="[zodPlugin]"
+      @submit="submitHandler"
+    >
+      <FormKit
+        type="group"
+        name="personalInfo"
+      >
+        <FormKit
+          validation-visibility="live"
+          type="text"
+          name="firstName"
+          label="First Name"
+        />
+        <FormKit
+          type="text"
+          name="lastName"
+          label="Last Name"
+        />
+      </FormKit>
+      <FormKit
+        type="text"
+        name="email"
+        label="Your email"
+      />
+      <FormKit
+        type="checkbox"
+        name="arrayMin"
+        label="Zod features"
+        :options="['Validation', 'Type-Safety', 'Reusability']"
+      />
+    </FormKit>
+  </div>
+</template>